Getting Started II: create-react-app

This article concludes the setting up of react, which began in the the previous blog post.

In the the previous blog post, we looked at how we can embed react and react-dom, as scripts, within our html documents, I would recommend for web pages which require very little dynamicity.

However, depending on the complexity of the dynamic part of your web page, this method may increases the length of our html document and make it difficult (at times overwhelming) to read.

Requirements

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

It is a very simple way to setup a react application from scratch, and requires that node and npm packages be installed on your device. So, if you have not, you can download the long term support (LTS) version of node here.

npm comes out-of-the-box with node

To check if you have node (and npm) installed on your device, open your command line interface (CLI) (i.e. command prompt (Windows) or terminal (Mac)), and type the following after the prompt

$ node -v

If you have node installed, it should return a version number, otherwise it should return an error. (same goes for npm).

Creating a react application

Now that we have both installed, let's get started with creating our react application.
To get started, type the following command into your CLI

 $ npx create-react-app new-app

note that npx is not a typo, it is a package that comes with npm 5.2 and higher. If your npm version is less than 5.2, I would recommend you install an updated version.

However, you can still create a react app on versions lower than 5.2 by following these two steps:

1. In your CLI, type

$ npm install -g create-react-app

and wait for the installation to finish, then

1. type

$ create-react-app new-app

note that new-app is the name of our application and you can change it to anything you want.

When a new react app has been successfully created (using npx or npm), you should see the following screen:

and a new folder named new-app inside the current folder.

To run your react application, you cd into the new folder created type the following into your CLI:

$npm start

and allow it to spin up the development server. When the server is up, your default browser should open automatically and you should see something like this.

Congratulations, your new application is up and running :).