Install Nodejs

Node.js provides a runtime environment to execute JavaScript code from outside a browser. NPM, the 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. Let’s 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 the change directory command.

Let’s 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

Let’s 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 the VS Code as our Editor.

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 the 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 the 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. Let’s make a small change in the text, save it and let’s have a look at the browser. We can see the changes and it happens very fast.

React online editors

Let’s 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, let’s 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.