React

用於建構網頁和原生應用程式使用者介面的函式庫

使用元件建立使用者介面

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 設計的投資報酬率

Linton Ye

使用 React 建立互動式遊樂場

Delba de Oliveira

重新介紹 Relay

Robert Balicki

React Native 桌面版

Eric Rozell 和 Steven Moyes

適用於 React Native 的裝置上機器學習

Roman Rädle

適用於外部儲存函式庫的 React 18

加藤大志

使用 React 18 建構無障礙元件

Diego Haz

使用 React 製作無障礙日文表單元件

中崎太虎

適用於藝術家的 UI 工具

Lyle Troxell

Hydrogen + React 18

Helen Lin

React 也是一種架構。實作它的框架允許您在伺服器上，甚至在建置期間，於非同步元件中擷取資料。從檔案或資料庫讀取資料，並將其傳遞給您的互動式元件。

開始使用框架

利用每個平台的最佳功能

人們喜歡網頁應用程式和原生應用程式的原因各不相同。React 讓您可以使用相同的技能建置網頁應用程式和原生應用程式。它仰賴每個平台的獨特優勢，讓您的介面在每個平台上都感覺恰到好處。

example.com

忠於網頁

人們期望網頁應用程式的頁面載入速度很快。在伺服器上，React 讓您可以在仍在擷取資料時開始串流 HTML，在任何 JavaScript 程式碼載入之前逐步填入剩餘的內容。在用戶端，React 可以使用標準網頁 API，即使在渲染過程中也能保持 UI 的回應速度。

下午 3:49

打造真正的原生體驗

人們期望原生應用程式的外觀和感覺與其平台一致。 React Native 和 Expo 讓您使用 React 為 Android、iOS 等平台建置應用程式。它們的外觀和感覺像原生應用程式，因為它們的 UI 就是真正的原生 UI。它不是網頁檢視 — 您的 React 元件會渲染平台提供的真正 Android 和 iOS 檢視。

使用 React，您可以同時成為網頁和原生應用程式開發者。您的團隊可以將產品發佈到許多平台，而不會犧牲使用者體驗。您的組織可以 bridging the platform silos，並組建端到端擁有完整功能的團隊。

打造原生平台應用程式