30分钟极速通关react mobx react-router及打通springboot

摘要：接入步骤安装依赖启用装饰器语法如果有的话，要将没有保存的文件上传之后或者删除之后才能跑命令在中找到项目在里面增加加入在下增加文件改写改写一下，来看看效果吧简要说明表示注入在中的的属性。

简单开发react

将react与mobx结合开发

使用react-router进行多页面开发

将项目打包到后端项目中进行部署

将完成的项目做成脚手架，避免重复的环境搭建

确保node已经安装

确保npm已经安装

</>复制代码 
npx create-react-app test 
# test 为你需要创建项目的名字，会在命令当前目录下创建test的目录，包含项目所有的文件

你已经完成了创建，开始跑起来

</>复制代码 
npm start

你可以看到react已经能够在local host:3000访问了，只有一个欢迎页面

node_modules

是当前目录安装的模块存放的地方

public

index.html 是单页面的入口

src

可存放自己编写的代码，App是默认生成的欢迎页面逻辑，index 是js的主入口

1.将App.js的代码更改如下

</>复制代码 
import React, {Component} from "react";
import "./App.css";
class App extends Component {
    constructor(props) {
        super(props)
        this.state = {todos: [{checked: false, text: "hello"}, {checked: true, text: "world"}]}
        this.handleClick=this.handleClick.bind(this)
    }
    handleClick(index) {
        let todos = this.state.todos
        todos[index].checked = !todos[index].checked
        this.setState({todos:todos})
    }
    render() {
        let todos = this.state.todos
        let todosDiv = todos.map((item, index) => {
            return ()
        })
        return (
            
                {todosDiv}
            
        );
    }
}
class Todo extends Component {
    constructor(props){
        super(props)
        this.handleClick=this.handleClick.bind(this)
    }
    handleClick() {
        let index = this.props.index
        this.props.handleClick(index)
    };
    render() {
        return (
            
                {this.props.text}:{this.props.index}
            
        )
    }
}
export default App;

再次npm start一下看看效果吧~

可以看到我们组件已经能够响应点击了

在上面我们可以看到想要更改状态是比较困难的，首先要将handClick方法由子组件传给父组件，再进行处理。如果我们的组件是

四五层组件的时候得一步一步的往上级传递，这就会导致组件传递写的很臃肿。这个时候就需要一个将状态（即state这个值）独立开来。

react有很多状态管理的组件，比如redux，mobx。但redux写起来还是不如mobx简单明了。下面我们就来接入mobx。

安装依赖

</>复制代码 
npm install mobx --save
npm install mobx-react --save

启用装饰器语法

</>复制代码 
# 如果有git的话，要将没有保存的文件上传之后或者删除之后才能跑eject命令
yarn run eject
npm install --save-dev babel-preset-mobx

在package.json中找到babel项目,在presets里面增加"mobx"

</>复制代码 
"babel": {  
"presets": [    
"react-app",   
"mobx"  
]},

加入core-decorators

</>复制代码 
npm install core-decorators --save

在src下增加store.AppStore.js文件

</>复制代码 
import {action, observable} from "mobx";
class AppStore {
    @observable todos;
    constructor() {
        this.todos = [{checked: false, text: "hello"}, {checked: true, text: "world"}]
    }
    @action.bound handleClick(index) {
        let todos = this.todos
        todos[index].checked = !todos[index].checked
    }
}
export default AppStore;

改写index.js

</>复制代码 
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import {Provider} from "mobx-react";
import AppStore from "./store/AppStore"
let rootStore = {}
rootStore["app"] = new AppStore()
ReactDOM.render(
    
        
    , document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

改写App.js

</>复制代码 
import React, {Component} from "react";
import "./App.css";
import {inject, observer} from "mobx-react";
import {autobind} from "core-decorators";
@inject("app")
@autobind
@observer
class App extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        let todos = this.props.app.todos
        let todosDiv = todos.map((item, index) => {
            return ()
        })
        return (
            
                {todosDiv}
            
        );
    }
}

