Best practice for organizing hundreds of components?

Question

When you have a big application which have hundreds components, some of it is heavily shared by others, and some of it just a layout or a simple view. So is there any good advises for organizing components? by module? or by usage? or some other policies?

Answer 1

I create a directory per page, then stick to one component per file (ie AddButton would be in add_button.js.jsx). I always have the top-level component for that page suffixed with App.

• user
  • user_list.js.jsx
  • user_app.js.jsx
• dashboard
  • dashboard_app.js.jsx
  • histogram.js.jsx
• analytics
• shared
  • buttons
    • add_button.js.jsx
    • reset_button.js.jsx
  • list.js.jsx
  • table.js.jsx

This has become my default go-to approach for a while now, curious to see how others proceed.

Answer 2

Personally, I prefer to keep single-use components groups together in the same file. While more components is good, more files can lead to harder debugging, as you have to constantly jump between them. My folder structures often look like this:

• Views
  • User
    • show.js (single view that includes view-specific components and references shared components)
    • index.js
  • Widgets
    • _form.js (reused only within context of widgets)
    • new.js
    • edit.js
• Components (reused multiple places on the site)
  • List.js
  • ListItem.js
  • Navbar.js
  • Footer.js

Answer 3

You may want to consider following File System Organization pattern suggested by BEM.

A component-based approach used in the BEM methodology also determines the way that BEM projects are organized in a file system. In BEM, it's not just the interface that is divided into independent components, i.e. blocks, but the implementation of blocks is also divided into independent parts, namely files.

If you are not familiar with BEM, here is a concise introduction :

BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yandex. It is a smart way of naming your CSS classes to give them more transparency and meaning to other developers. They are far more strict and informative, which makes the BEM naming convention ideal for teams of developers on larger projects that might last a while.

Your Vue/React components can map one-on-one to BEM blocks which are kept in individual folders containing JS implementation, CSS styles and relevant templates.

blocks/
    input/
        input.css       # `input` block implementation in CSS technology
        input.js        # `input` block implementation in JavaScript technology
    button/
        button.css
        button.js
        button.png

As your project becomes more complex, it may be benefical to store Modifiers and elements are in separate files and are group into accordingly named block subdirectories

blocks/
    input/
        _type/                        # `type` modifier directory
            input_type_search.css     # Implementation of modifier `type` with value `search` in CSS technology
        __box/                        # `box` element directory
            input__box.css
        input.css
        input.js
    button/
        button.css
        button.js
        button.png