Create-React-App 在 src 'Module not found: can't resolve' 中添加文件夹

Question

我对 React 很陌生，我边走边学。我已经使用 Create React App 设置了一个反应应用程序。默认文件结构将所有内容都放在 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 组件应以大写字母开头，here 可以详细阅读

注意：

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 中删除并再次提供路径并保存，这对我有用。