mobx-react 入门使用实例

mobx 管理应用程序的状态

mobx实例

一、新建应用 mobx-test，简单配置webpack

控制台，创建应用文件夹

mkidr mobx-test    
cd mobx-test

控制台，新建src源文件，及index.js源文件

mkdir src    
touch src/index.js

打开空的index.js文件，输入

document.write('hello world");

控制台，创建应用的配置文件 package.json

npm init -y

npm init命令会在当前目录生成一个package.json文件，这个文件中会记录一些关于项目的信息。执行该命令后终端会询问比如：项目的作者，git地址，入口文件、命令设置、项目名称和版本号等等
。而如果想要偷懒步免去一直按 enter，在命令后追加 --yes 参数即可，其作用与一路下一步相同。npm init --yes 简写，npm init -y

控制台，创建webpack的配置文件
在当前目录新建webpack.config.js文件

touch webpack.config.js

安装应用依赖
把新的js语法编译成当前的浏览器能够识别的语法格式，安装baberl依赖。

npm i webpack webpack-cli babel-core babel-preset-env babel-loader -D

--save-dev 、 -D意思是将模块版本信息保存到devDependencies（开发环境依赖）中，即package.json文件的devDependencies字段中；

编写webpack.config.js内容

const path = require('path');  

const config = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    module: {
        rules: [{
            test: /\.js$/,  
            exclude: /node_modules/,  
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env'],
                }
            }
        }]
    },
    devtool: 'inline-source-map'
};

module.exports = config;

为了方便调用webpack，编写npm script命令
package.json文件中添加start
-w 表示js文件更改，自动进行编译

"scripts": {
    "start": "webpack -w",    
    "test": "echo \"Error: no test specified\" && exit 1"
  },

控制台，运行

npm start

编译结果

在根目录下新建index.html文件
引用编译后的文件

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

打开html结果

以上就是简单的使用webpack基本项目。

二、结合mobx和react

控制台，安装react 依赖

npm i react react-dom prop-types mobx-react -S

--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即package.json文件的dependencies字段中

修改src/index.js文件的后缀名为.jsx
修改webpack配置
webpack.config.js中修改入口文件entry、和使用babel文件test

....
entry: path.resolve(__dirname, 'src/index.jsx'),
....
module: {
        rules: [{
            test: /\.jsx$/,  
            ...
        }]
    },
};