React Component Patterns

Trainer: Vlad Zelinschi
Duration: 2 days

As React slowly became the de facto choice for multiple greenfield projects, certain patterns started to emerge in order to write clean, maintainable, better code. These are often viewed as pillars of software quality, presenting huge advantages especially when scalability of the codebase is involved.

In this training we will explore various React component patterns, starting with less complicated examples (stateless functions, conditional rendering, etc.) and moving towards more advanced concepts such as Higher Order Components (HOCs) or functions as child components. The focus of this training is to better understand these patterns as well as knowing when to use one over another and what drawbacks each pattern has. Feel free to consult the high-level agenda below.

Agenda

  1. Stateless functions
    a. What are stateless functions?
    b. When to use
    c. Drawbacks
  2. JSX spread attributes
  3. Destructuring arguments
  4. Conditional rendering
    a. If
    b. Unless
    c. If / Else block
  5. Arrays as children
    a. Usage with functional methods (map, filter, etc.)
    b. Explanation of React keys
  6. Controlled vs. uncontrolled components
    a. What are controlled components?
    b. What are uncontrolled components?
    c. Dealing with controlled vs. uncontrolled
    d. When to use controlled vs. uncontrolled
    e. Drawbacks
  7. Container vs. presentational components
    a. What are container components?
    b. What are presentational components?
    c. Reasons behind the split
    d. Practice with container vs. presentational in simple React
    e. Practice with container vs. presentational in React + Redux
  8. State hoisting
    a. Advantages of hoisting state
    b. Drawbacks and possible gotchas
  9. Provider / Consumer pattern
    a. New context API in React 16
    b. When to use Provider / Consumer pattern
    c. Drawbacks
  10. Higher Order Components
    a. What are HOCs?
    b. Practice with HOCs
    c. Example of HOCs in the wild (withRouter, connect, etc.)
    d. When to use HOCs
    e. Drawbacks
  11. Functions as child components
    a. What are functions as child components?
    b. Practice with functions as child components
    c. Differences between functions as child components and HOCs
    d. When to use functions as child components
    e. Drawbacks
  12. Short recap

General Prerequisites

  1. Video projector
  2. WiFi access (students need to be able to clone Git repositories and download npm packages from the internet)
  3. Flipchart + flipchart sheets OR writing board (please inform us if this is something you cannot provide)
  4. Markers for writing - different colors (please inform us if this is something you cannot provide)
  5. Ability to plug to power source for every computer in the room (extension cords if needed, etc.)

Students Prerequisites

  1. Every student will have his/her own laptop. For best results, it is not advisable to multiple people working on the same machine
  2. Node v8.9.4 or greater installed (https://nodejs.org/en/download/)
  3. Git v2.16.0 installed (https://git-scm.com/downloads)
  4. An IDE/code editor of choice (Sublime Text, Atom, Visual Studio Code, WebStorm, etc.)

Expectations

This training assumes the participants are already familiar with ES6 concepts (classes, destructuring, default parameters, arrow functions, let/const, etc.), basic JavaScript knowledge and syntax, npm (interacting with the npm ecosystem, package.json), Git (basic commands) and that they have basic React and Redux knowledge (JSX, VDOM, state, props, event management, component lifecycle hooks, actions, reducers, store, mapStateToProps, mapDispatchToProps etc.). Thus, the aforementioned concepts will not be discussed or detailed during the training.

This training targets intermediate developers who would like to upgrade their React knowledge by finding out more about React component patterns, when and how to apply them and gain architectural knowledge useful in scaling applications based on this technical stack.

Thank you for reading. Now help us spread the ❤️ by sharing.

Vlad Zelinschi

Written with love by Vlad Zelinschi

Vlad is a pragmatic software architect, lover of the web and caffeine addict. He is the CTO of Strongbytes, Google Developer Expert on Web Technologies since October 2016 and a certified trainer.