React Lesson 1: What is React?

React is a JavaScript library for building user interfaces. Created by Facebook in 2013, it powers some of the world’s largest applications including Facebook, Instagram, Airbnb, and Netflix.

The Core Idea: Components

// React splits your UI into reusable "components"
// A component is just a JavaScript function that returns HTML-like code

function Button() {
  return <button>Click me!</button>;
}

function Header() {
  return (
    <header>
      <h1>My Website</h1>
      <Button />
    </header>
  );
}

Why React?

• Component-based: Build once, reuse everywhere
• Reactive: UI updates automatically when data changes
• Virtual DOM: React only updates what changed (fast!)
• Huge ecosystem: Next.js, React Native, thousands of libraries
• Job market: Most in-demand frontend framework

Traditional JS vs React

// Traditional JS — manual DOM manipulation
document.getElementById("count").textContent = count;
document.getElementById("btn").addEventListener("click", () => {
  count++;
  document.getElementById("count").textContent = count;
});

// React — declare WHAT you want, React handles HOW
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}