Create a New React.js App

Let’s get started with our frontend. We are going to create a single page app using React.js. We’ll use the Create React App project to set everything up. It is officially supported by the React team and conveniently packages all the dependencies for a React.js project.

Install Create React App

Create a new project in directory separate from the backend. Run the following command.

$ npm install -g create-react-app

This installs the Create React App NPM package globally.

Create a New App

From your working directory, run the following command to create the client for our notes app.

$ create-react-app notes-app-client

This should take a second to run, and it will create your new project and your new working directory.

Now let’s go into our working directory and run our project.

$ cd notes-app-client
$ npm start

This should fire up the newly created app in your browser.

Change the Title

Let’s quickly change the title of our note taking app. Open up public/index.html and edit the title tag to the following:

<title>Scratch - A simple note taking app</title>

Create React App comes pre-loaded with a pretty convenient yet minimal development environment. It includes live reloading, a testing framework, ES6 support, and much more.

Next, we are going to create our app icon and update the favicons.