How to setup development environment in React.js?

Hey readers, in this article we will be learning about environment setup in React js for the development of an application. This article is beginner-friendly, so keep reading.

Introduction

It is a JavaScript library used for building User Interfaces in web applications. It was created by Meta (previously Facebook) with the aim of providing developers with the flexibility of writing scalable front-end code. We have an in-depth explanation of React js in another article where we have covered all about its architecture and working so do check that out if you want to learn more about it.

Use cases of the React js:

• Interactive UI of web application
• Building complex application 
• Flexible with all APIs to integrate with web apps
• Easy and clean code

JavaScript is a scripting language, it works without any libraries. Developers are free to write JavaScript language code anywhere and can still run it in the browser.JavaScript has tons of libraries, one of which is React. However, in React js there are pre-defined rules of data flow and the code follows a specific structure. Besides this, each component in React js has its own functionalities and they work individually.  For pure JavaScript applications, first, the UI is created on the server-side after which it is sent to the browser. In React, however, the empty HTML document is sent to the browser and it dynamically builds the UI. However, if there is a change in state, the components communicate with each other in order to respond to the change in state and make the web application work. 

Steps to the setup development environment

Following are the step-by-step procedure that should be followed in order to install React js on your computer.

NodeJS must be installed on our computer in order to run any React application. As a result, the initial step will be to download and install NodeJS.

Step 1: Install NodeJS first. To download and install the newest version of NodeJS before installing React, go to the official NodeJS download page. After we’ve installed NodeJS on our computer, we’ll need to install React Boilerplate.

Step 2: Configure the react environment for earlier and newer versions, and then follow anyone who is compatible with your node version.

Setting up React Boilerplate on Older Versions, such as Node 8.10 and npm 5.6. The boilerplate will be installed globally. Type the following line in your terminal or command prompt(cmd) in order to install the React js Boilerplate on your PC.

npm install -g create-react-appCode language: JavaScript (javascript)

After running the above command in cmd and successfully installing the boilerplate, your terminal will display some output. We’ll start building our React app after the boilerplate has been successfully installed. The create-react-app command can be used to construct a React app.

For the Latest Versions, which include Node >=8.10 and npm >=5.6: The machine should have a version of Node >=8.10 and npm >=5.6 to use the latest features of JavaScript, which provides a pleasant development experience.

To create a new project or application, type the command given below.

npx create-react-app my-appCode language: JavaScript (javascript)

The command above will create the app named my-app:

The command cd my-app can be used to launch the project.

Now open your browser and check the output.

Step 3: Make a React application. We’ll now use the boilerplate we loaded to develop an app. The command below will build a new app called myapp.

create-react-app myapp

The command statement will create a new directory named myapp inside your current directory, which will contain all of the files needed to run a React app.

A lot of files can be found in the directory mentioned above. The index.html and index.js files will be the main focus of the introductory course. The index.html file will have a div element with the id “root” inside which everything will be rendered, and the index.js file will have all of our React code.

Now that the development environment has been effectively set up. Last but not least, the development server must be started.

Step 4: Get the development server up and running. To start the development server, navigate to “myapp” in your current directory and run the following command:

npm startCode language: JavaScript (javascript)

When you run the above command in cmd successfully, your compiler will prompt you to open localhost in your default browser.

To reflect the changes you’re making in your App, browse to the URL provided in the browser. When you enter the above URL into your default browser, it will display the following page.

Conclusion

Hope you have installed React js on your PC. If you have any queries or doubts while installing the React js and environment setup, do drop a text or feedback in the comment section. If you want to learn React js, check out Codedamn courses and the developer section if you like reading articles. Do join our community at Codedamn!