Build ReactJS App with Visual Studio Code

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 artilce, I will introdice Visual Studio Code and how to get it ready to setup to build React apps.

Visual Studio Code is a free, open source code editor. You may download and learn more about VS Code here: https://code.visualstudio.com/

Open React app location on Visual Studio Code

The first step is to open React app in Visual Studio Code. For this, we will open React app folder as shown below.



Once you click on "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.



On opening the app folder, a screen will come up showing the below details.



Once your React app is open in Visual Studio Code, you will find some directories in left corner. Let us discuss about 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 Node.js installation process. It contains all the files to run the node properties.



public

Second thing that you are going to see below node_modules are public file. This contains all the details that you use in your app.



In the above image, we see three sub files in public section - favicon.ico, index.html, and manifest.json.



By default, when we run ReactJS app, we get the above web page in our browser.

Favicon.ico

Favicon.ico contains our React logo files.



Index.html

Index.html has all the HTML files for above web page.



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.

• 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 path of logo which we use in our app.

package.json

package.json contains all the details regarding app, React version, React-dom version, dependencies, and React-scripts.



As you can see, package.json also has 4 commands. Let us discuss about them briefly.

• start—this command is used to start the React app.
• build—this command is used to build React app.
• test—this command is used to run the test cases in React app.
• eject—this command is used to end the React app scripting.

Hope you have enjoyed this article. So, go ahead and build your React app with the help of Visual Studio Code.