学习React Hooks和TypeScript打造的仿Antd的UI组件库

简介: ✨ RockUI学习React Hooks和TypeScript实现仿Antd的react UI组件库,并通过此组件库在create-react-app的基础上实现了一套简单的应用,下方链接样式解决方案——saas测试——Jest框架Icon库基于react-fontawesome github 文档文档使用storybook进行展示使用eslint和prettier对代码风格进行约束使用见README.md,学习及开发中的问题与解决见STUDY_README.md

✨ 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

❤️功能

  • Alert组件
  • Animation 动画组件
  • Bg首页背景组件
  • Button组件
  • Commissio日程组件
  • Icon图标库
  • Input组件
  • Menu菜单
  • Spider轮播图组件
  • Spin加载中
  • Table表格
  • Tab选项卡
  • Upload

🔨 Usage️ 部分功能展示

172cb79a456afac4_tplv-t2oaga2asx-zoom-in-crop-mark_4536_0_0_0.png

172cb79a47059659_tplv-t2oaga2asx-zoom-in-crop-mark_4536_0_0_0.png

📦 Install

npm install rockui
yarn add rockui

Usage

import { Button, Icon } from "rockui";
const App = () => (
  <>
    <Button
      size={ButtonSize.Small}
      autoFocus
      onClick={e => {
        e.preventDefault();
      }}
      className="btn"
    >
      hello
    </Button>
    <Icon icon="coffee" theme="warning" size="2x" />
  </>
);

And import style manually:

import "rockui/dist/rockui.css";

Development

$ git clone https://github.com/s2265681/rockui.git
$ cd rockui
$ npm install
$ npm start
$ 修改注释 src/index.tsx 组件发布 >>> 页面展示

🤝 Contributing

相关文章
|
3月前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
56 2
|
3月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
4月前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
4月前
|
JavaScript 前端开发
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
251 3
|
4月前
|
资源调度 前端开发 JavaScript
React进阶学习
React进阶学习
38 1
|
4月前
|
JSON 前端开发 JavaScript
React 进阶阶段学习计划
React 进阶阶段学习计划
|
4月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
85 0
|
4月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
55 0
|
4月前
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
52 3
|
5月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
100 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式

热门文章

最新文章