reactにおけるUIライブラリantdのインストールと関連構成

一、uiライブラリ

       npm i antd         ant design mobile (mobile)               ant design (pc) 
(1)グローバル導入(一般的には用いない)
入り口でjsにimport'antd/dist/antdを導入する.css';
コンポーネントにコンポーネントを導入すれば使用できます.例えば、コンポーネントにbuttonを使用します.
import{Button}from'antd'を導入します.
        xxx
(2)オンデマンドロード(共通)
              1)  npm i  react-app-rewired customize-cra
react-app-rewired弾射なしでwebpack customize-craカスタム足場環境を構成
2)package.jsonでの修正(3項目)
              "scripts": {
                    "start": "react-app-rewired start",
                    "build": "react-app-rewired build",
                    "test": "react-app-rewired test",
                    "eject": "react-scripts eject"
                },
            3) npm i  babel-plugin-import
4)プロジェクトのルートディレクトリにプロファイルconfig-overridesを作成する.jsはconfig-overrides.jsファイルには次のコードが書かれています.
          

 const { override, fixBabelImports } = require('customize-cra');

            module.exports = override(

                   fixBabelImports('import', {

                     libraryName: 'antd',

                     libraryDirectory: 'es',

                     style: 'css',

                   }),

                 );

5)カスタムテーマ(必要に応じて使用可能)
1)npm i lessとnpm i less-loaderのインストール
2)config-overrides.jsファイルには次のコードが書かれています.

const { override, fixBabelImports,addLessLoader } = require('customize-cra');
module.exports = override(
       fixBabelImports('import', {
         libraryName: 'antd',
         libraryDirectory: 'es',
         style: true,
       }),
        addLessLoader({
           javascriptEnabled: true,
           modifyVars: { '@primary-color': '#00F' },
         })
     );

二,.react cli環境で@でsrcを指す(詳細コードは以下を参照)

1)config-overrides.jsファイルにはconst{addWebpackAlias}=require('customize-cra')が導入されています.
const{resolve}=require('path')を導入
moduleでexports=overrid({
addWebpackAlias({
              '@': resolve('src')
           })
})    

​
const { override, fixBabelImports,addLessLoader,addWebpackAlias  } = 
require('customize-cra');
const {resolve}=require("path");
module.exports = override(
       fixBabelImports('import', {
         libraryName: 'antd',
         libraryDirectory: 'es',
         style: true,
       }),
        addLessLoader({
           javascriptEnabled: true,
           modifyVars: { '@primary-color': '#00F' },
         }),
         addWebpackAlias({
          '@': resolve('src')
      })
     );

​

三.,アクセサリーの設定

1)npm i@babel/plugin-proposal-decoratorsのインストール
2)config-overrides.jsファイルにconst{addDecoratorsLegacy}=require('customize-cra');
そしてmoduleでexports=overrid({
addDecoratorsLegacy()の追加
})(詳細コードは以下のとおり)

const { override, fixBabelImports,addLessLoader,addWebpackAlias,addDecoratorsLegacy } = 
require('customize-cra');
const {resolve}=require("path");
module.exports = override(
  addDecoratorsLegacy(),
       fixBabelImports('import', {
         libraryName: 'antd',
         libraryDirectory: 'es',
         style: true,
       }),
        addLessLoader({
           javascriptEnabled: true,
           modifyVars: { '@primary-color': '#00F' },
         }),
         addWebpackAlias({
          '@': resolve('src')
      })
     );

4)@上位コンポーネント(パラメータ)を適用する(パラメータがあれば括弧、ない場合は付けない)(例は以下の通り)
classコンポーネントextends Component{
                }        
上位コンポーネント(パラメータ)と等価(コンポーネント)

import React from 'react';

var Hoc=(jf)=> (Com)=>{
    return class extends React.Component {
        render(){
            if(jf>10)
                 return  <> 2020 © qf>
            else{
                return 
 
            }
        }
    }
}

export default Hoc;

import React,{ Component } from 'react'
import Hoc from '../hoc'
 @Hoc(22)
 class One extends Component {
     componentDidMount(){
         fetch("/api/topics").then((res)=>res.json()).then((res)=>{
             console.log(res)
         })
     }
    render() {
        return (
            

                One
            
        )
    }
}

export default One;

四構成エージェント

1)npm i http-proxy-middlewareのインストール
2)srcディレクトリの下にsetupProxyを新規作成する.jsファイルはこのファイルに次のコードを書きます.

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app) {
    app.use('/api', 
    createProxyMiddleware({ 
              target: 'https://cnodejs.org/api/v1',
              changeOrigin: true,
              pathRewrite:{
                  "^/api":"/"
              } 
            }
         ));
}