无需npm，仅用本地文件/CDN运行React.js的相关问题咨询

一、为什么本地React脚本无法完成注册？ #

大概率是这几个细节没做好：

• 文件类型/版本选错：React提供了多种格式的文件包，如果你下载的是ES模块版本（比如react.js），直接用普通<script>标签引入会报错——浏览器默认不识别ES模块语法。你得下载UMD格式的文件（比如react.development.js、react-dom.development.js），这类是专门为浏览器直接引用设计的；如果非要用ES模块，就得给<script>标签加上type="module"属性，同时注意本地打开HTML时的跨域问题（建议用VS Code的Live Server这类本地服务器工具）。
• 文件路径写错了：本地脚本的src路径必须和实际文件位置匹配，比如你把React脚本放在项目根目录的js文件夹里，就得写src="./js/react.development.js"，路径错了浏览器找不到文件，自然注册失败。
• 引入顺序搞反了：必须先引入react核心库，再引入react-dom（或react-dom/client），因为ReactDOM依赖React核心才能运行。

二、CDN注册后页面元素仍无法渲染？ #

这通常是渲染逻辑或配置的问题，挨个排查这几个点：

• 脚本版本不匹配：React和ReactDOM的CDN版本必须完全一致，比如都是18.x版本，版本不兼容会直接导致渲染异常。
• 渲染代码不符合版本要求：如果用的是React 18+，要使用新的createRoot渲染方式，旧的ReactDOM.render虽然兼容但可能出现奇怪的问题：

  // React 18+ 正确写法
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<h1>Hello React!</h1>);
  

• 缺少挂载DOM节点：你的HTML里必须有一个专门用于挂载React应用的节点，比如<div id="root"></div>，渲染代码里的选择器要和这个节点的id完全对应。
• JSX没转译：浏览器本身不认识JSX语法（比如<h1>...</h1>这种写法），如果你用了JSX，必须引入Babel的CDN来转译，同时把写React代码的<script>标签的type设为text/babel：

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    // 这里写带JSX的React代码
  </script>
  

• 脚本位置不对：如果把React脚本放在<head>里，可能在DOM还没加载完成时就执行了渲染代码，导致找不到挂载节点。可以把脚本放在<body>的末尾，或者用DOMContentLoaded事件包裹渲染代码。

三、是否必须用npm安装全部依赖？ #

完全不需要！CDN或本地UMD脚本完全可以搭建React应用，适合小型项目、快速原型或者学习阶段。npm/yarn这类包管理器主要是为了大型项目的依赖管理、打包构建（比如用Webpack/Vite），以及方便使用React生态里的各种工具库。如果你只是写简单的React demo，用CDN或者本地脚本完全足够。

给你一个完整的CDN版示例代码，你可以参考：

<html>
<head>
  <meta charset="UTF-8">
  <title>First App</title>
  <!-- 引入React核心库 -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!-- 引入ReactDOM渲染库 -->
  <script 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>
  <!-- React应用挂载点 -->
  <div id="root"></div>

  <!-- React业务代码 -->
  <script type="text/babel">
    function App() {
      return <h1>Hello, My First React App!</h1>;
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  </script>
</body>
</html>

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