React apps are built from components—reusable, self-contained pieces of UI (like buttons, forms, or entire pages).
Each component manages its own logic and rendering, making large applications easier to organize.
Instead of manually manipulating the DOM, you describe what the UI should look like, and React handles how to update it efficiently when data changes.
React keeps a lightweight copy of the DOM called the virtual DOM. When your data changes:
React computes the minimal changes needed
Updates only the necessary parts of the actual DOM
State: Data managed inside a component; can change over time
Props: Inputs passed to components from their parent; read-only
Introduced in React 16.8, hooks let you use state and lifecycle behavior in function components.
React recommends using Vite for new projects.
In your terminal:
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev
Then open the URL shown (usually http://localhost:5173).
After npm create vite@latest my-app --template react you’ll see something like this:
my-app/
├─ node_modules/ # All npm packages (you usually don't touch this)
├─ public/ # Static assets (images, favicon, etc.)
│ └─ vite.svg
├─ src/ # All your app code lives here
│ ├─ assets/ # Images, icons, etc. used in components
│ ├─ App.jsx # Main component; entry point of your app UI
│ ├─ main.jsx # App bootstrap; mounts App to the DOM
│ └─ index.css # Global styles
├─ package.json # Project config & dependencies
├─ vite.config.js # Vite build config
└─ README.md
Entry point that mounts your app to the DOM.
Usually you don’t touch it much after setup.
Main/root component of your app. This is where your app starts.
You can split this into multiple components (children) as your app grows.
Store images, icons, etc.
Import them in components:
import logo from "./assets/logo.png";
<img src={logo} />
Lets you install, update, and remove JavaScript libraries.
When you install something with npm, it's downloaded from the npm registry.
{
"name": "my-react-app",
"dependencies": {
"react": "^18.2.0"
},
"scripts": {
"dev": "vite",
"build": "vite build"
}
}
Instant updates when you save (HMR = Hot Module Replacement).
npm run dev
Bundles your app for production using Rollup.
npm run build
preview build locally:
npm run preview
ES modules
TypeScript support
JSX/TSX (React)
Code splitting
Environment variables
Small, reusable pieces of UI (buttons, forms, cards)
Located in src/components/ (you can create this folder)
Larger structures like Home.jsx, Dashboard.jsx
Often placed in src/pages/
Local state using useState, useReducer
App-wide state with Context API, Redux, Zustand
Fetch data with fetch or libraries like Axios, TanStack Query
react-router-dom to navigate between pages
CSS, CSS modules, Tailwind, or styled-components
Helper functions, constants, hooks, etc.
props --> [ inputs ]
state --> [ internal ]
render() -> JSX -> VDOM
A component takes props, manages state, and returns JSX, which React turns into the Virtual DOM.
|
v
- find element (getElementById)
- compute new value
- update innerHTML
- update CSS classes
- handle edge cases
- remember previous state
|
v
|
v
- compute new VDOM
- diff old vs new
- update only what changed