Quick answer

Install React JS in VS Code in 10 minutes:

1. Install Node.js LTS from nodejs.org (node -v to verify)
2. Run Vite scaffold: npm create vite@latest my-app -- --template react
3. Install & start: cd my-app → npm install → npm run dev
4. Open in VS Code: code .
5. Add extensions: ES7+ React Snippets, Prettier, ESLint
6. Open localhost:5173 in your browser

Your React dev environment is live and hot-reloading. Full step-by-step guide below.

Why not Create React App anymore?

Create React App (CRA) was the standard way to start React projects for years. It’s now deprecated and no longer recommended by the React team as of February 2025.

Why the change?

• CRA breaks on React 19. Peer dependency conflicts mean new projects won’t even install.
• Zero maintenance. No security patches, no dependency updates, no bug fixes.
• Slow dev server. CRA’s Webpack-based dev server takes 30–60 seconds to start. Vite starts in under 2 seconds.
• Unsafe dependency tree. An unmaintained dependency stack accumulates CVEs monthly. The March 2026 Axios supply-chain attack proved this real-world risk.

The React team now recommends Vite for build-tool setups and frameworks like Next.js for full-stack apps. This guide uses Vite it’s what the industry standard now.

Prerequisites

• A computer with Windows, macOS, or Linux (all work identically)
• Internet connection (to download Node and packages)
• A code editor (VS Code is free and the most popular)
• ~5–10 minutes

Step 1: Install Node.js and npm

React projects run on Node.js, a JavaScript runtime. npm (Node Package Manager) comes with it.

For Windows

1. Go to nodejs.org
2. Click the LTS button (long-term support the stable version)
3. Run the installer
4. Check the box for “Add to PATH” (important for terminal access)
5. Click through with defaults

For macOS

1. Go to nodejs.org
2. Download the LTS version for macOS (Intel or Apple Silicon, depending on your Mac)
3. Run the .pkg installer and follow prompts

For Linux

If you’re on Linux, use your package manager:

# Ubuntu/Debian
sudo apt update && sudo apt install nodejs npm

# Fedora
sudo dnf install nodejs npm

# macOS (Homebrew)
brew install node

Verify the install

