学习react-hooks和TypeScript打造的仿Antd的reactUI组件库

最新推荐文章于 2024-07-20 22:28:04 发布
置顶 最新推荐文章于 2024-07-20 22:28:04 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： antd react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44160385/article/details/106857186
版权
RockUI是一个学习React Hooks和TypeScript制作的仿Antd UI组件库，包含多种功能组件如Alert、Button、Table等。项目采用Sass作为样式解决方案，Jest进行测试，使用react-fontawesome作为Icon库，并使用Storybook展示文档。同时，项目遵循eslint和prettier的代码风格，并提供详细的学习和开发文档。
摘要由CSDN通过智能技术生成

✨ RockUI

学习React Hooks和TypeScript打造的仿Antd的react UI组件库，并通过此组件库在create-react-app的基础上实现了一套简单的应用，下方链接

  • 样式解决方案——saas
  • 测试——Jest框架
  • Icon库基于react-fontawesome github 文档
  • 文档使用Storybook进行展示
  • 使用eslint和prettier对代码风格进行约束
  • 使用见README.md,学习及开发中的坑与解决见STUDY_README.md

🔗 Links

最低0.47元/天 解锁文章
重阳微噪
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react hooks + typescript 开发的H5移动端组件库
XIAOZHANG86的博客
04-05 829
CP Design 使用 React hooks Typescript 开发的一个 H5 移动端 组件库 其中包括了下图中的27个基础组件: CP Design Mobile (github地址:https://10086xiaozhang.github.io/CP-DESIGN) 特性 基于 CP Design 移动设计规范。 规则化的视觉样式配置，适应各类产品风格。 使用 TypeSc...
2022升级 React18+TS高仿AntD从零到一打造组件库
09-02
2022升级 React18+TS高仿AntD从零到一打造组件库课程
React 实现table内单元格可编辑 （hooks）
HHaox_x的博客
10-27 4852
双击可编辑 失去焦点或者键盘回车事件保存，自己封装组件 并调用 拿走即用 自己封装的组件： import React, { useContext, useState, useEffect, useRef } from "react"; import { Table, Input, Form } from "antd"; import { FormInstance } from "antd/lib/form"; import styled from "@emotion/styled"; import C
React函数式组件---Hooks
最新发布
weixin_44921693的博客
07-20 1220
在B站尚硅谷学习React过程中记录的一些笔记，希望可以帮到和我一样的前端热爱者！！！
移动端react hooks表单简单封装
Inspire_xa的博客
03-21 235
移动端react hooks表单简单封装
react+ts仿antd icon库
lin_fightin的博客
03-20 515
icon库 从上古时代的雪碧图，到近代的font-icon，到现代的svg（开个玩笑）,越来越多的开发人员选择了svg,因为他们即取即用，并且不会出现项font-icon很多不知名的Bug。 这个icon库是以font-awesome为基础包装成自己的icon组件库。他山之石可以攻玉嘛 先来安装三个库 cnpm i --save @fortawesome/fontawesome-svg-core cnpm i --save @fortawesome/free-solid-svg-icons（免费的库，也有要
react-ts-shop-admin:react-hooks-typescript商城后台系统
03-11
React+打字稿+鸡蛋+ mysql商城...React-Hook，TypeScript，React-Thunk，React-Redux，React-Router，Antd等 后台功能 用户 退出登录 权限控制动态生成侧边栏 登录授权 全屏预览 用户管理 购物车管理 订单管理 商品管理
7-react-admin-ts：用react-hooks实现的管理后台
02-04
（一）技术栈 ts + react-hooks + react-...通过 create-react-app 脚手架构建 （二）主要功能 (1) 功能 - router menu breadcrumb 三合一 - 自定义hooks ( useFetch, useModal, useViewprot, useIntersectionObserve
react-hook-and-antd-table:React钩和蚂蚁表
04-02
React挂钩和蚂蚁表React钩和蚂蚁表# js$ yarn create react-app react-hooks-and-antd-table-app$ npx create-react-app react-hooks-and-antd-table-app# typescript$ yarn create react-app react-hooks-and-antd-...
ts-redux-toolkit:TypeScript的PoC + react-redux + redux-toolkit + React Hooks + react-router
04-04
ts-react-redux-toolkit TypeScript的PoC + react-redux + redux-toolkit + React Hooks + react-router 还原 执照 新的BSD许可证
gxd-ship:使用react + typeScript高仿antd造轮子
03-14
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpac
react-component-library:react + ts组件库高仿ant design
03-17
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化内部版本，文件名包含哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpack
AntDesignVue一个基于AntDesign和Vue的企业级UI组件库
08-14
Ant Design Vue：一个基于Ant Design和Vue的企业级UI组件库
react-BrightUI一组使用TypeScript构建的React16的UI组件
08-14
Bright UI：一组使用TypeScript构建的React 16 的UI组件
dt-react-component：基于antd包的React UI组件库
02-06
dtReact成分 English | 基于React UI组件库。 主要用于中，后端产品。 我们的目标是满足更具体，更具体的业务场景组件。 当然，我们也有基于本机javascript的出色业务组件，例如ContextMenu ， KeyEventListener等。 何时使用 当发现其他组件库提供的基本组件不符合当前的业务情况，并且需要基于这些基本组件实现功能时，可以使用dt-react-component解决问题。 当业务复杂时，将沉积越来越多的业务组件。 为了更好地管理组件并减少代码的冗余，可以使用dt-react-component。 当然，我们欢迎公关。 我们将及时审查和合并常见
基于antd,使用hooks编写动态增删table
qq_40959617的博客
01-11 2026
直接上代码。 1.文件目录： 2.index.jsx文件代码： import React, { useState, useEffect } from 'react'; import { Button } from 'antd'; import EditTable from './component/editTable'; import { cloneDeep } from 'loda...
react+hook函数组件实现表单添加数据，表格展现
qq_45849232的博客
07-19 1448
react+hook函数组件实现表单添加数据，表格展现
如何设计实现一个React UI组件库——Ant Design源码阅读与浅析
weixin_34122810的博客
04-29 858
概述 在我们进行日常的项目开发的过程中，我们经常会遇到使用一些通用的UI组件库如BootStrap、Ant Design等。作为成熟的UI组件库，它能够提供提供一整套UI组件用来满足使用需求，能大大减少开发成本。 在使用了他人提供的组件库后，我自然就会有兴趣去了解一下别人开发的组件库到底是如何设计的，如何进行相关的组件封装。本文以Ant Design为例，让我们来了解一下目前较为有名的UI组件库是...
react-native+typescript+axios实现查询功能
07-17
在 React Native 中使用 TypeScript 和 Axios 实现查询功能的步如下： 1. 安装所需的依赖： ``` npm install axios ``` 2. 创建一个查询组件(SearchComponent.tsx)。 ```tsx import React, { useState } from '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值