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>