create react app
v5.0.1
ビルド構成を使用せずに React アプリを作成します。
Create React App は、macOS、Windows、Linux で動作します。
何かが動作しない場合は、問題を報告してください。
質問がある場合、またはサポートが必要な場合は、GitHub ディスカッションで質問してください。
npx create-react-app my-app
cd my-app
npm start以前にnpm install -g create-react-app create-react-app -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使用して縮小されたバンドルを作成します。
webpack や Babel などのツールをインストールしたり設定したりする必要はありません。
これらは事前に構成され、非表示になっているため、コードに集中できます。
プロジェクトを作成すれば準備完了です。
ローカル開発マシンには Node 14.0.0 以降のバージョンが必要です(ただし、サーバーでは必要ありません)。最新の LTS バージョンを使用することをお勧めします。 nvm (macOS/Linux) または nvm-windows を使用して、異なるプロジェクト間でノードのバージョンを切り替えることができます。
新しいアプリを作成するには、次のいずれかの方法を選択できます。
npx create-react-app my-app(npx は、npm 5.2 以降に付属するパッケージ ランナー ツールです。古い npm バージョンについては手順を参照してください)
npm init react-app my-app npm init <initializer> npm 6 以降で利用可能です
yarn create react-app my-app yarn create <starter-kit-package>は Yarn 0.25 以降で利用可能です
現在のフォルダー内にmy-appというディレクトリが作成されます。
そのディレクトリ内で、初期プロジェクト構造が生成され、推移的な依存関係がインストールされます。
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── 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 警告が表示されます。
npm testまたはyarn testテスト ウォッチャーを対話モードで実行します。
デフォルトでは、最後のコミット以降に変更されたファイルに関連するテストが実行されます。
テストについて詳しくはこちらをご覧ください。
npm run buildまたはyarn build実稼働用のアプリをbuildフォルダーにビルドします。
React を実稼働モードに正しくバンドルし、最高のパフォーマンスが得られるようにビルドを最適化します。
ビルドは縮小され、ファイル名にはハッシュが含まれます。
アプリをデプロイする準備ができました。
Create React App の使用に関する詳細な手順と多くのヒントがドキュメントに記載されています。
これおよびその他の情報については、ユーザー ガイドを参照してください。
1 つの依存関係:ビルドの依存関係は 1 つだけです。 Webpack、Babel、ESLint、その他の素晴らしいプロジェクトを使用していますが、それらに加えて、一貫した厳選されたエクスペリエンスを提供します。
構成は不要:何も構成する必要はありません。開発ビルドと運用ビルドの両方の適切な構成が自動的に処理されるため、コードの作成に集中できます。
ロックインなし:いつでもカスタム セットアップに「イジェクト」できます。単一のコマンドを実行すると、すべての構成とビルドの依存関係がプロジェクトに直接移動されるため、中断したところから再開できます。
あなたの環境には、最新のシングルページ React アプリを構築するために必要なものがすべて揃っています。
-webkit-やその他のプレフィックスは必要ありません。[email protected] 2.0.0 以降ではオプトインになっています)これらのツールがどのように連携するかの概要については、このガイドを参照してください。
トレードオフとして、これらのツールは特定の方法で動作するように事前設定されています。プロジェクトでさらにカスタマイズが必要な場合は、プロジェクトを「取り出し」てカスタマイズできますが、その場合はこの構成を維持する必要があります。
Create React App は以下に最適です。
他のことを試してみたくなる一般的なケースをいくつか示します。
何百もの推移的なビルド ツールの依存関係なしでReact を試したい場合は、代わりに単一の HTML ファイルまたはオンライン サンドボックスの使用を検討してください。
React コードを Rails、Django、Symfony などのサーバー側テンプレート フレームワークと統合する必要がある場合、またはシングルページ アプリを構築していない場合は、より柔軟な nwb または Neutrino の使用を検討してください。特に Rails の場合は、Rails Webpacker を使用できます。 Symfony の場合は、Symfony の Webpack Encore を試してください。
React コンポーネントを公開する必要がある場合は、Neutrino の反応コンポーネント プリセットだけでなく、nwb でもこれを行うことができます。
React と Node.js を使用してサーバー レンダリングを実行したい場合は、Next.js または Razzle をチェックしてください。 Create React App はバックエンドに依存せず、静的な HTML/JS/CSS バンドルのみを生成します。
Web サイトのほとんどが静的である場合 (ポートフォリオやブログなど)、Gatsby または Next.js の使用を検討してください。 Create React App とは異なり、Gatsby はビルド時に Web サイトを HTML に事前レンダリングします。 Next.js はサーバー レンダリングとプリレンダリングの両方をサポートしています。
最後に、さらにカスタマイズが必要な場合は、Neutrino とその React プリセットをチェックしてください。
上記のツールはすべて、ほとんどまたはまったく設定を行わなくても動作します。
自分でビルドを構成したい場合は、このガイドに従ってください。
React Native 以外でも同様のものをお探しですか?
Expo CLI を確認してください。
create-react-appについてぜひご協力ください。探しているものと開始方法の詳細については、CONTRIBUTING.md を参照してください。
Create React App はコミュニティによって管理されるプロジェクトであり、すべての貢献者はボランティアです。 Create React App の今後の開発をサポートしたい場合は、Open Collective への寄付を検討してください。
このプロジェクトは、貢献してくださったすべての人々のおかげで存在します。
ドキュメントをホストしてくださった Netlify に感謝します。
既存の関連プロジェクトの作成者のアイデアと協力に感謝します。
Create React App は、MIT としてライセンス供与されたオープンソース ソフトウェアです。 Create React App ロゴは、Creative Commons Attribution 4.0 International ライセンスに基づいてライセンスされています。
