What is React?

People also call it React.js or ReactJS. They all mean the same library. The official site calls it "the library for web and native user interfaces", because the same ideas also build mobile apps through React Native.

What is React used for?

• Interactive websites and web apps: dashboards, online shops, social feeds, email clients and anything where the page changes as you use it, without reloading.
• Single-page apps: apps that load once and then swap content in place as you click around.
• Mobile apps: React Native uses the same component model to build real iPhone and Android apps.
• Full websites with a framework: frameworks such as Next.js add routing, data loading and server rendering on top of React.

React only handles the user interface, the part people see. It doesn't store data or run a server by itself, so a React app usually talks to a backend through an API.

Is React a framework or a library?

A library. A library is code you call when you need it, while a framework sets the structure of your whole app and calls your code. React does one job, rendering the user interface, and leaves routing, data fetching and project structure to other tools. In practice, most new React projects use a framework built on React, so you will hear React described as both.

How React works

1. Components

A component is a JavaScript function that returns a piece of the user interface. A page is a tree of components: an App holds a Header, a ProductList and a Footer, and the ProductList holds many ProductCards. Write a component once and reuse it anywhere. The React docs' guide Thinking in React starts by drawing boxes around every part of a design and naming each one as a component.

2. JSX

React components usually return JSX, which looks like HTML written inside JavaScript:

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

The curly braces drop a JavaScript value into the markup, so <Greeting name="Priya" /> shows "Hello, Priya!". Browsers can't read JSX directly: a build tool turns it into ordinary JavaScript function calls first. Note className instead of class, because class is a reserved word in JavaScript.

3. Props

Props (properties) are the inputs a parent component passes to a child, like name above. They work like arguments to a function. A child can read its props but must not change them. Data flows one way, from parent to child, which makes it easier to see where a value came from.

4. State

State is data a component remembers and can change, like the number in a counter or the text in a search box. When state changes, React runs the component again and updates the screen to match.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

useState(0) creates a piece of state starting at 0 and returns two things: the current value, count, and a function to change it, setCount. Each click calls setCount, React re-renders Counter, and the button shows the new number. You never touch the page directly: you change the data, and React works out what to redraw.

5. Rendering and the virtual DOM

The browser's page is a tree of elements called the DOM. Changing it is slow compared with ordinary JavaScript, so React doesn't rebuild the whole page. When state changes, it works out a description of what the new screen should look like, compares it with the previous one, and changes only the parts that differ. People often call that description the virtual DOM. It is why React code can be written as if the whole page redraws every time, while staying fast.

React vs plain JavaScript

Without React, you write the steps to change the page yourself: find the element, change its text, remember to do the same everywhere the value appears. That is called imperative code. With React you write declarative code: you describe what the screen should show for the current data, and React handles the steps.

// Plain JavaScript: you update the page by hand
let count = 0;
const button = document.querySelector('#counter');
button.addEventListener('click', () => {
  count = count + 1;
  button.textContent = `Clicked ${count} times`;
});

For one button, plain JavaScript is fine. For an app with hundreds of values shown in dozens of places, keeping every part of the page in step by hand gets error-prone, and that is the problem React was built to solve. Our HTML, CSS and JavaScript course covers the plain JavaScript you should know first.

Rendering a list

Real apps show lists of data. In React you turn an array into components with JavaScript's map:

function ShoppingList({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Each item needs a key that stays the same for that item, usually its ID. React uses keys to tell which items were added, removed or moved, so it updates the right ones.

Try finishing a component yourself, then press Mark to check it in our Web Frameworks and Stacks course.

React hooks

Functions whose names start with use are called hooks. They let a component remember things and react to events. They arrived in React 16.8 in February 2019, and before that, state needed a more long-winded class syntax.

Hooks have one firm rule: call them at the top level of a component, never inside a loop, condition or nested function, so React can match each hook to the same piece of state every render.

React vs Angular vs Vue

All three are widely used and can build the same apps. React has a huge choice of add-on libraries, Angular gives large teams one fixed way of doing things, and Vue is often called the gentlest to learn.

How to start a React project

For years, beginners started with a tool called Create React App. On 14 February 2025 the React team deprecated it for new apps. The team now recommends starting with a framework such as Next.js, React Router or Expo (for mobile), and says a build tool such as Vite, Parcel or Rsbuild suits people who want to set things up themselves or learn how React works from scratch. Its rule of thumb: if your app needs routing, you will probably benefit from a framework.

Before React, get comfortable with HTML, CSS and modern JavaScript: functions, arrays and map, objects, and arrow functions. React is mostly JavaScript, so those skills carry straight over.

A short history of React

Version dates come from the React versions page. React is still released under the MIT licence on GitHub, so it is free for personal and commercial use.

Common mistakes

• Changing state directly. count = count + 1 won't update the screen. Always use the setter, setCount(count + 1).
• Expecting state to change immediately. After setCount, count keeps its old value until the next render.
• Forgetting keys in lists, or using the array position as the key when items can be reordered.
• Writing class instead of className and for instead of htmlFor in JSX.
• Calling hooks inside if statements or loops. Hooks must run in the same order every render.
• Putting everything in one giant component. Split the page into small components that each do one job.

Read next

Computer Science · CoursesWeb frameworks course: React, Next.js, Express explainedAn interactive web frameworks course in 25 sections: SPAs, React components, props and state, Next.js rendering and routing, Express and the full stack.