React

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

使用组件创建用户界面

React 允许您使用称为组件的独立单元构建用户界面。创建您自己的 React 组件，例如 Thumbnail（缩略图），LikeButton（点赞按钮）和 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>
  );
}

3 个视频

第一个视频

视频描述

第二个视频

视频描述

第三个视频

视频描述

这种标记语法称为 JSX。它是一种由 React 推广的 JavaScript 语法扩展。将 JSX 标记放在相关的渲染逻辑附近，可以使 React 组件易于创建、维护和删除。

在任何需要的地方添加交互性

React 组件接收数据并返回应显示在屏幕上的内容。您可以将新数据传递给它们以响应交互，例如当用户在输入框中键入内容时。然后，React 将更新屏幕以匹配新数据。

SearchableVideoList.js (可搜索视频列表.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 (视频.html)

React 视频

React 简史

5 个视频

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

example.com/confs/react-conf-2021

19 个视频

React 18 主题演讲

React 团队

面向应用开发者的 React 18

Shruti Kapoor

使用 Suspense 进行流式服务器渲染

Shaundai Person

第一个 React 工作组

Aakansha Doshi

React 开发者工具

Brian Vaughn

无需 memo 的 React

Xuan Huang (黄玄)

React 文档主题演讲

Rachel Nabors

我从新的 React 文档中学到的东西

Debbie O'Brien

在浏览器中学习

Sarah Rainsberger

使用 React 进行设计的投资回报率

Linton Ye

使用 React 创建交互式游乐场

Delba de Oliveira

重新介绍 Relay

Robert Balicki

React Native 桌面版

Eric Rozell 和 Steven Moyes

面向 React Native 的设备端机器学习

Roman Rädle

React 18 与外部状态库

Daishi Kato

使用 React 18 构建无障碍组件

Diego Haz

使用 React 创建无障碍日文表单组件

Tafu Nakazaki

面向艺术家的 UI 工具

Lyle Troxell

Hydrogen + React 18

Helen Lin

React 也是一种架构。实现它的框架允许您在服务器上甚至在构建期间运行的异步组件中获取数据。从文件或数据库中读取数据，并将其传递给您的交互式组件。

从框架开始

利用每个平台的优势

人们喜爱 Web 和原生应用各有不同的原因。React 允许您使用相同的技能构建 Web 应用和原生应用。它利用每个平台的独特优势，让您的界面在每个平台上都感觉恰到好处。

example.com（示例网站）

忠于 Web

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

晚上 11:18

打造真正的原生体验

人们期望原生应用的外观和感觉与其平台一致。 React Native 和 Expo 允许您使用 React 为 Android、iOS 等平台构建应用。它们的外观和感觉是原生的，因为它们的 UI 就是真正的原生。它不是 Web 视图——您的 React 组件渲染由平台提供的真正的 Android 和 iOS 视图。

使用 React，您可以成为 Web 和原生开发者。您的团队可以发布到多个平台，而不会牺牲用户体验。您的组织可以弥合平台孤岛，并组建拥有端到端完整功能的团队。

为原生平台构建