React Setup with Vite

⚛️ React 18+ 🟢 Chapter 3 of 39 📂 Phase 02: Setup and First App 📅 2026 Edition

📌 Covered in this chapter: Installing Node.js · npm · Vite · Creating a Project · Folder Structure · Dependencies · Dev Server · Production Build

Before writing a single component, you need a working local environment. This chapter walks through installing Node.js, understanding what Vite does, and creating your very first React project from the command line.

1Installing Node.js and Understanding npm

React itself is just a JavaScript library, but building and running a modern React project requires Node.js — a JavaScript runtime that lets tools run outside the browser. Installing Node.js also installs npm (Node Package Manager), which downloads and manages the libraries ("packages") your project depends on. Verify your installation:

node -v
npm -v

2Creating a Project with Vite

Vite (pronounced "veet") is the current standard tool for scaffolding and running React projects — it starts a development server almost instantly and bundles your code efficiently for production.

💻 Example 1: Creating and Running a Vite Project

Terminal

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

🔍 Command Breakdown:

npm create vite@latest: downloads and runs Vite's project generator
-- --template react: tells Vite to scaffold a React (not Vue/Svelte) project
npm install: downloads all required dependencies into a node_modules folder
npm run dev: starts a local development server, usually at http://localhost:5173

3Project Folder Structure

my-react-app/ ├── node_modules/ (downloaded dependencies) ├── public/ (static files, favicon etc.) ├── src/ │ ├── App.jsx (root component) │ ├── main.jsx (entry point) │ └── index.css ├── index.html ├── package.json (project config & dependency list) └── vite.config.js

For production, npm run build bundles and optimizes everything in src/ into a small, fast dist/ folder ready to deploy to a real web server.

⚠️ Forgetting to Run npm install Before npm run dev

A freshly cloned or created project's node_modules folder is either missing or empty until you run npm install. Trying npm run dev first produces confusing "module not found" errors — always install dependencies first.

💻 Hands-on Interactive Practice Challenge

Create a new Vite + React project named practice-app, install its dependencies, and start the dev server to confirm the default welcome page loads.

React Practice Challenge ▶ Run in Compiler

npm create vite@latest practice-app -- --template react
cd practice-app
npm install
npm run dev

Run This Challenge in Online JS IDE →

❓ Frequently Asked Questions (FAQ)

Q Do I have to use Vite for React?

No — Create React App was the older standard tool, but it's no longer actively recommended. Vite is now the standard for new projects due to its much faster startup and build times.

Q What port does the Vite dev server use?

By default, Vite runs on http://localhost:5173, though it will automatically pick the next available port if 5173 is already in use.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on React 18+ · Last updated August 2026