这是用户在 2025-3-7 10:39 为 https://react.dev/ 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?
logo by @sawaratsuki1004

React  反应

The library for web and native user interfaces
适用于 Web 和本机用户界面的库

Create user interfaces from components
从组件创建用户界面

React lets you build user interfaces out of individual pieces called components. Create your own React components like Thumbnail, LikeButton, and Video. Then combine them into entire screens, pages, and apps.
React 可让您使用称为组件的各个部分构建用户界面。创建您自己的 React 组件,例如ThumbnailLikeButtonVideo 。然后将它们组合成整个屏幕、页面和应用。

Video.js  视频.js

function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}

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.
无论您是独自工作还是与数千名其他开发人员一起工作,使用 React 的感觉都是一样的。它旨在让您无缝地组合由独立人员、团队和组织编写的组件。

Write components with code and markup
使用代码和标记编写组件

React components are JavaScript functions. Want to show some content conditionally? Use an if statement. Displaying a list? Try array map(). Learning React is learning programming.
React 组件是 JavaScript 函数。想要有条件地显示一些内容?使用if语句。显示列表?尝试数组map() 。学习 React 就是学习编程。

VideoList.js  视频列表.js

function VideoList({ videos, emptyHeading }) {
const count = videos.length;
let heading = emptyHeading;
if (count > 0) {
const noun = count > 1 ? 'Videos' : 'Video';
heading = count + ' ' + noun;
}
return (
<section>
<h2>{heading}</h2>
{videos.map(video =>
<Video key={video.id} video={video} />
)}
</section>
);
}

This markup syntax is called JSX. It is a JavaScript syntax extension popularized by React. Putting JSX markup close to related rendering logic makes React components easy to create, maintain, and delete.
这种标记语法称为 JSX。它是 React 推广的 JavaScript 语法扩展。将 JSX 标记放在相关渲染逻辑附近,使 React 组件易于创建、维护和删除。

Add interactivity wherever you need it
在需要的地方添加交互功能

React components receive data and return what should appear on the screen. You can pass them new data in response to an interaction, like when the user types into an input. React will then update the screen to match the new data.
React 组件接收数据并返回屏幕上应显示的内容。您可以向它们传递新数据以响应交互,例如当用户输入内容时。然后 React 将更新屏幕以匹配新数据。

SearchableVideoList.js

import { useState } from 'react';

function SearchableVideoList({ videos }) {
const [searchText, setSearchText] = useState('');
const foundVideos = filterVideos(videos, searchText);
return (
<>
<SearchInput
value={searchText}
onChange={newText => setSearchText(newText)} />
<VideoList
videos={foundVideos}
emptyHeading={`No matches for “${searchText}”`} />
</>
);
}

You don’t have to build your whole page in React. Add React to your existing HTML page, and render interactive React components anywhere on it.
您不必用 React 构建整个页面。将 React 添加到您现有的 HTML 页面,并在其任何位置呈现交互式 React 组件。

Go full-stack with a framework
使用框架实现全栈

React is a library. It lets you put components together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js or Remix.
React 是一个库。它允许您将组件组合在一起,但它没有规定如何进行路由和数据提取。要使用 React 构建整个应用,我们建议使用全栈 React 框架,例如Next.jsRemix

confs/[slug].js

import { db } from './database.js';
import { Suspense } from 'react';

async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}

async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}
example.com/confs/react-conf-2021

19 Videos  19 个视频

React is also an architecture. Frameworks that implement it let you fetch data in asynchronous components that run on the server or even during the build. Read data from a file or a database, and pass it down to your interactive components. 

Use the best from every platform 

People love web and native apps for different reasons. React lets you build both web apps and native apps using the same skills. It leans upon each platform’s unique strengths to let your interfaces feel just right on every platform. 

example.com 

Stay true to the web 

People expect web app pages to load fast. On the server, React lets you start streaming HTML while you’re still fetching data, progressively filling in the remaining content before any JavaScript code loads. On the client, React can use standard web APIs to keep your UI responsive even in the middle of rendering. 

9:18 AM 

Go truly native 

People expect native apps to look and feel like their platform. React Native and Expo let you build apps in React for Android, iOS, and more. They look and feel native because their UIs are truly native. It’s not a web view—your React components render real Android and iOS views provided by the platform. 

With React, you can be a web and a native developer. Your team can ship to many platforms without sacrificing the user experience. Your organization can bridge the platform silos, and form teams that own entire features end-to-end. 

Upgrade when the future is ready 

React approaches changes with care. Every React commit is tested on business-critical surfaces with over a billion users. Over 100,000 React components at Meta help validate every migration strategy. 

The React team is always researching how to improve React. Some research takes years to pay off. React has a high bar for taking a research idea into production. Only proven approaches become a part of React.

Join a community of millions

You’re not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.

People singing karaoke at React Conf
Sunil Pai speaking at React India
A hallway conversation between two people at React Conf
A hallway conversation at React India
Elizabet Oliveira speaking at React Conf
People taking a group selfie at React India
Nat Alison speaking at React Conf
Organizers greeting attendees at React India

This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It’s a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.

logo by @sawaratsuki1004

Welcome to the React community

Get Started