30分鐘極速通關react mobx react-router及打通springboot

sunnyxd 發布于2019-08-16 16:11 / 2309人閱讀

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

內容導航

簡單開發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的主入口

開始更改你的代碼 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 (
            
                {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一下看看效果吧~

可以看到我們組件已經能夠響應點擊了

B. 引入mobx作為狀態管理 提出問題

在上面我們可以看到想要更改狀態是比較困難的，首先要將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組件的一級一級往上傳遞

C. 引入react-router作為多頁面管理 提出問題

上面我們完成了單頁面的開發。當需要多個頁面時我們就需要使用react-router來對不同路徑進行渲染了

接入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。

D. 結合ui框架 接入步驟

找到一個合適的react ui框架，install之后按照ui框架的教程就可以開發一個相對比較好看的頁面了

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

E. 結合maven打包進spring boot項目 提出問題

當我們需要跟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里面就會有相應的資源文件啦

F. 前后端聯調 步驟

在前端項目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);
}

G. 將你創建好的項目做成腳手架 提出問題

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

借助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就可以了

屏蔽掉部分不想打包進archetype的文件

要屏蔽部分文件夾時在pom中加入plugin


                maven-archetype-plugin
                3.0.1
                
                    archetype.properties

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

怎么使用archetype

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

在create from archetype打勾，點擊Add archetype加入創建好的archetype

填寫對應的groupId,artifaceId,version后在列表中選擇已有的archetype

按引導進行后續步驟的創建，然后就會自動生成跟你項目一樣的啦

跨store的訪問 什么是跨store訪問

在上面我們有這樣的代碼

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了

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/73950.html

30分鐘極速通關react mobx react-router及打通springboot

摘要：接入步驟安裝依賴啟用裝飾器語法如果有的話，要將沒有保存的文件上傳之后或者刪除之后才能跑命令在中找到項目在里面增加加入在下增加文件改寫改寫一下，來看看效果吧簡要說明表示注入在中的的屬性。內容導航簡單開發react 將react與mobx結合開發使用react-router進行多頁面開發將項目打包到后端項目中進行部署將完成的項目做成腳手架，避免重復的環境搭建需要環境確保...

馬忠志 2019-08-23 16:28 評論0 收藏0
React結合TypeScript和Mobx初體驗

摘要：結合編輯器可以推導變量對應的類型以及內部的結構，提高代碼的健壯性和可維護性。通過充分利用時間回溯的特征，可以增強業務的可預測性與錯誤定位能力。對于對象的哪部分需要成為可觀察的，提供了細粒度的控制。 showImg(https://segmentfault.com/img/bVba6Ts?w=1218&h=525); 為什么要使用TypeScript 偵測錯誤通過靜態類型檢測可以盡早檢...

dreambei 2019-08-22 17:29 評論0 收藏0
electron + react + react-router + mobx + webpack 搭

摘要：調試集成環境選擇模塊，簡單分離開發，測試，線上環境。程序保護開機自啟托盤最小化崩潰監控升級一行代碼接入升級平臺，實現客戶端升級功能打包構建一個指令搞定打包項目地址項目地址： https://github.com/ConardLi/electron-react electron-react electron + react + react-router + mobx + webpac...

pingan8787 2019-08-23 13:40 評論0 收藏0
React + MobX 入門及實例（一）

摘要：前言現在最熱門的前端框架，毫無疑問是。對于小型應用，引入狀態管理庫是奢侈的。但對于復雜的中大型應用，引入狀態管理庫是必要的。現在熱門的狀態管理解決方案，相繼進入開發者的視野。獲得計算得到的新并返回。前言現在最熱門的前端框架，毫無疑問是React。 React是一個狀態機，由開始的初始狀態，通過與用戶的互動，導致狀態變化，從而重新渲染UI。對于小型應用，引入狀態管理庫是奢侈的。但...

simon_chen 2019-08-21 17:56 評論0 收藏0
React 328道最全面試題(持續更新)

摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學習與思考。今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發給大家，同時發布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

kumfo 2019-08-26 10:13 評論0 收藏0