如何使用React与ReactDOM导入？无CDN环境下代码无法运行求助

直接在浏览器里运行你的app.js文件肯定行不通，原因有两个：

1. 浏览器原生不支持直接从npm包（比如react、react-dom）导入模块
2. 你代码里的JSX语法，浏览器本身无法解析，需要转译处理

要让代码正常运行，你需要用构建工具来处理这些问题，下面是具体步骤：

• 第一步：初始化npm项目并安装依赖
  打开终端，在项目目录执行：

  npm init -y
  npm install react react-dom
  

• 第二步：使用构建工具（以Vite为例，轻量高效）
  执行命令创建基础React项目：

  npm create vite@latest my-react-app -- --template react
  

  创建完成后，把你的代码替换到项目的src/App.jsx文件中（注意文件名要改成.jsx后缀，因为包含JSX语法）。

• 第三步：更新React渲染代码（适配React 18+版本）
  React 18之后不再推荐使用ReactDOM.render，建议改用createRoot，调整后的代码如下：

  import React from 'react';
  import { createRoot } from 'react-dom/client';
  
  const root = document.getElementById('root');
  createRoot(root).render(<h1>React</h1>);
  

• 第四步：启动项目
  进入项目目录，安装依赖后启动开发服务器：

  cd my-react-app
  npm install
  npm run dev
  

  之后在浏览器访问终端给出的地址，就能看到正常显示的内容了。

如果不想使用构建工具，唯一的替代方案就是用CDN链接，但你明确不想用CDN的话，构建工具是必须的，它会把React代码和你的业务代码打包成浏览器能识别的文件。

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