React

The library for web and native user interfaces

Learn ReactAPI Reference

Create user interfaces
from components

React lets you build user interfaces out of individual pieces called components. Create your own React components like a button, a panel, or an avatar. Then combine them into entire screens, pages, and apps.

function Comment({ author, comment }) {
  return (
    <Panel background="grey">
      <ProfileLink to={author}>
        <Avatar image={author.image} />
        {author.name}
      </ProfileLink>
      {comment.text}
      <LikeButton comment={comment} />
    </Panel>
  );
}
Alan Turing
Machines take me by surprise with great frequency.

Whether you work on your own or with thousands of other developers, using React feels the same. It is designed to let you seamlessly combine components written by independent people, teams, and organizations.

Write components with code and markup

React components are JavaScript functions. Want to show something conditionally? Use an if statement. Need to display a list? Use a for loop or array map().

Learning React is learning programming.

function SearchResults({ users, query }) {
  if (users.length === 0) {
    return <EmptyMessage text="No matches" />;
  }
  return (
    <Grid cols={3} rows={10} title="Search results">
      {users.map(user =>
        <UserPanel user={user} key={user.id} />
      )}
    </Grid>
  );
}

React homepage section header

Use as little or as much React as you need

Many teams build their entire user interface with React. For example, the web experiences of Facebook, Instagram, TikTok, Twitter, Airbnb, Spotify, Trello, andThe New York Timesare fully powered by React.

Illustration goes here

Stability without stagnation

React approaches changes with care. Every React commit is tested on business-critical surfaces with hundreds of millions of users. When an API is deprecated, we add warnings and publish automatic scripts to assist with the migration. The 100,000 React components in the Meta codebase help validate every migration strategy. The React team is also always researching how to improve React. React has a high bar for taking an idea from research to production. Only proven approaches become part of React. Learn about our latest research

Illustration goes here
Illustration goes here

Let a framework take care of the rest

React is a library. It lets you create components and put them together, but it doesn't prescribe solutions for routing and data fetching. To take full advantage of React, we recommend using a mature React framework. React frameworks likeNext.js, Remix, andExpo let you create full-stack React apps with little configuration.

Match underlying platform expectations

Users expect pages to load fast. On the web, React can progressively render to a stream of HTML, enabling content to be revealed gradually while the rest of the app's code and React itself are still loading. React takes advantage of modern web standards to keep the page responsive even during rendering.

Illustration goes here

React homepage section header

Illustration goes here

Use as little or as much React as you need

Many teams build their entire user interface with React.

Illustration goes here

Stability without stagnation

React approaches changes with care. Every React commit is tested on business-critical surfaces with hundreds of millions of users.

Illustration goes here

Let a framework take care of the rest

React is a library. It lets you create components and put them together, but it doesn't prescribe solutions for routing and data fetching.

React homepage section header

Use as little or as much React as you need

Many teams build their entire user interface with React. For example, the web experiences of Facebook, Instagram, TikTok, Twitter, Airbnb, Spotify, Trello, andThe New York Timesare fully powered by React.

Illustration goes here

Stability without stagnation

React approaches changes with care. Every React commit is tested on business-critical surfaces with hundreds of millions of users. When an API is deprecated, we add warnings and publish automatic scripts to assist with the migration.

Illustration goes here

React homepage section header

Illustration goes here

Use as little or as much
React as you need

Many teams build their entire user interface with React.

Stability without stagnation

React approaches changes with care. Every React commit is tested on business-critical surfaces with hundreds of millions of users.

Illustration goes here
Illustration goes here

Let a framework take care of the rest

React is a library. It lets you create components and put them together, but it doesn't prescribe solutions for routing and data fetching.

Welcome to the React community

Get started today.

Welcome to the React community

Get started today.

How do you like these docs?