从 React 到 Next.js
到目前为止，我们已经探讨了如何开始使用 React。以下是最终代码的样子。如果你从这里开始，请将此代码粘贴到代码编辑器的 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 核心概念：组件 (Components)、属性 (Props) 和 状态 (State)。扎实掌握这些基础知识将帮助你开始构建 React 应用。
学习 React 时，最佳方式是通过实践。你可以逐步采用 React，使用 <script> 标签和目前学到的知识在现有网站中添加小组件。不过，许多开发者发现 React 带来的用户体验和开发体验非常有价值，因此会直接使用 React 构建整个前端应用。
从 React 到 Next.js
虽然 React 擅长构建用户界面，但将其独立构建成一个功能完善、可扩展的应用仍需额外工作。此外，一些新的 React 特性（如服务端组件 (Server Components) 和客户端组件 (Client Components)）需要框架支持。好消息是 Next.js 处理了大部分配置工作，并提供了额外功能来帮助你构建 React 应用。
接下来，我们将把示例从 React 迁移到 Next.js，讨论 Next.js 的工作原理，并介绍服务端组件与客户端组件的区别。