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>最後の数章で、3つの重要な React の概念である コンポーネント、props、state について紹介しました。これらの基礎をしっかり理解することで、React アプリケーションの構築を始める準備が整います。
React を学ぶ際には、実際に構築することが最良の方法です。<script> タグとこれまで学んだ内容を使って、既存のウェブサイトに小さなコンポーネントを追加することで、徐々に React を採用していくことができます。しかし、多くの開発者は React が可能にするユーザー体験と開発者体験の価値が十分に高いため、フロントエンドアプリケーション全体を React で書き始めることを選択しています。
React から Next.js へ
React は UI 構築に優れていますが、その UI を完全に機能するスケーラブルなアプリケーションに独立して構築するには多少の作業が必要です。また、サーバーコンポーネントやクライアントコンポーネントのような新しい React 機能は、フレームワークを必要とします。良いニュースは、Next.js がセットアップと設定の大部分を処理し、React アプリケーションを構築するための追加機能を提供していることです。
次に、React の例を Next.js に移行し、Next.js の動作方法について説明し、サーバーコンポーネントとクライアントコンポーネントの違いを紹介します。