首次使用React：ReactDOM.render()无渲染且曾报document未定义求助

嘿，刚上手React就遇到这种卡壳的情况太正常了，我帮你一步步捋清楚问题所在，以及怎么解决：

首先，你之前遇到的ReferenceError: document is not defined，大概率是因为你的代码在DOM还没加载完成，甚至是在非浏览器环境（比如服务器端预渲染）就执行了。而现在页面没内容但没报错，要么是你的渲染代码没触发，要么是React.createElement的用法不对，或者目标容器没找到。

核心解决方案（无JSX版本） #

下面是适配你的需求的完整代码，我会逐行解释：

// 假设你是通过CDN引入的React/ReactDOM，或者用CommonJS引入的
var React = window.React || require('react');
var ReactDOM = window.ReactDOM || require('react-dom/client');

// 第一步：确保代码只在浏览器环境执行
if (typeof document !== 'undefined') {
  // 第二步：等待DOM完全加载完成后再操作，避免找不到#app元素
  document.addEventListener('DOMContentLoaded', function() {
    // 先确认目标容器存在
    const appContainer = document.getElementById('app');
    if (!appContainer) {
      console.error("页面中找不到id为'app'的div元素，请检查HTML结构！");
      return;
    }

    // 无JSX创建h1元素：React.createElement(标签名, 属性对象, 子内容)
    const headingElement = React.createElement(
      'h1',
      { className: 'page-title' }, // 这里可以加属性，比如class要写className
      '我的第一个React页面'
    );

    // React 18+ 用createRoot方式渲染（现在主流版本）
    const root = ReactDOM.createRoot(appContainer);
    root.render(headingElement);

    // 如果是React 17及更早版本，用旧的render方法：
    // ReactDOM.render(headingElement, appContainer);
  });
}

关键注意点 #

• DOM加载时机：如果你的app.js放在HTML的<head>里，浏览器还没解析到<div id="app"></div>就会执行代码，这时候getElementById('app')会返回null，渲染自然无效。用DOMContentLoaded事件就能确保DOM全部加载完成后再执行渲染逻辑。
• 无JSX的正确写法：必须用React.createElement来创建元素，不能直接写<h1>标签（这就是JSX的语法，你现在要避开）。它的三个核心参数：标签名（字符串）、元素props（比如样式、类名，注意class要写成className）、子节点（文本或其他React元素）。
• React版本兼容：React 18之后废弃了旧的ReactDOM.render，改用createRoot，如果你的版本是17或更早，记得用注释里的旧写法。
• HTML结构检查：一定要确保你的HTML里存在<div id="app"></div>，而且它要在app.js脚本之前被解析（最好把脚本放在</body>标签前）。

额外排查步骤 #

如果还是没内容，打开浏览器控制台做这两步：

1. 输入document.getElementById('app')，看是否能返回对应的DOM元素，确认容器存在。
2. 检查React和ReactDOM是否成功加载：输入window.React和window.ReactDOM，看是否有对象返回。

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