<!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>Hello React</title>
</head>
<body>
<div id="root"></div>
<div id="app"></div>
<!-- 添加依赖 -->
<!-- 依赖三个包 -->
<!-- CDN引入 -->
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<!-- babel引入 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 下载引入 -->
<!-- npm下载引入(脚手架) -->
<script type="text/babel">
// 编写React代码(js语法)
// jsx语法 -> 不同的javascrit代码 -> babel
// 渲染Hello World
// React18之前ReactDOM.render
// ReactDOM.render(<h2>Hello World</h2>, document.querySelector("#root"));
// React18之后
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<h2>Hello World</h2>);
const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(<h2>你好啊，World</h2>);
</script>
</body>
</html>
扫一扫
08-06
910
910
06-14
1325
1325
12-19
349
349
09-24
378
378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
