30分钟极速通关reactmobxreactrouter及买通springboot

1. 简朴开辟react
2. 将react与mobx连系开辟
3. 运用react-router举行多页面开辟
4. 将项目打包到后端项目中举行布置
5. 将完成的项目做成脚手架，防止反复的环境搭建

1. 确保node已装置
2. 确保npm已装置

npx create-react-app test
# test 为你须要建立项目的名字，会在敕令当前目次下建立test的目次，包括项目一切的文件

你已完成了建立，最先跑起来

npm start

你可以看到react已可以在local host:3000接见了，只要一个迎接页面

目次组织

• 1. node_modules

  是当前目次装置的模块寄存的处所

• 1. public

  index.html 是单页面的进口

• 1. src

  可寄存本身编写的代码，App是默许天生的迎接页面逻辑，index 是js的主进口

A. react简朴开辟

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 (


1. 再次npm start一下看看结果吧~

1. 可以看到我们组件已可以响应点击了

B. 引入mobx作为状况治理

提出问题

1. 在上面我们可以看到想要变动状况是比较难题的，起首要将handClick要领由子组件传给父组件，再举行处置惩罚。假如我们的组件是

四五层组件的时刻得一步一步的往上级通报，这就会致使组件通报写的很痴肥。这个时刻就须要一个将状况（即state这个值）自力开来。

1. react有许多状况治理的组件，比方redux，mobx。但redux写起来照样不如mobx简朴明了。下面我们就来接入mobx。

接入步骤

1. 装置依靠

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

2. 启用装潢器语法

   # 假如有git的话，要将没有保留的文件上传以后或许删除以后才跑eject敕令
yarn run eject
npm install --save-dev babel-preset-mobx

   在package.json中找到babel项目,在presets内里增添&＃8221;mobx&＃8221;

   "babel": { 
"presets": [   
"react-app",   
"mobx" 
]},

3. 到场core-decorators

   npm install core-decorators --save

4. 在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;


5. 改写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();


6. 改写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}


1. npm start一下，来看看结果吧

扼要申明

1. @inject(&＃8220;app&＃8221;)示意注入在index.js中的rootStore的属性app。是由这个标签来完成动态的注入的
2. @autobind 将组件之间的绑定自动完成
3. @observer mobx用来将react组件转换为响应式组件的注解，概况检察mobx的文档
4. 上面可以看出，将底本的state的属性抽离到AppStore中了，对值得变动要领也是直接挪用AppStore的要领，从而防止了react组件的一级一级往上通报

C. 引入react-router作为多页面治理

提出问题

1. 上面我们完成了单页面的开辟。当须要多个页面时我们就须要运用react-router来对差别途径举行衬着了

接入react-router步骤

1. 装置依靠

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

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

   import * as React from "react";
class Test extends React.Component{
render() {
return(

   welcome!

   )
}
}
export default Test;

3. 变动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();

4. npm start一下，接见下/#/test，和/#/途径，看看结果吧

扼要申明

1. createHashHistory是单页面的接见，会在url加个#号作为定位，这个关于要打包到背景作为页面时是很轻易的。
2. 假如你直接运用node布置的话可以直接运用createBrowserHistory，url就会是没有#号的url。

D. 连系ui框架

接入步骤

1. 找到一个适宜的react ui框架，install以后依据ui框架的教程就可以开辟一个相对比较悦目的页面了
2. 罕见的框架有semantic,bootstrap,ant等。

E. 连系maven打包进spring boot项目

提出问题

1. 当我们须要跟spring boot等后端项目连系，而又不想零丁布置前端页面时，就须要打包进后端项目了

接入步骤

1. 新建一个多模块的maven项目

2. 依据之前建立的步骤，建立前端的模块，假定模块名字为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







3. 当举行mvn package时就会在目次下天生build目次，包括一切的页面和剧本了。

4. 在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




5. • 个中outputDirectory指明要放入的文件夹
   • directory指明要拷贝那里的资本文件，须要依据你的前端模块名举行响应的修正
1. mvn package 一下，后端模块的打包jar内里就会有响应的资本文件啦

F. 前后端联调

步骤

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

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

1. 当你的后端项目有设置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);
}

G. 将你建立好的项目做成脚手架

提出问题

1. 假如每一个项目都要阅历上面的步骤，才完成，那前期工作量是在太烦琐又反复
2. 借助maven的archetype来帮你自动天生一个初始项目吧

接入步骤

1. 依据上面的流程我们已建好了项目
2. 在项目目次下实行 mvn archetype:create-from-project，天生的target就是你的脚手架项目
3. cd target/generated-sources/archetype 目次下，实行mvn install 就把archetype放入了当地堆栈了，可以举行运用了
4. 为了deploy到长途堆栈中，须要在target/generated-sources/archetype 目次下的pom.xml中到场本身的长途堆栈的地点，然后在target/generated-sources/archetype 目次下mvn deploy就可以了

屏障掉部份不想打包进archetype的文件

1. 要屏障部份文件夹时在pom中到场plugin


maven-archetype-plugin
3.0.1

archetype.properties



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

怎样运用archetype

1. 建立项目在idea中，在点击file-> new-> project后弹出的对话框中挑选maven
2. 在create from archetype打勾，点击Add archetype到场建立好的archetype
3. 填写对应的groupId,artifaceId,version后在列表中挑选已有的archetype
4. 按指导举行后续步骤的建立，然后就会自动天生跟你项目一样的啦

跨store的接见

什么是跨store接见

1. 在上面我们有如许的代码

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

1. 有时刻我们每每须要在一个store的要领中去接见下别的store的内容，这个时刻就是跨store的接见，就须要在初始化时将rootStore传给这个store，经由过程rootStore去接见,改写index.js

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

改写AppStore.js，增添组织函数

constructor(rootStore) {
this.rootStore = rootStore
}

1. 如许就可以在AppStore.js的函数中经由过程this.rootStore 去猎取一切store的json，从而接见一切的store了