Setup React Development Environment

Introduction 

 
In this blog your will learn how to setup a React development environment.
 

What is React?

 
React is a JavaScript library for building user interfaces. It is used to build web user interfaces. It is mostly used to develop single page web applications. We can also develop mobile applications using library ReactJS. To develop mobile applications we use library ReactNative.
 

What is the different between Angular and React?

 
Angular
React
Angular is a JavaScript framework for front end.
React is a JavaScript library for building user interfaces.
Angular is developed and maintained by Google
React is developed and maintained by Facebook
Architecture of Angular  is a bit complex as it follows MVVM models- Model View View Model.
React js is more simplified as it follows MVC- Model View Control.
Angular is  a mere subset of html.
React.js holds JSX, hence the usage of html codes and syntax is enabled.

Written in Microsoft’s TypeScript language, which is a superset of Javascript ECMAScript 6 (ES6)

Reacj.js is written in JavaScript.
 
Step 1
 
Install NodeJS and NPM,
 
https://nodejs.org/en/
 
Step 2
 
After successfully installing NodeJS, we can start installing React upon it using npm. You can install ReactJS in two ways
  • Using webpack and babel.
  • Using the create-react-app command.
Install create-react-app using the below command:
  1. npx create-react-app my-app or npm install create-react-app  
Use the below command to check installed version:
  1. npm view react version  
Step 3
 
Install typescript
  1. npm install -g typescript  
Step 4
 
Download visual studio code
 
https://code.visualstudio.com/
 
Step 5 - Create and Run your first project
 
Finally, run the project using the start command. 
  1. npm create-react-app NameOfProject
  2. npm start 


Next Recommended Reading Getting Started React.js In MVC