在VSCode中通过npm加载React时是否需要使用<script>标签？

两种使用React的方式及适用场景 #

1. CDN + <script>标签（无构建工具） #

• 适用场景：快速制作小Demo、原型验证，不想折腾构建工具
• 不需要npm安装，直接从CDN引入React和ReactDOM的全局脚本，浏览器能直接识别全局的React和ReactDOM对象，不需要import语句。如果要写JSX，还得引入Babel的CDN脚本解析JSX语法。

2. npm安装 + 构建工具（生产/正规项目） #

• 适用场景：实际开发项目，需要模块化管理、打包优化、生态工具支持
• 只npm安装React并添加import React from "react";不够，因为浏览器原生不支持ES模块的import语法，也找不到node_modules里的依赖文件。必须搭配构建工具（比如Vite、Create React App、Webpack），它会把你的代码、React依赖打包成浏览器能识别的文件，同时自动处理HTML与打包后JS的关联。这种情况下不需要手动加<script>标签引入React，构建工具会搞定。

解决你当前组件无法渲染的问题 #

方案1：用构建工具快速初始化项目（推荐新手） #

以Vite为例，步骤简单：

1. 终端运行：npm create vite@latest my-react-app -- --template react
2. 进入项目目录：cd my-react-app
3. 安装依赖：npm install
4. 启动开发服务器：npm run dev
5. 打开浏览器访问给出的本地地址，就能看到默认的React组件了。之后你只需要在src/App.js里修改组件，src/main.js里已经配置好了组件挂载到HTML的<div id="root"></div>上。

方案2：用CDN快速运行（无需npm） #

创建一个HTML文件，写入以下代码，直接在浏览器打开就能看到React组件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>React Demo</title>
  <!-- 引入React和ReactDOM的CDN脚本 -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 引入Babel解析JSX -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <!-- React组件挂载的根容器 -->
  <div id="root"></div>

  <!-- 写你的React代码，type设为text/babel让Babel解析JSX -->
  <script type="text/babel">
    function MyComponent() {
      return <h1>我是React组件</h1>;
    }

    // 挂载组件到根容器
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<MyComponent />);
  </script>
</body>
</html>

注意事项 #

• 不要同时混用两种方式，选一种即可，混用会导致重复加载React，可能引发报错。
• 如果你坚持手动配置构建工具，需要确保Webpack/Vite等工具的配置正确，把你的JS文件打包，并在HTML中引入打包后的bundle.js文件（一般构建工具会自动生成这个关联）。

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