React View Layers

In our framework, we've sliced our views into four layers: Layouts, Pages, Containers, Components.

Layouts -> Pages -> Containers -> Components ... -> Components

Layouts

This is where the consistent page layout components like Header, Menu, SideMenu, Body wrapper and Footer would be held. Basically, anything outside of the page-specific components.

Pages

Pages represent the overall positioning of a page's different containers/components.

Containers

Containers acts as sections of the page. A container will always ONLY handle the communication with redux and business logic, and will always have a component in the same folder for its view representation.

Components

Components also acts as sections of the page. A component will always ONLY handle the view representation of a given data and will not hold any business logic in it.