新建项目并引入组件

1,全局安装脚手架

npm install -g create-react-app

2,新建项目

create-react-app reactantd

3,安装组件

npm install antd --save

4,引入组件

在需要使用组件的页面进行引入并使用

import React, { Component } from 'react';
import Button from 'antd/lib/button'
import 'antd/dist/antd.css' class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<Button type="primary">antd</Button>
</header>
</div>
);
}
} export default App;

组件按需加载

1,要配置组件的按需加载,需要在项目根目录安装react-app-rewired,用来取代react-script,在使用npm进行安装的时候,还需要指定特定的版本,另外,还需要安装babel进行模块导入:

npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save

2,在项目根目录新建文件config-overrides.js,用于在项目启动前,先对webpack进行整合。在这个文件中,需要引入

injectBabelPlugin函数:
const { injectBabelPlugin } = require("react-app-rewired");

module.exports = function override(config, env) {
// antd按需加载
config = injectBabelPlugin(
["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
config
); return config;
};

3,修改package.json文件中的启动脚本:因为我们在上面是使用react-app-rewired来取代react-script,所以需要将scripts中的react-scripts全部修改为react-app-rewired:

4,在需要使用组件的地方修改引入方式,实现真正意义上的按需加载:

5,重启服务

代码下载:点这里

react使用ant-design组件库的更多相关文章

  1. 如何用 Blazor 实现 Ant Design 组件库

    本文主要分享我创建 Ant Design of Blazor 项目的心路历程,已经文末有一个 Blazor 线上分享预告. Blazor WebAssembly 来了! Blazor 这个新推出的前端 ...

  2. react的ant design的UI组件库

    PC官网:https://ant.design/ 移动端网址:https://mobile.ant.design/docs/react/introduce-cn antd-mobile :是 Ant ...

  3. react使用ant design pro时的滑动图片组件

    react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1. ...

  4. react项目中antd组件库的使用需要注意的问题

    antd是蚂蚁金服推出的ui组件库,给我们在react项目开发中提供了大大的便利.但在使用的过程中,或多或少的会遇到一些问题,毕竟,用的是别人的东西,就得遵守别人的规则嘛!官方文档:https://a ...

  5. ant design pro 当中改变ant design 组件的样式和 数据管理

    ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...

  6. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  7. React 项目 ant design 的 CheckboxGroup 验证

    使用 ant design 提供的 getFieldDecorator 进行验证 一般开始使用默认选中 <FormItem> {getFieldDecorator('checkProtoc ...

  8. react ,ant Design UI中table组件合并单元格并展开详情的问题

    需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢?  单元格合并?  还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...

  9. 采用React+Ant Design组件化开发前端界面(一)

    react-start 基础知识 1.使用脚手架创建项目并启动 ​ 1.1 安装脚手架: npm install -g create-react-app ​ 1.2 使用脚手架创建项目: create ...

  10. React +Redux+ Ant Design + echarts 项目实践

    项目框架 采用React.js作为项目的框架 采用redux作为数据管理的框架 采用antd作为项目的UI组件 采用echarts完成项目中折线图的绘制 个人项目工作流程总结 拿到UI高保真图片之后先 ...

随机推荐

  1. php同curl post 发送json并返回json数据实例

    <?php $arr = array( 'subject'=>'课程', 'loginName'=>'Durriya', 'password'=>'123' ); //json ...

  2. weex中使用sass(失败)

    在编辑器中可以正常编写不报错  但是在页面上不起作用 <style lang="scss" scoped></style> 第一步  安装依赖 npm i ...

  3. springcloud-Eureka-服务注册与发现核心组件

    Eureka组件 Eureka是Netfilx开源的服务发现组件,本身是一个基于rest的服务,它包含client和server两部分. Spirng Cloud将它集成在子项目Spirng Clou ...

  4. test pthread code

    #include <iostream> #include <pthread.h> using namespace std; ; void * add(void *); pthr ...

  5. Excel遇到的坑lookup和vlookup的用法

    lookup (第一种)  lookup必选保证有序查询,学籍号是按顺序排的 如上表格,表格2的成绩输入到表格1成绩中 鼠标选择F3->公式->插入函数->搜索lookup 三个参数 ...

  6. .net反编译的九款神器

    本人搜集了下8款非常不错的.Net反编译利器: 1.Reflector Reflector是最为流行的.Net反编译工具.Reflector是由微软员工Lutz Roeder编写的免费程序.Refle ...

  7. 合并分支,从dev到master

    我在本地创建了dev分支,项目也push到远程的dev分支,今天在远程分支进行合并时,将dev合并到master,结果公司的gitlab始终不响应,我不知道是公司的网络不行还是我操作错误,就只能另想办 ...

  8. lenet-5,Alexnet详解以及tensorflow代码实现

    http://blog.csdn.net/OliverkingLi/article/details/73849228

  9. jmeter+jdk 环境搭建

    1.安装jdk环境  https://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html 划上重点,,,如果发现java -version不 ...

  10. 剑指Offer 8. 跳台阶 (递归)

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 题目地址 https://www.nowcoder.com/pract ...