React Development Environment

Setting up the React Development Environment

Here is the step-by-step approach to set up the development environment and create a very simple React application.

Install the node and a text editor for your choice in your computer. Here, I am using Visual Studio Code as a text editor which is recommended but not mandatory.

Node is the runtime for Javascript. Node provides a way to execute JS without a browser environment. Before Node JS came into the market we didn’t have any provision to run JS without a browser environment. Because of the node we came to know the full potential of Javascript that let us to use javascript as the standalone programming language for developing various types of applications like Web, mobile and more.

So let’s proceed further and install Node on the local machine. Click the this link to download Node Js’s latest stable version from the official site. Once the download completes, double click the installer and proceed with the installation. If the installer asks for any permission, please click proceed to complete the installation.

To check the installation is correct, open the terminal and type node -v. as long as it returns any version that is enough for the development work.

Sample image version is provided below

Kindly follow the below instructions to setup the Visual Studio Code in the local environment. Click on this link to download the Visual Studio Code as per your operating system.

Double click the downloaded installer and proceed with the installation.

Let’s create our first react application within visual studio code. Create React application

Open the terminal in the VScode by following the below screenshot. Click View -> Terminal.
Navigate to the folder where you want to create the project and open it in the terminal.
Now you should be in the path where you wanted to create the react app.
As per the official documentation, It’s recommended to create the react project using NextJs or gatsby framework. Since we start the series from absolutely scratch it’s good to start with a create-react app.

npx create-react-app <app name>

In my example I take the app name as first_react_app

The above command will create the react project we should navigate to the newly created project folder using the command

cd <app_name>

A default application will be created with the following project structure and dependencies.

Here is the explanation of the project structure of the React application.

node_module:

When you use npm to install the packages for the application, the packages are stored in the node_modules folder. This folder contains packages and their dependencies.

public

public folder is used to store all the static files that are required for the application. This includes logos, images and other static resources.

src

The main application code resides here in the src folder. All the logic files.

App.js : This is main component that usually wraps our application
App.css : This is the style sheet which corresponds with the main component App.js
App.test.js : This contains the unit test for the main component App.js
Index.js : This is the entry point for the React application
Index.css : This contains global styles for the application

By default, it will install a few packages, as shown by the dependencies in the package.json file:

The primary packages for react application are react, react-dom and react-scripts alone. These three packages takes care of all the react related functionalities and react-script package takes care of project execution related things.

Webvital package is for analytics and other packages are related to testing.

You can run this application by typing the below command

npm start

And finally here is our first react web application

Request more information

React Development Environment