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. CSS 埋点统计

    原文地址: https://my.oschina.net/u/1778933/blog/1608904 CSS 埋点统计 当一个网站或者 App 的规模达到一定程度,需要分析用户在 App 或者网站的 ...

  2. .NET Threadpool的一点认识

    说到.NET Threadpool我想大家都知道,只是平时比较零散,顾现在整理一下: 一码阻塞,万码等待:ASP.NET Core 同步方法调用异步方法“死锁”的真相 .NET Threadpool ...

  3. Exchange - Add Owner of Distribution Group

    User Interface: Open Exchange Management Console. Expand Microsoft Exchange On-Premises, then right ...

  4. 用R语言分析与预測员工离职

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/kMD8d5R/article/details/83542978 https://mmbiz.qpic ...

  5. 【T11】提防对等实体的不友好动作

    1.好的软件应该能够处理各种可能的错误,也就是防御式编程. 2.作为服务端,应该检测客户端的终止,客户端的无效输入.

  6. 阿里的Json解析包FastJson使用

    阿里巴巴FastJson是一个Json处理工具包,包括“序列化”和“反序列化”两部分,它具备如下特征: 速度最快,测试表明,fastjson具有极快的性能,超越任其他的Java Json parser ...

  7. 用分离、附加的方式实现sql server数据库的备份和还原

    一.数据库分离.附加的说明 SQL Server提供了"分离/附加"数据库."备份/还原"数据库.复制数据库等多种数据库的备份和恢复方法.这里介绍一种学习中常用 ...

  8. MATLAB 统计元素出现的次数

    可以使用 hist 函数: A = [1 2 8 8 1 8 2 1 8 2 1]; count = hist(A,unique(A)) count的结果与unique(A)对应.

  9. MySQL技术内幕读书笔记（七）——锁

    锁 ​ 锁是数据库系统区分与文件系统的一个关键特性.为了保证数据一致性,必须有锁的介入.数据库系统使用锁是为了支持对共享资源进行并发访问,提供数据的完整性和一致性. lock与latch ​ 使用命令 ...

  10. linux驱动(续)

    网络通信 --> IO多路复用之select.poll.epoll详解 IO多路复用之select.poll.epoll详解      目前支持I/O多路复用的系统调用有 select,psel ...