VS2015中ASP.NET MVC集成React页面无显示且报React is not defined错误

嘿，我来帮你搞定这个“React is not defined”的问题！结合你在Visual Studio 2015 + ASP.NET MVC里用React的场景，这个报错通常是几个核心环节出了问题，咱们一步步排查解决：

1. 先确认React依赖安装+正确导入 #

首先得确保你已经把React核心包装好了，在你的配置文件目录下打开命令行跑：

npm install react react-dom --save

如果之前用TypeScript，别忘装类型声明：

npm install @types/react @types/react-dom --save-dev

然后在你的app.js入口文件顶部，必须显式导入React和ReactDOM——Webpack是模块化打包，默认不会把React暴露成全局变量：

// app.js 顶部必须加这两行
import React from 'react';
import ReactDOM from 'react-dom';

// 示例组件代码
function App() {
  return <h1>终于能显示React内容啦！</h1>;
}

// 挂载到页面的DOM容器上——注意Index页面里要有这个容器
ReactDOM.render(<App />, document.getElementById('react-root'));

2. 检查Webpack配置是否正确处理JSX #

如果你用了JSX语法，Webpack需要babel来编译，而且得配置React预设。确保你的webpack.config.js里有这些配置：

const path = require('path');

module.exports = {
  // 入口文件路径要对应你的实际位置
  entry: './Scripts/你的app文件夹/app.js',
  output: {
    // 输出到Scripts下的dist文件夹，方便MVC引用
    path: path.resolve(__dirname, './Scripts/dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  resolve: {
    // 让Webpack自动识别jsx后缀的文件
    extensions: ['.js', '.jsx']
  }
};

别忘了安装babel相关依赖：

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

3. 确认打包后的bundle已引入到Index页面 #

Webpack编译完会生成bundle.js，你得在Home/Index.cshtml里正确引入它，而且要放在React容器元素之后：

<!-- Index.cshtml 里先加一个React挂载的容器 -->
<div id="react-root"></div>

<!-- 引入打包好的bundle.js，路径要对应你的output配置 -->
<script src="~/Scripts/dist/bundle.js"></script>

⚠️ 别直接引入node_modules里的react.js，Webpack已经把React打包进bundle了，重复引入反而会冲突。

4. 特殊情况：强制把React暴露为全局变量（可选） #

如果你的代码里有依赖全局React的老代码（比如某些旧版JSX编译产物），可以在Webpack里加个插件自动注入全局变量：

const webpack = require('webpack');

module.exports = {
  // ... 其他配置
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react',
      ReactDOM: 'react-dom'
    })
  ]
};

不过更推荐的还是用模块化导入的方式，保持代码规范。

5. TypeScript残留配置排查（因为你之前用TS） #

如果是JS/TS混合开发，检查tsconfig.json里的JSX配置是否正确：

{
  "compilerOptions": {
    "jsx": "react", // React 17+也可以用"react-jsx"
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "allowJs": true // 允许JS和TS文件共存
  }
}

做完这些步骤后，重新跑webpack打包，刷新页面应该就能看到React组件的内容了。如果还不行，可以打开浏览器控制台看看有没有其他报错，或者直接打开bundle.js搜索“React”，确认Webpack是否把React打包进去了。

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