ReactJS environment setup with Visual Studio Code

By | August 22, 2018

ReactJS is a popular JavaScript library developed by Facebook. Many applications like Facebook, Instagram, Netflix have been using ReactJS for front end development, because ReactJS components are reusable components and it’s pure javascript without any templates.

Prerequisites:

  • NodeJS installation
  • Visual Studio Code installation
  • Global package installation
  • Create React App

NodeJS Installation:

Go to https://nodejs.org/en/download/ link to download and install NodeJS.

Based on your operating system download required NodeJS version.

Visual Studio Code Installation:

Go to https://code.visualstudio.com/download link to download and install VS Code.

Global Package Installation:

Open NodeJS command prompt and run below command as shown below,

npm install create-react-app -g

-g will  help us run the react app from any location in the system.

Create React App:

To create the react app run below command as shown in below screenshot,

create-react-app helloworldreactdemo

Run Created Reactjs app:

To run created reactjs app run below command as shown in the below screenshot,

Go to the path where you created the react app,

cd helloworldreactdemo

Run the app,
npm start

Once you run the npm start command, browser window will pop up and display react app as shown below,

Now, open the project folder in Visual Studio Code as shown below,

In the above image, observe the project structure in the left pane and App.js code in the right pane.

Now, edit the text in App.js file, save and refresh the browser window

I hope this post helps you to get started with ReactJS. Feel free to comment or contact, if you have any queries.

Knowledge is for sharing !

2 thoughts on “ReactJS environment setup with Visual Studio Code

  1. Phyllis Vaneaton

    Hello, Neat post. There’s an issue along with your web site in web explorer, might check this¡K IE still is the market chief and a good component of people will omit your fantastic writing because of this problem.

    Reply

Leave a Reply

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