Build ReactJS App with Visual Studio Code

Introduction 

 
In my previous article, Getting Started With ReactJS - Environment Setup, we discussed the environment setup for ReactJS and we had created a new app called Environment Setup. Now, we need a code editor to build our applications and explore ReactJS. In this article, I will introduce the Visual Studio Code and how to get it ready to set up to build React apps.
 
ReactJS
 
Visual Studio Code is a free, open-source code editor. You may download and learn more about the VS Code here: https://code.visualstudio.com/
 
Open React app location on Visual Studio Code
 
The first step is to open the React app in Visual Studio Code. For this, we will open the React app folder as shown below.
 
ReactJS
 
Once you click on the "Open Folder" option, you will find a pop-up screen asking for your app location. Find your app location and open it, as shown below.
 
ReactJS
 
On opening the app folder, a screen will come up showing the below details. 
 
ReactJS
 
Once your React app is open in Visual Studio Code, you will find some directories in the left corner. Let us discuss these directories what they have inside.
 
node_modules
 
As the name suggests, this directory gives us all the modules which will be stored in memory at the time of the Node.js installation process. It contains all the files to run the node properties.
 
node_modules
 
public
 
Second thing that you are going to see below node_modules is public file. This contains all the details that you use in your app. 
 
ReactJS
 
In the above image, we see three subfiles in the public section - favicon.ico, index.html, and manifest.json.
 
ReactJS
 
By default, when we run the ReactJS app, we get the above web page in our browser.
 
Favicon.ico
 
Favicon.ico contains our React logo files. 
 
React logo files
 
Index.html
 
Index.html has all the HTML files for the above web page.
 
ReactJS
 
Manifest.json
 
Manifest.json
 
src
 
This directory contains a lot of files like App.css, App.js, App.test.js, index.css, index.js, logo.svg and registerServiceWorker.js.
 
ReactJS src directory
  • CSS contains the CSS files of app.
  • js contains all JavaScript files of app.
  • test.js here we can write our test cases for the app.
  • CSS contains CSS files of our index web page.
  • js contains JavaScript files of our index web page.
  • svg contains all logo file and paths of the logo which we use in our app.
package.json
 
package.json contains all the details regarding the app, React version, React-dom version, dependencies, and React-scripts.
 
ReactJS package.json
 
As you can see, package.json also has 4 commands. Let us discuss them briefly.
  • start—this command is used to start the React app.
  • build—this command is used to build the React app.
  • test—this command is used to run the test cases in the React app.
  • eject—this command is used to end the React app scripting.
I hope you have enjoyed this article. So, go ahead and build your React app with the help of the Visual Studio Code.


Similar Articles