React Installation and Setup

Suggested Videos
Part 1 - ReactJS Introduction | Text | Slides

For setting up React in our local system, first step is to Install NodeJs and npm.

Install Nodejs


Node.js provides a runtime environment to execute JavaScript code from outside a browser. NPM, Node package manager is used for managing and sharing the packages for either React or Angular. 

NPM will be installed along with Nodejs. 

Node.js can be downloaded and installed from the official NodeJs website.

https://nodejs.org

Once the Installation of Node is complete. Open Node.Js Command Prompt and we can check the Version as well.

Install Create-React-App Tool

The next step is to install a tool called create-react-app using NPM. This tool is used to create react applications easily from our system. You can install this at the system level or temporarily at a folder level. We will install it globally by using the following command.

npm install -g create-react-app

Creating a new react project

After create-react-app is installed, we can create our first react application.

Lets say I want to create the project or application in D:\React_Programs.

I will create this folder and let our command prompt point to it by using change directory command.

Lets create a new Project now using the command.

create-react-app test-project

Remember not to create the project with an upper case character In it.

Running the React Application

Lets do cd to the Project we have created and run it locally on our system using npm start. Launch the browser and visit http://localhost:3000. We can then see our first React Application response in the browser. 

cd test-project
npm start

We have created a New Project using React and executed the Project.

But as a developer we would be more interested to know about the Project which is created, its structure and we would like to play around with it. So it is time for us to get an Editor. When we think of IDE, we have a variety of choices like Visual Studio Code, React IDE, Sublime Editor, Atom Editor, Webstorm and a few others. We will use VS Code as our Editor.

Visual Studio Code is a free IDE from Microsoft built for developing and debugging web applications. It has integrated Git control & terminal.  VS code’s IntelliSense allows Visual Studio Code to provide you with useful hints and auto-completion features while you code. So the next step is to Install Visual Studio Code.

Install Visual Studio Code

Download and install Visual Studio Code from the following URL

https://code.visualstudio.com/download

After the installation, open the Project we have created earlier using VS Code. The Project has the following 3 folders

• Node_modules
• Public
• src

The output we have seen when the Project is executed comes from a file called Index.html which resides inside public folder.

In index.html we have one div tag with id as root.

<div id="root"></div>

To understand the relation between the output we see and this index.html,

Open src/app.js file. The image and the text we see in the browser are coming from here.

Lets make a small change in the text, save it and lets have a look at the browser. We can see the changes and it happens very fast.

How the index.html is linked to App.js will be discussed in our upcoming videos.

With this we have the react environment setup on our local machine and we are ready to explore React.

React online editors

Lets say we are in office, we have some free time and we’re interested in playing around with React, then you can use an online code playground like  CodePen, CodeSandbox, or Glitch.

For example, lets say we want to create react project using CodePen. In the browser, navigate to https://codepen.io/ and click on Start Coding.

Create a simple div in html section.

<div id="root"></div>

Followed by writing some JavaScript Code :

ReactDOM.render(
  <h1>Welcome to React World</h1>,
  document.getElementById('root')
);

This Code will throw an error as we are missing the references to two Javascript files.

Go to Pen Settings section of Js and add,

• https://unpkg.com/react/umd/react.development.js
• https://unpkg.com/react-dom/umd/react-dom.development.js

One script file refers to React and the other refers to ReactDOM which is the Virtual DOM introduced by React.
Set the Javascript Preprocessor to Babel.

With the above settings you should have the output produced as expected.

Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines. Babel is a popular tool for using the newest features of the JavaScript programming language. More about Babel will be discussed in our upcoming videos.

I hope we are clear on doing the React setup and creating our first Project using React.