章节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 概念：组件、属性和状态。对这些概念有扎实的基础将帮助您开始构建 React 应用程序。

在学习 React 方面，最好的学习方法是动手构建。您可以通过使用 <script> 和您学到的知识逐渐采用 React，将小型组件添加到现有网站中。但是，许多开发人员发现 React 提供的用户和开发人员体验非常有价值，足以直接深入并使用 React 编写其整个前端应用程序。

从 React 到 Next.js

虽然 React 擅长构建 UI，但要将该 UI 独立构建成一个完全可扩展的功能应用程序，还需要做一些工作。还有一些较新的 React 功能，例如服务器组件和客户端组件，需要框架。好消息是 Next.js 处理了大部分设置和配置，并具有其他功能来帮助您构建 React 应用程序。

接下来，我们将把示例从 React 迁移到 Next.js，讨论 Next.js 的工作原理，并向您介绍服务器组件和客户端组件之间的区别。

从 React 到 Next.js

从 React 到 Next.js

您已完成本章8