Framework · Since 2013

React

React is a JavaScript library for building user interfaces from components, declaring what the UI should look like and updating only what changes.

Start the guide Discussions

React is a user interface library created at Meta (then Facebook) and open-sourced in 2013. You split the screen into small function components, and each one describes with JSX what it should look like for the props it receives and the state it holds. When data changes, React compares the new result with the previous one and applies only the actual differences to the DOM.

React shines on highly interactive screens full of buttons, forms and lists. It powers single-page applications, dashboards, admin tools and company design systems, and the same mental model carries over when you build server-rendered sites with frameworks such as Next.js or mobile apps with React Native. Its large ecosystem of routers, data-fetching libraries and testing tools lets you pick and combine the pieces you need.

If you are new to React, work through the Quick Start and the Tic-Tac-Toe tutorial on react.dev. The official docs recommend a framework such as Next.js for new products, but a plain Vite project is easier to understand while learning. Getting comfortable with modern JavaScript first, such as array methods, destructuring and modules, makes JSX and hooks much easier to follow.

Highlights

Component-based design

Split the UI into independent function components, pass data down with props and compose small pieces into full screens.

Declarative UI with JSX

Instead of mutating the DOM yourself, describe the result for the current state in JSX and React updates only what changed.

State and effects with hooks

Hooks such as useState, useEffect, useRef and useContext handle state, side effects, DOM references and shared data inside plain functions.

A broad ecosystem

Next.js, React Router, TanStack Query, React Native and other proven tools let you use the same approach from the web to mobile.

Where it is used

Single-page applications (SPAs)
Dashboards and admin tools
Design systems and reusable UI components
Web and mobile apps with Next.js or React Native

Install

1
Prepare Node.js
React tooling runs on Node.js. Install the LTS release from nodejs.org, then check that node and npm print their versions.
```
node --version && npm --version
```
2
Create a project with Vite
Use Vite's react-ts template to create a React project with TypeScript. For plain JavaScript, use the react template instead.
```
npm create vite@latest my-app -- --template react-ts
```
3
Start the dev server
Move into the project folder, install dependencies and start the dev server. Open the address shown in the terminal (http://localhost:5173 by default) in your browser.
```
cd my-app && npm install && npm run dev
```

Your first program

Your first component

The App function in src/App.tsx is a component that returns JSX describing what to render. It creates a count state with the useState hook, and clicking the button calls setCount to change it. When state changes, React calls App again and updates only the number on the screen. While the dev server runs, the browser refreshes instantly every time you save a file.

src/App.tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>Hello, React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run dev

Everyday tools

Vite: A frontend build tool with a fast dev server and optimized production builds. It ships official React project templates.
React Developer Tools: A browser extension for inspecting the component tree, each component's props and state, and profiling render performance.
ESLint: A linter. With eslint-plugin-react-hooks it catches violations of the Rules of Hooks and missing effect dependencies.
Vitest: A test runner that reuses your Vite configuration. Combined with React Testing Library it tests components the way users use them.

Step-by-step guide

Six chapters that take you from installation to the core ideas of React.

Official docs and resources

Languages

Discussions

Start a discussion

Ask questions, share experience and trade opinions about React.

No discussions yet. Start the first one.