Thoughts about folder structure for React applications
There should be 2 main folders for your components.
/components /pages
Let me explain
A lot of the time you'll be using react-router. Thinking in routes is much easier to remember than seeing multiple components of similar names.
Most of the time i'm writing components, they will have an arbitrary name. ListBox.tsx, Select.tsx, Dropdown.tsx, etc. These are all pure functions, they will always output the same result for the same arguments.
Essentially, your pages are 'container' components. It helps to think about this directory akin to web behaviour and index.html. Most of the time these components will hold state and methods which are passed through props.
/pages/index.tsx /pages/about/index.tsx /pages/products/index.tsx /pages/products/details.tsx
This makes it easy on your routing, and is a logical place to hold related functionalities together.
// pages/products/index.tsx
export default () => {
return <div>
<Switch>
<Route path={match.path} exact>
<h1>Index</h1>
</Route>
<Route path={match.path + "/:id"}>
<Details />
</Route>
</Switch>
</div>
}
// pages/products/details.tsx
export default () => {
}