React.js 项目集成UI框架（Ant Design）

古城微笑少年丶 2023-10-10 12:09 49阅读 0赞

前提：本文基于：[基于Node.js 搭建React.js开发环境][Node.js _React.js]

## 第一步：React.js 项目集成UI框架（antd） ##

执行如下命令：cnpm add antd

C:\react_workspace\one>cnpm add antd
    npm WARN @pmmmwh/react-refresh-webpack-plugin@0.4.2 requires a peer of type-fest@^0.13.1 but none is installed. You must install peer dependencies yourself.
    npm WARN @pmmmwh/react-refresh-webpack-plugin@0.4.2 requires a peer of webpack-hot-middleware@2.x but none is installed. You must install peer dependencies yourself.
    npm WARN @pmmmwh/react-refresh-webpack-plugin@0.4.2 requires a peer of webpack-plugin-serve@0.x || 1.x but none is installed. You must install peer dependencies yourself.
    npm WARN jest-config@26.6.3 requires a peer of ts-node@>=9.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN jsdom@16.4.0 requires a peer of canvas@^2.5.0 but none is installed. You must install peer dependencies yourself.
    npm WARN react-scripts@4.0.1 requires a peer of typescript@^3.2.1 but none is installed. You must install peer dependencies yourself.
    npm WARN sass-loader@8.0.2 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN sass-loader@8.0.2 requires a peer of sass@^1.3.0 but none is installed. You must install peer dependencies yourself.
    npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
    npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
    npm WARN ws@7.4.1 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
    npm WARN ws@7.4.1 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\chokidar\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.2.1 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.2.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    
    + antd@4.9.4
    added 59 packages from 31 contributors in 123.276s

## 第二步：修改 `src/App.js`，引入 antd 的按钮组件 ##

import React from 'react';
    import { Button } from 'antd';
    import './App.css';
    
    const App = () => (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
    
    export default App;

## 第三步：修改 `src/App.css`，在文件顶部引入 `antd/dist/antd.css样式文件` ##

@import '~antd/dist/antd.css';
    .App {
      text-align: center;
    }
    
    .App-logo {
      height: 40vmin;
      pointer-events: none;
    }
    
    @media (prefers-reduced-motion: no-preference) {
      .App-logo {
        animation: App-logo-spin infinite 20s linear;
      }
    }
    
    .App-header {
      background-color: #282c34;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: calc(10px + 2vmin);
      color: white;
    }
    
    .App-link {
      color: #61dafb;
    }
    
    @keyframes App-logo-spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

## 第四步：重新启动React.js 项目，访问http://localhost:3000 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

[Node.js _React.js]: https://blog.csdn.net/zhouzhiwengang/article/details/111461428
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201220200422918.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70