React 基礎：使用元件構建使用者介面

React 核心概念

開始構建 React 應用前，您需要熟悉三個核心概念：

元件 (Components)
屬性 (Props)
狀態 (State)

在接下來的章節中，我們將介紹這些概念並提供相關學習資源。熟悉這些概念後，我們將展示如何安裝 Next.js 並使用較新的 React 功能，例如伺服器元件 (Server Components) 和客戶端元件 (Client Components)。

元件

使用者介面可以分解為稱為元件的較小構建區塊。

元件讓您能建立獨立且可重複使用的程式碼片段。將元件想像成樂高積木，您可以將這些獨立積木組合起來形成更大的結構。當需要更新 UI 的某部分時，只需更新特定的元件或積木即可。

這種模組化特性讓您的程式碼在成長過程中更易於維護，因為您可以新增、更新和刪除元件，而無需觸碰應用程式的其他部分。

React 元件的優點在於它們就是普通的 JavaScript。讓我們從 JavaScript 角度看看如何編寫 React 元件：

建立元件

在 React 中，元件就是函式。在您的 script 標籤內，建立一個名為 header 的新函式：

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

元件是一個返回 UI 元素的函式。在函式的 return 語句中，您可以編寫 JSX：

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

要將此元件渲染到 DOM 中，請將其作為第一個參數傳遞給 root.render() 方法：

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

但是，請稍等。如果您嘗試在瀏覽器中執行上述程式碼，將會出現錯誤。要讓這段程式碼正常運作，您需要做兩件事：

首先，React 元件名稱應大寫以區別於普通 HTML 和 JavaScript：

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
// 將 React 元件名稱大寫
root.render(Header);

其次，使用 React 元件的方式與使用常規 HTML 標籤相同，需使用尖括號 <>：

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

如果您再次嘗試在瀏覽器中執行這段程式碼，將會看到變更生效。

巢狀元件

應用程式通常包含的內容比單個元件更多。您可以像常規 HTML 元素一樣，將 React 元件巢狀在其他元件中。

在範例中，建立一個名為 HomePage 的新元件：

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

然後將 <Header> 元件巢狀在新的 <HomePage> 元件中：

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* 巢狀 Header 元件 */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

元件樹

您可以繼續以這種方式巢狀 React 元件，形成元件樹。

例如，您的頂層 HomePage 元件可以包含 Header、Article 和 Footer 元件。而這些元件又可以有自己的子元件，依此類推。例如，Header 元件可以包含 Logo、Title 和 Navigation 元件。

這種模組化格式讓您可以在應用程式的不同位置重複使用元件。

在您的專案中，由於 <HomePage> 現在是頂層元件，您可以將其傳遞給 root.render() 方法：

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);

延伸閱讀資源：

您的第一個元件

匯入和匯出元件

使用元件構建使用者介面

React 核心概念

元件

建立元件

巢狀元件

元件樹

On this page