React

面向 Web 和原生用户界面的库

从组件构建用户界面

React 让你把名为组件的独立片段组合成用户界面。你可以创建像 Thumbnail、LikeButton 和 Video 这样的 React 组件，然后把它们组合成完整的屏幕、页面和应用。

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

3 Videos

第一个视频

视频描述

第二个视频

视频描述

第三个视频

视频描述

这种标记语法叫作 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}”`} />
    </>
  );
}

example.com/videos.html

React 视频

React 简史

5 Videos

React：纪录片

React 的起源故事

重新思考最佳实践

Pete Hunt（2013）

介绍 React Native

Tom Occhino（2015）

介绍 React Hooks

Sophie Alpert 和 Dan Abramov（2018）

介绍服务端组件

Dan Abramov 和 Lauren Tan（2020）

你不必用 React 重建整个页面。把 React 添加到现有的 HTML 页面中，就可以在页面上的任意位置渲染交互式 React 组件。

将 React 添加到你的页面

借助框架
走向全栈

React 是一个库。它让你把组件组合起来，但不会规定路由和数据获取的方式。要用 React 构建完整应用，我们推荐使用完整的 React 框架，比如 Next.js 或 React Router。

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

React 18 Keynote

The React Team

React 18 for App Developers

Shruti Kapoor

Streaming Server Rendering with Suspense

Shaundai Person

The First React Working Group

Aakansha Doshi

React Developer Tooling

Brian Vaughn

React without memo

Xuan Huang (黄玄)

React Docs Keynote

Rachel Nabors

Things I Learnt from the New React Docs

Debbie O'Brien

Learning in the Browser

Sarah Rainsberger

The ROI of Designing with React

Linton Ye

Interactive Playgrounds with React

Delba de Oliveira

Re-introducing Relay

Robert Balicki

React Native Desktop

Eric Rozell and Steven Moyes

On-device Machine Learning for React Native

Roman Rädle

React 18 for External Store Libraries

Daishi Kato

Building Accessible Components with React 18

Diego Haz

Accessible Japanese Form Components with React

Tafu Nakazaki

UI Tools for Artists

Lyle Troxell

Hydrogen + React 18

Helen Lin

React 也是一种架构。实现它的框架可以让你在异步组件中获取数据，这些组件可以运行在服务器上，甚至在构建时运行。你可以从文件或数据库读取数据，再把它传给交互式组件。

从框架开始

充分利用每个平台的优势

人们喜爱 Web 应用和原生应用的原因各不相同。React 让你用同一套技能同时构建 Web 应用和原生应用。它会借助每个平台各自的独特优势，让你的界面在每个平台上都恰到好处。

example.com

始终忠于 Web

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

2:50 AM

真正走向原生

人们期望原生应用在外观和体验上都符合各自的平台。 React Native 和 Expo 让你可以用 React 为 Android、iOS 等平台构建应用。它们之所以看起来和用起来都像原生应用，是因为它们的界面 本来就是 真正的原生界面。它不是 WebView，而是让你的 React 组件渲染出平台提供的真实 Android 和 iOS 视图。

有了 React，你既可以做 Web 开发，也可以做原生开发。你的团队可以在不牺牲用户体验的前提下发布到多个平台。你的组织也可以打通平台之间的壁垒，组建端到端负责完整功能的团队。

面向原生平台构建