Embedding style sheets in our component

Working with React and creating these nice browser-based interfaces is great, but without any kind of styling in place, the whole thing is going to look pretty plain overall. The good news is that Create React App also provides you a nice framework for cleaning up your interfaces as well! Right now, since we deleted a bunch of code, we currently should have an entirely blank App.css file. We'll need to head back to the App.js file and add the following line to the top to make sure it includes our new App component style sheet:

import "./App.css";

This will tell React to make sure the App style sheet is included as part of our component's style sheet. If App.css remains empty, though, that won't amount to much, so let's also change our default style sheet to something a little more interesting:

 .App {
  border: 1px solid black;
  text-align: center;
  background: #d5d5f5;
  color: black;
  margin: 20px;
  padding: 20px;
}

Save the file, head back to your browser window, and you should see something similar to the following:

Okay, we have some code that functions now, and that's a good place to start in our application, so we'll hop over to index.js and quickly figure out precisely how the component gets into the browser. Open up src/index.js:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(<App />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: http://bit.ly/CRA-PWA
    serviceWorker.unregister();

At this point, we've seen import React already. The previous line imports ReactDOM (which houses the main render() function) that we need to be able tell React what component to render, and where to render it to! This comes out of the separate react-dom npm module.

After that, we have another style sheet included, this time being index.css. This will function as our global, baseline CSS file. After that, we import our App component (remember our export statement that we wrote earlier?) with import App from './App'. Note that we can leave the .js off completely, and that we include a dot and a slash in front of the name of the file; this tells Node that we're importing something from our local file system and not from an NPM module instead! App.js lives as a local file inside of our src directory, so the local include suffices.

We end with a new line, import registerServiceWorker from ./registerServiceWorker, which allows us access to implementing service workers for progressive web apps in our Create React App. Progressive web applications are a bit outside of the scope of this tutorial series.

render() is a function call that takes two simple arguments:

• Which component to render
• Where to render that component

Since our component name was imported as App, and because we're using JSX, we can treat App like an HTML tag:

<App />

Remember, all tags in JSX need to be closed, whether via shorthand syntax such as in the preceding example or longer syntax such as following:

<App></App>

The final piece to our rendering puzzle is that we need to figure out where in the DOM the React component is that we need to render to, through the document.getElementById('root') line. This tells JavaScript that it needs to find an element on the page with an id of root, which will end up being our rendering target!

There we are! We have an admittedly basic, yet still a full start, application in React that we wrote in almost no time at all, and we had no stress or headaches trying to set up our development server, figure out which libraries we needed, make the code and browser window auto-reload, or, well, you get the idea.

Seriously, what more can a developer ask for?