AngularJS and ReactJS
Backbone.js
Ember.js
ReactJS
Redux architecture
total mess

1. Define the role of your components

render()
reuse
propagate

two types of components
presentational
container components

  • Presentational Components (often referred to as ‘dumb components’) are all-normal ReactJS components, which do not contain any logic or store connection – they are simply ‘views’ to display data. These components usually receive some props and display them or trigger actions depending on the user behavior (the actions should be sent as props to the components, as no business logic is defined on presentational components).
  • Container Components (often referred to as ‘smart components’), on the other hand, don’t do anything visual: they are the ones who’ll process and pass data to the presentational components. Containers will be the components that connect to the Store and import actions, so you’ll often see mapDispatchToProps() and mapStateToProps() definitions inside them.

1.1. Break your containers into presentational components and container components

Suggestion of componentization of this blog’s index. Notice that this is for illustration purposes, as it’s up to the developer to define the granularity of each visual component.

1.2. Center the communication in the containers

2. Decide what state information actually needs to be in the Store

Store
globally
local state

3. Consider sharing your CSS components’ namespaces

React-Friendly JavaScript CSS library
CSS Architecture
merge conflicts

Wrapping up