Create-React-App 在 src 中添加文件夾“找不到模塊：無法解析”

Question

我對 React 很陌生，我正在學習。 我已經使用 Create React App 設置了一個 React 應用程序。 默認文件結構將所有內容都放在 src 中，沒有子文件夾。 我希望我的應用程序更有條理，所以我在 src 中添加了一個名為 components 的文件夾，該文件夾內有一個名為 header 的文件夾，其中有一個名為 header.js 的文件。 這是我的文件結構：

src
-index.css
-index.js
-components/
--header/
---header.css
---header.js

這是 index.js 代碼：

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import Header from './components/header/header';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Header />, document.getElementById('root'));
registerServiceWorker();

這是 header.js 代碼：

import React, { Component } from 'react';
import './header.css';
import {
 Collapse,
 Navbar,
 NavbarToggler,
 NavbarBrand,
 Nav,
 NavItem,
 NavLink
 } from 'reactstrap';

class Header extends Component {
  constructor(props) {
      super(props);

      this.toggle = this.toggle.bind(this);
      this.state = {
          isOpen: false
      };
  }
  toggle() {
      this.setState({
          isOpen: !this.state.isOpen
      });
  }
  render() {
      return (
            <header>
              <Navbar color="inverse" light expand="md">
                  <NavbarBrand href="/"><span className="first">Kate The</span> <span className="second">Dev</span></NavbarBrand>
                  <NavbarToggler onClick={this.toggle} />
                  <Collapse isOpen={this.state.isOpen} navbar>
                      <Nav className="ml-auto" navbar>
                          <NavItem>
                              <NavLink href="/about/">About</NavLink>
                          </NavItem>
                          <NavItem>
                          <NavLink href="/projects">Projects</NavLink>
                          </NavItem>
                          <NavItem>
                          <NavLink href="https://vigilantebanana.github.io/">Workshop</NavLink>
                      </NavItem>
                  </Nav>
              </Collapse>
          </Navbar>
          </header>
      );
  }
}

export default Header;

當我使用“npm start”時，出現此錯誤：

編譯失敗

./src/index.js

找不到模塊：無法解析“/home/kshaw/thunderclap/src”中的“./components/header/header”

我在網上尋找答案，但沒有找到。 據我了解 create-react-app，webpack 應該已經正確配置。 我不想為了讓這些文件夾工作而必須彈出。 任何幫助，將不勝感激。 謝謝。

編輯：我在 Chrome 開發工具中閑逛，它甚至沒有在源代碼中顯示標題文件夾。

Answer 1

React 組件應該以大寫字母開頭， 這里你可以詳細閱讀

筆記：

反應代碼的通常和良好的結構可以是這樣的：

src/
--index.js
--style.css
--components/
  --Header/
    --index.js
    --style.css
  --AnotherComponent/
    --index.js
    --style.css

當你想在你的代碼中導入一個組件時，例如在你的 src/index.js 中：

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import Header from './components/Header/';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Header />, document.getElementById('root'));
registerServiceWorker();

Answer 2

嘗試在 index.js 中刪除並再次提供路徑並保存，這對我有用。