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.
- Multi-selection
- Multi cursor modification
- Shrink and expand selection
- Column selection
- Auto Save
- Format documents
- 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
Click on above link to know how create react native app
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.
Create React Native App in Visual Studio Code
Click above link to know more about Visual Studio Code and available extension.