How to Setup React.js Development Environment ? Step by Step

In this article we will cover – How to Setup React Development Environment ?

Requirements – Node, Code Editor, Terminal (Mac)/Command Line (Windows)

Installing Node

First let’s start with installing-

Node on your computer if you don’t have it already, else you can skip this step.

We will be using Node mostly for its npm (node package manager) capabilities which helps to easily install certain packages we will need later and allow us to create boilerplate React app using create React app package.

What is Node ?

Node is a JavaScript run-time built on Chrome’s V8 JavaScript engine.

Steps to Install Node

• Go to: https://nodejs.org
• Download (install) the latest version of Node, based on your operating system – Mac or Windows.

Installing IDE (Code Editor)

Below we can see list of environments popular among web developers –

The two IDE’s used to setup React environment in this chapter are –

1 – Visual Studio Code

2 – Atom

These 2 are the most preferred and recommended IDE’s (code editors) for web development and React at present.

But feel free to use IDE of your choice.

Later in the course, the primary editor used in the examples and project will be – Visual Studio Code.

So, it’s highly recommended to have it if you plan on following and coding the project.

Setup React Development Environment in Visual Studio Code

• Go to https://code.visualstudio.com
• Download (install) Visual Studio Code.

You can also install the recommended extensions below that will aid with productivity:

• Prettier – helps formatting the code on the go.

Setup React Development Environment in Atom

• Go to https://atom.io
• Download (install)

Packages to install –

• Beautify – code formatter for Atom

Install React Developer Tools

Developer Tools will help inspect the React component hierarchies.

Its Components tab displays the root React components that were rendered on the page, as well as the sub-components that they ended up rendering.

When selecting a component in the tree, we can inspect and edit its current props and state in the panel on the right.

In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and more.

Depending upon your browser of your choice –

Firefox

Go here in Firefox Add-on Store to install React Developer Tools.

Chrome

Go here in Chrome Web Store to install React Developer Tools.