NPM (Node Package Manager)
Manages JavaScript packages used in web development.
Installs, updates, and removes libraries like React, Express, etc.
Comes with [Link] and helps run project scripts easily.
Command Purpose
Create a new project
npm init
([Link])
npm install <package> Install a package
npm uninstall <package> Remove a package
npm update Update all packages
npm run <script> Run custom scripts
Introduction to Build Tools
CR VS VITE
Feature CRA Vite
Build Tool Webpack ESBuild + Rollup
Speed Slower Much faster
Config Access Hidden Easy
Popularity (Now) Decreasing Increasing rapidly
Best For Beginners Modern React projects
Create A React Project
npm create vite@latest
Select a framework => react
Select a variant =>javascript
Use rolldown -vite => yes
Install with npm and start now? => no
Project Folder Structure
node_modules :
Contains all installed npm packages (React, Vite, etc.)
Automatically created after running npm install
⚠️You should never edit this folder manually.
public/
Used to store static files (images, icons, etc.)
Files here are served directly — no processing by Vite.
src/
📁 src/assets/
• Used for images, logos, or other static files imported inside React
components.
📄 [Link]
• Main React component that renders the app content.
• Similar to the “root component.”
[Link]
• Styles specific to the [Link] file.
📄 [Link]
• Entry point of the app.
• It connects React with the HTML file using [Link].
[Link]
• Styles specific to the [Link] file.
📄 [Link]
• Entry point of the app.
• It connects React with the HTML file using [Link].
[Link]
The main HTML file served by Vite.
Has a single <div id="root"></div> where your React app mounts.
[Link]
Lists project info, dependencies, and scripts.
.gitignore
Tells Git which files/folders to ignore (like node_modules).
📘 8. [Link]
Basic instructions about the project.
Folder/File Description
node_modules/ Contains installed dependencies
public/ Static public assets
src/ Your main React code
[Link] Root React component
[Link] App entry point
[Link] Root HTML file
[Link] Vite settings
[Link] Project configuration
.gitignore Git ignore list
