React Fundamentals

React.js is a component library, which expresses user interfaces in terms of components, properties passed into them, and state they manage internally. Through these encapsulated, expressive and composable building blocks, we can create complex and dynamic interfaces with code that is surprisingly simple and easy to manage.

React Fundamentals

  1. Courses
  2. React Fundamentals
  3. Architecture Patterns

Architecture Patterns

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.js module, 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).

  • Architecture PatternsLunch

    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.