React入门疑问：为何我的页面没有发生变化？

你的页面没渲染出内容，核心问题是浏览器原生不支持JSX语法，你代码里的<h1>Hello,world</h1>属于JSX，直接运行会报错，导致代码无法执行。

下面是两种可行的解决办法：

方法一：引入Babel转译JSX #

在HTML中添加Babel的CDN，并将包含JSX的代码放在type="text/babel"的script标签内（如果是外部JS文件，也要给script标签加上这个属性）。修改后的完整HTML示例：

<body>
    <div id="root"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <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>
    <!-- 引入Babel用于转译JSX -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- 用type="text/babel"标记需要转译的代码 -->
    <script type="text/babel">
        const root = ReactDOM.createRoot(
            document.getElementById('root')
        );
        const element = <h1>Hello,world</h1>;
        root.render(element);
    </script>
</body>

方法二：改用React.createElement写法 #

直接用React提供的createElement方法替代JSX，不需要额外引入转译工具，浏览器可以直接执行。修改后的JavaScript代码：

const root = ReactDOM.createRoot(
    document.getElementById('root')
);
// 替换JSX为React.createElement调用
const element = React.createElement('h1', null, 'Hello,world');
root.render(element);

另外要注意：如果你的JavaScript是外部文件，必须确保引入该文件的script标签放在React和ReactDOM的script标签之后，否则会找不到React或ReactDOM对象。

内容的提问来源于stack exchange，提问作者nox