简书项目开发过程

1-Header组件开发

• 项目目录搭建，Styled-Components与Reset.css的结合使用

• 使用styled-components完成Header组件布局

• iconfont图标的使用

• 搜索框动画效果实现

• 使用React-Redux进行应用数据的管理

• 使用combineReducers完成对数据的拆分管理

• actionCreators与constants的拆分

• 使用Immutable.js来管理store中的数据

• 使用redux-immutable统一数据格式

• 热门搜索样式布局

• Axios 获取热门搜索推荐数据

• 热门搜索换页功能实现

• 换页旋转动画效果的实现

2-首页开发

• 在React中使用路由功能
• 首页组件的拆分
• 首页专题区域布局及reducer的设计
• 首页文章列表制作
• 首页推荐部分代码编写
• 首页异步数据获取
• 异步操作代码拆分优化
• 实现加载更多功能
• 返回顶部功能实现
• 首页性能优化及路由跳转

3-详情页面和登录功能开发

• 详情页面布局
• 使用redux管理详情页面数据
• 异步获取数据
• 页面路由参数的传递
• 登录页面布局
• 登录功能实现
• 登录鉴权及代码优化
• 异步组件及withRouter路由方法的使用

项目执行

This project was bootstrapped with Create React App.

1、将项目克隆到本地，cd到react-jianshu

git clone https://github.com/shanruopeng/react-jianshu.git
cd react-jianshu

2、安装依赖

npm install 或 yarn install

3、执行

npm run start 或 yarn start
// npm run build(打包)

4、打开浏览器浏览 http://localhost:3000/