NiceFish-React
NiceFish-React
- 首屏加载仅需663ms
- 阅读页面(不需要登录访问权限)
- 统计图表页面,采用UI指定颜色值使用轮询算法实现(需要登录访问权限)
- 文章评论页面有过滤和排序功能
- 这是我为NIceFish系列设计的登录效果图
- 阅读详情页面(不需要登录访问权限)
- 我的个人博客
- 我参与的系列项目
- 我的社交主页
你好,我是徐晓东,笔名燕云长风。大漠穷秋于 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
今天的分享就到这里,祝大家顺利,工作愉快,天天开心。
长风几万里,吹度玉门关。
以上是 NiceFish-React 的全部内容, 来源链接: utcz.com/z/382062.html