第一次接触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. bootstrap:modal & iframe

    form提交绑定到特定的iframe & form的结果在dialog上显示 form:target属性 <!-- when the form is submitted, the ser ...

  2. 容器中的诊断与分析2——live diagnosis——perf

    Linux下的内核测试工具——perf使用简介 系统级性能分析工具 — Perf linux perf - 性能测试和优化工具:示例&应用 从2.6.31内核开始,linux内核自带了一个性能 ...

  3. ComponentOne 2019V1:全面支持 Visual Studio 2019

    ComponentOne Enterprise 2019V1已经正式发布,本次更新的最大亮点就是 ComponentOne 控件全面支持 Visual Studio 2019. 作为一款专注于企业应用 ...

  4. 论文阅读: Siam FC

    一.研究动机 一方面传统算法设计的跟踪模型过于简单,另一方面深度学习方法很难达到实时效果然而现实场景中的应用对速度要求较高. "shallow method"(HCFT)没有很好地 ...

  5. 关于li标签的value属性值的获取问题

    在前几天的开发过程中,遇到了这样一个问题. 在li标签中嵌入了一个value属性,如这样滴: <li id="ts1" value="0001">& ...

  6. VS code 推荐插件

    vs code 中eslint语法检测,保存即可格式化 具体查看:(https://www.jianshu.com/p/23a5d6194a4b) { // vscode默认启用了根据文件类型自动设置 ...

  7. Django细节小记

    前记:Django的ORM.模块有很多函数细节,要学会多看文档学习函数的细节 聚合annotate()和aggregate()的使用 简言之,annotate()得到的是查询集,类似all(),只不过 ...

  8. Log4Net 常见错误提示(不断更新中)

    1. 无法识别log4中的节点,如:<section>等 解决办法:在configrition中直接申明log4 <configSections><!--必须为第一个节点 ...

  9. 20165309 《网络对抗技术》实验五:MSF基础应用

    20165309 <网络对抗技术>实验五:MSF基础应用 1.基础问题回答 (1)什么是exploit? (2)什么是payload? (3)什么是encode? (4)离实战还缺些什么技 ...

  10. HDU - 6054String and String

    题意:给串s和t,对于串s每个位置有一个价值f,两种操作1.修改f[a]=b,2.查询串t子串Ta-b在s的子串Sc-d中出现位置的f和 题解:s和t建sam,把fail树按dfs序建bit套线段树, ...