creat-react-apは必要に応じてantd-designを導入します。

1.インストールと初期化

$ npm install -g create-react-app

#   ：                 React          
$ npx create-react-app my-app

$ cd my-app
$ npm start

開くhttp://localhost:3000/ あなたのアプリケーションにアクセスします。
2.antdのインストール

$ npm install --save antd

3.必要に応じてロードする
CSS形式を導入すると、実際にはすべてのantdコンポーネントパターンをロードして、その中の一部のコンポーネントスタイルを使用して、消費性能を比較します。creat-react-apのデフォルト設定をカスタマイズして、必要に応じてantdをロードします。
3.1
react-app-rewiredを導入し、package.json内の起動プロファイルを修正します。新しいreact-ap-により[email protected]バージョンの関係については、customize-craをインストールする必要があります。

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

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

3.2プロジェクトのルートディレクトリでconfig-overrides.jsを作成して、デフォルトの設定を変更します。

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

/* config-overrides.js */
const {
      override, fixBabelImports } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
     
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"
  })
);

3.3 ANtdのボタンコンポーネントを導入する：

import {
      Button } from 'antd-mobile'

4.antd-mobile
必要に応じて引用されるのがantd-mobile（移動端）であれば、次のように修正する必要があります。

インストール

$ npm install antd-mobile --save

config-overrides.js

を修正します。

/* config-overrides.js */
const {
      override, fixBabelImports } = require('customize-cra');
module.exports = override(
   fixBabelImports('import', {
     
     libraryName: 'antd-mobile',
     style: 'css',
   }),
 );

5.公式サイト
Ant Design:https://ant.design/docs/react/introduce-cn Ant Design Mobile:https://mobile.ant.design/docs/react/introduce-cn