Building React Components

Since presentation and data can be abstracted, breaking the UI down into components reduces clutter and gives more meaning to the components, which can now perform specialized tasks. Writing components as container and presentational components, also referred to as smart and dumb components, is a pattern that is commonly employed by developers in React.

Container components usually have a local state and are concerned with the implementation of data and how things work. They have minimum to no markup. These components deal with data, be it loading it, calling actions, or mutating them. When creating a shopping cart application with the wireframe shown in Figure 5.3, it would suffice to have container components at the root level, which will then retrieve and hold the data and just pass it down to its children. The child components, which are typically the presentation components, receive values to be displayed and show the required JSX on screen as output...