React 版开眼 (一)
ldq 9月 23, 2017
React 版开眼介绍
预览地址
源码
手机可访问二维码
起因
做 React 版开眼的原因：
1. 学习 React 全家桶
2. 实现开眼的网页版
技术栈
- React 15.6: [ 前端框架 ]
- Redux 3.7: [ 状态管理, 组件通信 ]
- React-router 4.2: [ 配置路由，组件切换, 按需加载 ]
- ES6/7: [ JS 版本 ]
- Webpack: [ 模块化处理，编译打包 ]
- material-ui: [ UI 框架 ]
- Axios: [ 基于 Promise 处理 HTTP 请求 ]
- Classnames: [ 处理类名 ]
- Moment: [ 处理时间显示 ]
- Prop-types: [ 组件的 props 中的变量进行类型检测 ]
- Immutable: [ Immutable 数据化 ]
- Reselect: [ 使用缓存机制优化 state ]
- Styled-components: [ CSS in JS ]
- Redux-thunk&async/await: [ redux 中间件，处理异步事件 ]
- LoaclStorge: [ 本地存储相关数据 ]
成果
实现了首页，发现，关注，
搜索，热门，分类，作者，排行榜，
往期精选，播放视频详情，
查看评论, 查看作者详情等功能
问题
- 后端 json 数据的过滤比较繁琐，
考虑是否有优化方法
效果图
项目结构
│ index.js
├─api
├─components
│ ├─App
│ │
│ ├─AuthorCarousel
│ │
│ ├─AuthorHorizontal
│ │
│ ├─AuthorInfo
│ │
│ ├─AuthorLeftInfo
│ │
│ ├─AuthorSingle
│ │
│ ├─AuthorVideoInfo
│ │
│ ├─Carousel
│ │
│ ├─Categorys
│ │
│ ├─DatePicker
│ │
│ ├─DetailFooter
│ │
│ ├─Download
│ │
│ ├─Footer
│ │
│ ├─GoToFeed
│ │
│ ├─GoToTop
│ │
│ ├─Header
│ │
│ ├─Hot
│ │
│ ├─Loading
│ │
│ ├─Navigation
│ │
│ ├─Pgcas
│ │
│ ├─RelatedVideo
│ │
│ ├─ReplyLists
│ │
│ ├─ReturnIndex
│ │
│ ├─Search
│ │
│ ├─showQRCode
│ │
│ ├─Tabs
│ │
│ ├─Tags
│ │
│ ├─TopScreen
│ │
│ ├─Video
│ │
│ ├─VideoArea
│ │
│ ├─VideoHorizontal
│ │
│ ├─VideoImg
│ │
│ ├─VideoInfo
│ │
│ └─VideoLists
│
├─redux
│ │ reducers.js
│ │ store.js
│ │
│ ├─actions
│ │
│ ├─const
│ │
│ └─reducer
│
├─router
│
├─selector
│
├─styled
│
├─utils
│
└─views
├─Author
│
├─Detail
│
├─Feed
│
├─Find
│
├─Follow
│
├─Home
│
├─NotFound
│
├─Ranklist
│
└─SearchArea
许可协议: "署名-非商用-相同方式共享 4.0"
本文链接：http://ldq-first.github.io/2017/09/23/React版开眼-一/