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

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

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

react-scripts

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

npm run buildCRAが機(jī)能不足を提供する場(chǎng)合、ユーザーは

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

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

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

糸の使用：

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

Create Reactアプリは次のプロジェクト構(gòu)造を設(shè)定します：

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

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

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

パッケージに依存し、

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

<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

メイン関數(shù)

ローカル開発サーバー：

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

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

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

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

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

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

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

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

• 展開：

  生成されたビルド結(jié)果は、さまざまな環(huán)境に簡単に展開できる靜的ファイルです。

• 環(huán)境変數(shù)：

  で始まる環(huán)境変數(shù)の使用をサポートしています。 REACT_APP_

• リバースプロキシ：

  でフィールドを構(gòu)成することで、プロキシリクエストができます。 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が十分に機(jī)能していない場(chǎng)合は、を使用してWebpack構(gòu)成をコピーし、カスタマイズのためにスクリプトをプロジェクトに組み込むことができます。または、自分のブランチをフォークして維持することができます。

npm run eject概要react-scripts

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

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

以上がReactアプリの作成：React Projectsを迅速に準(zhǔn)備してくださいの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。