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後臺管理系統