基于React17+umi3+antd4+ant-design-pro等实践

最新推荐文章于 2024-05-18 21:32:44 发布
最新推荐文章于 2024-05-18 21:32:44 发布
阅读量1k 收藏 1
点赞数
文章标签： react17 umi4 antd4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kiscon/article/details/113092834
版权

Antd Pro 实践

React

React 是一个用于构建用户界面的 JAVASCRIPT 库。
特点：

  1. 声明式设计 −React采用声明范式，可以轻松描述应用。
  2. 高效 − React通过对DOM的模拟，最大限度地减少与DOM的交互。
  3. 灵活 − React可以与已知的库或框架很好地配合。
  4. JSX − JSX 是 JavaScript 语法的扩展。
  5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
  6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码。

UmiJS

Umi 是什么？Umi，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

Ant Design Pro

Ant Design Pro 是一个企业级中后台前端/设计解决方案。

Ant Design of React

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

效果

在这里插入图片描述
切换风格
在这里插入图片描述

项目地址

kiscon
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于React + Ant Design Pro的博客后台管理系统
buchiyu的博客
02-01 2126
基于React + Ant Design Pro的博客后台管理系统
react-luo：自动React-保持最新技术react17钩住router5 webpack5 babel7 antd4
02-05
罗 这是什么？ 自动React这是一个React脚手架，没有使用create-react-app标准的React + Redux分级结构经过了多个项目的实践，不停的更新和优化出来的。目前自己做项目同时用。 PWA，挂钩，代码分割，热替换，HappyPack多线程编译，ES6 +语法 开始 yarn install # 安装依赖模块 yarn start # 运行开发环境: http://localhost:8888 yarn build # 正式打包，用于生产环境 yarn dist # 运行正式打包后的最终文件（build目录下的文件）: http://localhost:888
React 学习-10-ant design pro项目搭建
最新发布
sweet__queen的博客
05-18 286
1.确保npm淘宝镜像为最新：npm config set registry https://registry.npmmirror.com。3.pro create my-app(确保git已安装，可远程拉代码)4. 安装依赖，启动项目 npm run start。
umi3 使用antd 正确姿势
天天的博客
07-19 4853
我都是瞎摸索，上次使用有很大问题，这次改正 首先 yarn add @ant-design/pro-layout 然后yarn add yarn add antd@^4.x 然后不需要配置，直接使用就可以使用 是不是很简洁，我猜想dva也一样 —————————————————————————— 下一篇，我就开始跑通dva 数据流，当然是在umi 的框架内，非umi ，我直接用saga ...
使用umi3和antd pro5从零实现全栈中后台管理系统
热门推荐
Front end development engineer
04-15 1万+
使用umi3和antd pro5从零实现全栈中后台管理系统
Umi3+antd4+ts 项目打包部署到linux服务器上 使用nginx
qq_41856825的博客
09-21 1394
Umi3+antd4+ts 项目打包部署到linux服务器上 使用nginx
基于umi+antd-mobile的移动端项目模板
02-22
其次，antd-mobile是蚂蚁金服开发的基于React的移动端UI组件库，它是antd（Ant Design）的移动端版本。antd-mobile遵循Ant Design的设计哲学，提供了丰富且易于使用的组件，如按钮、表单、导航栏、列表等，帮助...
基于 umijs + electron + ant-design-pro 的项目模板开发代码
03-12
4. **ant-design-pro的使用**：掌握如何在项目中引入并使用`ant-design-pro`的组件，理解其主题定制和按需加载策略，以及如何自定义组件和页面。 5. **路由管理**：通过umi的路由机制，学习如何定义和配置路由，...
umi-dva-antd-mobile-starter:Umi3.js和Ant Design Mobile入门
04-29
umi-dva-antd-mobile-starter 开始使用Umi.js和Ant Design Mobile。入门安装依赖项。 yarn 启动开发服务器。 yarn start 精简生产。 yarn build 精打细算为发展而建设。 yarn dev执照麻省理工学院
ant-design-pro-plus：:sparkles:基于ant-design-pro做一些微小的工作
02-05
Ant Design Pro Plus官方说明请参见原仓库名称ant design pro v2 plus ，代码移到分支 。重命名为ant design pro plus后，在master分支跟进ant design pro中的更新。注意：预览由于是部署到Github Pages，配置了 ，...
antd-design-pro-learn:umi + dva + hooks + antd-design-pro + typescript + uform开发后台管理系统，并利用nginx跨域
03-11
antd@3.21.4 ：基于Ant Design设计体系的React UI组件库 Ant Design Pro@v4 ：一个企业级中后台前端/设计解决方案 Axios@0.19.0 ：一个基于promise的HTTP库 UForm@0.3.10 ：中后台领域的表单解决方案 typescript@...
snow-mall:基于Umi3 + TS + Antd4-mobile技术栈的商城实战
03-11
雪城（umi项目） 入门 安装依赖项 $ npm i yarn tyarn -g // 国内源 $ tyarn // 安装依赖 生成页面， $ npx umi g page more/index --typescript --less 启动开发服务器， $ tyarn start React项目：snow-mall商城 技术栈：基于Umi3 + TS + Antd4-mobile
umi+dva+antd后台管理系统(4)---展示数据
王阿星的博客
01-09 1134
废话不多说，今天事多，希望标题功能一上午能写完 ，开干！ ok，先修改了一下界面，展示一下我要实现的功能。 如图： 1. antd找了一个table表格 2. 发网络请求填数据 定义一个发请求的方法 //获取商品列表 export const list =()=>{ return instance.GET('/api/detail') } 在componentDi...
umi3+react+dva简单搭建一个项目框架(配置layout、antd、路由、配置request请求拦截)
weixin_43845137的博客
09-24 814
【代码】umi3+react+dva简单搭建一个项目框架(配置layout、antd、路由、配置request请求拦截)
umi3 antDesignPro布局layout配置快速搭建项目
ass_ace
10-12 9678
umi3 快速搭建项目1. 环境准备2. 创建项目3. 修改配置，应用antd layout布局1. 安装antd layout插件2. 修改.umirc.文件配置路由3. 根据配置文件中component新建路由对应的组件 1. 环境准备 安装nodejs 安装yarn 安装umi node -v npm install -g yarn npm install -g umi 2. 创建项目 创建myapp文件夹 mkdir umiapp && cd umiapp yarn
Umi + React + Ant Design Pro 项目实践（一）—— 项目搭建
且听风吟的博客
03-07 2203
Umi + React + Ant Design Pro 项目实践（一）—— 项目搭建
搭建react+ant design pro+umi 项目框架
【爱打盹的喵】的专栏
12-24 2504
我搭建react+antd+umi这个框架的原始资料主要是来源于而我写这篇文章的本意就是用来记录我用搭建时候的步骤汇总。
react17+antd4（按需引入+自定义主题）
zaixiaqin的博客
08-06 510
react项目中引入ant-design，按需引入antd样式，andt自定义主题，webpack版本问题
ANTD PRO （ts版）使用经验总结
Bannerparter的博客
08-08 2691
富文本的使用不能与form 表单混合使用，因为无法给富文本添加默认值，所以不能用 form.iTem标签包裹，自己再改一下样式以及空数据判定即可。首先先将接口返回的数据利用递归转换成树形结构，因为 table 组件自动识别数据中的children属性，所以，转换过后直接引入到表格组件中即可。这里需要注意的是，编辑、添加等事件的点击事件需要按照指定格式进行绑定，否则点击不生效且点击展开表格全部触发。需要注意的是，二级菜单 path 前必须要有一级菜单的地址前缀，否则在页面将不显示！然后选择umi的版本。...
已知现在有一个树形控件，请帮我用react+typescript+Ant Design+umi的开发框架实现可搜索的树形控件
06-08
好的，下面是一个基于React+TypeScript+Ant Design+Umi的可搜索树形控件的代码示例： ``` import React, { useState, useEffect } from 'react'; import { Tree, Input } from 'antd'; import { SearchOutlined } from '@ant-design/icons'; import { TreeProps } from 'antd/lib/tree'; import { DataNode } from 'rc-tree/lib/interface'; import { debounce } from 'lodash'; interface SearchTreeProps extends TreeProps { data: DataNode[]; } const SearchTree: React.FC<SearchTreeProps> = ({ data, ...props }) => { const [expandedKeys, setExpandedKeys] = useState<string[]>([]); const [searchValue, setSearchValue] = useState<string>(''); const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true); const [treeData, setTreeData] = useState<DataNode[]>(data); const handleSearch = debounce((value: string) => { const expandedKeys = getExpandedKeysBySearchValue(value, data); setExpandedKeys(expandedKeys); setSearchValue(value); setAutoExpandParent(true); }, 300); const handleExpand = (expandedKeys: string[]) => { setExpandedKeys(expandedKeys); setAutoExpandParent(false); }; const handleFilterTreeNode = (node: DataNode) => { if (node.title && node.title.toLowerCase().includes(searchValue.toLowerCase())) { return true; } return false; }; const handleRenderTreeNode = (node: DataNode) => { if (node.children) { return ( <Tree.TreeNode key={node.key} title={node.title}> {node.children.filter(handleFilterTreeNode).map(handleRenderTreeNode)} </Tree.TreeNode> ); } return node.title; }; useEffect(() => { const filteredTreeData = data.filter(handleFilterTreeNode).map(handleRenderTreeNode); setTreeData(filteredTreeData); }, [searchValue, data]); return ( <div> <Input placeholder="Search" prefix={<SearchOutlined />} onChange={(e) => handleSearch(e.target.value)} style={{ marginBottom: 8 }} /> <Tree {...props} expandedKeys={expandedKeys} autoExpandParent={autoExpandParent} onExpand={handleExpand} > {treeData} </Tree> </div> ); }; const getExpandedKeysBySearchValue = (searchValue: string, data: DataNode[]): string[] => { const expandedKeys: string[] = []; const loop = (data: DataNode[]) => { data.forEach((item) => { if (item.title.toLowerCase().includes(searchValue.toLowerCase())) { expandedKeys.push(item.key.toString()); } if (item.children) { loop(item.children); } }); }; loop(data); return expandedKeys; }; export default SearchTree; ``` 这个组件接收一个data属性，用于渲染树形控件。在组件内部，我们使用了useState和useEffect来处理组件状态和生命周期，使用了Ant Design的Tree和Input组件来实现树形控件和搜索框。我们使用了lodash库里的debounce函数来限制搜索框的搜索频率。 在handleSearch函数中，我们根据用户输入的内容，获取符合条件的节点的父节点的key，并将它们设置为展开状态。我们使用useState来保存展开状态、搜索值和是否自动展开父节点的状态。 在handleExpand函数中，我们处理了展开状态的变化。 在handleFilterTreeNode函数中，我们判断节点是否符合搜索条件。 在handleRenderTreeNode函数中，我们渲染符合搜索条件的节点。 在useEffect中，我们根据搜索值过滤数据，并重新渲染树形控件。 最后，我们将搜索框和树形控件渲染到页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值