メインコンテンツにスキップ

はじめに

Create React App は、シングルページ React アプリケーションを作成するための公式にサポートされた方法です。設定なしで最新のビルド設定を提供します。

クイックスタート​

npx create-react-app my-app
cd my-app
npm start

以前に npm install -g create-react-app を使用して create-react-app をグローバルにインストールした場合は、npm uninstall -g create-react-app または yarn global remove create-react-app を使用してパッケージをアンインストールし、npx が常に最新バージョンを使用するようにすることをお勧めします。

(npx は npm 5.2+ 以上に付属しています。古い npm バージョンの場合は こちらの手順 を参照してください)

次に、http://localhost:3000/ を開いてアプリを確認します。

本番環境にデプロイする準備ができたら、npm run build で縮小化されたバンドルを作成します。

npm start

すぐに始める​

webpack や Babel のようなツールをインストールしたり設定したりする**必要はありません**。それらはあらかじめ設定され、隠されているため、コードに集中できます。

プロジェクトを作成すれば、すぐに開始できます。

アプリの作成​

ローカルの開発マシンに Node >= 14 が必要です (ただし、サーバーでは必須ではありません)。nvm (macOS/Linux) または nvm-windows を使用して、異なるプロジェクト間で Node のバージョンを切り替えることができます。

新しいアプリを作成するには、次のいずれかの方法を選択できます。

npx​

npx create-react-app my-app

(npx は npm 5.2+ 以上に付属しています。古い npm バージョンの場合は こちらの手順 を参照してください)

npm​

npm init react-app my-app

npm init <initializer> は npm 6+ で利用可能です。

Yarn​

yarn create react-app my-app

yarn create は Yarn 0.25+ で利用可能です。

テンプレートの選択​

作成コマンドに --template [テンプレート名] を追加して、オプションでテンプレートから新しいアプリを開始できるようになりました。

テンプレートを選択しない場合、ベーステンプレートでプロジェクトが作成されます。

テンプレートは常に cra-template-[テンプレート名] の形式で名前が付けられますが、作成コマンドには [テンプレート名] のみを提供する必要があります。

npx create-react-app my-app --template [template-name]

利用可能なテンプレートのリストは、npm で "cra-template-*" を検索することで見つけることができます。

「カスタムテンプレート」ドキュメントでは、独自のテンプレートを構築する方法について説明しています。

TypeScript アプリの作成​

テンプレートを使用して、新しい TypeScript アプリを開始できます。提供されている TypeScript テンプレートを使用するには、作成コマンドに --template typescript を追加します。

npx create-react-app my-app --template typescript

すでにプロジェクトがあり、TypeScript を追加したい場合は、「TypeScript の追加」ドキュメントを参照してください。

パッケージマネージャーの選択​

新しいアプリを作成すると、CLI は create-react-app の実行に使用するツールに応じて、npm または Yarn を使用して依存関係をインストールします。たとえば

# Run this to use npm
npx create-react-app my-app
# Or run this to use yarn
yarn create react-app my-app

出力​

これらのコマンドのいずれかを実行すると、現在のフォルダー内に my-app という名前のディレクトリが作成されます。そのディレクトリ内に、初期プロジェクト構造が生成され、推移的な依存関係がインストールされます。

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

設定や複雑なフォルダー構造はなく、アプリを構築するために必要なファイルのみです。インストールが完了したら、プロジェクトフォルダーを開くことができます

cd my-app

スクリプト​

新しく作成されたプロジェクト内で、いくつかの組み込みコマンドを実行できます

npm start または yarn start​

開発モードでアプリを実行します。http://localhost:3000 を開いて、ブラウザで表示します。

コードを変更すると、ページが自動的にリロードされます。コンソールにビルドエラーと lint 警告が表示されます。

Build errors

npm test または yarn test​

対話モードでテストウォッチャーを実行します。デフォルトでは、最後のコミット以降に変更されたファイルに関連するテストを実行します。

テストの詳細を読む.

npm run build または yarn build​

本番環境向けのアプリを build フォルダーにビルドします。本番モードで React を正しくバンドルし、最高のパフォーマンスのためにビルドを最適化します。

ビルドは縮小化され、ファイル名にはハッシュが含まれます。

アプリをデプロイする準備ができました。