记录在一下借助babel在html中写react代码能力
<!DOCTYPE html>
<html>
<head>
<title>Babel Standalone Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/antd/4.16.13/antd.min.js"></script>
<Link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/antd/4.16.13/antd.min.css" />
<style>
.container {
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="root"></div>
<script name="utils">
// import 会被转化为这个require方法
const require = (prop) => window[prop];
</script>
<script name="components" type="text/babel">
import { Button, message } from 'antd';
class MyComponent extends React.Component {
render() {
return <div className="container">
<h1>借助babel在html中写react代码</h1>
<Button onClick={() => {
message.info('clicked')
}}>MyComponent</Button>
</div>;
}
}
</script>
<script name="app" type="text/babel">
class App extends React.Component {
render() {
return <div className="container">
<MyComponent />
</div>;
}
}
</script>
<script name="index" type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
