从组件创建用户界面
React 允许你从称为组件的各个部分构建用户界面。 创建你自己的 React 组件，例如 Thumbnail、LikeButton 和 Video。 然后将它们组合到整个屏幕、页面和应用程序中。
无论你是独自工作还是与成千上万的其他开发人员一起工作，使用 React 的感觉都是一样的。 它旨在让你无缝组合由独立人员、团队、以及组织编写的组件。
使用代码和标记编写组件
React 组件是 JavaScript 函数。 想有条件地显示一些内容？ 使用 if 语句。 显示列表？ 试试数组 map()。 学习 React 就是学习编程。
这种标记语法称为 JSX。 它是由 React 推广的 JavaScript 语法扩展。 将 JSX 标记放在相关的渲染逻辑附近，使得 React 组件易于创建、维护、以及删除。
在需要的地方添加交互性
React 组件接收数据并返回应显示在屏幕上的内容。 你可以将新数据传递给它们以响应交互，例如当用户键入输入时。 然后 React 将更新屏幕以匹配新数据。
你不必在 React 中构建整个页面。 将 React 添加到你现有的 HTML 页面，并在其任何位置渲染交互式 React 组件。
使用框架实现全栈
React 是一个库。 它可以让你把组件放在一起，但它没有规定如何进行路由和数据获取。 要使用 React 构建整个应用程序，我们建议使用全栈 React 框架，例如 Next.js 或 Remix。
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} />;
}
19 Videos
React 也是一种架构。 实现它的框架允许你在服务器上运行的异步组件中获取数据，甚至在构建期间。 从文件或数据库中读取数据，并将其传递给你的交互式组件。
充分利用每个平台
人们出于不同的原因喜欢 Web 和原生应用程序。 React 让你可以使用相同的技能构建 Web 应用程序和原生应用程序。 它依靠每个平台的独特优势，让你的界面在每个平台上都感觉恰到好处。
忠于 Web
人们期望 Web 应用程序页面能够快速加载。 在服务器上，React 允许你在获取数据时开始流式传输 HTML，在加载任何 JavaScript 代码之前逐步填充剩余内容。 在客户端，React 可以使用标准的 Web API 来保持你的 UI 响应，即使在渲染过程中也是如此。
真正的原生
人们希望原生应用程序看起来和感觉起来都像他们的平台。 React Native 和 Expo 让你可以在 React 中为 Android、iOS 等构建应用程序。 它们看起来和感觉起来都是原生的，因为它们的 UI 是真正原生的。 它不是 Web 视图 - 你的 React 组件渲染平台提供的真实 Android 和 iOS 视图。
使用 React，你可以成为 Web 和原生开发人员。 你的团队可以在不牺牲用户体验的情况下运送到许多平台。 你的组织可以弥合平台孤岛，并组建拥有端到端全部功能的团队。