📖 Notes
LESSON 1 OF 18
What is React and Why Use It?
The Library That Changed Frontend
React was created by Facebook in 2013. It introduced reusable components and declarative UI. Today it powers Facebook, Instagram, Netflix, Airbnb, and more.
What React Solves
Declarative UI, Reusable Components
🔄
Auto-Updates UI
React re-renders automatically when data changes — no manual DOM updates.
🧩
Reusable Components
Build once, use everywhere — like LEGO blocks for UI.
⚡
Virtual DOM
A fast in-memory copy of the real DOM, used to compute efficient updates.
🌐
Huge Ecosystem
Next.js, React Native, and thousands of libraries build on top of React.
Core Concepts
- Component. A reusable UI piece.
- Props. Data passed INTO a component.
- State. Data that changes INSIDE a component.
- Hook. A function to use React features.
- Virtual DOM. A fast in-memory copy of the real DOM.
Vanilla JS vs React
JSX// Vanilla JS (manual DOM)
document.getElementById("count").textContent = count;
// React (declarative)
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(c => c + 1)}>+1</button>
</div>
);
}
💡
The core shift
With vanilla JS, you manually find and update DOM elements. With React, you just describe what the UI should look like for the current state — React figures out what changed and updates the DOM itself.