</>复制代码 
@inject("app")
@autobind
@observer
class Todo extends Component {
    constructor(props) {
        super(props)
    }
    handleClick() {
        let index = this.props.index
        this.props.app.handleClick(index)
    };
    render() {
        let index = this.props.index
        let todo = this.props.app.todos[index]
        return (
            
                {todo.text}:{index}
            
        )
    }
}
export default App;
```

npm start一下，来看看效果吧

@inject("app")表示注入在index.js中的rootStore的属性app。是由这个标签来实现动态的注入的

@autobind 将组件之间的绑定自动完成

@observer mobx用来将react组件转换为响应式组件的注解，详情查看mobx的文档

上面可以看出，将原本的state的属性抽离到AppStore中了，对值得更改方法也是直接调用AppStore的方法，从而避免了react组件的一级一级往上传递

上面我们完成了单页面的开发。当需要多个页面时我们就需要使用react-router来对不同路径进行渲染了

安装依赖

</>复制代码 
npm install react-router mobx-react-router --save

增加新的页面,在src中增加component/Test.js

</>复制代码 
    import * as React from "react";
  class Test extends React.Component{
      render() {
          return(
welcome!
)
      }
  }
  export default Test;

更改index.js

</>复制代码 
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import {Provider} from "mobx-react";
import AppStore from "./store/AppStore"
import {Route, Router, Switch} from "react-router";
import {RouterStore, syncHistoryWithStore} from "mobx-react-router";
import createHashHistory from "history/createHashHistory"
import Test from "./component/Test"
let rootStore = {}
const hashHistory = createHashHistory()
const routerStore = new RouterStore()
const history = syncHistoryWithStore(hashHistory, routerStore)
rootStore["app"] = new AppStore()
routerStore["routing"] = routerStore
ReactDOM.render(
    
        
            
here is the menu
            
                
                
            
        
    , document.getElementById("root"));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

npm start一下，访问下/#/test，和/#/路径，看看效果吧

createHashHistory是单页面的访问，会在url加个#号作为定位，这个对于要打包到后台作为页面时是很方便的。

如果你直接使用node部署的话可以直接使用createBrowserHistory，url就会是没有#号的url。

找到一个合适的react ui框架，install之后按照ui框架的教程就可以开发一个相对比较好看的页面了

常见的框架有semantic,bootstrap,ant等。

当我们需要跟spring boot等后端项目结合，而又不想多带带部署前端页面时，就需要打包进后端项目了

新建一个多模块的maven项目

按照之前创建的步骤，创建前端的模块，假设模块名字为view，并在前端模块的目录下增加pom.xml

</>复制代码 
        
            
                com.github.eirslett
                frontend-maven-plugin
                1.2
                
                    <-- Install our node and npm version to run npm/node scripts-->
                    
                        install node and npm
                        
                            install-node-and-npm
                        
                        
                            <-- 指定node的版本例如 v6.9.1 -->
                            ${nodeVersion}
                            ${npmVersion}
                            https://npm.taobao.org/mirrors/node/
                            http://registry.npmjs.org/npm/-/
                        
                    
                    <-- Set NPM Registry -->
                    
                        npm set registry
                        
                            npm
                        
                        
                            <--config set registry https://registry.npmjs.org-->
                            config set registry https://registry.npm.taobao.org
                        
                    
                    <-- Set SSL privilege -->
                    
                        npm set non-strict ssl
                        
                            npm
                        
                        <-- Optional configuration which provides for running any npm command -->
                        
                            config set strict-ssl false
                        
                    
                    <-- Install all project dependencies -->
                    
                        npm install
                        
                            npm
                        
                        <-- optional: default phase is "generate-resources" -->
                        generate-resources
                        <-- Optional configuration which provides for running any npm command -->
                        
                            install
                        
                    
                    <-- Build and minify static files -->
                    
                        npm run build
                        
                            npm
                        
                        
                            run build
                        
                    
                
            
        
    

当进行mvn package时就会在目录下生成build目录，包含所有的页面和脚本了。

在spring boot后端项目中，将前端打包好的页面拷贝到后端目录中

</>复制代码 
 
     
         
             maven-resources-plugin
             
                 
                     Copy App Content
                     generate-resources
                     
                         copy-resources
                     
                     
                         src/main/resources/public
                         true
                         
                             
                                 ${project.parent.basedir}/view/build
                                 
                                     static/
                                     index.html
                                 
                             
                         
                     
                 
             
         
         
             org.springframework.boot
             spring-boot-maven-plugin
         
     
 

其中outputDirectory指明要放入的文件夹

directory指明要拷贝哪里的资源文件，需要根据你的前端模块名进行相应的修改

mvn package 一下，后端模块的打包jar里面就会有相应的资源文件啦

在前端项目package.json中指明接口的代理

</>复制代码 
"proxy":"http://localhost:8080/"

如果servletPath不为/，则需要在后面补上相应的servletPath

当你的后端项目有设置servletPath的时候，需要相应配置前端的打包的servletPath，否则默认为/的servletpath

方法1: package.json 增加

</>复制代码 
"homepage": "."

方法2: config.paths.js文件下修改配置

</>复制代码 
function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  //将/修改为./
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "./");
  return ensureSlash(servedUrl, true);
}

如果每个项目都要经历上面的步骤，才能完成，那前期工作量是在太繁琐又重复

借助maven的archetype来帮你自动生成一个初始项目吧

按照上面的流程我们已经建好了项目

在项目目录下执行 mvn archetype:create-from-project，生成的target就是你的脚手架项目

cd target/generated-sources/archetype 目录下，执行mvn install 就把archetype放入了本地仓库了，可以进行使用了

为了deploy到远程仓库中，需要在target/generated-sources/archetype 目录下的pom.xml中加入自己的远程仓库的地址，然后在target/generated-sources/archetype 目录下mvn deploy就可以了

要屏蔽部分文件夹时在pom中加入plugin

</>复制代码 
                maven-archetype-plugin
                3.0.1
                
                    archetype.properties
                
            

新建archetype.properties文件,配置要忽略的通配符excludePatterns=/.idea/,**.iml

创建项目在idea中，在点击file-> new-> project后弹出的对话框中选择maven

在create from archetype打勾，点击Add archetype加入创建好的archetype

填写对应的groupId,artifaceId,version后在列表中选择已有的archetype

按引导进行后续步骤的创建，然后就会自动生成跟你项目一样的啦

在上面我们有这样的代码

</>复制代码 
const routerStore = new RouterStore() 
rootStore["app"] = new AppStore() 
routerStore["routing"] = routerStore

有时候我们往往需要在一个store的方法中去访问下别的store的内容，这个时候就是跨store的访问，就需要在初始化时将rootStore传给这个store，通过rootStore去访问,改写index.js

</>复制代码 
rootStore["app"] = new AppStore(rootStore) 

改写AppStore.js，增加构造函数

</>复制代码 
constructor(rootStore) {
        this.rootStore = rootStore
    }

这样就可以在AppStore.js的函数中通过this.rootStore 去获取所有store的json，从而访问所有的store了