第一次接触mobx,网上找了很多例子,写此主要总结一下create-react-app + mobx入门

create-react-app myreact

cd myreact

npm install

npm start

因楼主默认端口被占用,先修改端口,也为了安装其他插件,现将eject弹出,这时执行npm run eject会报错, 是因为git原因,需要执行命令:git add .    git commit -m 'test'

成功后执行npm run eject, 会问你是否弹出, 因为eject弹出后将不能恢复成原来,此执行Y, 弹出后执行命令npm start

因为mobx用到修饰器, 单修饰器还只是es7的一个提案,需要安装支持修饰器的依赖

npm i --save-dev babel-plugin-transform-decorators-legacy

npm install @babel/plugin-proposal-decorators --save-dev

现在修饰器语法应该就没什么问题了  开始安装mobx

npm install mobx --save    

npm install mobx-react --save

然后配饰package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}
 
src下面新建一个名为store的文件夹
新建todoList.js
 
新建viewtodo.js
 
app.js

index.js

以上为全部代码 success!

MobX+react使用小demo的更多相关文章

  1. React问答小demo

    在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次 ...

  2. 助你了解react的小demo

    React是个啥 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebo ...

  3. 学习react,动手实现一个小demo(仿知乎问答)

    学习react也有一周的时间,最近自己做了个仿知乎问答的小demo,项目源码在github上:https://github.com/yang302/reactQa 使用技术:bower+gulp+re ...

  4. React Native八大Demo

    参考资料:http://www.cnblogs.com/shaoting/p/7148240.html 下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水. ...

  5. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  6. Nancy之基于Nancy.Hosting.Self的小Demo

    继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...

  7. Nancy之基于Nancy.Owin的小Demo

    前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...

  8. Nancy之基于Self Hosting的补充小Demo

    前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...

  9. [Unity3D]做个小Demo学习Input.touches

    [Unity3D]做个小Demo学习Input.touches 学不如做,下面用一个简单的Demo展示的Input.touches各项字段,有图有真相. 本项目已发布到Github,地址在(https ...

随机推荐

  1. kamailio 云部署 配置NAT

    公有云配置NAT 第一步:将内网ip广播至公网ip,编辑/etc/kamailio/kamailio.cfg文件,搜索listen,添加如下配置 # listen=udp: listen= adver ...

  2. 【搬运工】mysql用户权限设置

    关于mysql的用户管理,笔记 1.创建新用户 通过root用户登录之后创建 >> grant all privileges on *.* to testuser@localhost id ...

  3. laravel——ajax分页&删除&搜索

    一.视图代码 /*搜索*/<form action="javascript:search_brand()" name="searchForm"> & ...

  4. VUE基本常识

    1.运行vue项目  项目根目录git Bash here npm run dev 为了能直接打开项目  配置项目package.json   添加--open  如下图: 2.坑:VUE初写小项目问 ...

  5. ZJOI2019Day2AFO记

    题目读下来感觉,,,怎么看上去模型都这么简单全是套路题的样子.先想了下T3应该会50,是个计算几何,50够了..于是先写了40(10分等下再来写)这样就花掉了一个小时.....过去看T1,直接高斯消元 ...

  6. Vue之添加全局变量

    定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或 ...

  7. sqlalchemy基础教程

    一.基本配置 连接数据库 外部连接数据库时,用于表名数据库身份的一般是一个URL.在sqlalchemy中将该URL包装到一个引擎中,利用这个引擎可以扩展出很多ORM中的对象. from sqlalc ...

  8. python 等频率切分数据

    小编最近入坑风控,在工作中需要对数据进行等频率切分,也就是将数据划分成几段,在每段中,数据的出现频率,出现次数是大致相同的,让数据集在每段上呈现出分布均匀的趋势. 小编先是想到df.describe ...

  9. AOP之配置文件实现

    看了http://www.cnblogs.com/xrq730/p/4919025.html这篇文章之后自己跟着做了一遍,有需要可以去看原文,比我写的更详细. AOP AOP(Aspect Orien ...

  10. python pyqt4问题记录

    在python中在终端中使用pip无法完成pyqt4的安装. 在官网下载相应的最新文件,在cmd中使用命令也无法实现安装 最终发现python最新的版本(现在已是3.7版本),无法安装. 解决办法为将 ...