NiceFish-React

你好，我是燕云长风。
寓意：结合李白著名的边塞诗《关山月》取【燕云长风】—— 长风几万里，吹度玉门关。

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

我的个人博客

• 燕云长风

我参与的系列项目

1. NiceFish：美人鱼，这是一个微型Blog系统，前端基于Angular7.0 + PrimeNG7.1.0。（GVIP 码云最有价值的开源项目 3774 ☆ )
2. NiceFish-React：这是React版的实现，和 NiceFish Angular 版本保持风格一致。采用React Hooks 16.8.3 版本，使用TypeScript、Ant Design组件库以及Bootstrap v4.2.1 开发。 ( 4 ☆)
3. OpenWMS-Frontend：OpenWMS项目前端基于 Angular 7.0 + PrimeNG 7.1.0。 (已推荐 205 ☆)

我的社交主页

• 燕云长风github