推薦一個React的管理後臺框架

轉載請註明文章出處： https://tlanyan.me/recommond-...

引言

jQuery時代，jQuery+後端模板+Bootstrap/Semantic就可輕鬆完成先後端開發。進入React/Angular/Vue年代，先後端生態漸行漸遠（編程方式上卻有異曲同工的感受），標榜爲「全棧」的人更可能是從前端經過Nodejs向服務端滲透。前端框架和工具突飛猛進，專業前端尚且學不動，更不用說業餘的後端。定位爲服務端開發，因此一直不太願意寫前端頁面。

<img src="https://tlanyan.me/wp-content...; alt="" width="960" height="777" class="aligncenter size-full wp-image-2763" />

但不少時候須要一我的作先後端開發，寫HTML/JavaScript/CSS勢在必行。這時候有一個好用的前端模板/庫/框架可大幅節省後端的生命。熟悉React的開發人員，遇到後臺開發需求時，推薦使用marmelab的react-admin。

react-admin

在GitHub上搜"react admin"，排名第二位就是react-admin，star數達到5k。排名第一的ReactJS-AdminLTE本人也使用過，其與react admin的區別是：前者是前端模板，後者是前端開發框架。劃重點：前端開發框架。根據實際使用，此言不虛。

react-admin是基於React和Material Design的管理後臺前端開發框架，官方網址是：http://marmelab.com/react-adm...。其前身是admini-on-rest，2.x版本後更名爲react-admin。

做爲開發框架，react-admin重點不是華麗、漂亮的頁面示例，而是適用於後臺開發的一整套解決方案。其重要特性包括：

1. 認證和受權（Authentication and Authorization），對用戶身份和權限進行檢查，經過authProvider提供；
2. 後端通訊，支持REST/SOAP等，由dataProvider提供；
3. 數據更新和刪除操做回滾（有限制）;
4. 支持排序、分頁、搜索的Datagrid視圖；
5. 前端數據校驗；
6. 國際化支持，由i18nProvider提供；
7. 主題支持。

react-admin有完整詳細的文檔，根據官網的"15分鐘"教程(https://marmelab.com/react-ad...)，可迅速開發出帶有登陸、對數據表CRUD的管理後臺，很是實用。深刻框架的各方面，須要繼續閱讀各專題文檔。文檔完整詳細，並有示例代碼，熟悉React的開發能在一兩天內摸清框架各方面，駕輕就熟的開發後臺各類功能。

結論

做爲一個基於React的管理後臺SPA開發框架，react-admin幾乎覆蓋了前端開發中的方方面面，功能強大且實用。界面風格基於Material Design，根據文檔中開發出的界面比較簡潔。若是須要比較美觀的界面（圖表、表單、列表等），可參考其餘前端模板，例如AdminLTE。