React project structure

[mr-wellick]

https://github.com/grantmontgomery/grantcreates-react/tree/develop/grantcreates-react/my-app/src/components

In your components directory you currently have:

- components
     - controller.css
     - controller.jsx
     - header.css
     - header.jsx
     - navbar.css
     - navbar.jsx

Consider adding a new directory for each component. After making the changes, your file structure should look like this:

- components
     - controller
           - controller.css
           - controller.jsx
           - index.js
     - header
           - header.css
           - header.jsx
           - index.js
     -navbar
           - navbar.css
           - navbar.jsx
           - index.js
     - index.js

In index.js, you'll just want to re-export your component. For example, once your component is ready to be used, do the following:

// In index.js for controller
export { default as Controller } from './controller';

// In index.js for header
export { default as Header } from './header';

// In index.js for navbar
export { default as Navbar } from './navbar';

And finally, in index.js at the top level of the components directory, you'll want to re-export all your components one more time.

// In index.js at the top level of components directory
export { Controller } from './controller';
export { Header } from './header';
export { Navbar } from './navbar';

This makes it easier to reuse your components without having long imports. For example, without making the suggested changes to your file structure, we would have to do something like this:

// With current file structure
import NavBar from "./components/navbar";

After making the suggested changes, you'll have the following imports:

// With updated file structure
import { Controller } from "./components";
import { Header } from "./components";
import { NavBar } from "./components";

It's a little more work, but it will make easier for you as your project grows.

[grantmontgomery]

Thanks man I'll go back and reorganize.