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. ARMv8寄存器手册

    这份手册是从DS5里拷贝出来的,他是以网页的形式用浏览器打开,方面查看寄存器. ARMv8_regs_xhtml.tar.gz

  2. sshd服务

    SSHD服务 介绍:SSH 协议:安全外壳协议.为 Secure Shell 的缩写.SSH 为建立在应用层和传输层基础上的安全协议. 作用 sshd服务使用SSH协议可以用来进行远程控制, 或在计算 ...

  3. SpringCloud无废话入门03：Feign声明式服务调用

    1.Feign概述 在上一篇的HelloService这个类中,我们有这样一行代码: return restTemplate.getForObject("http://hello-servi ...

  4. sql server ExecuteNonQuery()返回受影响行数不适用select语句

    SqlCommand.ExecuteNonQuery 方法对连接执行 Transact-SQL 语句并返回受影响的行数. 对于 UPDATE.INSERT 和 DELETE 语句,返回值为该命令所影响 ...

  5. JS对HTML字符的转义

    function htmlEscape(str){ var s = ""; if(str.length == 0) return ""; s = str.rep ...

  6. Avizo/Amira应用 - 如何计算面孔率

    对于在Avizo或Amira中如何计算孔隙率,这个太简单,完成孔隙和整体材料的识别,再利用Volume Fraction计算即可获得,这里说的是每一层的面孔率如何计算? 数据导入,选取一个简单的过滤处 ...

  7. Docker搭建镜像仓库和配置缓冲地点

    Docker搭建镜像仓库和配置缓冲地点 参考网址:https://docs.docker.com/engine/reference/commandline/dockerd/#options 一.配置D ...

  8. centos7.0安装cuda驱动

    00.CUDA简介 CUDA和GPU的并行处理能力来加速深度学习和其他计算密集型应用程序 01.CPU+GPU协同架构 02.部署环境 [docker@lab-250 ~]$ cat /etc/*re ...

  9. m3u8转码

    ffmpeg -i input.mp4 -c:v libx264 -c:a aac -strict -2 -f hls -hls_list_size 0 -hls_time 5 output.m3u8

  10. geos 3.6.3库windows版本 已编译完成的32位版本和64位版本

    网上教编译方法的很多,直接分享编译完成的很少. 我就把编译完成的分享出来吧. ​geos-3.6.3.tar.bz2 (Changes) 版本的 https://trac.osgeo.org/geos ...