Hello React
引入依赖 react react-dom babel(解析jsx语法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React18</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
//我们编写React的script代码中，必须添加 type="text/babel"，作用是可以让babel解析jsx的语法
// 渲染你的 React 组件
const root = ReactDOM.createRoot(document.getElementById("root"));
//ReactDOM. createRoot函数：用于创建一个React根，之后渲染的内容会包含在这个根中
let msg = "Hello, world";
function clickHandle() {
msg = "Hello React";
// 更新渲染视图
renderFn();
}
function renderFn() {
root.render(
<div>
<h1>{msg}</h1>
<button onClick={clickHandle}>修改文本</button>
</div>
);
}
renderFn();
</script>
</body>
</html>
