Create-React-App добавляет папки внутри src 'Модуль не найден: не удается разрешить'

Question

Я очень новичок в React, и я учусь по ходу дела.Я создал приложение реакции с помощью приложения «Создать React».Файловая структура по умолчанию помещает все в src без подпапок.Я хотел, чтобы мое приложение было более организованным, поэтому я добавил папку внутри src под названием компонентов, внутри этой папки есть папка 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

Модуль неОбнаружено: Не удается разрешить './components/header/header' в '/ home / kshaw / thunderclap / src'

Я искал ответ в Интернете, но яне нашел ни одного.Насколько я понимаю, приложение create-реакции-приложение уже должно быть правильно настроено.Я не хочу извлекать, чтобы заставить эти папки работать.Любая помощь будет оценена.Спасибо.

Редактировать: я искал в инструментах разработчика Chrome, и он даже не показывает папку заголовка в исходниках.

Answer 1

Реактивные компоненты должны начинаться с заглавной буквы, здесь , вы можете прочитать об этом подробно

Примечание:

Обычная и хорошая структура кода реакции может бытьнапример:

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();