Visual studio code for Reactjs is the best editor

Visual studio code is a free code editor that is developed by Microsoft, for Windows, Linux and macOS also. I think it is the best editor for the React project. We will discuss step by step how you create a Reactjs application with the use of Visual Studio Code editor.

Why Visual Studio Code Editor for Reactjs Project?

Visual studio code developer and maintained by Microsoft. The editor is very user friendly and in this editor different types of elements like keyword, functions, datatype etc perfectly identify and separate with color code. so you can easily read your code and identify errors at the time of writing code.

The following are the most useful key features that help you to write the React js coding.

Basic editing feature

All types of keyboard shortcuts are working but you can modify your favorite shortcut key as you need. 

some useful editing features separate from other editors. The features are following.

1. Multi-selection
2. Multi cursor modification
3. Shrink and expand selection
4. Column selection 
5. Auto Save
6. Format documents
7. Format Section 

Find more details about basic editing features 

Useful Extension Available in Marketplace

As react need JSX for so you need to install an essential extension like HTML to JSX which is very important for React.js and many other to increase your productivity. 

IntelliSense

IntelliSense feature in visual studio code is great for coding. It’s work on.JS file also so it helps fast coding.

Note: If you want to build your react project in visual studio code editor then you need nee to install node.js to handle node module and use of node package manager.

How to install Reactjs in Visual Studio Code 

Now we will install and configure visual studio code editor for React.js project step by step.

Download and configure

Step 1: Install Node.Js – Download Node.js  and just run the setup.

Before download Node.js make sure that you have selected the right one which is support by your Operation System.

Step 2: Install Visual Studio Code – Download visual studio code from its official site and run the setup file.

Create and setup app

Step 3: Create a react app in Visual Studio Code – now open the editor and add a folder which is react.js project location, from your computer. 

To open a folder just click on “File–> Open Folder”

Step 4: Then to execute node command you need to open Visual Studio Code’s Terminal.

To open new terminal just click on “Terminal –> New Terminal”

Step 5: Not time to init note module, for init npm (node package manager) just execute the following command in the visual studio code terminal.

npm init

after executing this command all environments for the React.js project automatically initialize and ready for start React.js project.

Step 6: Now time to create react application. Though we can install react, react-DOM and other necessary node models separately. 

See how install it separately  How to start your react project

But we will install it with a single command, just type following command in terminal and press enter.

npx create-react-app my-app 

make sure before before run the command your folder location is correct.

After finishing the app creation process you need to enter your app directory, in this case the directory is “my-app”.

so type “cd my-app” and press enter. 

To run react.js application now you need to type in the command terminal “npm start”. Once the application started the you will see the application in your browser using the URL http://localhost:3000.

3000 is the default port for react.js application

Now you are ready to start development

Benefit of Reactjs Application 

Reactjs is an advanced JavaScript library. The application which is developed by Facebook is very fast because it communicates with the server with the use of the JSON file.

So no need to refresh full-page and other resources like CSS, JS, Image and files. React only refresh the particular data which is needed to update, of web page 

No need to develop separately for android and ios.

For React Native and wen application no need to develop different applications for Android and iOS with the same project you can build for Android application and iOS application.

Easy to Maintain big project.

React is a component-based development technique so very easier to develop and maintain complex UI for your application.

React component is reusable, once you build a component you can use it in any other pages.

Sample Hello World Program in Visual Studio Code Reactjs  

Now you can modify your project as you need.

If you want to create a “Simple Hello World” program just you need to modify the “App.js” file under the “src” folder, replace it with the following code.

Hello World

One important thing after update save your program you need to run the following command to refresh the output page.

npm run build

Note: In Visual Studio Code editor automatically execute the command and refreshes the page’s output each time when you save files.

How Work React application

When you run the React.js app first time react process “index.js” file. In “Index.js” file ReactDOM render “App” component. Hare we modify the “App.js” file and return a “<H1>” element with the “Hello World” string value. 

So the App component now return “<h1>Hello World <h1/>”. 

Now let’s see the “index.js” udder “src” folder file where ReactDOM renders the App component’s output into the “root” element.

ReactDOM.render(<App />, document.getElementById(‘root’)); 

Now open “index.html” under “public” folder, you will see a <div> element. Id of this element is “root”

<div id=”root”></div>

The output of App component render init this element.

This is the basic fundamental of the React.js application. You can create your own component and render it into your web pages.

Technically React accepts JSX script and renders it into HTML script then changes the page element with the help of React Virtual DOM. 

FAQ

1. Who will start react project ?

Ans. For the react project you need knowledge about HTML, JavaScript and CSS. and some basic knowledge about programming like function, loop, array, etc.

2. Is React only for mobile app and web application?

Ans. No. React is good for application. but you can also create a website with React.

3. Can I handle server site database or logic by React.js ?

Ans. No React is only for UI Design. But you can call API from and handle server site activities. For server site programming you can use any programming language like C#, PHP, Java, etc.

4. Is React perfect for programmer or UI Developer?

Ans. If you are an UI Developer then React is perfect for you.