Creating the application

To start a React application, all we need is a basic HTML page, and CRA already provides one in public/index.html. Stripped down to the basics (check the book source code for the full version), it's something like the following, and the key part is the <div>, in which all of the React generated HTML code will be placed:

<!DOCTYPE html>
<html lang="en">
    <head>
        .
        .
        .
        <title>React App</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

The entry point to our application will be index.js, which (we're dropping out some lines of code that are irrelevant here) boils down to the following code:

/* @flow */

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const root = document.getElementById("root");
if (root) {
    ReactDOM.render(<App />, root);
}

Why do we need to define a root variable and if? The key is a Flow check: a document.getElementById(...) call may produce a web node, or may be null, and Flow reminds us to check for null before committing to work.

Now that we have our basic scaffolding, let's get to writing some actual React components!

Table of Contents for Creating the application

Create new playlist

Sign In

Sign Up

Table of Contents for
Creating the application