idea antd react

参照先:https://ant.design/index-cn
1.nodejsのインストール
https://blog.csdn.net/CHS007chs/article/details/84710362
2. create-react-app

cnpm install -g create-react-app yarn

3、ideaで開く
その後、termialでコマンドを実行できます.
4、umiのインストール

cnpm install umi --save-dev

インストールが完了するとpackage.jsonにdevDependenciesの構成が1つ多く表示されます.これは、上記のコマンドでパラメータであるsaveが依存情報をpackage.jsonに保存できるためです.これにより、他の開発者がコードをダウンロードした後、cnpm installを実行するだけでプロジェクト依存パッケージが自動的にインストールされます.
(1)umiでは、.umirc.jsとconfig/config.jsのどちらかをプロファイルとして使用できるように、コンフィギュレーションと約束が多く使用されています.
(2)umiでは,約束されたページコードを格納するフォルダがpagesであり,singularをtrueに追加してpageを約束されたフォルダにすることもできる.

export default {
  singular: true,
}

(3)umiで起動
package.jsonのscriptsに2つのコマンドを追加します.

{
  "scripts": {
+   "dev": "umi dev",
+   "build": "umi build"
  }
}

scriptsで定義されたコマンドは、プロジェクトルートディレクトリでcnpm run[scriptname]で実行できます.

cnpm run dev

(4)経路
umiでは、所定のルーティングを使用することができ、pageの下のjsファイルはファイル名に従って1つのルーティングにマッピングされるか、プロファイルのルーティングを使用することができます.

xport default {
  routes: [{
    path: '/',
    component: './HelloWorld',
  }],
}

componentはpageディレクトリに対する相対パスです.
5、umi-plugin-reactプラグイン
umiはプラグインによって機能拡張することができ、umi-plugin-reactはumi公式のプラグインである.

cnpm install umi-plugin-react --save-dev 

次に、コンフィギュレーションファイルconfig/config.jsにプラグインを導入します.

export default {
  plugins: [
    ['umi-plugin-react', {
      //            ，         ，                    
    }],
  ],
  routes: [{
    path: '/',
    component: './HelloWorld',
  }],
}

6、構築
cnpm run buildで最終的な生成物を構築することができ、このコマンドを実行すると最終的なHTML、CSS、JSがdistディレクトリの下に生成されます.
7、antd導入
ant designはエンタープライズクラスの製品にサービスする設計体系であり、コンポーネントライブラリはそのReact実装であり、antdはnpmパッケージとして公開され、開発者のインストールと使用を容易にする.
(1)umiで
プラグインumi-plugin-reactでantdを構成することでantdプラグインを開くことができます.

export default {
  plugins: [
    ['umi-plugin-react', {
      antd: true
    }],
  ],
  // ...
}

(2)または自分で取り付ける

#         
$ cnpm install --save antd

8、制御されたコンポーネントと非制御されたコンポーネント
違いは、このコンポーネントの状態が外部で変更できるかどうかであり、設計されたコンポーネントは、開発者がコンポーネントの属性を制御しない場合、コンポーネントは自分で状態を管理し、開発者がコンポーネントの属性を制御場合、コンポーネントは自分で状態を管理し、開発者がコンポーネントの属性を制御場合、コンポーネントは自分で状態を管理し、開発者がコンポーネントの属性を制御場合、コンポーネントは属性によって制御されます.
9、エージェントの構成
プロファイルconfig/config.jsでroutesと同じレベルにproxyフィールドを追加するだけです.

   routes: [
   // ...
   ],

+  proxy: {
+    '/dev': {
+      target: 'https://08ad1pao69.execute-api.us-east-1.amazonaws.com',
+      changeOrigin: true,
+    },
+  },

構成の意味は、ローカルサーバlocalhost:8000のajax呼び出しで/devで始まる場合は、リモートに転送することです.https://08..サーバでは、/devも転送アドレスに保持されます.
アナログサービス側データ
1、アナログが正常にデータを返す
まず、プロジェクトにmockディレクトリを追加し、mockディレクトリの下にファイルを作成します.ファイル全体にjsオブジェクトをexportする必要があります.オブジェクトのキーは

構成、値はfunctionで、薬草として
呼び出しがkeyに一致すると、それに対応するfunctionが実行されます.
たとえば

const random_jokes = [
  {
    setup: 'What is the object oriented way to get wealthy ?',
      punchline: 'Inheritance',
  },
  {
    setup: 'To understand what recursion is...',
    punchline: "You must first understand what recursion is",
  },
  {
    setup: 'What do you call a factory that sells passable products?',
    punchline: 'A satisfactory',
  },
];

let random_joke_call_count = 0;

export default {
  'get /dev/random_joke': function (req, res) {
    const responseObj = random_jokes[random_joke_call_count % random_jokes.length];
    random_joke_call_count += 1;
    setTimeout(() => {
      res.json(responseObj);
    }, 3000);
  },
};

