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 UserPanel({ user }) {
return (
<Panel color="grey">
<Avatar image={user.image} />
<Label size="xl">{user.name}</Label>
<FollowButton user={user} />
</Panel>
);
}
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.
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
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.
React homepage section header
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.
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.
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.
React homepage section header
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.
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.