react使用 Ant ui框架

react使用 Ant ui框架

说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架。里面的组件很完善,开发中后台系统非常方便。分别基于react、vue、angular框架,各自开发了一套 Ant Design 的UI框架。(这里主要讲react框架的 Ant Design)

系列 框架 系列官方命名

Ant: |—— react Ant Design (n. (design) 设计;图案)

​ |—— vue Ant Design Vue

​ |—— angular ng-zorro

​ |—— 移动端 Ant Design Mobile 一个基于 Preact / React / React Native 的 UI 组件库

  1. Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。最早是在2015年发布的。
  2. 对react 评价: React 本身的 API 并不多,是一个较为简单的框架。但是,要用好它,必须使用其他的配套工具,所以人们常说学习 React 并不是学习一个框架,而是学习一整套 React 技术栈。

扩展新闻:

  1. React.js 是Facebook 开发所有。自2016 爆发React专利事件
    2. Twitter公司开源的Bootstrap
    3. Ant 目前还没有官方的 针对 vue移动端 版本 ui

注意: Ant 有针对react vue 移动端,pc端 ,注意区分

按钮 案例演示

antd官网 https://ant.design/docs/react/introduce-cn

1. npm 下载
npm install antd --save    /   yarn add antd     /  cnpm install antd --save
2 在react项目的css文件中引入Antd的css
@import '~antd/dist/antd.css';    //引入index.css
注意: index.js 中也要有引入   
import './index.css';

3)、 案例: 如何使用一个Button:

a在对应的组件中引入Antd
import { Button } from 'antd';
在html本分写
<Button type="primary">Primary</Button>
查看页面,已经显示了.
import React from 'react';
import {Card,Button} from 'antd'const App  = function(){function eventclick(e){
console.log(e);}
return(<div className="App"><div><button>我是原生</button><Card title="普通的按钮"><Button> 无样式按钮 </Button><Button type="primary" onClick = { eventclick}> 普通按钮 </Button><Button type="dashed"> 虚线按钮 </Button><Button type="danger"> 危险按钮 </Button><Button disabled> 被禁用的按钮 </Button></Card></div></div>)}export default App;

eact中使用Antd高级配置,按需引入css样式
现在组件已经成功运行起来了,但是在实际开发过程中还有很多问题,例如上面例子实际上加载了全部的antd组件的样式(对前端性能是个隐患)。

优化方案:按需加载

1. 安装antd
npm install antd --save
2. 安装(react-app-rewired

(react-app-rewired)一个对 create-react-app 进行自定义配置的社区解决方案

yarn add react-app-rewired    /  cnpm install  react-app-rewired --save
3. 修改package.jsonz中react-scripts 需改为react-app-rewired
"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test --env=jsdom","eject": "react-app-rewired eject"}
  1. 在项目根目录创建一个 config-overrides.js 配置文件
const { injectBabelPlugin } = require('react-app-rewired');module.exports = function override(config, env) {config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],config,);return config;};
  1. 安装babel-plugin-import babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件
yarn add babel-plugin-import   /  cnpm install babel-plugin-import --save
  1. 然后移除前面在 src/App.css 里全量添加的
@import '~antd/dist/antd.css'; 
  1. 直接引入组件使用就会有对应的css:
import { Button } from 'antd';<Button type="primary">Primary</Button>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/118499.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电大搜题:江苏开放大学学子的优秀助手

在如今信息爆炸的时代&#xff0c;获取准确、高质量的学习资源成为学生们的迫切需求。尤其对于江苏开放大学的学生来说&#xff0c;他们需要更具针对性、便捷的学习辅助工具&#xff0c;以帮助他们更好地应对学业压力。而幸运的是&#xff0c;有一款名为“电大搜题”的微信公众…

Spring Event

前言 ApplicationEvent 与 ApplicationListener 应用 实现 基于注解 事件过滤 异步事件监听 好处及应用场景 源码阅读 总结 1前言 ApplicationContext 中的事件处理是通过 ApplicationEvent 类和 ApplicationListener 接口提供的。如果将实现了 ApplicationListener …

【AI视野·今日Robot 机器人论文速览 第五十八期】Thu, 19 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Thu, 19 Oct 2023 Totally 25 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers InViG: Benchmarking Interactive Visual Grounding with 500K Human-Robot Interactions Authors Hanbo Zhang, Jie Xu, Yuch…

Qt生成PDF报告

文章目录 一、示意图二、实现部分代码总结 一、示意图 二、实现部分代码 //! 生成测试报告 void MainWindow::createPdf(QString filename, _pdf_msg_& msg, const QMap<QString, int>& ok, const QMap<QString, int>& err) {//QDir dir;if(!dir.exis…

关于Nginx缓存

Nginx缓存 一般情况下系统用到的缓存有三种 服务端缓存&#xff1a; 缓存存在后端服务器&#xff0c;如redis代理缓存&#xff1a; 缓存存储在代理服务器或中间件&#xff0c;内容从后端服务器获取&#xff0c;保存在本地客户端缓存&#xff1a; 缓存在浏览器什么时候会出现3…

使用Python脚本来生成用于测试的文件

使用Python脚本生成指定数量的文件&#xff0c;每个文件约10MB&#xff0c;内容为重复的英文句子&#xff0c;单词间只有空格作为分隔符。 import os import sys import randomWORDS ["apple", "apricot", "avocado", "banana", &qu…

vue2、vue3中路由守卫变化

