/react-jianshu

使用react仿写简书PC项目

Primary LanguageJavaScript

简书项目开发过程

首页 详情

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/