react使用ant-design组件库
新建项目并引入组件
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进行整合。在这个文件中,需要引入
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组件库的更多相关文章
- 如何用 Blazor 实现 Ant Design 组件库
本文主要分享我创建 Ant Design of Blazor 项目的心路历程,已经文末有一个 Blazor 线上分享预告. Blazor WebAssembly 来了! Blazor 这个新推出的前端 ...
- react的ant design的UI组件库
PC官网:https://ant.design/ 移动端网址:https://mobile.ant.design/docs/react/introduce-cn antd-mobile :是 Ant ...
- react使用ant design pro时的滑动图片组件
react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1. ...
- react项目中antd组件库的使用需要注意的问题
antd是蚂蚁金服推出的ui组件库,给我们在react项目开发中提供了大大的便利.但在使用的过程中,或多或少的会遇到一些问题,毕竟,用的是别人的东西,就得遵守别人的规则嘛!官方文档:https://a ...
- ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...
- RSuite 一个基于 React.js 的 Web 组件库
RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...
- React 项目 ant design 的 CheckboxGroup 验证
使用 ant design 提供的 getFieldDecorator 进行验证 一般开始使用默认选中 <FormItem> {getFieldDecorator('checkProtoc ...
- react ,ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并 遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
- 采用React+Ant Design组件化开发前端界面(一)
react-start 基础知识 1.使用脚手架创建项目并启动 1.1 安装脚手架: npm install -g create-react-app 1.2 使用脚手架创建项目: create ...
- React +Redux+ Ant Design + echarts 项目实践
项目框架 采用React.js作为项目的框架 采用redux作为数据管理的框架 采用antd作为项目的UI组件 采用echarts完成项目中折线图的绘制 个人项目工作流程总结 拿到UI高保真图片之后先 ...
随机推荐
- Django框架(四)
八.Django 模型层(2) 多表操作 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息. ...
- 1、安装Angular-CLI脚手架工具
依赖环境的安装 1.安装node.js(版本在6以上) 查看版本号:node -v 2.安装npm(npm会随着node的安装一起被安装) 3.安装Python(我安装的是2.7.14),要安装环境变 ...
- Java--- Ajax异步验证用户名是否存在
今天复习了一下 Ajax异步验证用户名是否存在,在下面我写三种,一般开发时候都用第三种 jQuery和Ajax结合的形式,下面就介绍三种,具体说明代码里就有啦,废话不多说,直接上代码: 第一种方式: ...
- python中字符串方法总结
定义一个空字符串: a=' '; s.strip() #去空格 s.upper()#全部转换成大写: s.lower()# 全部转换成小写: s.isdigit()#判断字符串是否只有数字组成:返回t ...
- Visual Basic 2017 操作Excel和word【2】持续更新……
1.控制台程序创建Excel,并设置状态栏显示“Hello World”文本 Module Module1 Private exitXL As Boolean = False Dim WithEven ...
- springboot学习之构建简单项目搭建
概述 相信对于Java开发者而言,spring和springMvc两个框架一定不陌生,这两个框架需要我们手动配置的地方非常多,各种的xml文件,properties文件,构建一个项目还是挺复杂的,在这 ...
- Xenserver7.6修改root密码
一:重启xenserver服务器 进入此界面时,先用上下建随便动下,解除4S倒计时,后按e键
- mysql慢查询----pt-query-digest详解慢查询日志(linux系统)
一.简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcpdu ...
- java知识点归集
将工作中,或者看书的过程中碰到的自己之前没有掌握的知识点进行归纳,暂时就碰到什么写什么,后续有一定量的话进行整理: 1. list实现 相关文章:https://zhuanlan.zhihu.com ...
- Linux下初次使用github
1.安装 1.1 使用yum安装的 命令:$ yum install git git-gui 1.2 生成密钥对,使用ssh-keygen方法 ssh-keygen -t [rsa|dsa],将会生成 ...