Welcome to the Chapter 2 of our Learn React by Example Course.
In this chapter we will cover – How to Setup React Development Environment ?
Requirements – Node, Code Editor, Terminal (Mac)/Command Line (Windows)
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 ?
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 –
Go here in Firefox Add-on Store to install React Developer Tools.
Go here in Chrome Web Store to install React Developer Tools.
This is the end of this chapter. You can ask questions in the comments section below.
Continue to Chapter 3