ReactNot Started

What is React?

The core ideas behind React — component model, virtual DOM, declarative UI

Knowledge Debt detected

You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.

DOM Basics0%

Explanation

React is a JavaScript library for building user interfaces. It was created by Facebook (Meta) and is the most widely used UI library.

Core idea: Declarative UI

Instead of telling the browser *how* to change the DOM step by step (imperative), you describe *what* the UI should look like for a given state, and React figures out the minimal DOM changes needed.

javascript

// Imperative (vanilla JS)
const li = document.createElement('li');
li.textContent = item;
ul.appendChild(li);

// Declarative (React) <ul>{items.map(item => <li key={item}>{item}</li>)}</ul> ```

Component model

UIs are split into components — reusable, self-contained pieces that manage their own appearance. Components compose into trees.

Virtual DOM

React keeps a lightweight copy (virtual DOM) of the actual DOM. When state changes, React re-renders the component to a new virtual DOM, diffs it against the old one, and applies only the necessary real DOM changes (reconciliation).

Unidirectional data flow

Data flows down from parent to child via props. Changes bubble up through callbacks. This makes UIs predictable and easier to debug.

When to use React:

SPAs (Single Page Applications)
Complex interactive UIs with lots of state
Large teams — components create clear ownership boundaries

Examples

Component as a building block

Components are reusable — the same WelcomeBanner with different props

// Each component is a function that returns UI
function WelcomeBanner({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

function App() {
  return (
    <div>
      <WelcomeBanner name="Alice" />
      <WelcomeBanner name="Bob" />
    </div>
  );
}

Declarative vs imperative mental model

You describe the desired state; React handles the DOM updates

// You say WHAT you want
function TrafficLight({ color }) {
  return (
    <div className="light">
      <Circle lit={color === 'red'}    color="red"    />
      <Circle lit={color === 'yellow'} color="yellow" />
      <Circle lit={color === 'green'}  color="green"  />
    </div>
  );
}
// React handles WHICH DOM nodes to update

Next in React

JSX

Continue

Unlocks

JSX