Learn React

An Introduction to React

React is a JavaScript library for building user interfaces out of small, reusable pieces called components.

Meta (then Facebook) created React and released it as open source in 2013. Today it is one of the most widely used tools for building websites and apps. You describe what the screen should look like for a given set of data, and React updates the page when that data changes.

Why use React?

Components

You build the interface from small, self-contained pieces, such as a button, a card or a menu, and combine them into whole pages.

Declarative

You describe what the UI should look like for each state. React works out the changes it needs to make to the page.

Just JavaScript

You write loops, conditions and data handling in ordinary JavaScript, with no separate template language to learn.

Huge ecosystem

React has a large community, plenty of libraries and good documentation, and skills carry over to mobile apps through React Native.

Library or framework?

People often call React a framework, but strictly it is a library. It handles only the view layer, meaning what appears on screen and how it responds to interaction. Routing, data fetching and building for production come from other tools, or from a full framework built on React such as Next.js or React Router.

How it works, in one example

Here is a complete React component. It is a JavaScript function that returns markup:

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

// Use it like an HTML tag:
<Greeting name="Ada" />

The HTML-like syntax is called JSX. The {name} part inserts a JavaScript value. When name changes, React updates the heading on the page for you.

The core ideas

React comes down to a few concepts, and each of the following pages covers one:

  1. Components & JSX: building blocks, and passing data to them with props.
  2. State & Hooks: making components interactive.
  3. Getting Started: setting up your first project.

Going further

Once you're comfortable with the basics, the intermediate pages cover what you'll need in real apps:

  1. Effects & Data: side effects, fetching data safely, and refs.
  2. Context & Custom Hooks: sharing state across the app and reusing logic.
  3. Modern React: how rendering works, performance, and React 19 features.

Before you start: React assumes you know basic HTML, CSS and modern JavaScript (arrow functions, destructuring, array methods like map, and modules).