如何在CodePen中运行create-react-app创建的React项目？

首先得明确：CodePen是在线编辑器，不需要npm run这类命令，它靠内置环境和CDN依赖来运行代码，咱们只要把本地项目的核心代码迁移过去并配置好环境就行，具体步骤如下：

• 第一步：配置CodePen的JS环境
  打开CodePen的JS面板右上角的「Settings」按钮，在「JavaScript」设置里：

  1. 把「Preprocessor」改成「Babel」（用来解析JSX语法）
  2. 在「Add External Scripts/Pens」里，添加React和ReactDOM的CDN链接（或者更省事的，直接在「Quick-add」里搜索「React」和「ReactDOM」，选中对应的稳定版本即可）
  • 要是你用的是React 18+，记得选18版本的CDN，这样才能用createRoot API

• 第二步：准备HTML结构
  切换到CodePen的HTML面板，只需要保留一个根容器，和你本地public/index.html里的结构一致：

  <div id="root"></div>
  

  不用额外加meta或script标签，CodePen会自动处理依赖加载

• 第三步：迁移核心组件代码
  打开本地项目的src/App.js，把里面的组件代码（比如整个函数组件内容）复制到CodePen的JS面板里。注意：

  • 不需要保留import React from 'react'（CodePen的CDN已经全局引入了React）
  • 不需要export default App这行，咱们要直接渲染这个组件
    举个例子，本地的App.js如果是这样：

  import React from 'react';
  function App() {
    return (
      <div className="App">
        <h1>Hello React!</h1>
      </div>
    );
  }
  export default App;
  

  复制到CodePen里就简化成：

  function App() {
    return (
      <div className="App">
        <h1>Hello React!</h1>
      </div>
    );
  }
  

• 第四步：添加渲染逻辑
  在JS面板的最后，加上挂载组件的代码：

  • React 18+版本用这个：

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

  • React 17及以下版本用这个：

    ReactDOM.render(<App />, document.getElementById('root'));
    

• 第五步：迁移样式
  把本地src/App.css或者src/index.css里的样式代码，直接复制到CodePen的CSS面板里就行，不需要修改路径（CodePen的CSS会直接作用到页面所有元素）

• 最后一步：运行代码
  点击CodePen顶部的「Run」按钮，就能看到和本地npm run start一样的效果啦！

如果你的项目里有其他自定义组件，直接把它们也复制到JS面板里（放在App组件前面就行）；要是用到了第三方库，同样在JS设置里添加对应的CDN链接就可以。

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