hello, 咱们好, 我是徐小夕, 年末复盘立刻要来了, 先给咱们盘盘日常做 web 体系的一些老练计划, 以便咱们对2024年的技能选型有一个更明晰地判断.
近年来，React 结构的兴起为前端开发带来了新的可能性，其在构建用户界面方面的灵敏性和高效性，使其在开源办理体系的开发中得到了广泛运用。
上一篇文章和咱们同享了国内外 star 比较多的 vue3 开源办理体系, 也是我之前做项目会考虑的计划, 本篇文章继续为咱们推荐几款依据 React 的开源办理体系，让咱们一同探索这些工具怎么利用 React 的力气，协助咱们在项目办理，团队协作以及数据办理方面完成更高的效率。
1.Fusion Design
Fusion Design是Ant Design团队推出的一套规划标准，旨在供给一致的用户体会。
Fusion Design依据React和Vue等流行的前端结构，供给了一系列的UI组件和规划言语，能够方便地构建出高质量的Web界面。
项目功用：
-
企业级的中后台规划体系处理计划：依据对阿里集团中后台事务的总结和抽象，供给了一套开箱即用的中心模式
-
强壮的装备渠道，轻松保护品牌一致：通过规划体系站点，一致办理规划物料和前端物料； 运用 Design Token，轻松定制大局款式
-
模块化研制，让效率突飞猛进：合作前端工具，开发模块模板更高效
-
原生插件，让规划和研制无缝联接：规划体系里一切规划物料和前端物料，都能通过 Sketch 插件直接运用，真正做到 Design to Code
2.飞冰 ICE
飞冰 (ICE) 是一套依据 React 的前端处理计划，环绕运用研制结构 (ice.js 3) 供给了运用的构建、路由、调试等基础才能以及微前端、一体化等范畴才能，一起结合可视化操作、物料复用等计划下降研制门槛。
项目特性：
开箱即用：TypeScript/Webpack5/CSS Modules/Mock/SSR，各种计划 All in One
贴合事务的最佳实践：目录标准、代码标准、路由计划、状况办理、数据恳求等
多种运用模式：支撑服务端烘托 SSR 以及静态构建 SSG
强壮的插件才能：官方一切才能都通过插件完成，事务能够通过插件扩展各种才能
丰厚的范畴计划：微前端 ICESTARK、一体化计划等
3.Ant Motion
Ant Motion 是Ant Design 中提炼出来的动效言语。他不仅仅是动效言语,一起也是一套 React 结构动效处理计划,能够协助开发者,更容易在项目中运用动效。
该项目供给了单项,组合动画,以及整套处理计划。
界面动效能加强用户认知且添加生机。
动效价值 添加体会舒适度: 让用户认知进程更为天然。
添加界面生机: 第一时间招引注意力,突出重点。
描述层级联系: 体现元素之间的层级与空间联系。
供给反馈、清晰意向: 助力交互体会。
衍生出动效规划的三原则：
4.React-Admin
React-Admin是依据React16.x、Ant Design3.x的办理体系架构。
采用前后端分离,内置了许多办理体系常用功用,通过一些脚本、封装协助开发人员快速开发办理体系,集中精力处理事务逻辑。
项目特色：
- 习惯任何后端(REST、GraphQL、SOAP等)
- 技能栈包含material-ui, redux, react-final-form, redux-saga, react-router, recompose, reselect等。
- 得益于活跃烘托(服务器返回之前烘托)，用户界面非常快。
- 几秒钟内可吊销更新和删除
- 支撑任何身份验证供给者(RESTAPI，OAuth，BasicAuth等)
- 功用齐全的数据(排序，分页，过滤器)
- 支撑键入筛选
- 支撑任何表单布局(简略、选项卡等)
- 自定义操作用于各种数据类型（布尔值、数字、富文本等）的大型组件库。
5.Ant Design
(Antd)是一个依据React技能栈的UI组件库,由蚂蚁金服前端团队开发和保护。Antd供给了丰厚的组件和配套的规划标准,能够协助开发者快速构建高质量的Web运用。
项目特性：
提炼自企业级中后台产品的交互言语和视觉风格。
开箱即用的高质量 React 组件。
运用 TypeScript 开发，供给完好的类型定义文件。
⚙️ 全链路开发和规划工具体系。
数十个国际化言语支撑。
深入每个细节的主题定制才能。
6.Shards-Dashboard-React
Shards-Dashboard-React是一个免费的React Admin仪表板模板，具有现代规划体系以及许多自定义模板和组件。
一切模板都具有充沛的呼应才能，能够习惯和重排其布局以习惯任何视口巨细。Shards Dashboard Lite React具有轻量的特色而且通过高度优化，从零开端构建的，一起遵从了现代开发的最佳实践。
7.React Hook Form
React Hook Form是一个高功用、灵敏、易拓宽、易于运用的表单校验库，用于React Web＆Native的表单验证。
项目特性：
- 使创建表单和集成更加快捷
- 非受控表单校验
- 以功用和开发体会为基础构建
- 迷你的体积而没有其他依靠
- 遵从 html 标准进行校验
- 与 React Native 兼容
- 支撑Yup, Joi, Superstruct或自定义
- 支撑浏览器原生校验 从这里快速构建你的表单
8.TanStack Query
TanStack Query是一个依据React Hooks的轻量级查询库,它供给了简略易用的API来处理数据查询和数据变更的逻辑。
它的中心是QueryClient,它是一个大局状况办理器,能够协助咱们从多个组件中访问和同享数据查询成果。
该项目是为网络开发人员供给的高质量开源软件。
用于状况办理、路由、数据可视化、图表、表格等的无头、类型安全且功用强壮的实用程序。
9.MUI
MUI是Dcloud官方推出的一个依据html5+标准的结构，一起具有h5组件和原生组件，是最接近原生APP体会的高功用前端结构。而且是一个 React款式库,能够协助你很快构建美丽的UI。
结构功用：
追求功用体会，MUI不依靠任何第三方JS库，紧缩后的JS和CSS文件仅有100+K和60+K。
结构特色：
鉴于之前的许多前端结构（特别是呼应式布局的结构），UI控件看起来太像网页，没有原生感觉，因而追求原生UI感觉也是重要方针，MUI以iOS渠道UI为基础，补充部分Android渠道特有的UI控件。
10.React Suite
React Suite是一套偏向后台产品的组件库。是一套 React 组件库,为后台产品而生。一起也是一个具有贴心规划以及对开发者友好的 UI 结构。” React Suite 支撑服务端烘托,支撑Next.js构建运用。
React Suite包含了可用于企业级体系产品的各种组件库。因为能够支撑一切干流的浏览器和渠道，因而React Suite几乎适用并支撑任何体系的服务器端烘托。安装npm i rsuite –save运用优势l通过大局访问功用，来轻松地办理运用程序。
11.Built At Lightspeed
Built At Lightspeed 是一个新的主题市场，为现代仓库供给很多开源和高档主题。
包含4000+模板和UI套件的目录，用于现代仓库。
能够供给安全、可扩展且具有成本效益的闪电般快速的网站
为用户供给最前沿和最独特的主题。
Built At Lightspeed不仅仅是后台办理模板，这个模板网站还能够搜索比如企业官网、宣传页等网站模板。
12.Mantis React
Mantis 是一个免费开源的 React Redux 仪表板模板，运用 MUI React 组件库制造，旨在完成灵敏性和更好的可定制性。
项目特色：
- 专业的用户界面。
- MUI (Material-UI) React 组件。
- 彻底呼应式，一切现代浏览器都支撑。
- 易于运用的代码结构
- 灵敏且高功用的代码
- 简易文档攻略
13.Mu Admin
React mu admin， 依据React18,TypeScript,vite4,antd4.x等相关干流技能开发，一个免费开源的中后台办理体系开箱即用的前端处理计划，也可适用于学习React时进行参考或练手的项目。
- 主题切换：普通、暗黑主题模式
- Mock 数据： 内置 Mock 数据计划
- 用户办理：登录、登出演示、账号办理
- 权限办理：路由权限（动态路由）、组件权限（按钮）
- 多代理装备：开发环境（development）装备多个本地代理
- 其他内置功用：弹性侧边栏、面包屑、全屏等 作者：梁木由的前端新气象
14.arco.design
Arco.Design是字节跳动推出UI组件库，现在有React和Vue两个版别。
ArcoDesign的方针，即通过通用的规划体系去处理产品中的体会问题, 并为产品规划供给指导原则处理事务问题，一起它能够促进规划部门和研制部门之间协作, 成为开发者之间交流的言语。
项目特性：
-
智能规划体系 衔接轻盈体会
-
灵敏丰厚的生态渠道
-
千人千面的风格装备渠道
-
多场景的接入案例
-
完善的规划开发资源
15.React-Redux
React-Redux是一个用于在React运用中办理状况的第三方库。它是依据Redux架构的,供给了一种在React运用中高效办理状况的方法。
-
声明式规划：React 使创建交互式 UI 变得轻而易举。为运用的每一个状况规划简练的视图，当数据变化时 React能高效更新并烘托合适的组件。
-
组件化: 构建办理自身状况的封装组件，然后对其组合以构成杂乱的 UI。
-
高效：React通过对DOM的模仿，最大限度地减少与DOM的交互。
-
灵敏：不管运用什么技能栈，在无需重写现有代码的前提下，通过引进React来开发新功用。
16.Notus React
Notus React 是免费和开源的。它不会更改 Tailwind CSS 中的任何 CSS。它具有多个 HTML 元素，并带有 ReactJS、Vue 和 Angular 的动态组件。
项目功用：
1.CSS 组件：Notus React 带有很多彻底编码的 CSS 组件。
2.页面：此扩展还带有 3 个示例页面。它们已彻底编码，因而您能够当即开端工作。
3.JavaScript组件：为 React、NextJS、Vue 和 Angular 供给了许多动态组件。
4.文档：由开发人员为开发人员构建。
17.Now UI Kit React
Now UI Kit PRO React是由 Invision 和 Creative Tim 供给的高档 Bootstrap4套件。
它是运用 Create React App 依据 React、React Hooks 和 Reactstrap 构建的的。它是一个美丽的跨渠道 UI 套件，包含 1000 多个组件、34 个部分和 11 个示例页面。
Now UI Kit PRO React将推出Now UI Kit PRO React。它将包含很多组件、部分和示例页面，因而能够运用 badass Bootstrap4UI 套件开端开发。
18.LANIF Admin
一款依据React生态体系的最老练的技能体系,建立的一套开箱即用的后台办理体系,结构里包含了一些独有的定制组件,以及许多通过很多实践口碑良好的第三方组件.
项目功用：
-
封装了dva结构的数据流通，简略的恳求能够不用在model和service中定义
-
封装了数据模仿，能够独立于后台开发前台功用
-
封装了分页恳求，简化并标准了分页逻辑
-
封装了fetch恳求，习惯与后台多种交互恳求， body参数 parameter参数 path参数，动态恳求头，恳求前后拦截
-
路由按需加载，首屏加载超快
-
扩展了antd写了许多实用的UI，通过一个装备即可生成，后台CRUD三件套（数据表格，搜索框，新增编辑表单）
-
按事务模块区分的目录结构，开发独力功用时无需分心其它模块，做到最小耦合
19.Shards Dashboard Lite React
Shards Dashboard Lite React是一个免费的React Admin仪表板模板，具有现代规划体系以及许多自定义模板和组件。
项目功用：
-
免费的 React 办理仪表板模板包，具有现代规划体系和很多自定义模板和组件。
-
彻底呼应式：一切模板都是彻底呼应式的，而且能够依据任何视口巨细调整和重排其布局。
-
Shards Dashboard Lite React 占用空间最小，而且通过高度优化，可完成超快的功用。
-
分片仪表板 Lite React 是从头开端构建的，一起遵从现代开发最佳实践。
20.AdminJS
AdminJS 是一个自动办理界面，能够刺进到您的运用程序中。作为开发人员，您供给数据库模型（如帖子、评论、商铺、产品或您的运用程序运用的任何其他内容），AdminJS 生成答应您（或其他受信赖用户）办理内容的 UI。
依据 Ant Design 规划言语，供给了开箱即用的高质量 React 和 Angular 组件完成，用于开发和服务于企业级中后台产品。
