Setting up the React Application

Setting up the environment

Note: All the steps in this lesson are to set the environment up in your local machine.

Getting started with React is fairly easy, thanks to the useful set of build tools. First, we install the Node Package Manager, often referred to as “npm”. It is used to manage the packages in any given project. We then install create-react-app, a tool for starting with a React front-end. The -g flag tells npm to install it globally, rather than in the local project.

On a Mac, we use brew, and then npm:

$ brew install npm
$ npm install -g create-react-app

On Windows, we need to run Chocolatey as the Administrator in PowerShell. After this, we can run npm as a regular user.

PS C:> choco install nodejs.install
PS C:> npm install -g create-react-app

Setting up your first React application

We can create the application structure using the create-react-app tool. This tool will create a local project with some starter files, start a git repository for it (if you aren’t already in a git repository), and install the react, react-dom, and react-scripts libraries locally. This is done using the npx command, which is a command for running node modules. Here, react-examples is the name of the project we’re creating. On all OS, it will look like the example below:

$ npx create-react-app react-examples

The resulting directory includes the following directories and files.

|-- README.md
|-- package-lock.json
|-- package.json
|-- public
|   |-- favicon.ico
|   |-- index.html
|   |-- logo192.png
|   |-- logo512.png
|   |-- manifest.json
|   `-- robots.txt
`-- src
    |-- App.css
    |-- App.js
    |-- App.test.js
    |-- index.css
    |-- index.js
    |-- logo.svg
    |-- serviceWorker.js 
    `-- setupTests.js

Starting the server

One of the great things about React is that it comes with its own development server that automatically updates the browser whenever the code is changed. Start the server with the help of the following commands:

$ cd react-examples 
$ npm start

You may get a pop-up requiring you to grant permissions to the application. The terminal then shows that the URL http://0.0.0.0:3000/ is ready. At the same time, a window or tab will open in the browser, showing the React logo.

Try it yourself

Note: All installations are already done on this platform.

1. Create the application by using the following command:

2. Start the server cd react-examples by using the following commands: