チャプター8

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の仕組みについて説明し、サーバーコンポーネントとクライアントコンポーネントの違いについて紹介します。

ReactからNext.jsへ

ReactからNext.jsへ

チャプターを完了しました。8