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 和原生開發者。您的團隊可以釋出到多個平臺，而不會犧牲使用者體驗。您的組織可以彌合平臺孤島，並組建擁有端到端完整功能的團隊。

為原生平臺構建