logo by @sawaratsuki1004

React

用于构建 Web 和原生交互界面的库

用组件创建用户界面

React 让你可以通过组件来构建用户界面。你可以创建像 ThumbnailLikeButton Video 这样的组件。然后将它们组合成整个应用程序。

Video.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>
);
}

无论你是独自工作还是与成千上万的其他开发人员合作,使用 React 的感觉都是相同的。它旨在让你轻松地组合由独立开发者、团队或组织编写的组件。

用代码和标签编写组件

React 组件是 JavaScript 函数。想要有条件地显示一些内容吗?使用 if 语句。想要展示一个列表?尝试使用数组的 map() 方法。学习 React 就是学习编程。

VideoList.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>
);
}

这种标签语法被称为 JSX。它是由 React 推广的 JavaScript 语法扩展。将 JSX 标签与相关的渲染逻辑放在一起,使得创建、维护和删除 React 组件变得容易。

在任何地方添加交互

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}”`} />
</>
);
}

你也可以不用 React 去构建整个页面,而只是将 React 添加到现有的 HTML 页面中,在任何地方呈现交互式的 React 组件。

使用框架进行全栈开发

React 是一个库。它允许你将组件放在一起,但不关注路由和数据获取。要使用 React 构建整个应用程序,我们建议使用像 Next.js Remix 这样的全栈 React 框架。

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} />;
}

React 也是一种架构。实现它的框架可以在服务端甚至是构建阶段使用异步组件来获取数据,也可以从文件或数据库读取数据,并将其传递给交互式组件。

博采众长

人们因为不同的原因偏好 Web 应用或原生应用。React 让你使用相同的技能构建 Web 应用程序和原生应用程序。它依赖于每个平台独特的优势,使你的界面就像原生一样。

example.com

不忘初心

人们期望网页加载速度更快。在服务器上,React 可以让你在获取数据的同时开始流式传输 HTML,在任何 JavaScript 代码加载之前逐步填充剩余内容。在客户端,即使是在渲染过程中,React 也会使用标准的 Web API 使 UI 快速响应。

11:52 PM

开发真正的原生应用

人们希望原生应用程序都有和自己使用的平台相一致的体验。React Native Expo 让你可以使用 React 构建 Android、iOS 等应用程序。它们的样式和体验都和原生应用程序一样,因为它们的用户界面是真正的原生用户界面。这不是一个 Web 视图——你的 React 组件由平台提供的真实 Android 或 iOS 视图来渲染。

使用 React,你可以成为 Web 和原生应用的开发人员。 你的团队可以在不牺牲用户体验的情况下发布到各个平台。你的组织可以忽略平台差异,并拥有端到端的全部功能。

充分测试,安心升级

React 非常谨慎地处理每个改动。每个 React 提交都在拥有超过十亿用户的关键业务页面上进行测试。Meta 的 10 万个 React 组件帮助验证每种迁移策略。

React 团队始终在研究如何改进 React。一些研究需要数年才能得到回报。React 对将研究想法转化为生产具有高标准要求,只有经过证明的方法才能成为 React 的一部分。

加入数百万人的社区

你并不孤单。每个月有来自世界各地的两百万开发者访问 React 文档。React 可以让人们达成共识。

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

这就是为什么 React 不仅仅是一个库、一种架构,甚至不只是一个生态系统。React 是一个社区。在这里你可以寻求帮助,发现机会并结交新朋友。你将会遇到开发者和设计师、初学者和专家、研究人员和艺术家、教师和学生等各行各业的人士。我们的背景可能非常不同,但 React 让我们所有人都能够共同创建用户界面。

logo by @sawaratsuki1004

欢迎来到 React 社区

开始 React 之旅