unpkg material-ui mobx react-router-domcss
全部包爲開發環境使用html
<!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>