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

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 个视频

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 设计的 ROI

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 本质

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

下午 3:49

真正成为原生应用

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

使用 React，您可以成为一名 Web 和原生开发人员。您的团队可以向多个平台发布应用，而不会牺牲用户体验。您的组织可以打破平台孤岛，并组建拥有整个功能端到端的所有权的团队。

为原生平台构建