Understanding the component architecture and the problem of the state

In previous chapters, we have seen how to use a local state and props to hold the state and share it in a parent-child component hierarchy.

Now, we will begin by showing how to leverage state, props, and events to share states between components that do not have a parent-child configuration. These types of components are called siblings.

Figure 9.1 – Child 1 and Child 2 are “sibling” components

Throughout the chapter, we will be building a profile card generator app that demonstrates how the state flows down the component tree as props in an application, and how updates are propagated as backup using events, event buses, and store updates.

Given that we want to build a profile card generator, we can break the application down into three sections: a header, where we will have global controls and display the title of the page; a profile form, where we will capture...