第一次接触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. linux服务基础之http协议

    URI:Uniform Resource Identifier URL: Uniform Resource Locator,用于描述某服务器某特定资源的位置 URN: Uniform Resource ...

  2. git Remote: HTTP Basic: Access denied Git failed with a fatal error.

    解决方案: git clone 项目失败,报下面的错误信息: $ git clone http://192.168.0.141/xxxx.git Cloning into 'appEnterprise ...

  3. 常看本地是否安装Git和maven工具

    打开cmd命令行工具: 查看git where git C:\Users\jasqia>where gitC:\Program Files\Git\cmd\git.exe 安装maven后需要到 ...

  4. JS 作用域(执行环境)与作用链---JS 学习笔记(二)

    一  作用域(执行环境) 作用域:定义了变量和函数有权访问的其他数据,决定了他们各自的行为.--------<JS高级程序设计>4.2 好难理解啊~参考了参考尤克希的博客内容,大体上理解了 ...

  5. 用 jupyter notebook 打开 oui.txt 文件出现的问题及解决方案

    问题背景:下载了2018 IEEE 最新的 oui.txt 文件.里面包含了 设备 MAC 地址的前六位对应的厂商.要做的工作是,将海量设备的 MAC 地址与 oui.txt 文件的信息比对,统计出 ...

  6. 【改】利用ALSA库进行音频重采样

    转自:http://www.voidcn.com/article/p-snamarwr-p.html 一.ALSA介绍: 1.简介: 高级Linux声音体系(英语:Advanced LinuxSoun ...

  7. L - Non-Prime Factors (质数筛选+因子分解)

    In many programming competitions, we are asked to find (or count the number of) Prime Factors of an ...

  8. [tomcat] tomcat简析(一)

    1.Tomcat的顶层结构 Tomcat中最顶层的容器叫Server,代表整个服务器,Server中包含至少一个Service,用于 具体提供服务. Service主要包含两部分:Connector和 ...

  9. vue 移动端轻量日期组件不依赖第三方库

    Vue版移动端日期选择组件 1.优点:不需要依赖其他第三方库,灵活可配置: 不需要依赖第三方组件的vue日期移动端组件  小轮子 轻量可复用:  https://github.com/BeckReed ...

  10. C# 结构与类的区别

    一.定义方式 定义结构: struct PointStruct //默认的访问权限是 public { public int X { get; set; } public int Y { get; s ...