Knowing how to build React components is just the beginning of our journey — it is important to know the best practices and patterns for using these tools effectively. In this unit, we will look at several architectural patterns that will serve you well as your app increase in complexity.
Architecture PatternsContainer vs. Presentation Components
One common strategy for managing complexity in single-page apps is to divide components into two categories:
- Container components which do not render anything all that impressive (except maybe other components), but do some heavy lifting when it comes to state management and data manipulation,
- Presentation components which are usually stateless and handle almost no data manipulation. Effectively, this allows us to build components that are either responsible for making something work properly, or making something look right, but never both.
Architecture PatternsEXERCISE: Autocomplete Component
Using the provided
autocomplete.jsmodule, build an autocomplete component where state is owned and managed by a
<AutocompleteContainer />component. Build another component where results are presented by a
<AutocompleteResultSet />component. Components that emit non-trivial DOM nodes should not own or change state directly, and components that manage state should not render anything fancy (except other components).
Break for lunch
Architecture PatternsHigher Order Components
Higher Order Components are just functions that take a component class as an argument and return another component class. This advanced React architectural pattern provides some useful ways to reuse and compose component behaviors. We’ll study a few examples of when and how this comes in handy.
Architecture PatternsEXERCISE: Higher Order Components
Build a higher order component that sorts the data passed to a “list” component, according to a comparator function passed to the higher-order-component constructor. Make sure to follow all of the best practices we’ve talked about!
Architecture PatternsServer-Side Rendering
The process of setting up production-grade server-side rendering (SSR) for a React app is complicated and error-prone. However, only part of this has to do with React. We'll begin by walking through a checklist of what's required for a proper production SSR setup. Then, we'll work together to set up a “development use only” server-rendering React/Express app, to demonstrate how it all works at a basic level.