对话内容回顾与教程整理

标题：在 CodePen 上运行 React 代码

1。使用在线平台运行 React 代码

  • 1.1 探索流行的在线代码编辑器平台
  • 1.2 进行流行度排名估计
  • 1.3 上传 CodePen 截图和代码示例

2。在 CodePen 中实现 React 代码

  • 2.1 调整代码以适应 CodePen 环境
  • 2.2 解决常见的 CodePen 问题
    • 2.2.1 添加 React 和 ReactDOM 库
    • 2.2.2 设置 Babel 作为 JavaScript 预处理器
    • 2.2.3 处理 “ReactDOM 未定义” 等错误
    • 2.2.4 解释 useEffect 的作用及其在 CodePen 中的表现

3。教程：在 CodePen 中实现和运行 React 代码

  • 3.1 创建 React 组件并渲染到页面
  • 3.2 包含 React Hooks 的使用
  • 3.3 调试和测试组件功能

教程：在 CodePen 上运行 React 代码

步骤 1：创建新的 Pen

  • 打开 CodePen 网站。
  • 点击 “Create” 按钮，开始一个新的 Pen。

步骤 2：设置 HTML

  • 在 HTML 面板中，创建一个根元素，例如：
1
<div id="root"></div>

步骤 3：编写 JavaScript 组件

  • 在 JS 面板中，编写你的 React 组件。这里以一个计数器为例：
1
2
3
4
5
6
7
8
9
10
11
12
function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

步骤 4：添加 React 和 ReactDOM

  • 在 JS 设置中添加 React 和 ReactDOM 库。使用这些 URL：
    • React：https://unpkg.com/react@latest/umd/react.development.js
    • ReactDOM：https://unpkg.com/react-dom@latest/umd/react-dom.development.js

步骤 5：设置 JavaScript 预处理器

  • 在 JS 设置中，确保选择了 Babel 作为 JavaScript 预处理器。

步骤 6：渲染组件

  • 在代码的底部，使用 ReactDOM.render 将组件渲染到页面：
1
ReactDOM.render(<Counter />, document.getElementById('root'));

步骤 7：保存并运行

  • 确保所有设置都已保存。
  • 查看 CodePen 的预览窗口以查看结果。

步骤 8：调试

  • 如果出现错误，请检查浏览器的开发者控制台。
  • 根据错误信息进行相应的调整。

关于 useEffect：

useEffect 是一个 React Hook，用于处理组件的副作用，如 API 调用、订阅或任何对 DOM 的操作。它接收一个函数，该函数会在组件每次渲染后执行。

📝 注意：在 CodePen 环境中，你无需使用 import 语句，因为 React 和 ReactDOM 已作为全局变量通过外部脚本标签添加。只需直接使用 React.useState 和 React.useEffect 即可。

这个教程包含了从创建一个新的 Pen 开始，一直到调试和查看组件渲染结果的所有步骤。希望这能帮助你在 CodePen 上运行 React 代码。🚀