第一次接触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. 在Pycharm中使用Pandas时输出结果中列被省略的解决办法

    在使用pycharm学习pandas的过程中我发现好多时候会发生不能输出所有列的情况,上网搜了一下,发现解决的办法是使用一个输出控制的函数. 在下面的代码中我们只是输出starbucks_store_ ...

  2. 性能测试监控工具nmon安装及使用方法

    1.概述 监控,在检查系统问题或优化系统性能工作上是一个不可缺少的部分.通过操作系统监控工具监视操作系统资源的使用情况,间接地反映了各服务器程序的运行情况.根据运行结果分析可以帮助我们快速定位系统问题 ...

  3. ZJOI2019游记

    Day-2 本蒟蒻有幸能去参加ZJOI2019,然而出发前就做好了爆0的准备. 坐了差不多6,7个小时的车,车上基本就是在颓知乎和打雀,然后就到了酒店. 招宝山酒店--本人住过的第一个四星级酒店,看上 ...

  4. SpringBoot项目打成一个war包

    springboot 带有内置Tomcat 服务器,可以直接将项目打包成jar运行,运行命令为: java -jar demo.jar 但是如果在需要把项目达成war包该怎么办呢?下面是将spring ...

  5. docker笔记(2)-----容器连接

    2019-01-12  13:57:36 Dockerfile基本结构: 基础镜像内容:FROM指明base image 维护者信息: 镜像操作指令:RUN指令,每运行一条RUN指令,镜像添加新的一层 ...

  6. Poj2018 Best Cow Fences

    传送门 题目大意就是给定一个长度为 n 的正整数序列 A ,求一个平均数最大的,长度不小于 L 的子序列. 思路: 二分答案. Code: #include<iostream> #incl ...

  7. kafka 创建消费者报错 consumer zookeeper is not a recognized option

    在做kafka测试的时候,使用命令bin/kafka-console-consumer.sh --zookeeper 192.168.0.140:2181,192.168.0.141:2181 --t ...

  8. 上传图片组件封装 element ui

    // element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...

  9. Qt551.窗口滚动条

    1.代码的方式来创建 ScrollArea,然后使用 倒是 正常(有滚动条显示),但是此方式太麻烦 不如直接拖控件来的方便直观快捷. 但是,直接拖控件的方式 ScrollArea中无法显示出 滚动条, ...

  10. stm32WB55xx 外设资源

    1.FLASH(闪存) 2.Radio System(无线系统:兼容BLE5.0与IEEE802.15.4标准,由2.4GHz射频前端.BLE和IEEE802.15.4物理层控制器组成,无线低功耗协议 ...