第一次接触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. Git学习笔记——分支

    分支用法很多,比如bug修复,协作管理,这里只简单介绍我在工作中用到的协作模式. 场景:我自己开发独立功能,在本地为自己创建一个分支就叫localbranch吧,甭管master到哪了,我只管开发我的 ...

  2. nDPI-dev分析

    目前在 分为两个层次:其一是应用分析,学会如何使用:其二是原理分析,看懂它如何实现. 1. 打包该数据帧,搜集l3.l4层报头信息 2. 查询链接跟踪(如果已被标识,则直接获取到该数据帧所属协议类型) ...

  3. 数据结构与算法(C#)入门 --- 线性表

    线性表: 线性表是最简单,最基本,最常用的数据结构.线性表中的数据元素之间存在一对一的关系.即:除了第一个元素,其他元素前面有且只有一个元素:除了最后一个元素,其他元素后面有且只有一个元素.生活中的例 ...

  4. Python开发 基础篇

    2019-02-01 产生验证码: 用户输入的值和显示的值相同时显示Correct,否则继续生成随机验证码等待用户输入 def check_code(): import random checkcod ...

  5. 压测过程中使用nmon对服务器资源的监控

    1.nmon工具的下载和安装: 官网:http://nmon.sourceforge.net/pmwiki.php 下载完成后进行解压,更改权限:chmod 777 2.查看linux系统的版本,再使 ...

  6. 添加并删除Marker

    var data=new Array(); // 定位.显示内容 function setLocation(x,y,name,time,speed,direction,GPSstatus,carsta ...

  7. 【转载】DRuid 大数据分析之查询

    转载自http://yangyangmyself.iteye.com/blog/2321759 1.Druid 查询概述     上一节完成数据导入后,接下来讲讲Druid如何查询及统计分析导入的数据 ...

  8. Amazon 刷单的几种方式及安全性?

    刷单需要注意的几个点 1.通过关键词,找产品.不要直接通过连接或者ASIN购买,容易被亚马逊监控. 2.添加购物车时最好添加同类产品表现好的三个到购物车,关联同类产品.在页面多浏览一下,多打开几个同类 ...

  9. Springboot项目启动后访问不到Controller

    1.搭建一个简单的Springboot项目,最开始将启动类main函数与controller放到一个类里,可以正常启动和访问,但是将两个分开再启动时访问就会报错:This application ha ...

  10. 升级node后还是原来版本问题

    解决升级node后,已经安装了最新的版本,但是默认的node版本不是最新版本还是当前版本. 最近遇到个错误:The engine node is incompatible with this modu ...