Introduction
While React as a framework does not provide any assumptions about your architecture, this particular architecture have gained popularity within the React Ecosystem to showcase simple applications. Both NextJS and Gatsby use this architecture when installing a default boilerplate.
Code structure
- components
- containers/templates
- pages
- styles
Components
The Components folder contains your building blocks aka. your components. If you have relative import paths this makes sense, as you would mainly reference other components and you can simply do that using ./otherComponent.
Containers/templates
The Containers (or sometimes named templates) folder contains your templates. Template files cannot be rendered by itself. It needs data injection from a data source (e.g. markdown, json og from an API).
Pages
The Pages folder contains your pages. Pages differ from Containers/Templates in that they are not (necesarrily) dependent on a data source. For example your Home page may very well be located here, as this page is so specific to the page, that it often does not make sense to have it as a Template (when would you have a completely similar page, but with different content?)
Styles
Your styles (css, less, scss) is located here.
Rules and violations
This architecture does not include many rules. Containers/Templates do require data injection in order to have any content.
Limitations
- Does not scale well.
When to use it
- Proof of Concept applications.
- Simple applications that is not intended for scale.