The render function is called by React every time its state changes as part of its reconciliation process. The render function is expected to return the component's visual tree. Confusingly, it isn't the real HTML DOM, but rather the component-specific slice of the final Virtual DOM.
In React, you don't respond to state changes imperatively and immediately. Instead, you manage the component state, and every time render is called, you simply render the entire visual tree according to the current state snapshot.
You must be asking yourself what that code is in the App component render function. That's JSX, which you will learn about in the next section.
In this chapter, you're going to implement the following components:
- AppComponent
- HeaderComponent
- ProductsPageComponent
- CategoryMenuComponent
- CategoryMenuItemComponent
- ProductListComponent
- ProductCardComponent
- BusyComponent
The following diagram depicts the component hierarchy and dependency graph you're going to implement in this chapter:
