There are many ways to create a new React application. The React documentation recommends the Create React App utility when you are creating a brand new single-page application.

Open a terminal window, find a suitable parent directory, and then enter the following command to create a new React project called react-microblog:

npx create-react-app react-microblog

The npx command comes with Node.js, along with npm which you may be more familiar with. Its purpose is to execute Node.js packages. The first argument to npx is the package to execute, which is called create-react-app. Additional arguments are passed to this package once it runs. The Create React App package takes the name of the React project to create as an argument.

You may have noticed that you did not need to install create-react-app prior to running it. The nice thing about npx is that it downloads and runs the requested package on the fly.

Let's have a look at the newly created project. First change into the react-microblog directory:

cd react-microblog

Get a directory listing (ls on Unix and Mac, dir on Windows) to familiarize yourself with your new project.

Depending on the version of Create React App that you use the contents of the project may not match mine exactly, but you should expect to have the following files and directories:

• README.md: a short document with instructions on how to use your React project.
• package.json and package-lock.json: the standard Node.js project metadata files, with a description of your project and its dependencies.
• public: the directory from where the React application will be served during development. Inside this directory you will find the index.html page, which loads the application in the browser, some icon files and other miscellaneous static files.
• src: the source code directory for the application. This is where you will do your coding. The starter application comes with a few source files for a simple demo application.
• node_modules: the standard directory where Node.js installs all the dependencies of the project.
• build: this is not a directory that appears on a freshly created project, but it will be added later, when you create a production build of your project.
• .git and .gitignore: git repository files. This isn't obvious at first glance because these are hidden, but Create React App also makes the application a local git repository.

Before you continue, you'd want to make sure that the starter project works well. To start the React development web server, run the following command:

npm start

This command runs an initial development build, and creates a web server that serves the React application at the http://localhost:3000 URL. It also opens this URL in your default web browser. Figure 2.1 shows what you should see in your browser.

Once the application is up and running in the browser, the npm start command enters a source code watch loop. Whenever it detects that changes to source files were made, it automatically rebuilds the application and sends the updated code to the browser. This automated monitoring and refreshing of the application is extremely convenient, so I recommend that you keep the npm start command running at all times while working on the application.