Menu Close

Creating a Sample ReactJs Application using VS Code

In this lesson, we will learn about Creating a Sample ReactJs Application using VS Code. You are aware that VS Code is now the most popular editor code for creating Client Applications. React is a popular JavaScript library for building user interfaces, It has gained a lot of popularity due to its ease of use, flexibility, and performance. If you want to get started with React, one of the first things we’ll need to do is create a new React app. Please read my previous lesson on React Building Single Page Applications(SPA) with ReactJS.

For more details, you can visit this link

Using the below steps we can create the sample ReactJs Application using VS Code.

  • Install Node.js and npm (Node Package Manager) on your computer.
  • Open VS Code and install the “Reactjs code snippets” extension.
  • Open the terminal in VS Code by pressing CTRL +
  • Type npx create-react-app my-app and press enter. This will create a new directory called “my-app” with a basic React setup.
  • cd my-app to navigate into the newly created directory.
  • Type npm start to start the development server and open the application in a browser.
  • Begin building your React application in the “src” directory.
  • Use npm run build command to build the production-ready version of your app.

We’ll be using the create-react-app generator for this tutorial. To use the generator as well as run the React application server, you’ll need Node.js JavaScript runtime and npm (Node.js package manager) installed. npm is included with Node.js which you can download and install from Node.js downloads.

  • To create the reactjs app open the VS code and type the below command in the terminal window.
npx create-react-app hello-world

Note: If you’ve previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.

  • After installing the ReactJs App, move to the corresponding folder and open the hello-world app in a different VS Code window using the below command
cd hello-world
code .

In React application, there are several files and folders in the root directory. Some of them are as follows:

  • node_modules: It contains the React library and any other third-party libraries needed.
  • public: It holds the public assets of the application. It contains the index.html where React will mount the application by default on the <div id=”root”></div> element.
  • src: It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files. Here, the App.js file is always responsible for displaying the output screen in React.
  • package-lock.json: It is generated automatically for any operations where the npm package modifies either the node_modules tree or package.json. It cannot be published. It will be ignored if it finds any other place rather than the top-level package.
  • package.json: It holds various metadata required for the project. It gives information to npm, which allows it to identify the project as well as handle the projects dependencies.
  • It provides the documentation to read about React topics.

Installing dependencies:

  1. In the VSCode terminal, ensure that you are in the project directory.
  2. Install the project dependencies by running the following command:
npm install

Previewing the React app:

  • After starting the development server, open your web browser and navigate to http://localhost:3000
  • You should see the default React.js app rendered in the browser.
  • Begin modifying the React components and see the changes being hot-reloaded in the browser.
npm start


In this lesson, we learned about Creating a Sample ReactJs Application using VS Code. We saw step by step process to create a sample React JS Application in VS Code.

Leave behind your valuable queries and suggestions in the comment section below. Also, if you think this article helps you, do not forget to share this with your developer community. Happy Coding 🙂

Related Articles


Buy Me A Coffee

Leave a Reply

Your email address will not be published.