NiceFish-React

摘要：大漠穷秋于赠此笔名。是版本的实现，和版本保持风格一致。码云最有价值的开源项目这是版的实现，和版本保持风格一致。采用版本，使用组件库以及开发。已推荐这是的服务端代码，基于。如果你需要与这个后端代码进行对接，请检出本项目的分支。

你好，我是徐晓东，笔名燕云长风。大漠穷秋于 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