<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- react 相关 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- axios -->
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- antd -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.2/antd.compact.min.css">
<!-- 样式 -->
<style>
.title {
color: red;
}
</style>
</head>
<body>
<!-- React 容器 -->
<div id="app"></div>
<!-- 告诉 babel 转哪些，只需要在 script 标签写 type="text/babel" 就可以了 -->
<script type="text/babel">
// 组件内容
const Text = (props) => {
// useState 使用
const [name, setName] = React.useState('张三')
// 渲染
return (
<div className="title">组件内容</div>
)
}
// 页面内容
const Page = (props) => {
const touchClick = () => {
console.log('点击 + 1')
}
return (
<div>
<Text />
<antd.Button type="primary" onClick={touchClick}>Primary Button</antd.Button>
</div>
)
}
// 将页面内容渲染到指定容器
ReactDOM.render(<Page />, document.querySelector("#app"))
</script>
</body>
</html>
