使用React时遇报错：'App' is not defined，求解决方案

针对你遇到的问题，结合create-react-app的常规项目结构，以下是最可能的原因和对应的排查、修复方法：

常见原因及排查步骤 #

1. App组件定义错误或不完整 #

• 打开src/App.js，检查组件定义：
  • 必须使用首字母大写的App作为组件名，比如function App() { ... }或const App = () => { ... }，React要求组件名首字母大写，否则会被识别为普通HTML标签。
  • 检查组件定义的语法是否完整：比如函数体的大括号{}是否闭合，JSX标签的括号是否配对，有没有遗漏逗号、分号导致语法中断——这类语法错误会让ESLint无法识别到App的定义。

2. 组件导出/导入不匹配 #

• 检查App.js的导出语句：
  • 如果是默认导出，确保最后有export default App;；如果是命名导出，要写export { App };。
• 检查src/index.js的导入语句：
  • 对应默认导出的导入应该是import App from './App';，如果是命名导出则需要import { App } from './App';，导入的变量名必须和导出的一致。

3. 第66行代码的直接问题 #

• 定位到App.js第66行第16列：
  • 查看这里是否在使用<App />或直接引用App变量，但该变量在当前作用域未定义。比如新手可能会在App组件内部错误地尝试渲染自身，或者误写了组件名称。

4. 自定义文件的冲突影响 #

• 检查你添加的自定义文件：
  • 是否在App.js中导入了同名的App变量，比如import { App } from './MyCustomComponent';，这会覆盖本地定义的App组件。
  • 自定义文件的语法错误是否导致整个模块解析异常，间接影响了App.js的代码识别。

修复示例 #

以下是正确的App.js基础结构，你可以对照调整：

import React, { useState } from 'react';

// 正确定义首字母大写的App组件
function App() {
  const [currentColor, setCurrentColor] = useState('#ffffff');

  const changeColor = (color) => {
    setCurrentColor(color);
  };

  return (
    <div style={{ backgroundColor: currentColor, minHeight: '100vh', padding: '20px' }}>
      <h2>颜色切换器</h2>
      <button onClick={() => changeColor('#ff4444')}>红色</button>
      <button onClick={() => changeColor('#44ff44')}>绿色</button>
      <button onClick={() => changeColor('#4444ff')}>蓝色</button>
    </div>
  );
}

// 正确导出App组件
export default App;

对应的src/index.js要确保正确导入并渲染：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

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