<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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/@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()
const materialUi = window["material-ui"];
const {
Button,
createMuiTheme,
CssBaseline,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Icon,
MuiThemeProvider,
Typography,
withStyles
} = materialUi
const { blue, pink } = materialUi.colors
const theme = createMuiTheme({
primary: blue,
secondary: pink
});
class App extends Component {
state = {
name: "ajanuw"
};
render() {
return (
<MuiThemeProvider theme={theme}>
<Fragment>
<h2>hello {this.state.name}</h2>
<Button color="secondary" variant='contained'>click</Button>
</Fragment>
</MuiThemeProvider>
);
}
}
App = observer(App)
ReactDOM.render(<App />, document.querySelector("#root"));
</script>
</body>
</html>在浏览器上使用 react
猜你喜欢
转载自www.cnblogs.com/ajanuw/p/9783895.html
今日推荐
周排行