How to Install React in VS Code
Learn how to install React in VS Code with a practical, step-by-step guide. Cover prerequisites, scaffolding options (Vite or CRA), setup tips, and first-runtime checks. Includes best practices from Install Manual.
You will set up a React project in VS Code by installing Node.js and npm, choosing a setup tool (Vite or Create React App), and starting a local development server. This guide covers installation, project creation, dependency setup, and verification steps, with best practices for extensions and debugging in VS Code. Install Manual recommends using stable, current LTS versions for reliability.
Why React in VS Code matters
According to Install Manual, using React inside VS Code streamlines development with built-in IntelliSense, fast feedback loops, and a thriving ecosystem of extensions. When you pair React with VS Code’s debugging, live reloading, and snippets, you can move from idea to UI faster while maintaining code quality. This is particularly valuable for component-driven development, where modularity, state management, and clean file organization pay off across projects. A well-tuned workspace reduces context switching and helps you catch errors earlier through real-time linting and type hints. By following the steps in this guide, homeowners, DIY enthusiasts, and renters who tackle front-end tasks can confidently spin up a React app and iterate with confidence. The Install Manual team emphasizes a consistent setup to minimize surprises across environments.
Prerequisites you should confirm
Before you write a single line of code, verify your environment. You’ll need Node.js (LTS version) and npm, Visual Studio Code (latest stable), a modern web browser for testing, and a reliable internet connection. Ensure you can access the terminal from your operating system and that you have a project folder ready. According to industry best practices highlighted by Install Manual, starting from a clean workspace helps prevent version conflicts and streamlines troubleshooting. If you already use Git for version control, make sure Git is installed and accessible from your PATH. Finally, decide whether you want to scaffold with Vite or Create React App, as this choice will influence commands and project structure.
Install Node.js and npm
Node.js provides the runtime for React tooling, and npm (the Node package manager) handles dependency installation. Start from the official Node.js site and choose the LTS build for stability. After installation, verify versions by running node -v and npm -v in your terminal. This step ensures you have the tools React relies on to install libraries, run build scripts, and start the development server. If you encounter permission issues on macOS or Linux, follow platform-specific recommendations in the official docs and use a Node version manager if needed. The Install Manual guidance stresses sticking with LTS releases to minimize breaking changes during the learning phase.
Set up Visual Studio Code for React development
Install VS Code and tailor it for React development. Install essential extensions such as ESLint, Prettier, and a CSS/JSX IntelliSense helper to improve code quality and speed. Enable JavaScript/TypeScript IntelliSense, enable format on save, and configure a workspace settings file to lock in formatting and linting rules across projects. The VS Code integrated terminal makes running commands convenient without leaving the editor. For debugging, configure a launch.json entry to attach to the dev server. The Install Manual team notes that a consistent editor setup reduces friction, especially for beginners.
Create a new React project: Vite vs Create React App
React projects can be scaffolded quickly with either Vite or Create React App (CRA). Vite offers near-instant start times and a modern build pipeline, while CRA provides a more traditional and widely adopted setup. To start with Vite, use npm create vite@latest my-app -- --template react, then cd my-app and npm install. For CRA, run npx create-react-app my-app, then cd my-app. Both paths create a React app with a solid default structure; your choice depends on preferred tooling and learning goals. The Install Manual approach suggests trying both in separate projects to understand their workflows.
Install dependencies and explore project structure
After scaffolding, run npm install (or yarn install if you prefer Yarn) to install dependencies. Inspect package.json to understand scripts such as dev, build, and test. In Vite, dev typically runs via npm run dev, while CRA uses npm start. Explore the src folder and the App.jsx component to understand the entry point and how components are composed. This is a great moment to set up a basic component, import it into App, and render it to your root element. The Install Manual guidance highlights the value of naming conventions and modular file organization early on.
Run the development server and verify the app
Start the local server by running the appropriate script (npm run dev for Vite or npm start for CRA). Open the listed local URL (usually http://localhost:5173/ for Vite or http://localhost:3000/ for CRA) in your browser. Confirm the page loads and renders your initial component. Use the browser’s developer tools to inspect the DOM, test component reactivity, and verify CSS is applying as intended. If hot reloading isn’t working, check console logs in both the terminal and browser and ensure extensions aren’t blocking script execution. The Install Manual team recommends keeping the dev server running in a dedicated terminal pane to monitor logs and quickly address warnings.
Authority sources
- React official documentation: https://reactjs.org/docs/getting-started.html
- Node.js documentation: https://nodejs.org/en/docs/
- npm documentation: https://docs.npmjs.com/
Together these sources provide the canonical guidance for installing environments, scaffolding React projects, and managing dependencies. They complement the practical steps in this guide and help you resolve platform-specific quirks as you grow your React skills.
Common pitfalls and next steps
Common issues include version mismatches, missing environment variables, and path configuration problems that prevent commands from running. If you encounter a module not found error, re-run npm install to ensure all dependencies resolve correctly and verify you’re in the project directory. For debugging, ensure your launch configuration points to the correct script and port. The Install Manual team recommends performing regular environment audits—update Node, npm, and VS Code periodically and review extensions to maintain a clean, efficient React workflow. As you advance, consider adding TypeScript, testing setup, and a state management solution to scale your app.
Tools & Materials
- Node.js (LTS version)(Includes npm; use the official installer from nodejs.org)
- Visual Studio Code(Latest stable release with built-in Terminal)
- Integrated Terminal(Accessible in VS Code; use for all commands)
- Web browser (Chrome recommended)(For testing and debugging React apps)
- Internet connection(Needed to download dependencies and scaffolds)
- Git (optional but recommended)(Helpful for version control; not required to run React locally)
- Package manager option (npm is included with Node, Yarn optional)(Choose npm or Yarn based on preference)
- Project folder(Create a dedicated directory for your app)
Steps
Estimated time: 60-90 minutes
- 1
Validate prerequisites
Ensure Node.js and npm are installed, VS Code is up to date, and you have a project directory ready. Open a terminal and run node -v and npm -v to confirm versions. This step prevents later surprises and aligns tooling with the React scaffolding you’ll choose.
Tip: Having a separate workspace folder helps keep projects organized. - 2
Install Node.js and npm
Download the LTS installer from Node.js and complete the setup. After installation, restart your terminal and verify with node -v and npm -v. This ensures you have the runtime and package manager required for React tooling.
Tip: If you previously installed Node via a package manager, ensure it’s updated to a stable LTS release. - 3
Set up VS Code with extensions
Install ESLint, Prettier, and a JSX/CSS IntelliSense extension. In VS Code, open the Extensions view, search for each tool, and install. Configure settings to format on save and to lint on file save for a consistent code style.
Tip: Enable auto-formatting to reduce style drift in collaborative projects. - 4
Choose a React scaffolding option
Decide between Vite and Create React App. Consider Vite for faster starts and modern tooling, CRA for a long-standing, widely adopted setup. This choice shapes commands and the initial project layout.
Tip: If you’re new to React, try both in separate experiments to understand differences. - 5
Create the project
For Vite: npm create vite@latest my-app -- --template react. For CRA: npx create-react-app my-app. Then go into the directory with cd my-app. These commands scaffold a ready-to-run React app.
Tip: Use a descriptive project name to avoid confusion later. - 6
Install dependencies
Navigate to the project folder and run npm install (or yarn install) to fetch all required packages. Review package.json scripts to understand start, build, and test commands.
Tip: If you see missing peer dependencies, resolve them by installing the suggested versions. - 7
Open in VS Code and explore
Open the project in VS Code, inspect the src folder, and locate index.js or main.jsx. Confirm the app renders a basic component and familiarize yourself with the file structure.
Tip: Create a small component to test prop passing and state changes. - 8
Run the development server
Run the appropriate dev command (npm run dev or npm start) and open the local URL. Verify the app renders and hot reload functions as you make changes.
Tip: Keep the terminal visible to monitor build messages and errors.
Got Questions?
What is the difference between Vite and Create React App for starting a React project?
CRA is a mature, conventional runner with a broader ecosystem, but it can be slower to start. Vite provides faster development startup and modern build tooling, which many developers prefer for newer projects. Choose based on your goals and team familiarity.
CRA is traditional and stable, while Vite offers faster startup and modern tooling. Pick the one that matches your project needs.
Is Node.js necessary to install React in VS Code?
Yes. Node.js provides npm and npx, which are used to install React tooling and dependencies. Without Node.js, you cannot scaffold or run a React project locally.
Yes, Node.js is required because it provides npm and npx for package management and tooling.
Which VS Code extensions are essential for React development?
Common extensions include ESLint for linting, Prettier for code formatting, and a JSX/CSS IntelliSense tool. These help maintain code quality and speed up development.
ESLint and Prettier are the essentials, plus a JSX/CSS IntelliSense extension for better editor support.
Can I use npm or Yarn to install React?
Both npm and Yarn can manage dependencies. npm comes bundled with Node.js, while Yarn is an optional alternative. Choose the package manager you’re comfortable with.
Yes, you can use npm or Yarn; npm is bundled with Node.js, Yarn is optional.
How do I run the development server after creating a React app?
Navigate to your project directory and run the start script: npm run dev for Vite or npm start for CRA. Open the URL provided in the terminal to verify the app is live.
Go to your folder, run the start command, and check the local URL in your browser.
What are common issues when installing React in VS Code and how can I fix them?
Common problems include missing dependencies, mismatched Node versions, and path issues. Resolve by reinstalling, updating Node/npm, and checking your PATH. Review console logs for specific errors.
Typical issues are missing packages or wrong paths; update tools and re-run installs, then check logs for specifics.
Watch Video
Main Points
- Install Node.js and VS Code with recommended extensions
- Choose a React scaffold (Vite or CRA) and initialize
- Run the development server to verify setup
- Configure linting and formatting for consistency
- Keep dependencies up to date for compatibility
