For more details, you can visit this link https://code.visualstudio.com/docs/nodejs/reactjs-tutorial.
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
npx create-react-app my-appand press enter. This will create a new directory called “my-app” with a basic React setup.
cd my-appto navigate into the newly created directory.
npm startto start the development server and open the application in a browser.
- Begin building your React application in the “src” directory.
npm run buildcommand to build the production-ready version of your app.
We’ll be using the
- 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
npm install -g create-react-app, we recommend you uninstall the package using
npm uninstall -g create-react-appto 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.
- README.md: It provides the documentation to read about React topics.
- In the VSCode terminal, ensure that you are in the project directory.
- Install the project dependencies by running the following command:
Previewing the React app:
- After starting the development server, open your web browser and navigate to
- 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.
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 🙂
- Create CRUD Operation using ReactJs and ASP.Net Core API- Starter Template
- Creating a Sample ReactJs Application using VS Code
- Building Single Page Applications(SPA) with ReactJS
- How to create a react App
- React Installation and Environment Setup
- Intro to ReactJS Application