2、シミュレーションエラー
res.statusを使用してhttpリクエストエラーをシミュレートすることもできます

export default {
  'get /dev/random_joke': function (req, res) {
    res.status(500);
    res.json({});
  },
};

国際化
1、antdの国際化
antdは現在の言語を識別するLocaleProviderコンポーネントを提供し、antdはreactのcontextを通じてこれらの情報の親をLocaleProviderに包まれたサブコンポーネントに渡し、国際化を実現する.

import zhCN from 'antd/lib/locale-provider/zh_CN';
import { DatePicker, LocaleProvider } from 'antd';

export default () => {
  return (
    
      
    
  )
}

antdはantd/lib/locale/locale-provider/*に位置するカラムに組み込まれた言語リソースを提供します.LocaleProviderのlocaleプロパティとして直接使用します.
2、antdにおける業務コンポーネントの国際化
国際化案としてreact-intlを推奨します.まずインストールが必要です 

cnpm install react-intl --save

react-intlの国際化案はantdと似ています.IntlProviderコンポーネントを提供しています.このコンポーネントにビジネスコードをパッケージすることができます.

import zhCN from 'antd/lib/locale-provider/zh_CN';
import { DatePicker, LocaleProvider } from 'antd';
import {
  FormattedMessage,
  IntlProvider,
  addLocaleData,
} from 'react-intl';
import zhData from 'react-intl/locale-data/zh';

const messages = {
  'helloworld': '  ',
};

addLocaleData(zhData);

export default () => {
  return (
    
      
        

          
          
        
      
    
  )
}

3、umiの業務コンポーネントの国際化
umiはreact-intlとantdをカプセル化するより便利なスキームを提供する.
(1)初期化構成

export default {
  plugins: [
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      locale: {
        enable: true,
      },
    }],
  ],
  // ...
}

プラグインセットumi-plugin-reactでlocaleを構成してumi-plugin-localeプラグインを開くと、umiは自動的にLocaleProviderを通じてantdのコンポーネントを国際化します.ブラウザ言語に従って言語を自動的に切り替えます.また、localeディレクトリはビジネス関連リソースの保存パスとして約束されています.
2に基づいて、srcでlocaleディレクトリを新規作成し、zh-CN.jsとen-US.jsの2つのファイルを新規作成します.

// src/locale/zh-CN.js
export default {
  helloworld: '  ',
}
// src/locale/en-US.js
export default {
  helloworld: 'hello world',
}

アクセス権制御
1、フロントエンドとバックエンドの関係
権限の真の制御はサービス側が責任を負わなければならない.だからここで言う権限は、フロントエンドのui制御がもっと多いです.
ユニットテスト
umiには、ユニットテストのライブラリとしてjestが内蔵されており、jsメソッドまたはコンポーネントをjestでテストする方法について説明します.
1、jestを使う
umi testを実行すると、すべての.test.jsの最後のファイルに一致して実行されます.通常、テストのコードをtestフォルダの下に統一することを約束します.
2、配置jest
その構成はpackage.jsonでもプロジェクトルートディレクトリのjest.config.jsでもよいことを約束します.

//              export default     ES6    ，      jest      ，    umi   。
module.exports = {
  testURL: 'http://localhost:7001',
};

3、一つの方法をテストする
Jestはテストファイルを実行するときにデフォルトでいくつかの方法を注入します.最も簡単なテストでは、testとexpectの2つの方法を理解するだけでいいです.testメソッドは2つのパラメータを受信し、1つ目はテスト記述であり、2つ目は関数であり、テストサンプルを包み、このサンプルではexpectメソッドを呼び出してコードを検出することができます.

const sum = function (a, b) {
  return a + b;
};

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

package.jsonにscripts.testをumi testに追加し、cnpm run testを実行します.
4、一つのコンポーネントをテストする
(1)src/componentでTestDemo.jsを新規作成

export default () => {
  return 
test
;
};

(2)test/helloword.test.jsにテストを追加する前に、Reactのテストツールライブラリであるテストパッケージをインストールする必要があります.React仮想domを使用してテストサンプルを作成するのに便利です.

cnpm i --save-dev enzyme enzyme-adapter-react-16

次に、次のテストサンプルを追加します.

import { mount } from 'enzyme';
import TestDemo from '../src/component/TestDemo';

test('TestDemo', () => {
  const wrapper = mount();
  expect(wrapper.find('div').text()).toBe('test');
});

cnpm run testを実行すると結果が年になります
 
よくある質問:
1、ずっとscanning files to indexに詰まっている
file->project structure->modulesでnode_modules exculed落下
2、The current inotify(7) watch limit is too low
ファイルが開きすぎたため、linuxカーネルパラメータを変更します.

You can do it by adding following line to the /etc/sysctl.conf file: 
fs.inotify.max_user_watches = 524288 


Then run this command to apply the change: 
sudo sysctl -p