React Hello World using create-react-app

In this post we shall see on how to install the create-react-app boilerplate and how to create a simple Hello World application using the boilerplate.

Let us create a React application hello-world using the following command.

npx create-react-app hello-world

The command will install all the required packages and the basic files for a startup React application. Once the command is completed it creates the following files and folders.

There are 3 important files which make the React application, other files and folders are supporting files. The 3 important files are

src/App.js                           –  The main react component.
src/index.js                        -  The class which loads the React component into the HTML DOM
                                                ReactDOM.render(<App />, document.getElementById('root'));

public/index.html            - The root html page which will load the React Component.
                                              <div id="root"></div>

Let’s build and start the React App using the following command.
npm start

This command will build the Application, launch a browser and open the React app in the browser as follows.

One thing to notice is that we don’t see any webpack or bable config files in the sample application, these configs are built into a package react-scripts, if you check the package.json all the commands start, build etc are using react-scripts. This package has the required config files and can be found in the package folder react-script under node_modules.

\hello-world\node_modules\react-scripts

That’s it, we have the basic React App in place, and we can now build on top of this. As you see using the boilerplate is so simple, just by running a couple of command we have the basic React App up and running.