1

I am very new to React and I am learning as I go. I have set up a react app using Create React App. The default file structure puts everything in src with no sub folders. I wanted my app to be more organized so I added a folder inside src called components, inside that folder is a folder called header and there is a file called header.js in there. Here is my file structure:

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

Here is the index.js code: 

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

Here is the header.js code:

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;

When I use 'npm start' I get this error:

Failed to compile

./src/index.js

Module not found: Can't resolve './components/header/header' in '/home/kshaw/thunderclap/src'

I have looked for an answer online but I have not found one. As far as I understand the create-react-app, webpack should already be configured correctly. I don't want to have to eject in order to get these folders to work. Any help would be appreciated. Thanks.

Edit: I poked around in Chrome dev tools and it is not even showing the header folder in sources.

enter image description here

Kate The Dev
  • 31
  • 1
  • 7
  • I created a project with create-react-app and made it like your project and its working fine! – ganjim Oct 07 '18 at 07:53
  • I got it working and I'm not really sure what caused it to start compiling correctly. I would post the answer but I'm not sure what the answer was. – Kate The Dev Oct 08 '18 at 18:08

2 Answers2

0

React components should start with Capital letter, here you can read about it in detail

Note:

The usual and good structure of a react code can be like this:

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

and when you want to import a Component in your code, for example in your case in 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();
ganjim
  • 1,234
  • 1
  • 16
  • 30
  • That does not solve the issue. The component class is already capitalized. I went ahead and tried with your folder structure and also making the folder name capitalized and I got the same error. The app compiles fine when everything is just in src with no sub-directories. It seems to be unable to find things when in a folder that is inside src. – Kate The Dev Oct 06 '18 at 21:31
  • @KateTheDev the only explanation for this error is that it can not find the file in the path given, so you might have given the wrong path. – ganjim Oct 07 '18 at 07:40
  • 1
    I do appreciate the feedback. I don't have the wrong path though, perhaps I will try starting over and create a new app and see if it sorts itself out. – Kate The Dev Oct 08 '18 at 17:22
  • That doesn't answer the question :/ – pfeds Feb 21 '19 at 03:07
  • It's surprising how there's no answer for such a basic question, that seemingly is a tripwire for a new react developer...this is ridiculous! – Arsalan Khalid Mar 19 '19 at 23:56
0

Try to just delete and give the path again in index.js and save , that worked for me.

rajat
  • 1