React アプリの作成
React を使って新しいアプリやウェブサイトを作成したい場合は、フレームワークを使って始めることをおすすめします。
あなたのアプリが既存のフレームワークではうまく対応できない制約を有している場合や、自分自身でフレームワークを構築したい場合、または React アプリの基本を学びたい場合は、React アプリをゼロから構築することも可能です。
フルスタックフレームワーク
これらの推奨フレームワークは、アプリを本番環境でデプロイしスケールするために必要な、すべての機能をサポートしています。最新の React 機能を統合し、React のアーキテクチャを活用しています。
Next.js (App Router)
Next.js の App Router は、React のアーキテクチャを最大限に活用してフルスタック React アプリを実現する React フレームワークです。
Next.js は Vercel によってメンテナンスされています。Next.js アプリを Node.js やサーバレスホスティング、または独自のサーバにデプロイできます。Next.js はまた、サーバを必要としない静的エクスポートをサポートしています。Vercel はさらにオプトインの有料クラウドサービスも提供しています。
React Router (v7)
React Router は、React 用の最も人気のあるルーティングライブラリであり、Vite と組み合わせてフルスタック React フレームワークを作成できます。標準の Web API を重視しており、さまざまな JavaScript ランタイムやプラットフォーム向けにそのままデプロイできるテンプレートをいくつか提供しています。
新しい React Router フレームワークプロジェクトを作成するには、以下のコマンドを実行します。
React Router は Shopify によってメンテナンスされています。
Expo (ネイティブアプリ用)
Expo は、真にネイティブな UI を持つユニバーサルな Android、iOS、および Web アプリを作成できる React フレームワークです。React Native 用の SDK を提供することでネイティブ部分を使いやすくしています。新しい Expo プロジェクトを作成するには、以下のコマンドを実行します。
Expo を初めて使用する場合は、Expo チュートリアルをチェックしてください。
Expo は Expo（社名） によってメンテナンスされています。Expo を使ったアプリ構築は無料であり、Google や Apple のアプリストアにも制限なく申請できます。また Expo ではオプトインの有料クラウドサービスも提供しています。
その他のフレームワーク
私たちのフルスタック React ビジョンに向けて取り組んでいる他の新進のフレームワークも存在します。
- TanStack Start (Beta): TanStack Start は、TanStack Router を活用したフルスタック React フレームワークです。Nitro や Vite などのツールを使用して、フルドキュメント SSR、ストリーミング、サーバ関数、バンドル機能などを提供します。
- RedwoodJS: Redwood は、多くのプリインストールされたパッケージと設定を備えたフルスタック React フレームワークで、フルスタックウェブアプリケーションを簡単に構築できます。
さらに深く知る
Next.js の App Router バンドラは、公式の React Server Components 仕様を完全に実装しています。これにより単一の React ツリー内で、バンドル時専用コンポーネント、サーバ専用コンポーネント、インタラクティブなコンポーネントを混在させることができます。
例えば、データベースやファイルから読み込みを行う React コンポーネントを非同期 (async) 関数として記述できます。そしてそのデータをインタラクティブなコンポーネントに渡すこともできます。
// 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 ツリー内で直接、UI の様々な場所に表示されるロード中状態（スケルトンプレースホルダなど）を指定できるようになります。
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>サーバコンポーネントとサスペンスは、Next.js の機能ではなく React の機能です。しかしフレームワークレベルでこれらを採用するには、合意形成とかなりの実装の手間が必要です。現時点では、Next.js の App Router が最も完全な実装です。React チームはバンドラの開発者と協力して、次世代のフレームワークでこれらの機能を実装しやすくすることを目指しています。
ゼロから構築を始める
あなたのアプリが既存のフレームワークではうまく対応できない制約を有している場合や、自分自身でフレームワークを構築したい場合、または React アプリの基本を学びたい場合には、ゼロから React プロジェクトを始めるための他の選択肢があります。
ゼロから始めることでより柔軟性が得られますが、ルーティング、データフェッチ、その他の一般的な使用パターンにどのツールを使用するかを選択する必要があります。これは、既存のフレームワークを使用する代わりに自分自身でフレームワークを構築するようなものです。おすすめのフルスタックフレームワークには、これらの問題に対する組み込みの解決策があります。
独自のソリューションを構築したい場合は、ゼロからの React アプリ構築ガイドを参照し、Vite、Parcel、または RSbuild のようなビルドツールを使って新しい React プロジェクトをセットアップする方法を確認してください。
このページに掲載されることに興味のあるフレームワークの作者の方は、こちらからお知らせください。