“react is not defined”错误主因是jsx文件缺失react运行时导入声明或工具链未识别react上下文：.js文件默认不解析jsx，需配置jsximportsource、jsconfig.json或vscode语言模式为javascriptreact，且eslint需正确配置react插件与环境。
“React is not defined”不是 React 没装，而是 JSX 文件里缺了 React 的运行时导入声明，或 ESLint/语言服务压根没识别出这是 React 上下文。
为什么 .js 文件里写 JSX 会报 React 未定义
VSCode 默认把 .js 当纯 JavaScript 解析，不自动注入 React 全局变量。哪怕你写了 const el = <div></div>，底层解析器根本不知道这需要 React.createElement，更不会帮你补 import。
- 最常见诱因：用
.js后缀写 JSX（比如 CRA 早期模板），但文件顶部没加// @jsxImportSource react注释 - 次常见：项目根目录没有
jsconfig.json或其中"jsx": "react-jsx"被注释或写错 - 容易被忽略：VSCode 工作区没打开项目根目录，导致
jsconfig.json不生效
ESLint 报 “React is not defined” 但代码能跑
这说明 ESLint 规则在起作用，但配置链断在了环境声明或插件加载环节——不是语法错，是规则没认出你用的是 React。
- 检查
.eslintrc.cjs或eslint.config.js中是否包含：env: { browser: true, es2021: true }（browser: true才会允许React作为全局变量） - 确认
plugins: ['react', 'react-hooks']已写，且extends包含'plugin:react/recommended' - 若用 TypeScript，
parserOptions.project必须指向正确的tsconfig.json，否则类型感知失效，JSX 相关规则静默跳过 - 别信 VSCode 右下角显示的“JavaScript”，点它 → “Configure File Association for '.js'” → 改成
javascriptreact；改完必须关闭再重开文件
全局引入 React 的坑：别在 .js 里手动 import React from 'react'
在现代 React（v17+）中，JSX 转换已默认使用新的 runtime，import React from 'react' 在大多数场景下是冗余的，强行加反而可能触发 ESLint 的 no-unused-vars 报错，或和 jsxImportSource 冲突。
- 只在类组件或显式调用
React.useEffect等 Hook 时才需要 import - 函数组件 + JSX：靠
// @jsxImportSource react或jsconfig.json驱动，无需 import - 如果用了 Prettier，它可能自动删掉“无用”的 import —— 这不是 bug，是预期行为；别为它关掉 Prettier 的 auto-import cleanup
真正卡住人的，往往不是漏写一行 import，而是 jsconfig.json、files.associations、eslint-plugin-react 三者之间有一处没对齐。建议按顺序查：先看右下角语言模式是不是 javascriptreact，再确认 jsconfig.json 存在且 jsx 字段正确，最后打开 ESLint 输出通道看有没有加载 plugin 的日志。三者全绿，React is not defined 就基本没戏了。
