Learn React
インストール

React アプリの作成

あなたのアプリが既存のフレームワークではうまく対応できない制約を有している場合や、自分自身でフレームワークを構築したい場合、または React アプリの基本を学びたい場合は、ことも可能です。

フルスタックフレームワーク

これらの推奨フレームワークは、アプリを本番環境でデプロイしスケールするために必要な、すべての機能をサポートしています。最新の React 機能を統合し、React のアーキテクチャを活用しています。

Next.js (App Router)

は、React のアーキテクチャを最大限に活用してフルスタック React アプリを実現する React フレームワークです。

Terminal
npx create-next-app@latest

Next.js は によってメンテナンスされています。Next.js アプリは Node.js や Docker コンテナをサポートする任意のホスティングプロバイダ、もしくは自前のサーバ上に。さらに Next.js は、サーバ不要のもサポートしています。

React Router (v7)

は、React 用の最も人気のあるルーティングライブラリであり、Vite と組み合わせてフルスタック React フレームワークを作成できます。標準の Web API を重視しており、さまざまな JavaScript ランタイムやプラットフォーム向けにをいくつか提供しています。

新しい React Router フレームワークプロジェクトを作成するには、以下のコマンドを実行します。

Terminal
npx create-react-router@latest

React Router は によってメンテナンスされています。

Expo (ネイティブアプリ用)

は、真にネイティブな UI を持つユニバーサルな Android、iOS、および Web アプリを作成できる React フレームワークです。 用の SDK を提供することでネイティブ部分を使いやすくしています。新しい Expo プロジェクトを作成するには、以下のコマンドを実行します。

Terminal
npx create-expo-app@latest

Expo を初めて使用する場合は、をチェックしてください。

Expo は によってメンテナンスされています。Expo を使ったアプリ構築は無料であり、Google や Apple のアプリストアにも制限なく申請できます。また Expo ではオプトインの有料クラウドサービスも提供しています。

その他のフレームワーク

私たちのフルスタック React ビジョンに向けて取り組んでいる他の新進のフレームワークも存在します。

  • : TanStack Start は、TanStack Router を活用したフルスタック React フレームワークです。Nitro や Vite などのツールを使用して、フルドキュメント SSR、ストリーミング、サーバ関数、バンドル機能などを提供します。
  • : Redwood は、多くのプリインストールされたパッケージと設定を備えたフルスタック React フレームワークで、フルスタックウェブアプリケーションを簡単に構築できます。
さらに深く知る

React チームのフルスタックアーキテクチャビジョンに含まれる機能

Next.js の App Router バンドラは、公式の を完全に実装しています。これにより単一の React ツリー内で、バンドル時専用コンポーネント、サーバ専用コンポーネント、インタラクティブなコンポーネントを混在させることができます。

例えば、データベースやファイルから読み込みを行う React コンポーネントを非同期 (async) 関数として記述できます。そしてそのデータをインタラクティブなコンポーネントに渡すこともできます。

Next.js の App Router は、を統合しています。これにより、React ツリー内で直接、UI の様々な場所に表示されるロード中状態（スケルトンプレースホルダなど）を指定できるようになります。

サーバコンポーネントとサスペンスは、Next.js の機能ではなく React の機能です。しかしフレームワークレベルでこれらを採用するには、合意形成とかなりの実装の手間が必要です。現時点では、Next.js の App Router が最も完全な実装です。React チームはバンドラの開発者と協力して、次世代のフレームワークでこれらの機能を実装しやすくすることを目指しています。

ゼロから構築を始める

あなたのアプリが既存のフレームワークではうまく対応できない制約を有している場合や、自分自身でフレームワークを構築したい場合、または React アプリの基本を学びたい場合には、ゼロから React プロジェクトを始めるための他の選択肢があります。

ゼロから始めることでより柔軟性が得られますが、ルーティング、データフェッチ、その他の一般的な使用パターンにどのツールを使用するかを選択する必要があります。これは、既存のフレームワークを使用する代わりに自分自身でフレームワークを構築するようなものです。には、これらの問題に対する組み込みの解決策があります。

独自のソリューションを構築したい場合は、ガイドを参照し、、、または のようなビルドツールを使って新しい React プロジェクトをセットアップする方法を確認してください。

このページに掲載されることに興味のあるフレームワークの作者の方は、。