There are several ways to install React. In short, we can either configure the dependencies manually or use the open source starter packs available on GitHub. The ‘create-react-app’ (CRA) tool maintained by Facebook itself is one such example. This is suitable for beginners who can focus on code, without manually having to deal with transpiling tools like webpack and Babel. In this ReactJS tutorial I will be showing you how to install React using CRA tool.

Npm: Node Package Manager manages the different dependencies needed to run ReactJs applications. Npm is bundled together with node.js.

Step 1: Download NodeJS

First go to the node.js website and download the .exe file according to your system configuration and install it.

Link: https://nodejs.org/en/download/

Step 2: Download the ‘create-react-app’ Tool from GitHub

Link: https://github.com/facebookincubator/create-react-app

Step 3: Open cmd prompt and navigate to the project directory.

Now, enter the following commands

 ->  npm install -g create-react-app
 ->  cd my-app 
 ->  create-react-app my-app

Step 4:-> npm start

Once we type “npm start” the application will start execution on port 3000. Open http://localhost:3000/, you will be greeted by this page.

This is how the file structure should look once you have successfully installed React.

 my-app
 ├── README.md
 ├── node_modules
 ├── package.json
 ├── .gitignore
 ├── public
 │   └── favicon.ico
 │   └── index.html
 │   └── manifest.json
 └── src
     └── App.css
     └── App.js
     └── App.test.js
     └── index.css
     └── index.js
     └── logo.svg
     └── registerServiceWorker.js

When you are creating new apps, all you need to do is update the file ‘App.js’ and the changes will be reflected automatically, other files can be added or removed. Make sure you put all CSS and JS files inside the ‘/src’ directory.

Download latest version of Node.js installable archive file from [https://nodejs.org/download/](Node.js Downloads)

Based on your OS architecture, download and extract the archive node-v6.3.1-osname.tar.gz into /tmp, and then finally move extracted files into /usr/local/nodejs directory. For example:

 $ cd /tmp
 $ wget http://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz
 $ tar xvfz node-v6.3.1-linux-x64.tar.gz
 $ mkdir -p /usr/local/nodejs
 $ mv node-v6.3.1-linux-x64/* /usr/local/nodejs

Add /usr/local/nodejs/bin to the PATH environment variable.

 export PATH=$PATH:/usr/local/nodejs/bin

Use the MSI file and follow the prompts to install the Node.js. By default, the installer uses the Node.js distribution in C:\Program Files\nodejs. The installer should set the C:\Program Files\nodejs\bin directory in window's PATH environment variable. Restart any open command prompts for the change to take effect.

Create a js file named main.js on your machine (Windows or Linux) having the following code.

 /* Hello, World! program in node.js */
 console.log("Hello, World!")

Now execute main.js file using Node.js interpreter to see the result:

 $ node main.js

If everything is fine with your installation, this should produce the following result:

 Hello, World!

The root folder will be named reactApp and we will place it on Desktop. After the folder is created, we need to open it and create empty package.json file inside by running npm init from the command prompt and follow the instructions.

 C:\Users\username\Desktop>mkdir reactApp
 C:\Users\username\Desktop\reactApp>npm init

We will need to install several packages for this setup. We will need some of the babel plugins, so let's first install babel by running the following code in the command prompt window.

 C:\Users\username\Desktop\reactApp>npm install -g babel
 C:\Users\username\Desktop\reactApp>npm install -g babel-cli

We will use webpack bundler in these tutorial. Let's install webpack and webpack-dev-server.

 C:\Users\username\Desktop\reactApp>npm install webpack --save
 C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save

Since we want to use React, we need to install it first. The --save command will add these packages to package.json file.

 C:\Users\username\Desktop\reactApp>npm install react --save
 C:\Users\username\Desktop\reactApp>npm install react-dom --save

As already mentioned, we will need some babel plugins, so let's install it too.

 C:\Users\username\Desktop\reactApp>npm install babel-core
 C:\Users\username\Desktop\reactApp>npm install babel-loader
 C:\Users\username\Desktop\reactApp>npm install babel-preset-react
 C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015

Let's create several files that we need. It can be added manually or using the command prompt.

 C:\Users\username\Desktop\reactApp>touch index.html
 C:\Users\username\Desktop\reactApp>touch App.jsx
 C:\Users\username\Desktop\reactApp>touch main.js
 C:\Users\username\Desktop\reactApp>touch webpack.config.js

Alternative way to create files that we need

 C:\Users\username\Desktop\reactApp>type nul >index.html
 C:\Users\username\Desktop\reactApp>type nul >App.jsx
 C:\Users\username\Desktop\reactApp>type nul >main.js
 C:\Users\username\Desktop\reactApp>type nul >webpack.config.js

Open webpack.config.js file and add the following code. We are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to 8080 port. You can choose any port you want.

And lastly, we are setting babel loaders to search for js files, and use es2015 and react presets that we installed before.

 webpack.config.js
 var config = {
    entry: './main.js',
    output: {
       path:'/',
       filename: 'index.js',
    },
    devServer: {
       inline: true,
       port: 8080
    },
    module: {
       loaders: [
          {
             test: /\.jsx?$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
             query: {
                presets: ['es2015', 'react']
             }
          }
       ]
    }
 }
 module.exports = config;

Open the package.json and delete "test" "echo "Error: no test specified" && exit 1" inside "scripts" object. We are deleting this line since we will not do any testing in this tutorial. Let's add the start command instead.

 "start": "webpack-dev-server --hot"

Before the above step, it will required webpack-dev-server. To install webpack-dev-server, use the following command.

 C:\Users\username\Desktop\reactApp>npm install webpack-dev-server -g

Now, we can use npm start command to start the server. --hot command will add live reload after something is changed inside our files so we don't need to refresh the browser every time we change our code.

This is just regular HTML. We are setting div id = "app" as a root element for our app and adding index.js script, which is our bundled app file.

 <!DOCTYPE html>
 <html lang = "en">
 
    <head>
       <meta charset = "UTF-8">
       <title>React App</title>
    </head>
 
    <body>
       <div id = "app"></div>
       <script src = "index.js"></script>
    </body>
 
 </html>

This is the first React component. We will explain React components in depth in a subsequent chapter. This component will render Hello World!!!.

App.jsx

 import React from 'react';
 
 class App extends React.Component {
    render() {
       return (
          <div>
             Hello World!!!
          </div>
       );
    }
 }
 export default App;

We need to import this component and render it to our root App element, so we can see it in the browser.

main.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.jsx';
 
 ReactDOM.render(<App />, document.getElementById('app'));

Note − Whenever you want to use something, you need to import it first. If you want to make the component usable in other parts of the app, you need to export it after creation and import it in the file where you want to use it.

The setup is complete and we can start the server by running the following command.

 C:\Users\username\Desktop\reactApp>npm start

It will show the port we need to open in the browser. In our case, it is http://localhost:8080/. After we open it, we will see the following output.