logo by @sawaratsuki1004

React

用於網頁與原生使用者介面的函式庫

學習 ReactAPI 參考

從元件建立使用者介面

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

My video

Video description

無論你是獨立開發，或與上千名開發者協作，使用 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

First video

Video description

Second video

Video description

Third video

Video description

這種標記語法稱為 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 Videos

A brief history of React

5 Videos

React: The Documentary

The origin story of React

Rethinking Best Practices

Pete Hunt (2013)

Introducing React Native

Tom Occhino (2015)

Introducing React Hooks

Sophie Alpert and Dan Abramov (2018)

Introducing Server Components

Dan Abramov and 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