笔者刚刚开始React.js的入门学习，编写了一个基本的React应用示例，它使用了React的CDN引入和Babel用于处理JSX。
1.首先，在HTML中引入了React和React DOM的开发版本的CDN链接。这些链接使你能够在浏览器中使用React库。
<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>
2.接下来，引入了Babel的CDN链接，它会在浏览器中将JSX代码转换为可执行的JavaScript代码。
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
3.在标签中，你创建了一个具有id="root"的
，这是React应用的根元素。
<div id="root"></div>
4.在
在JavaScript部分，首先使用ReactDOM.createRoot()方法创建了一个根节点，它将用于渲染React组件。
const root = ReactDOM.createRoot(document.querySelector('#root'));
5.接下来，你定义了一个变量message，其初始值为"Hello World"。
然后，定义了一个名为btnClick的函数，用于修改message变量的值。在函数内部，通过给message赋新值，实现了文本的更新
function btnClick() {
message = "React";
RootRender();
}
6.紧接着，定义了一个名为RootRender的函数，用于封装渲染React组件的逻辑。在函数内部，通过调用root.render()方法，将包含文本和按钮的React元素渲染到根节点上。
function RootRender() {
root.render((
<div>
<h2>{message}</h2>
<button onClick={btnClick}>修改文本</button>
</div>
));
}
7.在代码的末尾，调用了RootRender()函数，执行初始的渲染。
整体而言，这段代码实现了一个简单的React应用。它通过ReactDOM.createRoot()方法创建了根节点，并在点击按钮时更新了文本内容。在每次更新后，通过调用root.render()方法重新渲染React组件。这样，当按钮被点击时，页面上的文本会相应地更新为"React"。
完整代码示例如下：
<!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 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引入，用于处理jsx -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const root = ReactDOM.createRoot(document.querySelector('#root'))
// 1.定义元素内的文本
let message = "Hello World"
// 2.监听按钮点击
function btnClick() {
// 修改变量
message = "React"
// 重新渲染
RootRender()
}
// 3.封装渲染函数
function RootRender() {
root.render((
<div>
<h2>{message}</h2>
<button onClick={btnClick}>修改文本</button>
</div>
))
}
RootRender()
</script>
</body>
</html>
