摘要：大漠窮秋于贈此筆名。是版本的實現，和版本保持風格一致。碼云最有價值的開源項目這是版的實現，和版本保持風格一致。采用版本，使用組件庫以及開發。已推薦這是的服務端代碼，基于。如果你需要與這個后端代碼進行對接，請檢出本項目的分支。

你好，我是徐曉東，筆名燕云長風。大漠窮秋于 2019-03-16 21:22 贈此筆名。
寓意：結合李白著名的邊塞詩《關山月》取【燕云長風】—— 長風幾萬里，吹度玉門關。

NiceFish-React 是React版本的實現，和NiceFish Angular版本保持風格一致。前端技術棧：React Hooks v16.8.3 ，React-Router v5，Bootstrap v4.7 SCSS源碼定制, Echarts v4.2.1, Ant-Design v.3.15.2 組件庫以及TypeScript進行開發，沒有使用任何的前端腳手架，自己從零開始搭建整個博客系統，最大程度上保證了可擴展和維護性。為了減輕代碼體積和提升性能，后續利用了Suspens 和 lazy 實現了Code Splitting，優化后首屏加載只需663ms。
為了大家更加直觀認識，我截了一組運行效果圖：

首屏加載完只需663ms

這是閱讀頁面,不需要登錄訪問權限

這是統計圖表頁面,采用UI指定顏色值使用輪詢算法實現(需要登錄訪問權限)

這是文章評論頁面,有過濾和排序功能

這是我為NIceFish系列設計的登錄效果圖

這是閱讀頁面的詳情面(不需要登錄訪問權限)

好了,這是以上的效果展示圖,通過此博客系統:

我的收獲如下:

1.對新版本的ReactHooks有了一定的理解和開發經驗

2.熟悉了BootStrap SCSS 源碼,定制了一套風格,學習了Twitter的優秀的scss源碼(想學scss的同志,擼一遍BootstrapSCSS源碼,你就能學的很全面)

3.使用全新的ReactRouter v5 ,學習了新路由"動態映射"的哲學思想

4.深入理解和使用Echarts繪圖組件庫

如果你需要更加全面的代碼,請訪問:NiceFish-React

這是NiceFish-React 在gitee page 上的在線演示地址:NiceFish-React

燕云長風

NiceFish：美人魚，這是一個微型Blog系統，前端基于Angular7.0 + PrimeNG7.1.0。（GVIP 碼云最有價值的開源項目 3160 ☆)

NiceFish-React：這是React版的實現，和 NiceFish Angular 版本保持風格一致。采用React Hooks 16.8.3 版本，使用TypeScript、Ant Design組件庫以及Bootstrap v4.2.1 開發。 (7 ☆)

OpenWMS-Frontend：OpenWMS項目前端基于 Angular 7.0 + PrimeNG 7.1.0。 (已推薦 199 ☆)

nicefish-spring-cloud：這是NiceFish的服務端代碼，基于SpringCloud。已經完成了一些基本的功能，如 SpringSecurity+OAuth2+JWT 實現SSO，文章、用戶、評論等的分頁查詢等。如果你需要與這個后端代碼進行對接，請檢出本項目的 for-spring-cloud 分支。 (已推薦 113 ☆)

燕云長風知乎

燕云長風知乎專欄

燕云長風github

燕云長風gitee

燕云長風twitter

燕云長風medium