在浏览器上使用 react

最新推荐文章于 2024-02-06 17:05:49 发布

weixin_34376986

最新推荐文章于 2024-02-06 17:05:49 发布

阅读量526

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/ajanuw/p/9783895.html

版权

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>

转载于:https://www.cnblogs.com/ajanuw/p/9783895.html

weixin_34376986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在浏览器上使用 react

unpkg material-ui mobx react-router-dom所有包为开发环境使用<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ajanuw</title> <script src='ht...
复制链接

扫一扫