React を全面的に使用した新しいアプリやウェブサイトを構築したい場合は、コミュニティで人気のある React を使用したフレームワークのいずれかを選択することをお勧めします。
フレームワークなしで React を使用することもできますが、ほとんどのアプリやサイトでは、コード分割、ルーティング、データフェッチ、HTML の生成などの一般的な問題に対するソリューションを最終的に構築していることがわかりました。これらの問題は、React だけでなく、すべての UI ライブラリに共通です。
フレームワークから始めることで、React をすぐに使い始めることができ、後で独自のフレームワークを構築することを避けることができます。
深掘り
確かにフレームワークなしで React を使用できます。それが、既存のページの一部に React を使用する方法です。 ただし、React を全面的に使用して新しいアプリまたはサイトを構築する場合は、フレームワークを使用することをお勧めします。
理由は次のとおりです。
最初にルーティングやデータフェッチが必要ない場合でも、それら用のライブラリを追加したくなる可能性があります。新しい機能を追加するたびに JavaScript バンドルが大きくなると、ルートごとに個別にコードを分割する方法を理解する必要があるかもしれません。データフェッチのニーズがより複雑になるにつれて、アプリの動作が非常に遅くなるサーバクライアントネットワークのウォーターフォールが発生する可能性が高くなります。対象ユーザーにネットワーク環境が悪いユーザーやローエンドデバイスのユーザーが増えると、コンテンツを早く表示するために、サーバ側またはビルド時にコンポーネントから HTML を生成する必要があるかもしれません。サーバー上またはビルド中にコードの一部を実行するように設定を変更するのは非常に難しい場合があります。
これらの問題は React 固有のものではありません。そのため、Svelte には SvelteKit が、Vue には Nuxt があるのです。これらの問題を自分で解決するには、バンドラーをルーターおよびデータフェッチライブラリと統合する必要があります。最初のセットアップを機能させることは難しくありませんが、時間が経つにつれてアプリの読み込みを高速化するには、多くの微妙な点があります。アプリのコードの量を最小限に抑えながら、ページに必要なデータと並行して、1 回のクライアント-サーバーラウンドトリップでそれを行う必要があります。プログレッシブエンハンスメントをサポートするために、JavaScript コードが実行される前にページがインタラクティブになるようにする必要があります。どこにでもホストでき、JavaScript を無効にしても機能するマーケティングページ用の完全に静的な HTML ファイルのフォルダーを生成したい場合があります。これらの機能を自分で構築するには、実際の作業が必要です。
このページの React フレームワークは、このような問題をデフォルトで解決するため、ユーザー側での追加作業は必要ありません。非常に簡素な状態から開始し、ニーズに合わせてアプリをスケールアップできます。各 React フレームワークにはコミュニティがあるため、質問への回答を見つけたり、ツールをアップグレードしたりすることが容易になります。フレームワークはコードに構造も与え、あなたや他の人が異なるプロジェクト間でコンテキストやスキルを保持するのに役立ちます。逆に、カスタム設定では、サポートされていない依存関係のバージョンで立ち往生しやすく、コミュニティやアップグレードパスのない独自のフレームワークを実質的に作成することになります（そして、それが過去に作成したものと似たようなものであれば、さらに場当たり的な設計になるでしょう）。
アプリにこれらのフレームワークでは対応できない異常な制約がある場合や、これらの問題を自分で解決したい場合は、React を使用して独自のカスタム設定をロールアウトできます。npm から react および react-dom を取得し、Vite や Parcel などのバンドラーを使用してカスタムビルドプロセスを設定し、ルーティング、静的生成またはサーバーサイドレンダリングなどの目的のために必要な他のツールを追加します。
本番環境対応の React フレームワーク
これらのフレームワークは、アプリを本番環境にデプロイおよびスケールするために必要なすべての機能をサポートしており、React チームのフルスタックアーキテクチャビジョンをサポートすることに取り組んでいます。お勧めするすべてのフレームワークは、サポートのための活発なコミュニティを持つオープンソースであり、独自のサーバーまたはホスティングプロバイダーにデプロイできます。このリストに含めることに興味のあるフレームワークの作成者の方は、お知らせください。
Next.js
Next.jsのPages Routerは、フルスタックのReactフレームワークです。汎用性が高く、ほぼ静的なブログから複雑な動的アプリケーションまで、あらゆる規模のReactアプリを作成できます。新しいNext.jsプロジェクトを作成するには、ターミナルで次を実行します。
Next.jsを初めて利用する場合は、Next.jsの学習コースをご覧ください。
Next.jsはVercelによってメンテナンスされています。Next.jsアプリは、任意のNode.jsまたはサーバーレスホスティング、または独自のサーバーにデプロイできます。Next.jsは、サーバーを必要としない静的エクスポートもサポートしています。
Remix
Remixは、ネストされたルーティングを持つフルスタックのReactフレームワークです。アプリをネストされたパーツに分割し、並行してデータをロードし、ユーザーのアクションに応じて更新できます。新しいRemixプロジェクトを作成するには、次を実行します。
Remixを初めて利用する場合は、Remixのブログチュートリアル（短編）とアプリチュートリアル（長編）をご覧ください。
RemixはShopifyによってメンテナンスされています。Remixプロジェクトを作成する際は、デプロイターゲットを選択する必要があります。Remixアプリは、アダプターを使用するか、作成することで、任意のNode.jsまたはサーバーレスホスティングにデプロイできます。
Gatsby
Gatsbyは、高速なCMSベースのWebサイト向けのReactフレームワークです。豊富なプラグインエコシステムとGraphQLデータレイヤーにより、コンテンツ、API、およびサービスを1つのWebサイトに統合するのが簡単になります。新しいGatsbyプロジェクトを作成するには、次を実行します。
Gatsbyを初めて利用する場合は、Gatsbyチュートリアルをご覧ください。
GatsbyはNetlifyによってメンテナンスされています。完全に静的なGatsbyサイトは、任意の静的ホスティングにデプロイできます。サーバーのみの機能を使用する場合は、ホスティングプロバイダーがGatsbyでそれらをサポートしていることを確認してください。
Expo（ネイティブアプリ向け）
Expoは、真のネイティブUIを使用して、ユニバーサルなAndroid、iOS、およびWebアプリを作成できるReactフレームワークです。React Native用のSDKを提供し、ネイティブパーツをより使いやすくします。新しいExpoプロジェクトを作成するには、次を実行します。
Expoを初めて利用する場合は、Expoチュートリアルをご覧ください。
Expoは、Expo（会社）によってメンテナンスされています。Expoでのアプリの構築は無料で、制限なしにGoogleおよびAppleのアプリストアに提出できます。Expoは、オプションの有料クラウドサービスも提供しています。
最先端のReactフレームワーク
Reactの継続的な改善方法を検討した結果、Reactをフレームワーク（特にルーティング、バンドル、サーバーテクノロジー）とより緊密に統合することが、Reactユーザーがより優れたアプリを構築する上で最大の機会であると認識しました。Next.jsチームは、React Server Componentsのようなフレームワークに依存しない最先端のReact機能の調査、開発、統合、テストに協力することに同意しました。
これらの機能は日々本番環境に対応できるようになっており、他のバンドラーやフレームワークの開発者と統合について話し合っています。私たちの願いは、1、2年以内に、このページにリストされているすべてのフレームワークがこれらの機能を完全にサポートすることです。（これらの機能を試すために私たちと提携することに関心のあるフレームワークの作成者の方は、お知らせください！）
Next.js（App Router）
Next.jsのApp Routerは、Reactチームのフルスタックアーキテクチャのビジョンを実現することを目的とした、Next.js APIの再設計です。サーバーまたはビルド中に実行される非同期コンポーネントでデータを取得できます。
Next.js は Vercel によってメンテナンスされています。Next.js アプリは、任意の Node.js またはサーバーレスホスティング、あるいはご自身のサーバーにデプロイできます。Next.js は、サーバーを必要としない静的エクスポートもサポートしています。
深掘り
Next.js の App Router バンドラーは、公式のReact Server Components 仕様を完全に実装しています。これにより、ビルド時、サーバーのみ、およびインタラクティブなコンポーネントを単一の React ツリーに混在させることができます。
たとえば、データベースやファイルから読み取るasync関数として、サーバー専用の React コンポーネントを作成できます。次に、そこからインタラクティブなコンポーネントにデータを渡すことができます。
// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
// 1. You're on the server, so you can talk to your data layer. API endpoint not required.
const talks = await db.Talks.findAll({ confId });
// 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
const videos = talks.map(talk => talk.video);
// 3. Pass the data down to the components that will run in the browser.
return <SearchableVideoList videos={videos} />;
}Next.js の App Router は、Suspense によるデータフェッチも統合しています。これにより、React ツリー内でユーザーインターフェイスのさまざまな部分のローディング状態（スケルトンプレースホルダーなど）を直接指定できます。
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>Server Components と Suspense は、Next.js の機能ではなく、React の機能です。ただし、フレームワークレベルでそれらを採用するには、賛同と重要な実装作業が必要です。現時点では、Next.js App Router が最も完全な実装です。React チームは、バンドラー開発者と協力して、これらの機能を次世代のフレームワークで実装しやすくすることに取り組んでいます。