Open your terminal (or VS Code’s built-in terminal with Ctrl + `) and run:

node -v
npm -v

You should see version numbers. Aim for Node 18 LTS or newer older versions won’t work with Vite.

Optional: Use a Node version manager. If you work on multiple projects with different Node versions, install nvm (macOS/Linux) or nvm-windows (Windows) to switch versions per project. Not necessary for starting out, but saves headaches later.

Step 2: Install Visual Studio Code

If you already have VS Code, skip to Step 3.

1. Go to code.visualstudio.com
2. Download for your OS
3. Run the installer with default settings
4. (Windows only) Check “Add to PATH” if offered

Step 3: Create a React app with Vite

This is where the magic happens. A single command scaffolds a full React project.

Open your terminal and navigate to where you keep projects:

cd Desktop
# or: cd Documents
# or anywhere you want the project

Run this command (replace my-react-app with your project name):

npm create vite@latest my-react-app -- --template react

Vite will ask a couple of quick questions. When it asks about variant, choose:

• JavaScript (if learning React for the first time)
• TypeScript (if you want static typing and better IDE hints)
• TypeScript + SWC (if working on a larger project SWC compiles ~20× faster)

Then:

cd my-react-app
npm install

This downloads React, ReactDOM, and all build tools into a node_modules folder. It takes ~30 seconds depending on your internet.

What just happened?

Vite created this folder structure:

my-react-app/
├── node_modules/          ← all dependencies (don't touch)
├── public/                ← static files (images, etc.)
├── src/                   ← YOUR code goes here
│   ├── App.jsx           ← main component
│   ├── App.css
│   ├── main.jsx          ← entry point
│   └── index.css
├── index.html            ← the single HTML page (note: root, not public/)
├── package.json          ← project config & scripts
├── vite.config.js        ← Vite configuration
└── .gitignore

Key differences from the old CRA setup:

• index.html is in the root, not hidden in public/
• Component files must end in .jsx (not .js). Vite requires this.
• No react-scripts Vite is lighter and faster

Step 4: Start the development server

Still in the my-react-app folder, run:

npm run dev

Vite starts instantly. You’ll see output like:

VITE v5.1.0 ready in 156 ms

➜ Local:   http://localhost:5173/

Copy and paste that URL into your browser (or Ctrl-click it). Your React app appears live, and it updates instantly as you edit code.

Step 5: Open the project in VS Code

With the dev server still running, open a new terminal window or tab and run:

code .

VS Code opens with your project loaded. You now have:

• Left sidebar: file tree of your project
• Center: code editor
• Terminal at bottom (if you opened it): dev server running, ready to see any errors

Edit src/App.jsx change the text or add a <p> tag. Save it. Watch the browser update instantly. That’s hot module replacement (HMR) the core reason Vite is so fast to work with.

Step 6: Add VS Code extensions for React

Extensions make React development faster. Open the Extensions panel (Ctrl + Shift + X), search for each, and click Install:

Extension	What it does
ES7+ React/Redux/React-Native snippets	Type rafce → get a full React component skeleton in one keystroke. Huge timesaver.
Prettier	Auto-formats your code on save. Stops fights over indentation.
ESLint	Flags bugs and bad patterns as you type. Prevents issues before they happen.
Auto Rename Tag	Edit <div> and </div> syncs automatically.
Auto Import	Suggests and inserts imports as you type.

Configure Prettier to format on save:

1. Open Settings (Ctrl + ,)
2. Search for “format on save”
3. Check the box for Editor: Format On Save
4. Search for “default formatter” and select Prettier

Step 7: Install React Developer Tools

This extension lets you inspect your React components inside the browser see props, state, and re-renders in real time.

Follow the 2-minute setup in our guide on React developer tools setup. Once installed, open your browser’s DevTools (F12) and you’ll see a new Components tab alongside Console and Elements.

Comparison: Vite vs Create React App vs Next.js

If you’re wondering whether this is the right choice:

Aspect	Vite	Create React App	Next.js
Setup time	~10s	~30s	~15s
Dev server startup	<500ms	30–60s	<2s
Maintenance	Active (2025)	Deprecated (2025)	Active
Repo 19 ready?	✓	✗ Breaking	✓
Best for	Learning, SPA	~~Legacy projects~~	Production apps, SSR, API routes
Learning curve	Low	Low	Medium

Use Vite if: You’re learning React or building a single-page app (SPA).
Use Next.js if: You need server-side rendering, API routes, or a full-stack framework.
Never use CRA: It’s deprecated and unsafe.

Troubleshooting: Common first-time errors

Error: “Command not found: npm”

Cause: Node.js didn’t install correctly or PATH wasn’t updated.

Fix:

• Restart your terminal completely (close and reopen)
• On Windows, reinstall Node.js and check “Add to PATH” during install
• Run node -v again to confirm

Error: “Port 5173 already in use”

Cause: Another app (or another Vite server) is using that port.

Fix:

npm run dev -- --port 3000

Or stop the other app and try again.

Error: “Cannot find module ‘react'”

Cause: npm install didn’t finish or failed.

Fix:

rm -rf node_modules package-lock.json
npm install

React component renders blank

The browser is showing an empty page even though there are no errors. Work through the debugging checklist in our guide on debugging React rendering covers the nine most common causes.

What to do next

Your setup is done. Here’s the natural learning path:

Build one component

Edit src/App.jsx, return a <div> with some text. Understand how JSX works. Read about what is npm in React projects to understand what’s happening behind the scenes.

Add multiple pages

Use React Router to create routes build a home page, about page, and a dynamic detail page. Routing is your first real feature.

Render lists of data

Learn how to use for loop in React React doesn’t use traditional for-loops. You use .map() to turn arrays into lists of components. This trips up most beginners, so read that guide if you get stuck.

Add search and filtering

Once you have a list, let users filter data in React combine a controlled input with .filter() for live, instant search.

Handle file uploads

When you need forms, handle file uploads in React covers file inputs, previews, and FormData.

Connect to a backend

React only renders the UI. To fetch real data:

• Set up a React front-end with a PHP backend if your server uses PHP
• You’ll immediately hit CORS errors enable CORS in React explains why and how to fix it

Common React setup errors

Hit a cryptic error message like sh: react-scripts: command not found? That’s usually from old CRA tutorials. See common React setup errors for quick fixes.

Level up

Once you have a working app:

• Write better React: Follow React best practices for clean, maintainable code
• Make it fast: Use performance optimization techniques like memoization and code-splitting to keep your app snappy as it grows

FAQs

Is Vite only for React?

No. Vite works with Vue, Svelte, Angular, and vanilla JavaScript. But its React template is the easiest to start with.

What’s the difference between Node and npm?

Node.js is a JavaScript runtime it lets you run JavaScript outside the browser. npm is Node’s package manager it installs and manages libraries (React, Webpack, etc.). They come together.

Do I need TypeScript?

Not to start. Use plain JavaScript (react template) to learn. After a few projects, TypeScript (react-ts template) adds type safety that catches bugs early.

Why doesn’t my code auto-format?

Prettier isn’t running. Check that you installed it (Ctrl + Shift + X, search “Prettier”), then enable “Format on Save” in VS Code settings (Ctrl + ,, search “format on save”).

Can I still use Create React App?

Technically, CRA still runs, but it’s unmaintained, breaks on React 19, and is a security liability. Don’t use it for new projects.

How do I deploy this?

Vite builds a production-ready dist/ folder. Upload it to Netlify (free, takes 30 seconds), Vercel (free, optimized for React), or a traditional hosting provider. See your hosting provider’s React deployment docs.

What if I want to add TypeScript or CSS-in-JS later?

Vite’s setup is flexible. You can add these tools later without ejecting or rebuilding from scratch one of its key advantages over CRA.

Can I use Vite with Next.js?

No. Next.js has its own build setup. Use Vite for SPAs, Next.js for server-rendered or full-stack React apps.

What’s the difference between .jsx and .js?

Vite requires .jsx for files containing JSX (React elements like <App />). Plain .js files without JSX work too, but Vite won’t compile JSX inside them. It’s a small convention that prevents errors.

You’re ready

That’s the complete modern React + VS Code setup. You have:

✓ Node.js and npm installed
✓ Vite scaffolding a new React project
✓ A dev server running with instant hot reload
✓ VS Code configured with React-focused extensions
✓ React DevTools in your browser

Next, start with one of the guides in the “What to do next” section above. Build one small feature a list, a form, a route before diving deep. You’ll understand how React works by building, not by reading.

Hiring React developers?

At Sourcebae, we staff vetted React engineers who already know this stack. If you’re scaling a React team and need experienced developers fast without the 2-month hiring cycle get in touch. We’ve deployed pre-vetted React engineers to 200+ teams in the past year.

Last updated: January 2026. Information current as of Vite 5.1, React 19, Node 20 LTS.