A Development Environment for React.js – Setting up and Optimizing it

React and its associated libraries are growing at an astonishing pace. It’s not only being used to build complex user interfaces but also being implemented in online stores, e-commerce websites and other businesses to build fast and scalable apps. 

If you are just getting started with React.js, the first challenge is to get your development environment set up and ready for coding. This can be a little tricky as there are so many different tools, libraries, and frameworks that you need to work with together. In this article we will walk you through the process of setting up an optimal React development environment on macOS or Windows.

In this post, we will look at what React is, why it became so popular recently, how to set up a development environment for React and optimize it for your project.

1. Get the tools you need

To get started, you will need to install a few different tools. 

• A text editor for writing code, like VS Code or Sublime Text.
• A browser for testing and debugging your application, like Chrome or Safari.
• A code compiler that can translate your code from JavaScript into another language. 
• A build tool that can generate the final code for your application. 
• A package manager for installing the different tools you need for your application.

This depends on a number of things – your project type, the OS you are working with, the software versions of the tools you are using, etc.

2. Install Node.js and create an npm script

Next, you will need to install Node.js. Visit the official link and download to install. The next step is to set up a React Boilerplate. Setting up the React environment depends on the Node version. 

For old versions of Node and Boilerplate (before 8.10 and 5.6 respectively)

Install Boilerplate globally. To do so, run the following command in the terminal or cmd prompt.

npm install -g create-react-app

If successful, the terminal should show the following output.

For versions of Node and Boilerplate (8.10 and 5.6 and after respectively), the machine uses the latest features of Javascript. Run the command given below.

npx create-react-app my-app

The output should be as given below, thus creating the app name my-app. This can be changed according to your preference. However, this will also be used and be displayed in all future steps.

Running the project requires the following commands as shown in the output above.

cd my-app

npm start

The output will be as shown in the terminal snapshot below.

The App should now be viewable in the browser, as shown.

3. Set up a React development environment with Create-React-App

• Create-React-app is a tool that can set up a new React development environment for you, including all the necessary Node modules, development server, and build configuration. 
• Once you have installed create-react-app and run the create-react-app command, it will ask you a couple of questions, after which it will create a new React development environment. 
• The create-react-app command is also a npm script.

The command is: 

create-react-app myapp

The above command should create a directory my-app in your current directory with all the necessary files required to run a React App. A snapshot of the directory so created is as given below.

The significant files here are index.html and index.js. The index.html file has a div element (id=”root”), which houses all the steps rendered and the React code will be stored in the index.js file.

4. Starting the Development Server:

To do that, go into the current directory (myapp in this case) and execute the following command line.

npm start

The following message should come up on your compiler.

You can go to the URL shown above to see the changes you are making in your App getting reflected. By default, the above URL will show the below page:

5. Optimizing your Development Environment

Debugging 

When you’re working in a development environment, you can easily debug your application using Chrome. 

• You can debug your application using the built-in debugger in Chrome, which allows you to set breakpoints, view variable values, and step through your code.
• To use the debugger, you need to enable the developer tools in Chrome. 
• You can also use the debugger with a remote debugger, which allows you to run the debugger on a separate computer, like your laptop.

Optimizing Your Environment for React Development

While your development environment is ready, you can also optimize it for React development by taking a few extra steps. 

• The first thing you need to do is install the React development tools. The React development tools provide several features, including automatic refreshing of your application while you are making changes and live reloading your application when you make a change. 
• Another thing you need to do is install the ESLint code linter for React – The ESLint code linter can find common mistakes and errors in your code, like missing semicolons or using incorrect syntax. 
• The ESLint code linter also provides suggestions for improving your code, like using a better naming convention or applying a best practice.

Conclusion

React gives you the ability to create reusable UI components that can be used across different parts of your application. With React, you can build your application using these reusable components, which are faster to create, easier to maintain, and easier to understand. Setting up your development environment is the first step towards creating applications with React. When you are done setting up your environment, you can continue with learning how to build your application with React.