、ケーキの上のアイシング反応するアプリを作成するために、実際のニーズを満たすためにどのように？

ディレクトリ

フロントセクション
後端部

作成反応するアプリ1ページのアプリケーションの足場でのWebPACKに基づいて、公式のオファーに私たちを反応させるのコードデバイダに関連する関数、バベル、画像処理、熱負荷、CSSのモジュラー、CSSプリプロセッサを設定し、生産ビルド、テスト、ように。このドキュメントの作成-REACTアプリ。強く見てみることをお勧めします。

私たちは、使用することをお勧めしnpx create-react-app myapp、より良いプロジェクトを管理するために、ローカルインストールの代わりに、グローバルインストールを。

フロントセクション

ある程度、足場の関係者は、それをより完璧にするために、次の拡張完璧に近くなっています。

面倒な複雑な構成を非表示にするには、デフォルトの足場のWebPACKは、目的は、開発者がプロジェクトに注力できるようにすることです。しかし、また、それは、コマンドを提供npm run ejectさらさ構成に、しかし、この動作は不可逆的です。

私たちは、関連する構成をさらすことなく行われ、ケーキの上のアイシングされなければなりません。

3000：デフォルトの起動時のポート番号を変更します。

実際には、例えば、ポート番号の競合が一般的であり、複数のアプリケーションがあり、その後、どのようにデフォルトのポート番号を変更するには？

インストールnpm install --save-dev cross-env、ウィンドウが直接サポートしていないため、互換性を確保PORT=5000 node scripts/start.js
追加したコマンドを起動する前にpackage.jsonファイルcross-env PORT=设置的端口号

"scripts": {
    "start": "cross-env PORT=5000 node scripts/start.js"
  },

インストールライブラリ

axios
反応-ルータ-DOM
Reduxの、反応し、再来
antd
...

変更されたリソースのパスを包装する相対パス

実用的なアプリケーションでは、単純に、相対パスをパケット化リソースを使用する必要がpackage.json設定以下：

{
    "scripts": {
        ...
    },
    "homepage": "."
}

拡張設定のWebPACK

使用反応するアプリ-再配線、このツールのインストール、プロジェクトのルートディレクトリに新しいファイルの設定-overrides.jsファイルを。この時点で、私たちは〜のWebPACKの様々な設定することができます

しかし！反応アプリ-rewired2.x後、injectBabelPluginのやり方は、もはやあなたがカスタマイズ-CRAをインストールする必要があり、サポートされていません。

具体的には、アリのデザインは、最新のソリューションの公式文書を与えられています。詳細ビューに移動します。https://ant.design/docs/react/use-with-create-react-app-cn

このように私たちのお勧めの方法です。そのためより多くの追加のファイルを生成せず、設定し、よりシンプルかつ制御可能な方法になる傾向があります。

具体的な手順：

まず、反応アプリ-再配線をインストールします。

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

次のようにPackage.jsonは、ファイルを変更します。

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

次に、カスタマイズ-CRAをインストールします。

npm install customize-cra --save-dev

そして、ルートディレクトリの設定-overrides.jsファイルに追加して、コンフィギュレーションを設定し、参照文書-CRAをカスタマイズ：

私たちは、最も一般的なコンポーネントライブラリantdを反応させるプロジェクトは、我々はオンデマンドロードを設定する必要があります。

バベル - プラグインのインポートを使用して、それがロードバベルプラグアセンブリコードとスタイルのための需要があります。

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

設定のWebPACK：

/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');

+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );

antdカスタムテーマ

設定のトピックの要件に従って、カスタムテーマは、以下の変数オーバーライド機能を使用する必要があります。

インストール少なくローダー

npm install less less-loader --save-dev

設定のWebPACK：

/* config-overrides.js */
- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
-   style: 'css',
+   style: true,
  }),
+ addLessLoader({
+   javascriptEnabled: true,
+   modifyVars: { '@primary-color': '#1DA57A' },
+ }),
);

これは、テーマ設定を行うために利用さmodifyVarsにあまりローダーをとります。もちろん、ここでmodifyVarsの値は、テーマファイルにすることができます。

パッケージの後に我々は、静的なフォルダを見つけ、その後sourcemapどれだけ近いか、それは、CSSやJSマップファイルの多くを持っていますか？

/* config-overrides.js */
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

+ process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);

他の構成

const { override, fixBabelImports, addLessLoader, addWebpackAlias, useBabelRc, addDecoratorsLegacy } = require('customize-cra');
const path = require('path')

// 关闭 sourcemap
process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  // 按需加载
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    // style: 'css' // 按需加载
    style: true // antd 自定义主题 less
  }),
  // antd 自定义主题 less 变量覆盖全局 依赖 less、less-loader
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#814a96'
    }
  }),
  // 配置别名
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    'components': path.resolve(__dirname, 'src/components'),
    'pages': path.resolve(__dirname, 'src/pages')
  }),
  // 允许使用.babelrc文件进行Babel配置。
  useBabelRc(),
  // 装饰器 依赖 @babel/plugin-proposal-decorators
  addDecoratorsLegacy()
)

npm install @babel/plugin-proposal-decorators --save-dev

プロキシエージェント

フロントエンドクロスドメインプロセス。

srcディレクトリに新しいファイルをSetupProxy.js

HTTPプロキシ・ミドルウェアをインストールします。

npm install http-proxy-middleware --save-dev

設定setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://xx.xx.xx.xx:8000/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}

後端部

実際には、フロントのニーズと後端は、多くの場合、同時開発されている決定、インタフェースを提供するために、バックエンドは、タイムリーにそうではありませんが、どのようにバックエンドインタフェース例不在下でのフロントこの時間は、それは、適切に開発し、その機能を確保することができますノーマル。

答えは次のとおりです。モックデータ。

だから、オンラインのこのような使用easymockアナログ・インターフェース・データなどの模擬データを、多くの方法を、どのように行う、当然のことながら、最善の方法は、独自のサービスノード、アナログインタフェースとデータを構築することである、より柔軟でなく、技術をアップグレードするには、バックエンドのいくつかの知識、より良いですコミュニケーションと交流。

新しいフォルダのsrcディレクトリ・サーバー・ノードでは、入口として次その後にビルドファイルをindex.js。

インストールライブラリ

さらに
koa-router
KOAボディ
...

KOA知識、自分で研究。

再起動し、熱負荷

そして、フロントエンドは、のように、ファイルを変更する、それが自動的に再起動します。

インストールnodemon：

npm install nodemon --save-dev

配置 package.json

scripts: {
  server: 'nodemon server-node/index.js'
}

おそらく、これらの、より良い提案や取り決めがある、してください展示会~~