章節8

從 React 到 Next.js

到目前為止，我們探討了如何開始使用 React。以下是最終程式碼的樣子。如果您是從這裡開始，請將此程式碼貼到程式碼編輯器中的 index.html 檔案中。

index.html

<html>
  <body>
    <div id="app"></div>
 
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
    <script type="text/jsx">
      const app = document.getElementById("app")
 
      function Header({ title }) {
        return <h1>{title ? title : "Default title"}</h1>
      }
 
      function HomePage() {
        const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
 
        const [likes, setLikes] = React.useState(0)
 
        function handleClick() {
          setLikes(likes + 1)
        }
 
        return (
          <div>
            <Header title="Develop. Preview. Ship." />
            <ul>
              {names.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
 
            <button onClick={handleClick}>Like ({likes})</button>
          </div>
        )
      }
 
      const root = ReactDOM.createRoot(app);
      root.render(<HomePage />);
    </script>
  </body>
</html>

在過去的幾個章節中，您認識了三個重要的 React 概念：元件、屬性 (props) 和 狀態 (state)。在這些方面擁有堅實的基礎將有助於您開始建構 React 應用程式。

學習 React 的最佳方法就是動手實作。您可以透過使用 <script> 標籤以及您目前學到的知識，將小型元件新增到現有的網站中，逐步採用 React。然而，許多開發者發現 React 提供的使用者和開發者體驗非常有價值，足以讓他們直接投入並使用 React 撰寫整個前端應用程式。

從 React 到 Next.js

雖然 React 擅長建構使用者介面，但要將該使用者介面獨立建構為功能完善且可擴展的應用程式，仍需要一些努力。此外，還有一些較新的 React 功能，例如伺服器元件和客戶端元件，需要框架的支援。好消息是 Next.js 處理了大部分的設定和配置，並提供額外的功能來協助您建構 React 應用程式。

接下來，我們會將範例從 React 遷移到 Next.js，討論 Next.js 的運作方式，並介紹伺服器元件和客戶端元件之間的差異。

從 React 到 Next.js

從 React 到 Next.js

您已完成此章節8