使用create-react-app启动项目报错：JSX使用时React需在作用域内

问题原因 #

这个报错的核心原因是：React 17.x版本之前，所有使用JSX的文件必须显式导入React。虽然React 17+引入了自动JSX转换特性（无需手动导入React即可编写JSX），但如果你的create-react-app项目依赖的react-scripts版本过低，就不会启用这个特性，导致默认生成的代码因缺少React导入触发报错。

解决方案 #

方案1：手动添加React导入（快速临时修复） #

直接在App.js开头添加React导入语句，即可立即消除报错：

import React from 'react'; // 新增该行
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

方案2：升级react-scripts版本（彻底解决） #

如果想保留React 17+的自动JSX转换特性（无需手动导入React），可以升级项目的react-scripts到支持该特性的版本：
打开终端执行命令：

npm install react-scripts@latest --save

若使用yarn则执行：

yarn upgrade react-scripts@latest

升级完成后重启项目（npm start），报错即可消失。

方案3：同步升级React版本（可选） #

若升级react-scripts后仍有问题，可检查当前React版本是否为17.x及以上：

npm list react

若版本低于17.x，同步升级React和ReactDOM：

npm install react@latest react-dom@latest --save

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