React组件无法正常运行如何解决？附App.js与Header组件代码及目录说明

你代码里一共存在3处可直接导致运行失败的问题，按优先级修复即可：

• 导入路径错误：你明确说明App.js和Header组件都存放在src/components目录下，App.js中写的./components/Header路径会匹配components/components/Header文件，找不到对应资源，同目录导入直接修改为import Header from "./Header"即可。如果你的App.js实际是放在src根目录（非components文件夹），可保留原导入路径。
• 组件名拼写错误：Header组件内定义的函数名为Headder，多写了一个字母d，和App.js中调用的<Header />名称不匹配，修改为const Header = () => {即可。
• 导出名称大小写错误：React要求自定义组件首字母必须大写，你在Header组件末尾写的export default header为全小写，和定义的组件名不匹配，修改为export default Header即可。

修复后完整代码示例 #

App.js #

import Header from "./Header";
function App() {
  return (
    <div className="Container">
      <Header />
    </div>
  )
}
export default App

Header组件 #

const Header = () => {
    return (
        <header>
            <h1>task tracker</h1>
        </header>
    )
}
export default Header

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