The Setup

Updated Aug 2, 2026

1. Node.js

JavaScript used to only run in the browser. Node.js lets it run on your machine. React needs it to build and run your project.

Install from nodejs.org (download LTS).

Verify:

bash

node -v
npm -v

Both print a version number? You're ready.

Task	Command
Check Node version	node -v
Check npm version	npm -v
Where to download	nodejs.org (LTS)

2. Vite

Vite creates your React project, runs a local server, and refreshes the browser instantly when you change code. Bundling, serving, reloading: one tool.

Create a project:

bash

npm create vite@latest

Three questions:

Project name → type your name
Framework → select React
Variant → select JavaScript

Install and run:

bash

cd your-project-name
npm install
npm run dev

Browser opens. You're in.

Task	Command
Create project	npm create vite@latest
Enter project folder	cd project-name
Install dependencies	npm install
Start dev server	npm run dev

3. Files & Folders

A new Vite project creates 15+ files. Touching the wrong one breaks everything. This is your map.

File / Folder	What it does
node_modules/	All installed packages. Managed by npm.
package-lock.json	Locks exact package versions. Auto-generated.
vite.config.js	Vite's configuration. Defaults work fine.

Everything inside src/. This is your workspace.

File	Role
index.html	The single HTML file. React injects your entire app into one <div>.
src/main.jsx	The entry point. React starts here.
src/App.jsx	Your first component. This is where you write code.

plain text

index.html → loads main.jsx → renders App.jsx

One HTML file loads one entry point that renders one component. That's it.

Zone	Files	Rule
Never touch	node_modules/, package-lock.json, vite.config.js	Leave them alone
Your workspace	Everything in src/	All your code goes here
Entry chain	index.html → main.jsx → App.jsx	This is how React loads

4. Clean Up

The default Vite template comes with logos, CSS, and demo code. None of it is yours. Strip it out.

Delete the contents of src/App.css and src/index.css
Remove the logo import from App.jsx
Clear App.jsx down to:

jsx

javascript

function App() {
  return <h1>Hello World</h1>;
}

export default App;

Blank canvas. Ready.

Task	What to do
Clear CSS files	Empty App.css and index.css
Remove logo	Delete the import from App.jsx
Reset App.jsx	Single <h1> inside the function

Setup Cheat Sheet

bash

node -v                      # verify Node
npm -v                       # verify npm
npm create vite@latest       # create project
cd project-name
npm install                  # install packages
npm run dev                  # start dev server

plain text

your-project/
├── node_modules/        ← never touch
├── public/
├── src/
│   ├── App.jsx          ← your code goes here
│   ├── main.jsx         ← entry point
│   ├── App.css
│   └── index.css
├── index.html           ← single HTML file
├── package.json
├── package-lock.json    ← never touch
└── vite.config.js       ← never touch

The Setup in 4 steps:

Task

Command

Check Node version

node -v

Check npm version

npm -v

Where to download

nodejs.org (LTS)

Task

Command

Create project

npm create vite@latest

Enter project folder

cd project-name

Install dependencies

npm install

Start dev server

npm run dev

File / Folder

What it does

node_modules/

All installed packages. Managed by npm.

package-lock.json

Locks exact package versions. Auto-generated.

vite.config.js

Vite's configuration. Defaults work fine.

File

Role

index.html

The single HTML file. React injects your entire app into one <div>.

src/main.jsx

The entry point. React starts here.

src/App.jsx

Your first component. This is where you write code.

Zone

Files

Rule

Never touch

node_modules/, package-lock.json, vite.config.js

Leave them alone

Your workspace

Everything in src/

All your code goes here

Entry chain

index.html → main.jsx → App.jsx

This is how React loads

Task

What to do

Clear CSS files

Empty App.css and index.css

Remove logo

Delete the import from App.jsx

Reset App.jsx

Single <h1> inside the function

node -v # verify Node npm -v # verify npm npm create vite@latest # create project cd project-name npm install # install packages npm run dev # start dev server

your-project/ ├── node_modules/ ← never touch ├── public/ ├── src/ │ ├── App.jsx ← your code goes here │ ├── main.jsx ← entry point │ ├── App.css │ └── index.css ├── index.html ← single HTML file ├── package.json ├── package-lock.json ← never touch └── vite.config.js ← never touch