1. 首页

React hook + Typescript +Redux +AntD搭一个admin后台管理系统

前言

GitHub项目地址react hook+ts 的admin后台管理系统

前段时间因为公司需要重新开专属另一个部门的管理系统,于是搭建项目交给了我。

由于本人比较喜欢爱折腾,在想最近学的react hook加typescript一直都想找个机会,跃跃欲试。

直接网上找一个呗!

要不用antD-pro来搭一个吧?但是发现这项目有点重,有些东西我根本用不上……

要不继续用飞冰吧?可是没有找到ts版本的……

那就GitHub找一个吧,可是发现……真的没有找到一个比较符合我所想的。

其实我想要的就是:

React hook + Typescript +Redux +AntD构建的一个很简单的后台管理系统,剩下的业务页面,直接开发就可以了。

那就自己写一个吧。

为什么要选择它们?

最终选择了 React hook + Typescript + Redux + Thunk + AntD构建一个后台管理系统。

原因如下:

  • react-hook,官网已经说的很清楚引入hook的好处

    个人会选择是因为考虑到同事不会用react……

    组件复用、this的指向、较复杂的生命周期、class等等学习成本较高,为了让他们更快的开发,就选择了hook。

    当然用了一段时间,还是觉得hook蛮香的,简化了不少代码。所以还是蛮推荐大家试试看!

  • typescript

    增加了代码的可读性和可维护性,为了日后更好的维护,降低成维护成本。

(好了,我不装了,我摊牌了。)

我受够后台变来变去的数据类型(前段时间后台在整改),一出错很难第一时间排查问题。

我受够了一些前端开发的规范问题。在整个JS开发过程中,开发人员容易用隐式转换,或‘==‘等等,甚至有些模块引用又不用(代码风格和规范由Tslint和Eslint提供检查),导致后期维护更难理解代码。

Typescript和tslint的引用是为了把js“变成“强类型语言,在自己写的代码中要注意类型和规范,(尽量别写any!)若万不得已类型为any或者 @ignore,则要标注下原因。这样的话就简洁明了,后期维护更加迅速,更能减少不规范的代码写法。

  • redux-thunk

thunk加上asyc/await的用法更为直观。

项目简介

当然拉,没本事从头到尾都自己写,所以从

create-react-app 开始。

具体可以看看antD官网推荐的创建ts的方法

先看看写完后的效果

React hook + Typescript +Redux +AntD搭一个admin后台管理系统

React hook + Typescript +Redux +AntD搭一个admin后台管理系统

额,是的。你没看错……整个项目就是这么简单……

不过捏,直接拿来就可以实际开发页面了。根据自己的需求再增加更复杂,更多的插件。

如果你要加页面开发,直接在路由配置加文件就好了。

React hook + Typescript +Redux +AntD搭一个admin后台管理系统

项目结构

React hook + Typescript +Redux +AntD搭一个admin后台管理系统

React hook + Typescript +Redux +AntD搭一个admin后台管理系统

React hook + Typescript +Redux +AntD搭一个admin后台管理系统

其实本来想介绍项目里面的详细情况,我发现真的写蛮简洁的,突然不知说啥,而且基本里面有备注。

结尾

其实和一些平常看到的admin-demo差不多,但是出于考虑,如果一个公司想用的话,也希望本身项目太过多一些没必要的东西在项目上,像antD-pro和飞冰一些东西我就用不上。 所以就放出一个这样很简单的版本拉。

希望大家一起讨论下。共同进步。

如果可以的话给个star!

GitHub项目地址react hook+ts 的admin后台管理系统

作者:范特西枪手
链接:https://juejin.im/post/5d89fe14e51d4561b416d551

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:React hook + Typescript +Redux +AntD搭一个admin后台管理系统

链接:https://www.javascriptc.com/3833.html

« 吃透移动端 H5 响应式布局
看完这篇webpack-loader,不再怕面试官问了»
Flutter 中文教程资源

相关推荐

QR code