What is React?
React is a declarative, component-based JavaScript library for building user interfaces with predictable state.
Mental Model
"The Chef: You give the restaurant kitchen an order recipe (state), and the chef prepares the exact dish (DOM) automatically."
Interactive Engine Simulation
The UI is a deterministic reflection of state. Change state, and the UI follows.
Executable Code Snippet
1function App() {
2 const [status, setStatus] = useState("Exploring");
3
4 return (
5 <div className="p-4 bg-zinc-900 rounded-lg text-white">
6 <p>Status: {status}</p>
7 <button
8 onClick={() => setStatus("Mastering")}
9 className="mt-2 px-4 py-2 bg-react text-black rounded"
10 >
11 Level Up
12 </button>
13 </div>
14 );
15}- 01.Component re-renders are triggered by state or prop changes.
- 02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
- 03.Automatic batching optimizes multiple state updates into a single render cycle.
01. The Architectural Shift
React isn't just a library; it's a paradigm shift in how we handle **entropy** in user interfaces. Before React, we manually manipulated the DOM (Imperative). If a user logged in, we found the 'Login' button and hid it. In React, we simply say "the user is logged in" (Declarative), and the UI re-calculates itself to match that reality.
02. UI as a Function
This is the core formula of React. Your UI is never "stale" because it is a direct projection of your application state. When state changes, the function runs again, and a new UI is generated.
Why use React?
Predictability
One-way data flow makes debugging a deterministic process.
Portability
Learn once, write anywhere (React Native, React Three Fiber, Ink).
Scalability
Component-based architecture allows thousands of engineers to work on one codebase.