從 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，最好的方式就是實際動手建構。您可以透過 <script> 標籤和目前所學，逐步在現有網站中加入小型 React 元件。然而，許多開發者發現 React 所提供的使用者與開發者體驗極具價值，因此選擇直接使用 React 來撰寫整個前端應用程式。
從 React 到 Next.js
雖然 React 擅長建構使用者介面，但要獨立將這些介面轉化為功能完整且可擴展的應用程式仍需要額外投入。此外，像是伺服器元件 (Server Components) 和客戶端元件 (Client Components) 等新功能，都需要框架的支援。好消息是 Next.js 處理了大部分的設定與配置工作，並提供額外功能來協助您建構 React 應用程式。
接下來，我們將把範例從 React 遷移至 Next.js，討論 Next.js 的運作方式，並介紹伺服器元件與客戶端元件之間的差異。