Just about the very first thing we should add is some way to handle styling for our application. If you wish, you need learn nothing new, nor install anything extra, for you could go with plain old-fashioned CSS—as we already did! We used some CSS in the previous chapter (look for the src/components/general.css file), but we don't even need to go there. When we created our project then, an App.js file was created with the following code:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo"
                       alt="logo" />
                    <h1 className="App-title">Welcome to 
                       React</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code>
                    and save to reload.
                </p>
            </div>
        );
    }
}

export default App;

By including the import "./App.css" line, you are getting the styles that were defined in the App.css file, and you can then use them everywhere, as shown in the code.

So, if you wanted to get by with just CSS, you need to do but little, and you are set! However, there are many tools that can help you with styling, adding features that really come in handy, and in this section we will consider how to use SASS, one of the best-known CSS extension languages.