At this point, I'm pretty happy with how the app is working, but not so happy with how it looks, which leads nicely into our next subject styling your react app. When it comes to adding styles and react, there are many different flavors to choose from. There's plain old CSS, CSS preprocessors, like sass, CSS modules, CSS in j, s, and many more I could touch upon. The point is there is no right or wrong solution as it really comes down to what works for you. My recommendation to you is experiment on your own and see which of these if any, you actually like to work with. In the meantime, I'm just going to go over some basics of using plain old CSS and react.
You may have already noticed that our app contains a styles dot CSS already. This was created by code sandbox back when we first started, if we open up that file, you'll see that we have a single class named dot app with some basic CSS rules. We're not using this class right now, but we can easily add it to an element by adding the class name prop and setting the value equal to the class name. It's really is no different than how you would do it with plain HTML and CSS. The big difference here is that you're using the class name, prop The class attribute. Now when we saved you can see that our app is using these new styles as our forms now centered on the page.
One other thing you may have noticed is the import styles dot CSS line at the top of our app component. How was our js file importing a CSS file you may ask. If you're unfamiliar with bundlers, like Webpack, this might look really strange. In our case, we're lucky as Webpack was already set up for us by code sandbox and Webpack could honestly be a whole course on its own. For now, just know that once a CSS file is imported, those styles will be added to your app and are ready for use. Also, you're not restricted to keeping all your CSS in a single file.
In fact, it's common for each component to have its own dedicated CSS file. With that being said, let's go ahead and create a CSS file for our search form component. I'm going to go ahead and name this file search form dot CSS. It's also common practice for a component and its CSS file to have the same name. Not only does this help with organization in the file system, it also makes it very clear that these styles belong to this component. Now we have our CSS file ready, I'm going to go ahead and pull in some pre baked styles I created earlier Next, let's import the search form CSS into our component File and Save.
We have a closer look at search form CSS, you can see that there is a search form class inside, I'm going to go ahead and add this class to the root element in the search form component. Also, I'm going to go ahead and wrap our buttons in a div, as it's just needed to make some of these styles work. And now when I save, you see things are really starting to look better now that we have some styling. It's important to be careful when splitting CSS into separate files that you're not overriding styles in another file. Even though the search form CSS files only being imported in the component. That component is also being imported an app an app also has its own CSS file.
To demonstrate, I'm going to go ahead and add a background color to the body element in the search form dot CSS. Then I'll add a background color to the body and app CSS as well and save. As you can see the body styles in app dot CSS. In the body styles in search form dot CSS, so you have to be careful when working with multiple files. If you have a chance, I recommend taking a look at CSS modules as you don't have to worry about overriding other CSS classes as it keeps your component styles local to the component you're working in. Okay to finish up, I'm going to cheat a bit and bring in the rest of the finished styles for the app component as well.
And last but not least, our beautiful dad jokes addition Google logo. And there you have it your own fully functional dad joke search engine built in react. With the styling complete that takes care of the last item on our task list. Next up, we're going to do some high level exploration on how react works behind the scenes.