Downloading And Installing Visual Studio Code – Installing VSCode Extensions
Installing React JS – Creating First React App – create-react-app
Understanding Workflow Of React App – How React App Works

In This Blog, you are going to learn downloading and installing Visual Studio Code and installing useful extensions, and then installing react and create our first react app then we will understand the workflow of react app.

Download VS Code & Extensions

Download VS Code From Below Link And Install It

VS Code Useful Extensions

Install these useful extensions in your visual studio code for rapid development in react.

  • babel javascript
  • javascript es6 code snippets
  • vscode icons
  • Bracket Highlighter
  • auto rename tag

Installing React JS & Creating First React App

1st Step:

Install VS Code & Extensions

2nd Step:

  • Install Node JS & NPM.
  • After installing Node JS & NPM check the version of Node JS & NPM.
  • node -v -> command for checking node version
  • npm -v -> command for checking npm version

Installing React From VS Code Terminal

  • Install react globally by using below command
    • npm install –g create-react-app
  • Check the version of “create-react-app” by using below command
    • create-react-app –version
  • Creating React App By Using
    • create-react-app App_Name

Starting React App On Server

  • npm start
  • It serves our react app on 3000 port number of localhost.
  • Make sure your react app folder is open in your terminal before you enter “npm start”


React JS – Render HTML

  • In React App, react renders HTML to the web page by using a function called ReactDOM.render().

The Render Function

  • The purpose of the RENDER function is to display the specified HTML code inside the specified HTML element.
  • But main question is render where ?
  • Look inside your react directory structure, there is another folder in the root directory of your React project, named “public”. In this folder, there is an index.html file.
  • You will notice a single <div> with id “root” in the body of this file. This is where our React application will be rendered.

Click Below Link to Download Notes Of This Blog

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *