Improve component organization

[5arias]

As your app scales you'll find that having a long list of files and resources in the components directory will be increasingly cumbersome and difficult to navigate.

It's a good practice to separate out your components based on how they are used: pages, charts, etc, etc. You'll often find that most apps will have a components directory for the "lowest level" or "dumb components", and a containers directory for pages and "composed" level components.

There's no hard an fast rule, but organizing all your components by type, and even into their own named directory, will make your code structure significantly easier to navigate as you scale.

src
├── components
│   ├── Form
           ├── Form.js
           ├── Form.test.js
           ├── Form.css
│   ├── NavBar
           ├── NavBar.js
           ├── NavBar.test.js
           ├── NavBar.css
└── containers
    ├── App
        ├── App.js
        ├── App.test.js
        ├── App.css

"Containers" is common due to the early belief that connecting to redux was done at the App or parent/page level as a best practice. Nowadays it's best practice to connect at the lowest component level possible. However the component & containers naming conventions are still widely used as the standard, especially when using Redux.