> ## Documentation Index
> Fetch the complete documentation index at: https://js.maxbraglia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# What is React
> Understand what React is, why it exists, and how it helps you build web apps
## The problem React solves
In the DOM section, you learned how to build interactive pages with vanilla JavaScript — selecting elements, updating text, creating nodes, attaching event listeners. It works, but it doesn't scale.
```javascript theme={null}
// Vanilla JavaScript — update a user card
function updateUser(user) {
document.querySelector(".name").textContent = user.name;
document.querySelector(".email").textContent = user.email;
document.querySelector(".role").textContent = user.role;
document.querySelector(".avatar").src = user.avatar;
if (user.isAdmin) {
document.querySelector(".badge").classList.remove("hidden");
} else {
document.querySelector(".badge").classList.add("hidden");
}
}
```
For one component, this is manageable. For a page with 50 interactive elements, each affecting each other, it becomes a nightmare. You're manually tracking what changed and telling the browser exactly what to update.
**React flips this.** You describe what the UI should look like for any given state, and React figures out what needs to change in the DOM.
```jsx theme={null}
// React — describe the UI as a function of data
function UserCard({ user }) {
return (
{user.name}
{user.email}
{user.role}
{user.isAdmin && Admin}
);
}
```
When `user` changes, React automatically updates the UI to match the new state. In day-to-day React UI code, you usually stop doing manual DOM updates with `document.querySelector` and `element.textContent`.
## Components: the building blocks
React apps are made of **components** — reusable, self-contained pieces of UI. Each component is a JavaScript function that returns what should appear on screen.
```
Your App
├── Navbar
│ ├── Logo
│ ├── NavLinks
│ └── UserMenu
├── Sidebar
│ ├── FilterPanel
│ └── CategoryList
└── MainContent
├── SearchBar
├── UserList
│ ├── UserCard
│ ├── UserCard
│ └── UserCard
└── Pagination
```
Every piece of your page is a component. Components can contain other components. This composability is what makes React scale — you build small, focused pieces and combine them.
If you've used Python classes, think of components like classes with a `render` method (though React components are actually just functions). Each one manages its own piece of the UI.
## How React updates the page
React uses a **Virtual DOM** — a lightweight copy of the real DOM that lives in memory.
1. Your component renders and returns JSX (a description of the UI)
2. React creates a Virtual DOM from that JSX
3. When state changes, React re-renders the component and creates a new Virtual DOM
4. React **diffs** the old and new Virtual DOMs
5. React applies only the minimal changes to the real DOM
```jsx theme={null}
// When count changes from 3 to 4...
function Counter() {
const [count, setCount] = useState(3);
return (
Counter
{/* Unchanged — React skips this */}
Count: {count}
{/* Changed — React updates only this text */}
{/* Unchanged — React skips this */}
);
}
```
React only touches the single text node that changed — not the entire component. This is why React apps feel fast even with complex UIs.
You don't need to understand the Virtual DOM in detail. The key insight is: **you describe what the UI should look like, React handles updating the DOM efficiently.** That's the whole deal.
## Why React (specifically)
There are other frameworks (Vue, Angular, Svelte), but React dominates because:
* **Massive ecosystem** — solutions exist for almost every problem
* **Job market** — the most in-demand frontend skill
* **Stability** — backed by Meta, used by millions of apps
* **React Native** — the same concepts work for mobile apps
* **Community** — Stack Overflow, tutorials, and libraries everywhere
For connecting a React frontend to your FastAPI backend — which is what this course prepares you for — React is the most practical choice.
## The mental model shift
| Vanilla JavaScript | React |
| ------------------------------------------------ | --------------------------------------------------- |
| **Imperative**: Tell the browser *how* to update | **Declarative**: Tell React *what* the UI should be |
| You manage DOM updates manually | React manages DOM updates for you |
| State scattered across DOM elements | State lives in component variables |
| Event listeners attached manually | Event handlers passed as props |
| Hard to keep UI in sync with data | UI always reflects current state |
The biggest shift: **stop thinking in terms of DOM manipulation and start thinking in terms of data.** Your UI is a function of your data. When the data changes, the UI updates automatically.
## What you need to know
Here's the truth about React that nobody tells beginners: **90% of React development uses just a handful of concepts.**
The essentials you'll learn in this section:
1. **Components & JSX** — building blocks of the UI
2. **Props** — passing data into components
3. **useState** — managing data that changes
4. **useEffect** — fetching data and side effects
5. **Conditional rendering** — showing/hiding UI based on state
6. **List rendering** — displaying arrays of data
7. **Forms** — handling user input
8. **Component composition** — organizing your app
That's it. Master these, and you can build any standard web application. Everything else (context, reducers, suspense, server components) is situational — learn it when you need it.
## What's next?
Let's get a React project running on your machine. In under 2 minutes you'll have a live development server with hot reload.
Create a new React project with Vite