Introduction to React

What React is

React is a JavaScript library for building user interfaces. It was created at Facebook (now Meta) and released as open source in 2013. It is a library rather than a framework: it handles the view layer and leaves routing, data fetching, and state management to you or to other packages.

The core idea is small. You write functions that take data and return a description of what the screen should look like. React takes that description and does the work of making the real page match it.

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

That function is a component. A React application is a tree of components, and the whole framework is built on repeating this one pattern at larger and larger scales.

Declarative instead of imperative

Without a library, updating a page means describing every step of the change yourself:

const count = 3;
const el = document.getElementById("count");
el.textContent = count;
if (count > 0) {
  el.classList.add("has-items");
} else {
  el.classList.remove("has-items");
}

This is imperative code. You keep track of what the page currently shows, work out the difference, and apply it by hand. As a page grows, most bugs come from that bookkeeping getting out of sync.

React is declarative. You describe the result you want for the current data, and React works out the steps:

function Cart({ count }) {
  return (
    <p className={count > 0 ? "has-items" : ""}>{count}</p>
  );
}

When count changes, React re-runs the function, compares the new description to the previous one, and updates only the parts of the real page that actually changed.

The virtual DOM

The description your components return is not real HTML. It is a lightweight tree of plain JavaScript objects, usually called the virtual DOM. Comparing two of those trees is fast; touching the real DOM is slow. React does the cheap work first and the expensive work only where it is needed.

You rarely interact with this directly. It matters because it explains React's central rule: you change data, never the page. The page is a result, not a thing you edit.

What you need before starting

• HTML and CSS — elements, attributes, classes.
• JavaScript fundamentals — variables, functions, objects, arrays.
• Modern JavaScript in particular: arrow functions, template literals, destructuring, spread syntax, and array methods such as map and filter.
• ES modules — import and export.

How this guide is organised

Chapters 2 to 5 cover the building blocks: setting up, JSX, components, and props. Chapters 6 to 10 cover interactivity: state, events, conditions, lists, and forms. Chapters 11 to 14 cover hooks in depth. Each chapter builds on the one before it, so reading in order is the fastest route through.

Every example uses function components and hooks, which is how React is written today. Class components still work and you will meet them in older codebases, but you do not need them to learn React.