作了N+1個企業項目以後, 我總結了這些React必備插件

爲了提升你們開發 React 項目的效率, 筆者結合本身的實際工做經驗, 彙總以下React項目經常使用插件.

1. 狀態管理

• Redux JavaScript 狀態容器，提供可預測化的狀態管理
• MobX 經過函數響應式編程使得狀態管理變得簡單和可擴展
• Redux Thunk Redux的異步處理中間件
• Redux Saga Redux中間件,用於管理應用程序 Side Effect(反作用，例如異步獲取數據，訪問瀏覽器緩存等)
• Dva 一個基於 redux 和 redux-saga 的數據流方案

2. UI組件庫

• Ant design 基於 Ant Design 設計體系的 React UI 組件庫，主要用於研發企業級中後臺產品
• Ant design mobile 基於 Ant Design 設計體系的 React UI 移動端組件庫
• MaterialUI 世界最受歡迎的基於質感設計的React UI庫
• React toolbox 一套使用CSS模塊功能實現Google的Material Design規範的React組件
• React Virtualized 一個能渲染大型列表和表格的React解決方案
• Fabric UI 微軟開源的UX框架的集合，用於建立共享代碼，設計和交互行爲的精美的跨平臺應用程序
• React desktop 基於React的JavaScript庫，旨在將本機桌面體驗帶入網絡，其中包含許多macOS Sierra和Windows 10組件。react-desktop與NW.js和Electron.js完美結合，可是能夠在任何JavaScript驅動的項目中使用
• Zent 有贊 PC 端 WebUI 規範的 React 實現，提供了一整套基礎的 UI 組件以及一些經常使用的業務組件
• react-icons 基於React封裝的豐富的圖標庫

3. 工具類

• react-copy-to-clipboard 基於React的複製到剪切板組件
• qrcode.react 基於React的生成二維碼的組件
• nprogress 適用於YouTube，Medium等的頂部進度條組件
• react-syntax-highlighter 基於React的代碼高亮組件
• react-contextmenu 右鍵菜單組件
• emoji-mart 基於React的表情庫
• react-highlight-words 基於React的關鍵字高亮

4. 數據可視化

• AntV 包含 G2、G6、F2、L7 以及一套完整的圖表使用和設計規範, 提供強大的數據可視化需求
• G2Plot 基於G2封裝的開箱即用的可視化組件庫
• recharts 使用React和D3構建的自定義的圖表庫
• Viser 支持多種主流框架的可視化庫

5. 動畫/動效果

• Halogen 使用React的加載動畫集合
• react-move 漂亮的，數據驅動的React動畫,只需3.5kb（gzip）
• react-spring 一個基於彈簧物理學的動畫庫
• Ant Motion 提供了單項，組合動畫，以及整套動畫解決方案
• scenejs 基於JavaScript和CSS時間軸的動畫庫
• react-text-loop 文字輪播動畫

6. 拖拽/排序

• react-beautiful-dnd 漂亮,可移植性 列表拖拽庫
• react-dnd 可幫助咱們構建複雜的拖放界面，同時保持組件的分離
• react-moveable 支持自由拖拽, 縮放, 參考線的靈活強大的拖拽庫
• react-grid-layout 強大的網格拖拽排序縮放庫
• mixitup 強大的列表卡片排序動畫庫

7. 圖像處理

• react-image-crop 強大的圖片裁切庫
• react-sparklines 基於數據自動生成趨勢線
• dom-to-image 基於dom生成圖片的canvas庫
• react-img-editor 圖片編輯器

8. 編輯器相關

• braft-editor 富文本編輯器
• powerNice markdown/富文本編輯器
• GGEditor 可視化圖編輯器
• react-codemirror2 代碼編輯器
• jsoneditor json編輯器
• h5-dooring H5頁面編輯器

9. 地圖相關

• google-map-react 谷歌地圖插件
• react-amap 高德地圖插件
• @uiw/react-baidu-map 百度地圖

10. 腳手架

• Create React App 初學者必備React傻瓜式腳手架
• Next.js 構建服務端渲染的React腳手架
• umi 企業級前端應用框架
• webpack3_react 兼容IE9+且提供完整的React全家桶解決方案

最後

筆者已將文檔同步到 github, 地址以下:

• React開發之路
• 前端高效開發必備的 js 庫梳理

目前 H5-Dooring 可視化編輯器也成功更新了開發和部署文檔 ,感興趣的朋友能夠感覺瞭解一下.