# react-jianshu

**Repository Path**: cyt_web/react-jianshu

## Basic Information

- **Project Name**: react-jianshu
- **Description**: react实现简书官网
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-12-14
- **Last Updated**: 2021-12-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 简书项目开发过程

[首页] https://gitee.com/li_ding/react-jianshu/blob/master/index.png

[详情] https://gitee.com/li_ding/react-jianshu/blob/master/detail.png

#### 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](https://github.com/facebook/create-react-app).**

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

```javascript
git clone https://github.com/Monster880/jianshu-react.git
cd react-jianshu
```

#### 2、安装依赖

```javascript
npm install 或 yarn install
```

#### 3、执行

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

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

以上是参考了Dell老师的课程制作，并修改了相关的bug