Create a React App using Vite and npm (Node Package Manager)
We'll go step-by-step:
Step 1: Install [Link]
What is [Link]?
It lets your computer run JavaScript outside the browser. It also comes with `npm` — a tool to install packages (like React, Vite,
etc.).
How to install:
1. Go to: [[Link]
2. Click the "LTS (Recommended)" version.
*(LTS = Long Term Support, more stable)*
3. Download and install it just like any other app.
4. After installing, check it's working:
Open your terminal (Command Prompt or PowerShell or Terminal):
node -v
npm -v
Step 2: Open a folder where you want your React project
You can use:
File Explorer and right-click > “Open in Terminal”
OR open VS Code and open a folder from there
Let's say you want to create a project named `my-react-app`.
Step 3: Create a React app using Vite
Now in terminal, run:
npm create vite@latest
> `create-vite` is a special tool to quickly set up modern React apps.
It will ask you questions:
1. Project name:
→ Type: `my-react-app` (or any name you want)
2. Select a framework:
→ Use arrow keys and choose: `React`
3. Select a variant:
→ Choose: `JavaScript` (or `TypeScript` if you know it)
It will create a folder `my-react-app` with all the basic setup.
Step 4: Go inside your project folder
cd my-react-app
Step 5: Install dependencies (React, Vite, etc.)
npm install
> This reads the `[Link]` file and installs all needed packages into a `node_modules` folder.
Step 6: Start the development server
npm run dev
You’ll see something like:
VITE vX.X.X ready in Xs
➜ Local: [Link]
Open your browser and visit `[Link] — your React app is live!
Quick Breakdown of Files
Inside the `my-react-app` folder, you'll see:
File/Folder What it does
`[Link]` The single HTML page your app loads into
`[Link]` The main JS file that starts React
`[Link]` Your main App component
`[Link]` Vite's settings
`[Link]` Project info + dependencies
`node_modules/` All the installed libraries
`public/` For static files (images, etc.)
`src/` Your app’s source code lives here
Short Summary of Commands
Command Meaning
`npm create vite@latest` Create a new Vite app
`cd folder-name` Enter the project folder
`npm install` Install all packages
`npm run dev` Start local development server
`Ctrl + C` Stop the server
React File Structure
1. Road-map of the folders you’ll see
my-react-app/
├─ node_modules/ ← 3rd-party code (huge, auto-generated)
├─ public/ ← Raw static files (copied as-is)
│ └─ [Link]
├─ src/ ← **Your** source code (JSX, CSS, images…)
│ ├─ [Link] ← Browser’s JS entry-point
│ ├─ [Link]
│ └─ assets/
├─ [Link] ← Browser’s HTML entry-point
├─ [Link] ← Project metadata + dependency list
├─ [Link] ← (optional) Vite tweaks
└─ .gitignore ← Tells Git what *not* to save
2. Execution sequence during **development** (`npm run dev`)
> Key idea: Vite runs a tiny web server that transforms code *on demand* and feeds it to the browser as ES modules.
(Flow chart: server → [Link] → [Link] → App → components)
> Hot-reload magic: When you edit `[Link]`, Vite only re-sends *that one module* to the browser. The page refreshes instantly
without losing state.
3. Execution sequence during "production build (`npm run build`)
1. Vite scans every file starting at `[Link]`.
2. It follows import chains inside `src/`, bundles them with Rollup, minifies code, tree-shakes unused functions, hashes filenames
for cache-busting.
3. It copies the `public/` folder verbatim to `dist/`.
4. Output: a `dist/` folder (static HTML, one or two small JS/CSS bundles, images).
You can deploy that folder to Netlify, Vercel, S3, etc.
4. Deep dive on each core folder
Why two asset buckets (`src` vs `public`)?
5. What exactly is inside **`node_modules/`** and why *never* push it to Git?
1. What’s in there?
* Every dependency declared in `[Link]` (`react`, `react-dom`, `vite`, etc.)
* Their dependencies, recursively.
* Build tools, transpilers, polyfills, even C binaries on some OSes.
2. Why ignore it?
* Massive size (hundreds of MBs, 50k+ files) → bloats repo, slows clone.
* Platform-specific binaries**—committing them breaks cross-OS teams.
* Deterministic installs are guaranteed by `[Link]`; `npm install` can regenerate `node_modules/` perfectly on any
machine or CI server.
* Updates are frequent; you don’t want merge conflicts on thousands of auto-generated files.
`.gitignore` therefore contains:
node_modules/
dist/
So Git stores only source (what humans change), never *build artifacts*.
6. Recap: life of a React byte
1. You edit `src/[Link]`.
2. Vite sees the save → converts JSX to JS → serves it.
3. Browser loads `/[Link]` → `/src/[Link]` → hot-swaps the changed module.
4. React re-renders virtual DOM inside `<div id="root">`.
5. Production: `npm run build` packs the above into `dist/`, minus dev-only code.
6. Deployment: upload `dist/` anywhere that can serve static files.
[Link]
1. `[Link]` — The **Brain & ID card** of your project
What is it?
A file that tells:
* What your project is called
* What dependencies (packages/libraries) it uses
* What scripts you can run
* What version of the app you're working on
> Think of `[Link]` like the **resume of your project** — showing what it is, what it uses, and what it can do.
Example:
json
{
"name": "my-react-app",
"version": "0.0.1",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"vite": "^5.0.0"
}
}
What are dependencies?
Type Meaning Example
`"dependencies"` Packages required to run your app in the browser `react`, `react-dom`
`"devDependencies"` Packages needed only while developing (not needed by browser) `vite`, `eslint`, `prettier`
What do `scripts` do?
They define commands you can run in terminal.
For example:
npm run dev
➡️Runs: `vite`
➡️Starts dev server on `localhost:5173`
npm run build
➡️Runs: `vite build`
➡️Prepares your app for production inside `/dist`
2. `[Link]` — Vite’s personal settings file
What is it?
This file lets you **customize how Vite behaves** — during development and when building your app.
> Think of it like the **settings panel** of Vite. You don’t always need it, but it becomes helpful as your app grows.
Example:
js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3000
},
resolve: {
alias: {
'@': '/src'
}
}
})
What does it do?
Feature Use
`plugins` Enable React support, add more Vite plugins
`[Link]` Run on a custom port like `localhost:3000`
`[Link]` Create shortcuts like `@/components/[Link]` instead of long paths
`build` Customize output folder, filenames, minify options etc.
You use this file "only if you need extra settings." For small projects, you can skip it.
3. `.[Link]` or `[Link]` — The Code Quality Checker
What is ESLint?
ESLint is a tool that checks your code and tells you when something is wrong, like:
* You forgot a semicolon
* You declared a variable but didn’t use it
* You used `==` instead of `===`
> It’s like a grammar checker for your JavaScript code ✍️
Example:
js
export default {
env: {
browser: true,
es2021: true
},
extends: ['eslint:recommended', 'plugin:react/recommended'],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
'no-unused-vars': 'warn',
'react/react-in-jsx-scope': 'off'
}
}
What does it do?
Feature Use
`env` What kind of environment to expect (browser, Node, etc.)
`extends` Use rules from presets (like React recommended rules)
`rules` Your own custom rules to enforce or relax
You run ESLint via CLI or automatically in VS Code.
It doesn’t change code — just warns or errors out.
4. `.gitignore` — The Secret Keeper
What is it
This file tells Git: "Don"t track these files or folders."
> Think of it as a **filter** that blocks unimportant or auto-generated stuff from being pushed to GitHub.
Example:
node_modules/
dist/
.env
Why do we ignore these?
File/folder Why ignore it?
`node_modules/` Too huge (1000s of files), always re-generated by `npm install`
`dist/` Build output, not source code — can be rebuilt any time
`.env` Contains secret keys, private info
Git will never push anything listed in `.gitignore`.
This keeps your repo clean, light, and secure.
