Lifting CSS into React

We are now on the final stretch of making our React application usable. We could split up our CSS into multiple different files. However, we are coming to the end of this chapter, and going over all the CSS again would unnecessarily fill up this chapter with loads of duplicate code. While our HTML and JavaScript are different, the CSS is the same. To get it running, we can copy all the CSS from the following files:

• templates/components/header.css
• css/base.css
• css/main.css

Copy the CSS files listed here into the front_end/src/App.css file. There is one change to the CSS, and this is where all the .body references should be replaced with .App, as shown in the following code snippet:

.App {
  background-color: #92a8d1;
  font-family: Arial, Helvetica, sans-serif;
  height: 100vh;
}
@media(min-width: 501px) and (max-width: 550px) {
  .App {
    padding: 1px;
   &...