How to Create the App
First, choose or create a folder where you want your app to live.
Open your terminal (Command Prompt / CMD on Windows) and run these commands step by step to create & start a React app.
1 Initialize
npm create vite@latest my-app
Creates a new React project using Vite.
Select "React" and then "JavaScript" or "TypeScript".
2 Install
cd my-app
npm install
Installs all required packages and creates the node_modules folder.
3 Launch
npm run dev
Your app is now runs locally at http://localhost:5173
"What do these files do?"
The Brain of the Project (Root Files)
node_modules/
The massive library warehouse. It contains the actual code for React and every other package you download.
npm and any changes will be overwritten automatically.
package.json
The ID Card of your project. It lists your dependencies (libraries your project needs) and scripts (commands like npm run dev).
.gitignore
A list for Git. It tells your project which files or folders to ignore when uploading to GitHub.
For example, node_modules/ is huge, so you should never push it.
Common Entries & Their Purpose:
node_modules/ – All the packages your project uses. Too big to push; Git can re-install them from package.json.
dist/ – Compiled or built files. Usually generated automatically, no need to track.
.env – Stores secrets like API keys. Never push to GitHub!
*.log – Log files generated while running the project. Not needed in Git.
Tip: Add these before your first Git commit to avoid uploading unnecessary or sensitive files.
What the Browser Sees (src & public)
public/
Contains static files that the browser can access directly. This includes images, icons, and other assets like the favicon.
Critical File:
index.html
The skeleton of your app. React injects your components here, making the page interactive.
The Execution Flow (You Must Understand This)
1. The browser loads index.html from the public folder.
2. index.html contains a root <div> where React will render the app.
3. main.jsx runs and creates the React root using that <div>.
4. Inside main.jsx, App.jsx is imported.
5. main.jsx renders the <App /> component into the root.
6. App.jsx executes and renders all child components.
7. The React app is now live and interactive in the browser!
src/
This is your home. 99% of your work happens here. It's where you write your React components and structure your app.
main.jsx: The entry point of your app. It connects React to the HTML root element and starts the rendering process.
App.jsx: The main component that wraps your entire site. You can think of it as the “parent” that renders all your other components inside it.
assets/: A folder for static files like images, logos, and icons. You can import these into your components to display them on the site.