# react-jianshu

**Repository Path**: bing-cola/react-jianshu

## Basic Information

- **Project Name**: react-jianshu
- **Description**: react - 简书demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-12
- **Last Updated**: 2021-07-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


```js
npm install
npm run start
npm run build
```

---

## 创建项目

`create-react-app react-jianshu`

`cd react-jianshu`

`npm run start`

## 删除非必要文件

- `App.css`
- `App.test.js`
- `reportWebVitals.js`
- `logo.svg`
- `setupTests.js`

---

## 使用sass库

安装
`npm install sass-loader node-sass --save-dev`

---

## 使用动画库

安装
`npm install react-transition-group --save`

使用
```js
import { CSSTransition } from 'react-transition-group';

<CSSTransition timeout={300} in={this.state.focused} classNames="myslide">
    <div className={this.state.focused ? 'search focused' : 'search'}>
        <input className="nav-search" placeholder="搜索"/>
    </div>
</CSSTransition>
```

```css
.myslide-enter {
    transition: all .3s ease-in-out;
}

.myslide-enter-active {
    width: 260px;
}

.myslide-exit {
    transition: all .3s ease-in-out;
}

.myslide-exit-active {
    width: 160px;
}
```

---

## 使用 react-redux

安装
`npm i redux --save`
`npm i react-redux --save`

---

## immutable

immutable对象是不可直接赋值的对象，它可以有效的避免错误赋值的问题。
在react中，immutable主要是防止state对象被错误赋值。

安装
`npm i immutable --save`

```js
import { fromJS } from 'immutable'; // 引入immutable.js库

// 转成immutable对象
const defaultState = fromJS({
    focused: false,
});

export default (state = defaultState, action) => {
    if (action.type === 'SEARCH_FOCUS') {
        return state.set('focused', action.focused); // 改变属性
    }
    return state;
};
```

```js
state.header.get('focused') // 获取immutable对象的属性
```

---

## redux-immutable 统一数据格式

安装
`npm i redux-immutable --save`

```js
import { combineReducers } from 'redux-immutable';
import { reducer as headerReducer } from '../common/header/store';

// 把多个不同的子reducer整合成一个最终的reducer
const reducer = combineReducers({
    header: headerReducer,
});

export default reducer;
```

state变成immutable对象

```js
state.get('header').get('focused');
// 或
state.getIn(['header', 'focused']);
```

---

## redux-thunk

Redux-thunk可以使 store.dispatch(action)中的action可以是函数类型，从而可以进行异步请求(axios)等处理

安装
`npm i redux-thunk --save`

---

## axios

安装
`npm i axios --save`

---

## 路由

安装
`npm i react-router-dom --save`
`yarn add react-router-dom`

---

## react-loadable 异步加载组件

安装
`yarn add react-loadable`

### 使用

`1. 创建loadable.js`

```js
import React from 'react';
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
    loader: () => import('./index.js'), // 异步加载
    loading: () => <div>loading...</div>,
});

export default class App extends React.Component {
    render() {
        return <LoadableComponent />;
    }
}
```

`2. 在App.js中使用异步组件`

```js
import Detail from './pages/detail/loadable'; // 加载异步组件
```