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. Css3实现波浪效果2

    一.不规则圆,旋转实现波浪效果 .info { width: 200px; height: 200px; ; background: #009A61; border-radius: 45%; colo ...

  2. FPGA基础之逻辑单元（LE or LC）的基本结构

    原帖地址: https://blog.csdn.net/a8039974/article/details/51706906/ 逻辑单元在FPGA器件内部,是完成用户逻辑的最小单元.逻辑单元在ALTER ...

  3. NLP 第10章 基于深度学习的NLP 算法

  4. 【.NET 深呼吸】在 .net core app 中使用 Composition

    .NET 中的 Composition ,即 MEF.MEF 说得简单一点,就是它可以在运行阶段动态地发现类型,用于组件扩展方面特别合适. .NET Core App 的默认框架并不提供 MEF 有关 ...

  5. 解决 安装VMwanre tools时 Enter the path to the kernel header files for the 3.10.0-862.14.4.el7.x86_64 kernel

    1.使用ctrl+z停止安装vmtools安装 2.然后yum升级kernel-devel yum -y install kernel-devel

  6. fiddle扩展

    扩展地址:http://www.telerik.com/fiddler/add-ons 证书选择 ios设置证书生成 (CertMaker for iOS and Android) 证书查看 (Fid ...

  7. 很烦人的maven和gradle的jar缓存

    1. 起因 a. 最近在学习大数据相关东西,自然就少不免去操作linux系统,更别说不敲命令 b. 然而那个配置软件时,很经常使用ln -s为一个软件目录(带着版本或者其他信息的长命名)创建别名(软连 ...

  8. 【转载 Hadoop&Spark 动手实践 2】Hadoop2.7.3 HDFS理论与动手实践

    简介 HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Go ...

  9. 刨根问底 | Elasticsearch 5.X集群多节点角色配置深入详解【转】

    转自:https://blog.csdn.net/laoyang360/article/details/78290484 1.问题引出 ES5.X节点类型多了ingest节点类型. 针对3个节点.5个 ...

  10. Linux零基础入门第四课

    根据直播讲义整理的内容,从第四课开始.前三课的内容若后面有精力会一并整理进来. 文件的基本操作(上) 创建.删除.复制.移动和重命名 touch命令创建文件 语法 >$ touch file0 ...