在浏览器上使用 react

所有包为开发环境使用
<!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 ></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

相关推荐
