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.
Download NodeJS
Download NodeJS

Installing IDE (Code Editor)

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

React Development Environment
Code Editors or IDE’s
Most popular development Environments among web developers in 2019
Most popular development Environments among web developers in 2019.
Source: https://insights.stackoverflow.com/survey/2019

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

Setup Visual Studio Code for React
Setup Visual Studio Code for React
Download Visual Studio Code
Download 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

React Atom
Setup Atom for React
Download Atom Code Editor
Download Atom Code Editor

Packages to install –

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.

Default image
Navjot Singh Virk
Navjot is a Hobby Blogger from Ireland and loves to create content to help people. He makes time on weekends to work on this blog. And has a full time position at Workday as Technical Product Manager, which he loves and thrives at. His Skills include in-depth knowledge of SEO, Javascript, Advertising, HTML, Java and Product Management. And his other hobbies include Investing, Gardening and playing Table Tennis.