前言
经过一段时间的React学习,React和Vue的开发确实有很大的不同,但都是MVVM框架和单页应用,因此上手没有很大的难度,但个人感觉上手比Vue要难点。这次用React+Redux仿简书首页和文章详情页这样一个小demo,以此来加深对react的了解,源码地址:github。受gif图大小影响,以下动态图如加载过慢请耐心等待。
技术栈
前端
- react:用于构建界面的MVVM框架
- redux:数据的集中状态管理,方便快捷实现组件间通信
- styled-components:以组件化的思想编写CSS样式
- react-redux:组件从redux中读取数据,并向store分发actions以更新数据
- immutable:一种持久化数据结构,防止state对象被错误赋值
后端
- koa:基于Nodejs封装的一个框架
- koa-generator:创建koa项目所用的脚手架
- koa-router:后端服务路由控制
- MySQL:数据库
- koa2-cors:处理跨域
项目预览
首页
文章详情页
实现功能
- 搜索框的动画效果
- 文章列表加载更多
- 换一批功能(原理同上:分页)
- 回到顶部
- 详情页展示
结语
虽然这只是一个简单的小demo,但是对于自己的技能提升还是有一定的帮助。在开发的过程中也遇到了一些问题,遇到问题去解决问题也是提升自己能力的过程。如果文中有什么错误或者不足之处,欢迎大家斧正!前端小白在线求教^^!
如果你喜欢这篇文章或者可以帮到你,不妨点个赞吧!