React v17.0.1替代v15.5.4文件及ReactDOM相关问题咨询

Got it, let's break down your questions one by one and get your example running smoothly with React 17.0.1 without using npm:

1. React 17.0.1所需的替代文件 #

React 17.0.1仍然提供UMD格式的文件（适合直接在浏览器中通过<script>标签引入），替代旧版react.js和react-dom.js的是：

开发环境（用于学习/调试） #

• react.development.js：对应旧版react.js，包含React核心库的开发版本（带调试提示）
• react-dom.development.js：对应旧版react-dom.js，处理DOM渲染相关逻辑的开发版本

生产环境（用于上线） #

• react.production.min.js：压缩后的React核心库生产版本
• react-dom.production.min.js：压缩后的React DOM生产版本

你可以直接通过CDN引入这些文件，示例代码如下（开发环境）：

<!-- React核心库 -->
<script crossorigin src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>
<!-- React DOM渲染库 -->
<script crossorigin src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>

注意：crossorigin属性是必须的，因为CDN文件来自第三方域名，这个属性能确保React在发生错误时提供更好的错误提示。

2. 解决"Uncaught ReferenceError: ReactDOM is not defined"报错 #

React 17.0.1仍然保留了ReactDOM.render方法，你遇到这个报错的核心原因是没有正确引入react-dom.development.js（或生产版）文件。只要确保该文件被正确引入，ReactDOM对象就会全局可用。

另外，因为你的示例使用了JSX语法，还需要引入Babel的独立编译包（旧版《React Quickly》的示例应该也依赖类似工具），用于在浏览器中实时编译JSX为原生JavaScript。

完整的hello-js-world-jsx示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello JS World (React 17.0.1)</title>
    <!-- 引入React核心库 -->
    <script crossorigin src="https://unpkg.com/react@17.0.1/umd/react.development.js"></script>
    <!-- 引入React DOM渲染库 -->
    <script crossorigin src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.development.js"></script>
    <!-- 引入Babel用于编译JSX -->
    <script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script>
</head>
<body>
    <!-- React渲染的目标容器 -->
    <div id="root"></div>

    <!-- 注意script标签的type是text/babel，告诉Babel编译这个标签里的代码 -->
    <script type="text/babel">
        // 使用ReactDOM.render渲染JSX内容
        ReactDOM.render(
            <h1>Hello, JS World!</h1>,
            document.getElementById('root')
        );
    </script>
</body>
</html>

把这段代码保存为HTML文件并在浏览器中打开，就能正常运行你的示例了。

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