什么是路由守卫&#xff1f; 路由守卫就是路由跳转的一些验证&#xff0c;比如登录鉴权&#xff08;没有登录不能进入个人中心页&#xff09;等等等 路由守卫分为三大类&#xff1a; 全局守卫&#xff1a;前置守卫&#xff1a;beforeEach 后置钩子&#xff1a;afterEach 单个…

Vue快速入门

一、概述 1.是一套前端框架&#xff0c;可免除原生JavaScript中的DOM操作&#xff0c;基于MVVM思想&#xff0c;实现数据双向绑定。 实现由MVC——>MVVM的转换 二、入门 1.新建HTML页面&#xff0c;引入Vue.js文件 2.在JS代码区&#xff0c;创建Vue核心对象&#xff0c;进行…

嵌入式软件工程师面试题——2025校招专题(三)

说明&#xff1a; 面试题来源于网络书籍&#xff0c;公司题目以及博主原创或修改&#xff08;题目大部分来源于各种公司&#xff09;&#xff1b;文中很多题目&#xff0c;或许大家直接编译器写完&#xff0c;1分钟就出结果了。但在这里博主希望每一个题目&#xff0c;大家都要…

生产环境元空间内存溢出(OOM)的问题排查

一、现象 2023.10.17下午收到业务反馈&#xff0c;说是接口调用超时&#xff0c;进件系统和核心系统调用外数系统接口时等待过久&#xff0c;引起系统异常。然后我们看了下接口调用的日志&#xff0c;确实接口的响应时间在五十秒左右。我们自己测试了下&#xff0c;发现也是这…

leetcode 503. 下一个更大元素 II、42. 接雨水

下一个更大元素 II 给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元素 是按数组遍历顺序&#xff0c;这个数字之后的第一个比它更大的数&…

【c#】2022创建WEB API接口教程demo

c#创建WEB API接口 创建WEB API接口结果图涉及到的技术设计流程创建WEB API接口 结果图 涉及到的技术 设计流程 1、创建WEB api项目,使用控制器和penapi勾选上,第一次创建项目时没有勾选,因为感觉没啥用。后面跑项目的时候,要把接口用swagger去直接生成的时候,还是需要…

自然语言处理---Transformer机制详解之BERT模型介绍

1 BERT简介 BERT是2018年10月由Google AI研究院提出的一种预训练模型. BERT的全称是Bidirectional Encoder Representation from Transformers.BERT在机器阅读理解顶级水平测试SQuAD1.1中表现出惊人的成绩&#xff1a;全部两个衡量指标上全面超越人类&#xff0c;并且在11种不…

Postman的简单使用

Postman简介 官网 Postman是Google公司开发的一款功能强大的网页调试与发送HTTP请求&#xff0c;并能运行测试用例的Chrome插件 使用Postman进行简单接口测试 新建测试 → 选择请求方式 → 请求URL&#xff0c;下面用百度作为例子&#xff1a; 参考文档 [1] Postman使用教程…

异常的处理和HTTP状态码的分类

在爬虫过程中&#xff0c;可能会遇到各种异常情况&#xff0c;如网络连接错误、网页解析错误、请求超时等。为了提高爬虫的稳定性和容错性&#xff0c;需要对这些异常进行处理。 异常处理是通过捕获和处理异常来解决程序中出现的错误情况。在爬虫中&#xff0c;常见的异常处理…

Java基础-反射

代理相关 为什么需要代理&#xff1f; 代理可以无侵入式的对方法进行增强&#xff0c;而不需要修改原始方法的代码&#xff0c;这样就可以在不修改原始方法的情况下&#xff0c;对方法进行增强。 代理长什么样子&#xff1f; 代理里面就是对象要被代理的方法 Java通过什么方式…

RCE 远程代码执行漏洞分析

RCE 漏洞 1.漏洞描述 Remote Command/Code Execute 远程命令执行/远程代码执行漏洞 这种漏洞通常出现在应用程序或操作系统中&#xff0c;攻击者可以通过利用漏洞注入恶意代码&#xff0c;并在受攻击的系统上执行任意命令。 2.漏洞场景 PHP 代码执行PHP 代码注入OS 命令执…

Kettle循环结果集中的数据并传入SQL组件【或转换】里面

简介&#xff1a;在尝试使用了结果集的Demo循环后&#xff0c;进入到生产还是有一点问题的&#xff0c;以下是各个组件的分解解释、遇到的问题&#xff0c;以及解决问题的思路&#xff0c;最后文章的最后会把完整的Ktr文件放出来。记得收藏点赞喔&#xff01; 先来看张图~来自…

Web界面自动化操作工具 - Selenium常见用法

Selenium是一个用于自动化浏览器操作的工具&#xff0c;常用于Web应用程序的测试和爬虫开发。 下面是一些Python Selenium的常见用法和代码示例&#xff1a; 1. 导入Selenium库和WebDriver&#xff1a; from selenium import webdriver2. 创建WebDriver实例&#xff1a; # …

OSPF的网络类型

1.3配置OSPF的网络类型 1.3.1实验3&#xff1a;配置P2P网络类型 实验需求 实现单区域OSPF的配置实现通过display命令查看OSPF的网络类型 实验拓扑 实验拓扑如图1-11所示 图1-11 配置P2P网络类型 实验步骤 步骤1&#xff1a;[1] 配置IP地址 路由器R1[2] 的配置 <Huawe…