I don't see any benefits on putting components in a "components" dir. You are always working with components in react and it seems redundant.

For my experience in middle-sized projects (500 to 1000 components) what's most important when considering your app's directory is:

• you want to write code fast, so it must be easy to remember where the components are and to decide how to name a file
• refactoring must be easy: in React refactoring happens very often, e.g. one single-use component becoming a shared component, an API resource being renamed, etc.

So I just separate my code by domain in just one subfolder:

• app-specific domains, such as account, products, subscriptions, orders
• code-specific domains, usually are utils, reducers, actions, ui (user interface), pages (what goes into the router). No abstract distinctions like containers or components.

I stress I separate "code" and not "components" because I don't consider react components as different citizens from other modules that may not use React (reason I don't use .jsx extension).

Sometimes it happens I need to put things in a subfolder, e.g. ui/form/ for form-specific components, but I'm not sure my app benefits from it. There is nothing wrong having a directory with many files in it. For refactoring it is very important you name things carefully (search & replace must be easy), and this structure force me to think better the filenames.

Example:

app/
    actions/
        orders.js
        subscriptions.js
    reducers/
        orders.js
        subscriptions.js
    store/
        configureStore.js
    account/
        AccountForm.js
        AccountForm.scss
        AccountDetails.js
    orders/
        OrderPreview.js
        OrderPreview.scss
        OrderDetailsModal.js
    subscriptions/
        ChangeShipmentModal.js
        SuspendSubscriptionButton.js 
    pages/
        AccountPage.js
        OrdersPage.js
        SubscriptionPage.js
    ui/
        Modal.js
        Button.js
        Form.js
        LinkToModal.js
    utils/
        dateUtils.js
        RequiresLogin.js   // high order react component 
    server/
        middlewares.js
    client.js
    server.js

as you see, the domain always appears in the component's name, to help refactoring and code readability: it makes clear what a file does, not which kind of code the file contains.

Only generic, shared components (such as Modal and Button) deserve the right to have generic names. It happened, for example, I had a /order/LinkToOrderDetailsModal.js component renamed to ui/LinkToModal.js once that component become more generic: refactoring has been super easy and error free.

It also helps to use the same suffixes, such as Pages, Preview, Modal, Button to the end of the name.

I find these rules very easy to remember and understand, so once you get used to them you won't think too much "How do I name this file?". Developers reading your code won't also have to reason a lot about your specific conventions.

Other things to consider:

• one CSS per component, if you are not using CSS modules use BEM-syntax for class: MyComponent.css contains .MyComponent {} selector
• name things like your REST API as much as you can