在Codepen中使用React无输出及相关报错问题求助

一、Codepen代码空白无输出的问题 #

你的代码之所以没有显示任何内容，核心原因是没有正确完成React组件的挂载步骤，加上Codepen的环境配置可能没到位，具体解决步骤如下：

1. 检查Codepen的环境设置
   打开你的Codepen项目，点击右上角的「Settings」，切换到「JavaScript」选项卡：

   • 把「Preprocessor」设置为「Babel」（因为JSX语法需要Babel编译才能被浏览器识别）；
   • 在「Add External Scripts/Pens」里，添加React和ReactDOM的CDN链接（或者直接选择Codepen自带的React模板，新建项目时选「React」模板会自动配置好所有依赖）。

2. 确保代码完成组件挂载
   你的代码里只定义了组件，但没有把它挂载到页面的DOM元素上。以React 18为例，需要这样做：

   // 先在HTML面板里添加根容器
   // <div id="root"></div>
   
   import { createRoot } from 'react-dom/client';
   const root = createRoot(document.getElementById('root'));
   root.render(<YourComponentName />);
   

   如果你用的是React 17及以下版本，用旧的挂载方式：

   import ReactDOM from 'react-dom';
   ReactDOM.render(<YourComponentName />, document.getElementById('root'));
   

   另外要注意：如果你的Codepen是用全局引入的React（没有开启ES Modules），不需要写import，直接用全局变量React和ReactDOM即可。

3. 检查组件定义是否正确
   确保你的组件是有效的函数组件或类组件，比如函数组件要返回合法的JSX：

   function ButtonGroup() {
     return (
       <div>
         <button>按钮1</button>
         <button>按钮2</button>
         <button>按钮3</button>
       </div>
     );
   }
   

二、关于导入React/ReactDOM和require的困惑 #

这些问题本质是不同JavaScript模块系统的差异，下面帮你理清：

• 为什么有些代码不用导入React？
  这取决于运行环境：

  • 如果是通过<script>标签直接引入React的UMD版本（比如Codepen里的全局引入），React和ReactDOM会成为全局变量，不需要import或require就能直接使用；
  • 如果是用ES Modules（现代项目里的import语法）或者CommonJS（Node.js里的require），就必须导入才能使用。很多Codepen示例用的是全局挂载的方式，所以看不到导入语句。

• 为什么会出现require is not defined？
  require是CommonJS的模块语法，浏览器本身不支持这种语法，只有Node.js环境或者经过打包工具（比如Webpack、Parcel）处理后才能用。如果你的代码里用了require但没配置打包环境，就会报错。而那些不需要添加require.js的代码，要么是用了全局变量，要么是用了ES Modules的import语法，并且在Codepen里开启了「ES6 Modules」选项（在Settings的JavaScript里可以设置）。

总结一下：在Codepen里写React，最省心的方式是直接用Codepen的React模板，它会自动配置好Babel、React/ReactDOM的CDN，你只需要专注写组件和挂载代码就行。

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