react仿简书首页、文章详情页

前言

经过一段时间的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:处理跨域

项目预览


首页
效果图.gif
文章详情页
效果图.gif

实现功能

  • 搜索框的动画效果
  • 文章列表加载更多
  • 换一批功能(原理同上:分页)
  • 回到顶部
  • 详情页展示

结语

虽然这只是一个简单的小demo,但是对于自己的技能提升还是有一定的帮助。在开发的过程中也遇到了一些问题,遇到问题去解决问题也是提升自己能力的过程。如果文中有什么错误或者不足之处,欢迎大家斧正!前端小白在线求教^^!

如果你喜欢这篇文章或者可以帮到你,不妨点个赞吧!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 4,866评论 0 1
  • 终端显示如下(程序等待响应): 打开网页,输入“127.0.0.1”,即本机地址: 得到响应:
    EeuwigHr阅读 923评论 0 0
  • 今天分享一篇我自己的演讲稿。 今晚和大家聊聊我的糗事。 小学四年级的时候,我是班里的学习委员。每周五我值日,作为值...
    作享其成阅读 2,593评论 0 1
  • 银元,起源于15世纪,始铸于欧洲,16世纪传入中国,光绪年间开始铸造但直到民国时期才正式大量发行成为国币。在100...
    小藏说收藏阅读 5,525评论 0 0
  • 今天是什么日子 起床:08:34 就寝:24:00 天气:晴 心情:还好 叫我起床的不是闹钟是梦想 读完20本书 ...
    木木碎碎念哇阅读 656评论 0 0