Reactアプリの作成：React Projectsを迅速に準備してください

Create React App（CRA）Quick View FacebookのコマンドラインツールCreate React App（CRA）は、Reactプロジェクトの作成を簡素化します。 Webpackビルドプロセスを事前に設定し、複雑なビルドパイプラインを構築するトラブルを排除しました。

CRAはNPMまたはYARNから実行でき、すべての構成とビルドスクリプトを含む

パッケージを含むプロジェクト構造をセットアップします。このツールには、ローカル開発サーバーも含まれており、ES6およびES7機能、CSSモジュール、JESTユニットテスト、ESLINTをサポートしています。

react-scripts

を使用して、生産環境パッケージを作成し、最適化されたアプリケーションバージョンを生成し、展開の準備をします。また、環境変数、コードセグメンテーション、タイプスクリプト、プログレッシブWebアプリケーション、およびWeb Vitalsを使用したパフォーマンス測定もサポートしています。

npm run buildCRAが機能不足を提供する場合、ユーザーは

を実行することを選択できます。これにより、Webパック構成をコピーしてプロジェクトにスクリプトを作成し、カスタマイズが可能になります。または、ユーザーは、必要な機能を追加して、自分のブランチをパッケージ化して維持することができます。

npm run ejectreact-scriptsCreate React Appはどのように機能しますか

Create React Appは、NPMまたはYARNを使用して実行できるスタンドアロンツールです。新しいフォルダーで新しいReactアプリケーションを生成して実行して、ほんの数件のコマンドを使用して実行します。 NPMを使用する：

糸の使用：

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

Create Reactアプリは次のプロジェクト構造を設定します：

また、すべての構成とビルドスクリプトを使用して、プロジェクトに

yarn create react-app new-app
cd new-app
yarn start

パッケージを追加します。言い換えれば、プロジェクトは

パッケージに依存し、

自体ではありません。インストールが完了したら、開発サーバーを起動してプロジェクトの処理を開始できます。

<code>new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock</code>

react-scriptsreact-scripts create-react-app

メイン関数

ローカル開発サーバー：

Watcherを含むWebpack開発サーバーが開始されます。ウォッチャーは、コンテンツを変更した後にアプリケーションを自動的にリロードします。 V4から始めて、Create React Appは、ホットモジュールの交換に代わるものとして、Reactのクイックリフレッシュをサポートします。

• npm startES6およびES7のサポート：

  を使用して、
、オブジェクトレスト/スプレッドプロパティ、ダイナミック
• などのES6およびES7機能をサポートします。

  babel-preset-react-appasync/awaitリソースのインポート：import()CSSファイル、画像、またはフォントは、JavaScriptモジュールからインポートできます。アプリケーションが構築された後、Create Reactアプリはファイルをビルドフォルダーにコピーします。

• スタイル：CSSファイルのインポートをサポートし、すべてのCSSファイルが構築時に1つのパッケージに統合されます。 CSSモジュール（*.module.css）およびSASS（.scssファイルをサポートしており、個別にインストールする必要がありますnode-sass）。

• ユニットテスト：npm testコンテンツを変更したときにテストを開始し、ウォッチャーを起動してテストを再実行します。

• ESLINT：開発プロセス中に、コードはESLINTを介して静的に分析されます。

• 生産環境パッケージを作成します。 npm run build

• 展開：

  生成されたビルド結果は、さまざまな環境に簡単に展開できる静的ファイルです。

• 環境変数：

  で始まる環境変数の使用をサポートしています。 REACT_APP_

• リバースプロキシ：

  でフィールドを構成することで、プロキシリクエストができます。 package.json proxy

• コードセグメンテーション：

  コードセグメンテーションのダイナミックをサポートします。 import()

• タイプスクリプトのサポート：

  タイプスクリプトプロジェクトは、オプションを使用して作成できます。 --template typescript

• Progressive Webアプリケーション（PWA）サポート：

  オプションを使用して、PWAプロジェクトを作成できます。 --template cra-template-pwa --template cra-template-pwa-typescript

Webバイタル：

• ライブラリを使用して、Web Vitalsメトリックを追跡します。 web-vitals

cra

を使用してあきらめます CRAが十分に機能していない場合は、を使用してWebpack構成をコピーし、カスタマイズのためにスクリプトをプロジェクトに組み込むことができます。または、自分のブランチをフォークして維持することができます。

npm run eject概要react-scripts

Create React Appは、新しいReactプロジェクトを開始し、ビルドプロセスを簡素化し、豊富な機能を提供するための便利なツールです。迅速なプロトタイプであろうと大規模なプロジェクトであろうと、多くの開発時間を節約します。

（FAQの部分は記事と複製されており、長すぎるため省略されています。）

以上がReactアプリの作成：React Projectsを迅速に準備してくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。