What is React?

React is a JavaScript library for building user interfaces. Instead of writing step-by-step DOM commands (“find this node, add this class, insert that child”), you describe what the UI should look like for a given state. React figures out what to change.

The Component Idea

A component is a function that returns markup.

function Hello() {
  return <h1>Hello, world!</h1>;
}

You compose bigger UIs by nesting components. Each one is a small, reusable piece — a button, a card, a whole page.

function App() {
  return (
    <main>
      <Hello />
      <Hello />
    </main>
  );
}

Declarative, Not Imperative

The old DOM way:

const h1 = document.createElement("h1");
h1.textContent = "Hello, world!";
document.body.append(h1);

Step by step — do this, then this. That’s imperative.

The React way:

function Hello() {
  return <h1>Hello, world!</h1>;
}

You describe what the UI is. React handles the how. That’s declarative, and it’s the whole point.

State Drives Everything

When data changes, you tell React with a state update. React re-renders the affected components and updates the DOM for you.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicks: {count}
    </button>
  );
}

Click the button → state changes → React updates the DOM. You never wrote button.textContent = ....

Why React Won

Up Next

You’ll set up a real React project in 60 seconds with Vite, or use an online sandbox if you’d rather not install anything.