# reactApp

**Repository Path**: redspite/reactApp

## Basic Information

- **Project Name**: reactApp
- **Description**: React + Redux + React-router + Koa + mongoDB 实现前后端通信的小demo
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-02-25
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + Redux + React-router + Koa + mongoDB 项目构建

下载本项目后

```
	yarn install
	yarn start 
	node koaServer/index.js
```


本项目是以下流程的产物
#### 项目搭建

1. 新建react项目
   
```
   create-react-app myapp
```
2. Npm镜像 

```     
   npm config set registry https://registry.npm.taobao.org --global
   npm config set disturl https://npm.taobao.org/dist --global
```
3. 暴露配置

```     
   npm run eject  
```
4. 安装按需引入插件 

```     
   yarn add babel-plugin-import --save-dev
```
5. 安装antd-mobile脚手架

``` 
   yarn add antd-mobile --save-dev 
```  
6. 实现按需引入antd-mobile：在package.json "plugins" 数组里添加
```
   ["import", {libraryName: "antd-mobile", style: 'css'}] 
```
#### 引入Redux
1. 安装 react-redux redux redux-thunk插件

```     
   yarn add react-redux redux redux-thunk
```
2. 浏览器安装react、redux开发者工具,可在浏览器调试页面状态。

``` 
   安装redux工具：https://github.com/reduxjs/redux-devtools
   const store = createStore(reducerName,compose(
      applyMiddleware(thunk),
      window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__():f=>f
   ))
```
3. 多个reducer合并在一起。 

```
   import {combineReducer} from 'redux'
   combineReducer({reducer1,reducer2})     
```
3. 安装@connect 装饰器 依赖 ,在package.json "babel"对象中加入如下代码

``` 
   yarn add babel-plugin-transform-decorators-legacy --save-dev
   + ["plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]]
```
4. 引入Provider  把 store 统一提供给其子组件

```
	import { Provider } from 'react-redux';
	<Provider store={store}></Provider>
```
#### 引入React-router4
1. 安装react-router

```     
   yarn add react-router-dom
```
2. 项目里使用router

```     
   import {BrowserRouter,Route,Link} from 'react-router-dom'  
```
3. react-router组件作用

```     
   <Redirect from='/a' to="/b" ></Redirect>当用户访问a页面时会自动跳到b页面
   当前页面未匹配到<Redirect /> 之前路由会执行Redirect
   <Switch>只渲染命中的第一个路由
   <Route exact /> exact绝对匹配
   <Route path='/a/:num' /> 在访问路由'/a/5'时，可在a页面this.props.match.params中获取到{num:5}
``` 
#### 跨域配置 在package.json中设置

```    
   "proxy":"http://ip:port"
```
#### Koa2搭建后台服务器
1. 安装koa 及 koa-router

``` 
 	yarn add koa koa-router`
``` 
2. 创建路由

```
	const router = new Router()
	router.get('/user', ctx => {
		ctx.body = {
			username: '张小月',
			age: '18'
		}
	})
```
3. 监听端口

```
	const app = new Koa()
	app.listen(9093)
```