React.js代码无法在网页显示，多项排查后仍未定位问题

你的代码里存在几个关键问题，直接给你梳理和修复方案：

• react.html中script标签未正确闭合：引入react-dom的脚本标签结尾写错了，把<script>改成</script>，这个语法错误会导致后续脚本加载异常。
• React 18渲染方式已更新：你用的ReactDOM.render是旧版本写法，React 18官方推荐使用createRoot API。
• 缺少JSX编译支持：react.js里的<h1>Hello, World!</h1>是JSX语法，浏览器无法直接识别，必须引入babel来编译。

修复后的react.html #

<html>
    <head>
        <link rel="stylesheet" href="react.css">
        <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/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src="react.js" type="text/babel"></script>
    </body>
</html>

修复后的react.js #

// React 18标准渲染写法
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, World!</h1>);

按这个修改后，应该就能正常显示内容了。

内容的提问来源于stack exchange，提问作者Click on __