【NEXT.JS 系列】從 JAVASCRIPT 到 REACT 5

使用元件建構 UI

用戶介面可以分解成更小的建構區塊，稱為元件。

元件允許您建構可重複使用的程式碼片段。 如果您將元件視為樂高積木，您可以將這些單獨的積木組合在一起以形成更大的結構。 如果您需要更新某個 UI，您可以更新特定的元件或磚塊。

這種模組化使您的程式碼在成長時更易於維護，因為您可以輕鬆地添加、更新和刪除元件，而無需觸及應用程序的其餘部分。

React 元件的好處在於它們只是 JavaScript。 讓我們看看如何從 JavaScript 的角度編寫 React 元件：

建立元件

在 React 中，元件是函數。 在你的 script 標籤中，編寫一個名為 header 的函數：

<script type="text/jsx">
  const app = document.getElementById("app")


  function header() {
  }

  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>

元件是可以回傳 UI 元素的函數。 在函數的 return 語句中，您可以編寫 JSX：

<script type="text/jsx">
  const app = document.getElementById("app")

  function header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }

  ReactDOM.render(, app)
</script>

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

<script type="text/jsx">

  const app = document.getElementById("app")

  function header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }


   ReactDOM.render(header, app)
</script>

但是，請稍等。 如果您嘗試在瀏覽器中運行上述程式碼，則會收到錯誤消息。 要使其正常工作，您必須做兩件事：

首先，React 元件應該大寫以區別於普通的 HTML 和 JavaScript。

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

// Capitalize the React Component
ReactDOM.render(Header, app);

其次，您使用 React 元件的方式與使用常規 HTML 標籤的方式相同，帶有角括號 <>。

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

ReactDOM.render(<Header />, app);

巢狀元件（Nesting Components）

應用程式通常包含比單個元件更多的內容。 你可以像層層安放常規 HTML 元素一樣將 React 元件放置在彼此內部。

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

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}
function HomePage() {
  return <div></div>;
}

ReactDOM.render(<Header />, app);

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

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      {/* Nesting the Header component */}
      <Header />
    </div>
  );
}

ReactDOM.render(<Header />, app);

元件樹

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

例如，您的最上層級 HomePage 元件可以包含 Header、Article 和 Footer 元件。 並且這些元件中的每一個都可以依次擁有自己的子元件，依此類推。 例如，Header 元件可以包含 Logo、Title 和 Navigation 元件。

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

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

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}

ReactDOM.render(<HomePage />, app);

在下一節中，我們將討論 props 以及如何使用它們在元件之間傳遞數據。