一、引言 在前端开发领域,组件库的重要性不言而喻。Ant Design(AntD)作为一款优秀的组件库,为开发者提供了丰富且美观实用的组件。而通过使用 React18 和 TypeScript(TS)来高仿 AntD 构建组件库,不仅是对 AntD 的致敬,更是深入理解前端组件化开发和相关技术融合的绝佳实践。这一过程将涉及到对设计理念、技术选型、...
修改src/App.tsx,引入 antd 的按钮组件。 importReactfrom'react';importlogofrom'./logo.svg';import'./App.css';import{Button}from'antd';functionApp(){return(Editsrc/App.tsxand save to reload.Learn React<Buttontype="primary">使用第一个antd 组件Button</Button>);}exportdefaultApp; 保存后,会自...
// webpack.config.jsconst{resolve}=require("path");module.exports={// 组件库的起点入口entry:'./src/index.tsx',output:{filename:"r-ui.umd.js",// 打包后的文件名path:resolve(__dirname,'dist'),// 打包后的文件目录:根目录/dist/library:'rui',// 导出的UMD js会在window挂rui,即可以访问...
在封装组件并生成umd代码过程中,踩了很多的坑,也更加系统的了解了babel。 整体需求 react组件库,取名r-ui,能够导出r-ui.umd.js和r-ui.umd.css。 代码使用typescript进行开发。 样式使用less进行开发。 引入antd组件库作为底层原子组件库,并且r-ui.umd.js和r-ui.umd.css包含antd组件代码和样式代码。 依赖的rea...
从零搭建react+ts组件库(一)项目搭建与封装antd组件 为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖、为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面的细节,做到面对对于工程出现的错误能够做到有把握。
import { Form, Modal, Input, Radio, message, Row } from 'antd'; import './EditFromindex.less' import { updatepassword } from '@/service/userService'; interface EditFormProps { visible: boolean; onSubmit: () => void; onCancel: () => void; ...
首先要安装 eslint,eslint 默认使用Espree进行解析,无法识别 ts 的一些语法,所以需要安装一个 ts 的解析器@typescript-eslint/parser,用它来代替默认的解析器,然后由@typescript-eslint/eslint-plugin来提供有关 ts 的规则补充。 由于是 react 项目,所以还需要插件eslint-plugin-react来支持.tsx。
总结一下组件的内容和功能点: 1.一个输入框,两个按钮(确定,取消) 2.点击文本,弹出气泡,进行编辑,提交/取消,关闭气泡,更新数据(数据不变则不更新) 而原本的组件,则是直接点击编辑按钮,变为编辑模式: 因此,我选择了antd提供的Popover组件,稍微封装一下功能,做成一个独立的小小组件,代码是这样的: ...
npx create-react-app hook-ts-demo --template typescript 二.按需加载antd npm i antd --save npm i --save @ant-design/icons npm install babel-plugin-import --save--dev 在package.json配置 "babel":{"presets":["react-app"],"plugins":[["import",{"libraryName":"antd","libraryDirectory":...
【React+Typescript+Antd】界面框架布局是页面的骨架,骨架搭好了,之后就是细枝末节的填充。 新手上路,拿到项目的第一步就是画界面,但是对于复杂的页面如何能够做到页面架构清晰又不互相干扰呢? Antd的Layout布局能够很好地解决这个问题。 它定义了Header(页头)、Content(内容)、Footer(页脚)、Sider(导航)等页面整体框...