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的方法

先看看写完后的效果

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

不过捏，直接拿来就能够实际开发页面了。根据本身的需求再增长更复杂，更多的插件。

若是你要加页面开发，直接在路由配置加文件就行了。

项目结构

其实原本想介绍项目里面的详细状况，我发现真的写蛮简洁的，忽然不知说啥，并且基本里面有备注。

结尾

其实和一些日常看到的admin-demo差很少，可是出于考虑，若是一个公司想用的话，也但愿自己项目太过多一些不必的东西在项目上，像antD-pro和飞冰一些东西我就用不上。 因此就放出一个这样很简单的版本拉。

但愿你们一块儿讨论下。共同进步。

若是能够的话给个star！

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