作成反応するアプリを通じて、ゼロからビルド環境を反応させます

クイックスタート：

• グローバルインストール足場：

$ npm install -g create-react-app

• アイテムを足場で：

$ create-react-app <项目名称>

• プロジェクトが起動します。

$ cd <项目名>
$ npm run start

第二に、設定項目のpackage.jsonを表示

2.1 package.json一覧

{
  ......
  "homepage": ".",
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

利用できるスクリプトコマンドの2.2説明：

• まず、次のコマンドは、実際に対応する下部node_modules /反応-srcipt /スクリプトスクリプトファイルを実行することによって行わNPM実行します。
• NPMの実行開始：プロジェクトの先頭を通じて、HTTP：// localhostを：3000は、プロジェクトにアクセスすることができます。
• NPM実行ビルド：プロジェクトパッケージは、本番環境でのコードをコンパイルし、ビルドディレクトリに、すべてのコードが適切にパッケージ化され、ハッシュ名の変更ファイルを使用している間圧縮を最適化し、package.jsonでコマンドニーズを実行する前に新しいストリップ設定"homepage": "."（プロファイルの上に与えられている）、ビルド後のプロジェクトは、サーバーにアクセスする必要がある一方で、そうでない場合は空白のページが開きます。
• NPM走行テスト：インタラクティブモニタモードでプログラムを実行してテストを開始します。
• NPM実行イジェクト：隠されたコンフィギュレーションのエクスポート、知っておく必要がありますが、作成反応するアプリの足場である、本質的に（node_modulesは/反応-スクリプト）プロジェクトを構成するには、スクリプトを反応させ、すべてのプロファイル情報が隠されているが使用されている。手動での必要性拡張された構成を変更WebPACKのときに隠された構成を露出させる必要がある場合があり、特に注目すべきは、（再構成は非表示）操作は、使用イジェクト後、それを回収することができない一方向の動作であることです。

第三に、自動的に生成されたプロジェクトのディレクトリとファイルの解析：

• node_modules：プロジェクトの依存関係のディレクトリ。

• 公共：;プロジェクトの下のすべてのファイルを直接NPMの実行ビルドによってパッケージ化されたビルドディレクトリにコピーされますパブリックディレクトリは、そのディレクトリ内のファイルはWebPACKの梱包、解析され、ロードされません。

  • favicon.icoを：サイトアイコンがある[代替を削除]
  • index.htmlを：ページテンプレートは、WebPACKのパッケージは、出力ファイルのテンプレートに導入されます。補足：環境変数でindex.htmlを%PUBLIC_URL%公開ディレクトリのパスを指すように。
  • manifest.jsonを：PWAは、デスクトップの追加機能を達成するために適用されますがmanifest.jsonを依存します。あなたはmanifest.jsonをファイルを通じて、アイコン、名前やその他の情報を設定することができます。

• SRC：ソースディレクトリにはindex.js App.test.js registerServiceWorker.jsファイルに加えて、ディレクトリがある持っている特定の意義は、直接削除されている残りのファイルの使用方法を示しています

  • index.js：プロジェクト全体のエントリファイルです。
  • App.test.js：テストユニットのプレゼンテーションは、まだなぜ使用することを知りません。直接削除することができます。
  • registerServiceWorker.js：サービスワーカーがバックグラウンドで実行中のスレッドであるが、それはオフラインキャッシング、メッセージのプッシュなどを自動的に更新などのバックグラウンドタスクに対処するために使用することができます。registerServiceWorkerはキャッシュリソースの使用のプロジェクトを、反応する登録サービスワーカーで、あなたので、あなたが訪問次回は、あなたはすぐにリソースにアクセスすることができます。リソースがキャッシュされるためと、そうであっても場合にもオフラインアプリケーション（この場合に使用されるリソースは、キャッシュされたリソースの前にある）にアクセスすることができます。注、registerServiceWorkerは、サービス従事者のみが本番環境で有効になり、登録、およびhttps効果的にするためにのみ機能。
• .gitignore：コンフィギュレーション・ファイルは、ファイルフィルタgithubのです
• README.md：このファイルには、記述ファイルgithubのです
• package.json：プロジェクトに必要な様々なモジュール、および（名前、バージョン、ライセンスやその他のメタデータなど）の構成情報項目を定義します。部分的に依存モジュールが隠されています。
• yarn.lockは：更新パ​​ッケージまたは関連するバージョンyarn.lockファイルにバージョン情報に依存する各糸を追加することにより、ヤーン、NPMは、同様の機能を持って、またロックNPMファイルを生成することができ、糸を使用すると便利ではありません

第四に、（以下に例）WebPACKのコンフィギュレーションを展開します

4.1方法1：設定WebPACKの暴露と変更

• 露光プロファイル：

$ npm run eject
说明: 执行eject脚本后，项目下会新增或对部分配置文件进行修改；项目下 script 目录存放着脚本文件， config 目录下存放着配置文件

• ダウンロードしてインストール依存性：以下、ローダーレス

$ npm install less-loader less -dev

• configディレクトリ内の設定ファイルを変更WebPACKの：

// 需同时修改下面的两个文件：
// 开发环境下的配置文件：webpack.config.dev.js 
// 生产环境下的配置文件：webpack.config.prod.js
// 两个文件的修改内容相同，对应修改内容如下(三处需要进行修改)
......
{
    // 【1】修改文件匹配正则
    test: /\.(css|less)$/, 
    use: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
            // 【2】将原本数字 1  改为数字2
            importLoaders: 2,
        },
        },
        { .... },
        // 【3】添加新的加载配置对象
        {
            loader: require.resolve('less-loader'),
        }
    ],
}
......

