create-react-app+webpack配置

create-react-app+webpack配置

1.进入桌面运行命令：cd Desktop 2…创建项目，安装从reate-react-APP：npx create-react-app easymerchant 3.webpack隐藏的配置项进行展示：npm run eject 4.自动化测试的内容暂时用不到：删除config下的jest文件，还有script文件下的test.js package.json下的“script”下的test:node scripts/test.js"删除（是自动化测试的内容） 5.运行npm run start发现报错，删除yarn.lock,删除node_modules 如图文件目录

配置mobx状态管理

（moobx:是一个独立的库，mobx-react用于连接state状态和react视图） 安装依赖，配置mobx运行命令:yarn add mobx mobx-react -S 配置babel** package.json文件修改**

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.3.0",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/plugin-transform-react-jsx-self": "^7.2.0",
    "@babel/plugin-transform-react-jsx-source": "^7.2.0"
  }

src目录下创建store文件、index.js

import { action, observable } from mobx

class Store {
    @observable name= "qiphon"
    @action doSomething(val){
        this.name = val
    }
}

// 一定要new 一下
export default new Store()

修改index.js文件（入口文件）

import React from react;
import ReactDOM from react-dom;
import App from ./App;
import * as serviceWorker from ./serviceWorker;
import { Provider } from mobx-react
import Store from ./store/index

ReactDOM.render(   
    <Provider Store={ Store } ><App /></Provider>
    , 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();

其他页面，引入或使用store

import React , { Component } from react
import { inject, observer } from mobx-react

import Foot from ../components/footer

@inject("Store") @observer
class Index extends Component {
    componentDidMount(){
        console.dir(this.props.Store)
    }
    render(){
        return (
            <div className="home">
                <div>store { this.props.Store.qiphon }</div>
                <h1><a href="/news">im Home . touch me to news center</a></h1>
                <Foot />
            </div>
        )
    }
}

export default Index

配置路由

** 配置路由：yarn add react-router-dom -S