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

反应组件应以大写字母here开头，您可以详细了解

注意：

React代码的常规结构是这样的：

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

，以及当您想在代码中导入Component时（例如，在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中再次给出路径，然后保存，这对我有用。