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. 【面试 spring boot】【第十七篇】spring boot相关面试

    spring boot相关面试 ====================================================== 1.spring boot启动类  启动原理 参考:htt ...

  2. [Web 前端] 我不再使用React.setState的3个原因

    copy from : https://blog.csdn.net/smk108/article/details/85237838 从几个月前开始,我在新开发的React组件中不再使用setState ...

  3. golang 特殊知识点

    golang 代码不需要分号; 但是又会自己在底层增加;号 ,所以 golang的{左花括号必须在代码的最后一行,而不能在新的一行; golang 代码组织里需要注意 vendor 和 interna ...

  4. Mac PD 虚拟机 鼠标双击 输入 "c" 解决

    Mac PD 虚拟机 鼠标双击 输入 "c" 解决 特么的, 是屏幕取词软件引起的.. 关闭就好了.

  5. ajax的请求，参数怎么管理？

    一般发送一条ajax 然后点击界面需要更改查询条件,第一种是做一个form表单比较合适的设计.更改了参数回收表单然后重新发送ajax: 还有一种是把参数缓存到变量中,然后更改了条件修改变量再次重发aj ...

  6. sql注入工具：sqlmap命令

    sqlmap是一款专业的sql注入工具, 让你告别人工注入, 程序高效自动注入 前提是你有找到注入点 , 工具的官方网站:http://sqlmap.org/ kali系统默认安装sqlmap, 不需 ...

  7. Webdings字体和Wingdings字体对照表

    一.Webdings是一个TrueType的dingbat字体,于1997年发表,搭载在其后的Microsoft Windows视窗系统内,大多的字形都没有Unicode的相对字. 使用很简单1.网页 ...

  8. 在Ubuntu下添加自定义服务

    https://blog.csdn.net/xkjcf/article/details/78698232 在Ubuntu系统中添加自定义服务需要遵从设计启动脚本的模式,下面就是如何编写启动脚本的示例程 ...

  9. 关于海康威视与Unity3d集成冲突问题解决

    一.集成 1.1 了解什么是ANSI系列与GNU系列    https://baike.baidu.com/item/ANSI%20C/7657277?fr=aladdin    https://ww ...

  10. SVN：This client is too old to work with working copy…解决的方法

    解决svn:This client is too old问题 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlmbXlmbXlmbXlm/font/5a ...