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">i'm Home . touch me to news center</a></h1>
                <Foot />
            </div>
        )
    }
}

export default Index

参考文章：https://blog.csdn.net/qiphon3650/article/details/88353118
**

配置路由

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