摘要：接入步驟安裝依賴啟用裝飾器語法如果有的話，要將沒有保存的文件上傳之后或者刪除之后才能跑命令在中找到項目在里面增加加入在下增加文件改寫改寫一下，來看看效果吧簡要說明表示注入在中的的屬性。

簡單開發(fā)react

將react與mobx結(jié)合開發(fā)

使用react-router進行多頁面開發(fā)

將項目打包到后端項目中進行部署

將完成的項目做成腳手架，避免重復(fù)的環(huán)境搭建

確保node已經(jīng)安裝

確保npm已經(jīng)安裝

npx create-react-app test 
# test 為你需要創(chuàng)建項目的名字，會在命令當(dāng)前目錄下創(chuàng)建test的目錄，包含項目所有的文件

你已經(jīng)完成了創(chuàng)建，開始跑起來

npm start

你可以看到react已經(jīng)能夠在local host:3000訪問了，只有一個歡迎頁面

node_modules

是當(dāng)前目錄安裝的模塊存放的地方

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一下看看效果吧~

可以看到我們組件已經(jīng)能夠響應(yīng)點擊了

在上面我們可以看到想要更改狀態(tài)是比較困難的，首先要將handClick方法由子組件傳給父組件，再進行處理。如果我們的組件是

四五層組件的時候得一步一步的往上級傳遞，這就會導(dǎo)致組件傳遞寫的很臃腫。這個時候就需要一個將狀態(tài)（即state這個值）獨立開來。

react有很多狀態(tài)管理的組件，比如redux，mobx。但redux寫起來還是不如mobx簡單明了。下面我們就來接入mobx。

安裝依賴

npm install mobx --save
npm install mobx-react --save

啟用裝飾器語法

# 如果有g(shù)it的話，要將沒有保存的文件上傳之后或者刪除之后才能跑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。是由這個標(biāo)簽來實現(xiàn)動態(tài)的注入的

@autobind 將組件之間的綁定自動完成

@observer mobx用來將react組件轉(zhuǎn)換為響應(yīng)式組件的注解，詳情查看mobx的文檔

上面可以看出，將原本的state的屬性抽離到AppStore中了，對值得更改方法也是直接調(diào)用AppStore的方法，從而避免了react組件的一級一級往上傳遞

上面我們完成了單頁面的開發(fā)。當(dāng)需要多個頁面時我們就需要使用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框架的教程就可以開發(fā)一個相對比較好看的頁面了

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

當(dāng)我們需要跟spring boot等后端項目結(jié)合，而又不想多帶帶部署前端頁面時，就需要打包進后端項目了

新建一個多模塊的maven項目

按照之前創(chuàng)建的步驟，創(chuàng)建前端的模塊，假設(shè)模塊名字為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
                        
                    
                
            
        
    

當(dāng)進行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指明要拷貝哪里的資源文件，需要根據(jù)你的前端模塊名進行相應(yīng)的修改

mvn package 一下，后端模塊的打包jar里面就會有相應(yīng)的資源文件啦

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

"proxy":"http://localhost:8080/"

如果servletPath不為/，則需要在后面補上相應(yīng)的servletPath

當(dāng)你的后端項目有設(shè)置servletPath的時候，需要相應(yīng)配置前端的打包的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);
}

如果每個項目都要經(jīng)歷上面的步驟，才能完成，那前期工作量是在太繁瑣又重復(fù)

借助maven的archetype來幫你自動生成一個初始項目吧

按照上面的流程我們已經(jīng)建好了項目

在項目目錄下執(zhí)行 mvn archetype:create-from-project，生成的target就是你的腳手架項目

cd target/generated-sources/archetype 目錄下，執(zhí)行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

創(chuàng)建項目在idea中，在點擊file-> new-> project后彈出的對話框中選擇maven

在create from archetype打勾，點擊Add archetype加入創(chuàng)建好的archetype

填寫對應(yīng)的groupId,artifaceId,version后在列表中選擇已有的archetype

按引導(dǎo)進行后續(xù)步驟的創(chuàng)建，然后就會自動生成跟你項目一樣的啦

在上面我們有這樣的代碼

const routerStore = new RouterStore() 
rootStore["app"] = new AppStore() 
routerStore["routing"] = routerStore

有時候我們往往需要在一個store的方法中去訪問下別的store的內(nèi)容，這個時候就是跨store的訪問，就需要在初始化時將rootStore傳給這個store，通過rootStore去訪問,改寫index.js

rootStore["app"] = new AppStore(rootStore) 

改寫AppStore.js，增加構(gòu)造函數(shù)

constructor(rootStore) {
        this.rootStore = rootStore
    }

這樣就可以在AppStore.js的函數(shù)中通過this.rootStore 去獲取所有store的json，從而訪問所有的store了