4.2 2：反応-APP-再配線WebPACKのカスタム設定（追加またはカバー）に

• インストールの依存関係が反応するアプリ-再配線します：

$ npm install react-app-rewired --save-dev

• スクリプトコマンドを変更Package.json：変更を次のように

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  }

• （そして、同じレベルpackage.json）プロジェクトのルートディレクトリに新しいコンフィギュレーション・ファイルの設定-overrides.js、および以下を追加します

module.exports = function override(config, env) {
    // 在这里添加配置
    return config;
}

• インストールの依存関係はあまり依存関係のためのサポートによって達成され、アプリ内-のReWireレス反応します：

$ npm install react-app-rewire-less --save
说明: 这里不再需要额外单独安装依赖包：less-loader  less

• コンフィギュレーション以下のWebPACKに、変更設定ファイルをConfigが、overrides.js

const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
  // 只需要一条配置信息即可实现对less的支持
  config = rewireLess(config, env);
  // 下面注释用于配置loader的参数
  // config = rewireLess.withLoaderOptions(someLoaderOptions)(config, env);
  return config;
}

第五に、作成反応し、アプリ内での使用Antd

5.1一般的な使用（推奨されません）

• プロジェクトをビルドします：

$ create-react-app demo
$ cd demo
$ npm run start

• Antd依存関係が導入さ：

$ npm install npm

• 導入前に導入する必要があるが（すべてのスタイルは、プロジェクトの入り口に導入された）コンポーネントantdスタイルをantd：

import antd/dist/antd.css

• プロジェクトで導入antdコンポーネント

import { Button } from 'antd';

オンデマンドでロードされた5.2

- 上面引入组件和样式的方式，会一次性加载所有样式并引入组件中的所有相应模块；
- 这种引入方式将会影响到应用的网络性能；
- 相应的就需要改变引入组件和样式的方式，实现样式和组件的按需加载；
- 下面将介绍三种按需加载组件样式的方法：

5.2.1方法A：正確なローディングアセンブリ

import Button from 'antd/lib/button';
import 'antd/lib/button/style'; 
// 或者通过import antd/lib/button/style/css 进行加载样式

5.2.2方法2：実施構成で露光バベル・プラグインインポートプラグ需要負荷によって
バベル・プラグインインポートアセンブリコードとプラグスタイルバベルをロードするための要求であります

• 露出したコンフィギュレーション

$ npm run eject

• プラグインをインストールします。

$ npm install babel-plugin-import --save-dev

• 修正package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
},

• コンポーネントの構成は、直接antdを導入し、さらなる導入CSSスタイルを必要としないことができる後。

import { Button } from 'antd';9

5.2.2方法3：バベル - プラグインのインポートによって+負荷（公式サイト推奨）アプリ-再配線デマンドの反応

1. そこに使用される上述されている;主のWebPACKの拡張のための構成を露出することなく配置;:反応するアプリを、再配線
2. バベル・プラグインインポートアセンブリバベルウィジェットコードとパターンローディングのために要求され

• インストールの依存関係：バベル - プラグインのインポート

$ npm install babel-plugin-import --save-dev

• して、新しい拡張された構成のWebPACKのバベルプラグ、CONFIG-overrides.js変更（追加）以下のものを追加するように反応-APP-再配線。

// 引入 react-app-rewired 添加 babel 插件的函数
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', 
        { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
    return config;
};

• コンポーネントの構成は、直接antdを導入し、さらなる導入CSSスタイルを必要としないことができる後。

import { Button } from 'antd';9

反応-APP-再配線延長のWebPACKでantdカスタムテーマを達成するために5.3

主に以下ローダmodifyVarsパラメータを使用して、設定するテーマ

• インストール構成：反応するアプリ-再配線（ここでは詳しく説明しません上に導入されています）
• インストールの依存関係は、APP-のReWireレス反応：以下ローディングパラメータに同時に添加modifyVarsのサポートを実装します

 $ npm react-app-rewire-less --save-dev 

• 設定ファイルの設定-overrides.jsを変更

const rewireLess = require('react-app-rewire-less');
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    // 扩展 webpack ==> 支持less
    config = rewireLess(config, env);
    // 配置loader参数
    config = rewireLess.withLoaderOptions({
        // 修改默认颜色 实现自定义主题
        modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
   // antd 按需加载配置
    config = injectBabelPlugin(['import', 
        { libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
    return config;
}

5.4プラグインバベル・プラグイン・変換・デコレーター・レガシーを通じてデコレータのサポートを実装

構成を曝露することによって達成5.4.1

• 露出したコンフィギュレーション

$ npm run eject

• プラグインをインストールします。

$ npm install --save-dev babel-plugin-transform-decorators-legacy

• 修正package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    ["transform-decorators-legacy"]
  ]
},

デコレータを実装するためのサポートを拡張するプラグ反応-APP-再配線構成を使用して5.4.2

• 反応アプリ-再配線上に詳述の使用：
• プラグインをインストールします。

$ npm install --save-dev babel-plugin-transform-decorators-legacy

• 書き込み設定-overrides.jsプロフィール

// 导入添加babel插件的函数
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  // 修饰器扩展 (添加babel插件：transform-decorators-legacy ）
  config = injectBabelPlugin('transform-decorators-legacy', config)
  return config;
};

シックス・よくある質問：

6.1の発見後に開始したプロジェクトは、コンフィギュレーションを展開すると通じアプリ-再配線反応すると効果がありませんか？

• 設定に問題がないことを確認します
• 必ず使用して正しく修正されているスクリプトコマンドは、スクリプトコマンドを変更するための拡張設定の必要性がアプリ-再配線が反応であることを確認してください

{
  ....
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
...
}