- In this artilce, I will introdice Visual Studio Code and how to get it ready to setup to build React apps.
- The first step is to open React app in Visual Studio Code.
- Once your React app is open in Visual Studio Code, you will find some directories in left corner.
- By default, when we run ReactJS app, we get the above web page in our browser.
- So, go ahead and build your React app with the help of Visual Studio Code.
Explore 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/
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.
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.
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 contains our React logo files.
Index.html has all the HTML files for above web page.
This directory contains a lot of files like App.css, App.js, App.test.js, index.css, index.js, logo.svg and registerServiceWorker.js.
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.
Hope you have enjoyed this article. So, go ahead and build your React app with the help of Visual Studio Code.