Reactアプリの作成

Reactで新しいアプリやウェブサイトを構築したい場合は、フレームワークから始めることをお勧めします。

既存のフレームワークでは十分に対応できない制約がある場合、独自のフレームワークを構築したい場合、または単にReactアプリの基本を学びたい場合は、Reactアプリを一から構築できます。

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

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

js（App Router）

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

npx create-next-app@latest

Next.jsはVerceljsアプリは、Nodeデプロイできます。Next.jsはまた、サーバーを必要としない静的エクスポートもサポートしています。

React Router（v7）

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

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

npx create-react-router@latest

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

Expo（ネイティブアプリ向け）

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

npx create-expo-app@latest

Expoが初めての場合は、Expoチュートリアルを確認してください。

ExpoはExpo（会社）によってメンテナンスされています。Expoを使用したアプリの構築は無料で、制限なくGoogleおよびAppleのアプリストアに提出できます。Expoはさらに、オプトインの有料クラウドサービスを提供しています。

フルスタックReactのビジョンに向けて取り組んでいる、その他の新興フレームワークもあります：

• TanStack Start（ベータ版）: TanStack Startは、TanStack Routerを搭載したフルスタックReactフレームワークです。NitroやViteなどのツールを使用して、フルドキュメントSSR、ストリーミング、サーバー関数、バンドリングなどを提供します。
• RedwoodSDK: Redwoodは、多くのプリインストールパッケージと設定を備えたフルスタックReactフレームワークで、フルスタックウェブアプリケーションの構築を容易にします。

スクラッチから始める

既存のフレームワークでは十分に対応できない制約があるアプリケーション、独自のフレームワークを構築したい場合、またはReactアプリの基本を学びたい場合は、スクラッチからReactプロジェクトを開始するための他のオプションがあります。

スクラッチから始めると柔軟性は高まりますが、ルーティング、データ取得、その他の一般的な使用パターンにどのツールを使用するかを選択する必要があります。これは、既存のフレームワークを使用するのではなく、独自のフレームワークを構築するようなものです。私たちが推奨するフレームワークには、これらの問題に対する組み込みの解決策があります。

独自の解決策を構築したい場合は、スクラッチからReactアプリを構築する方法のガイドを参照してください。このガイドでは、Vite、Parcel、またはRSbuildなどのビルドツールから始めて新しいReactプロジェクトをセットアップする方法について説明しています。

このページに掲載されることに興味があるフレームワーク作者の方は、お知らせください。