unpkg material-ui mobx react-router-dom

所有包为开发环境使用

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>ajanuw</title>

  <script src='https://unpkg.com/react@latest/umd/react.development.js' crossorigin='anonymous'></script>

  <script src='https://unpkg.com/react-dom@latest/umd/react-dom.development.js' crossorigin='anonymous'></script>

  <script src="https://unpkg.com/react-router-dom@4.3.1/umd/react-router-dom.js"></script>

  <script src='https://unpkg.com/@material-ui/core/umd/material-ui.development.js' crossorigin='anonymous'></script>

  <script src='https://unpkg.com/babel-standalone@latest/babel.min.js' crossorigin='anonymous'></script>

  <script src="https://unpkg.com/mobx@latest/lib/mobx.umd.js"></script>

  <script src="https://unpkg.com/mobx-react@latest/index.js"></script>

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />

  <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

</head>

<body>

  <div id="root"></div>

  <script type="text/babel">

    const l = console.log

      const { Component, Fragment }  = React

      const { decorate, observable } = mobx

      const { observer } = mobxReact

      class Store {

        name = 'mobx'

      }

      decorate(Store, {

      name: observable,

  })

  const store  = new Store()

      class App extends Component {

        state = {

          name: 'ajanuw'

        }

        render() {

          return (

            <div>

              { store.name }

            </div>

          )

        }

        componentDidMount(){

          setTimeout(() => {

            store.name = this.state.name

          }, 2000);

        }

      }

      App = observer(App)

      const About = () => <div>about</div>

      const { HashRouter, BrowserRouter, Route, Switch, withRouter, Redirect } = ReactRouterDOM

      ReactDOM.render(

        <HashRouter>

        <Switch>

          <Redirect from='/index.html' to='/' />

          <Redirect from='/home' to='/' />

          <Route exact struct  component={App} path='/' />

          <Route  exact struct component={About} path='/about' />

        </Switch>

        </HashRouter>,

        document.querySelector('#root')

      );

    </script>

</body>

</html>

在浏览器上使用 react的更多相关文章

  1. yii2获取登录前的页面url地址--电脑和微信浏览器上的实现以及yii2相关源码的学习

    对于一个有登录限制(权限限制)的网站,用户输入身份验证信息以后,验证成功后跳转到登录前的页面是一项很人性化的功能.那么获取登录前的页面地址就很关键,今天在做一个yii2项目的登录调试时发现了一些很有意 ...

  2. 在web浏览器上显示室内温度（nodeJs+arduino+socket.io）

    上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...

  3. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

  4. 移动端浏览器和微信浏览器上禁止body的滚动条

    一般禁止body滚动的做法就是设置overflow:hidden. 但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改 ...

  5. 后台启动weblogic成功后，在web浏览器上无法访问

    后台启动weblogic成功后,在web浏览器上无法访问,可尝试重启服务器.

  6. 在iis中设置文件下载而不是在浏览器上打开

    点击网页链接的*.txt,*.jpg,*.xml等文件时会在浏览器上直接显示,并没有像*.doc那样弹出下载提示框. 解决方法: 在部署的网站上,选择存放文件的目录,选择 HTTP响应标头 ,添加一个 ...

  7. 1、在MAC上搭建React Native开发环境

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  8. css3在不同型号手机浏览器上的兼容一览表

    网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看.  以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持   ...

  9. 运行QQ出现initialization failure 0x0000000c错误和浏览器上不了网

    出现QQ出现initialization failure 0x0000000c错误和浏览器上不了网的问题,原因是关机的时候没有正常关闭导致的. 解决方法: 1.我们在开始菜单栏中的附件中找到“命令提示 ...

随机推荐

  1. NDVI等植被相关指数

    一.基础概念 NDVI(Normalized Difference Vegetation Index,归一化差分植被指数,标准差异植被指数),植被覆盖指数.也称为生物量指标变化,可使植被从水和土的图像 ...

  2. 解决本地文件上传时fakepath的问题

    $("input[type='file']").on('change', function () { var oFReader = new FileReader(); var fi ...

  3. 821. 字符的最短距离 c++实现方法

    1.题目描述 给定一个字符串 S 和一个字符 C.返回一个代表字符串 S 中每个字符到字符串 S 中的字符 C 的最短距离的数组. 示例 1: 输入: S = "loveleetcode&q ...

  4. 基于Cesium的demo赏析

    更新于2019.2.23 Cesium的强大不用多说,所以有很多政府.组织基于cesium做了一些应用,其中不乏有很多优秀的示例,我们大都可以从中获得对自己的项目有益的东西.另:有的网站需要FQ. 官 ...

  5. Android自定义控件实战——滚动选择器PickerView

    转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38513301 手机里设置闹钟需要选择时间,那个选择时间的控件就是滚动选择器, ...

  6. Windows 7安装Tensorflow

    以前是在Cent OS中运行Tensorflow,,经常需要切换操作系统,很不方便,于是决定在Windows 7下安装Tensorflow. 过程还是挺复杂的,需要安装的包括:Visual Studi ...

  7. TRAC-IK机器人运动学求解器

    TRAC-IK和Orocos KDL类似,也是一种基于数值解的机器人运动学求解器,但是在算法层面上进行了很多改进(Specifically, KDL’s convergence algorithms ...

  8. c# 非调试状态下面执行

    #if !DEBUG                View("ErrorSimple").ExecuteResult(ControllerContext);#endif

  9. 使用日志服务进行Kubernetes日志采集

    阿里云容器服务Kubernetes集群集成了日志服务(SLS),您可在创建集群时启用日志服务,快速采集Kubernetes 集群的容器日志,包括容器的标准输出以及容器内的文本文件. 新建 Kubern ...

  10. webstorm快捷键 webstorm keymap内置快捷键英文翻译、中英对照说明

    20160114参考网络上的快捷键,整理自己常用的: 查找/代替shift+shift 快速搜索所有文件,简便ctrl+shift+N 通过文件名快速查找工程内的文件(必记)ctrl+shift+al ...