O'Reilly logo
live online training icon Live Online training

Developing Modern React Patterns

Create Highly Flexible UI through Component Composition Patterns

Dave Lunny

If you’ve been using the React framework for developing exciting front-end JavaScript applications, you’re probably already familiar with common patterns and best practices when coming. At some point, however, you might realize that React was originally only intended to be a view layer, and you may find yourself mixing business logic into places which are really only meant to be concerned with rendering views. Not to worry though, because React’s wonderful lifecycle methods and concept of componentization makes it simple and fun to break off functionality and build robust components.

You will understand how to boil your UI down into the smallest possible units, and then compose them together as you need them. You will understand the beauty of inversion of control, whereby your components are only concerned with what they need to be, while allowing their consumers to handle the rest. If you and your team have already been using React for some time and perhaps find that you are running into issues with reusability (perhaps across a large codebase), then these lessons are for you!

What you'll learn-and how you can apply it

  • Learn to separate concerns, specifically separating rendering logic from business logic
  • Build reusable components which leverage React’s lifecycle and state to do things beyond simply rendering markup/UI
  • Add some key patterns and tools into your developer toolkit, such as higher-order components, render props, and the context API

This training course is for you because...

  • React developers who are looking to go beyond the basics of the framework
  • JavaScript/UI developers using other frameworks who are looking to understand the ideas behind component composition
  • Developers working elsewhere in the stack who want a deeper understanding of the React framework

Prerequisites

  • A working knowledge of modern JavaScript (ES6+), as well as some basic CSS/HTML knowledge.
  • A solid, foundational understanding of the React framework is required.
  • A basic understanding of Git (mostly just being able to clone a repository).

Course Set-up

Recommended Preparation

Recommended Follow-up

About your instructor

  • Dave is a web developer and open-source JavaScript contributor based in Vancouver, BC. He is currently employed as a product developer at 7Geese, where he has been working with React and Redux on a daily basis for around 2 years now. Before that, Dave worked various contract positions where he led the development of several Redux-based web projects from the ground up. He is super passionate about JavaScript, and is extremely excited about its usage both in the browser and its potential well beyond the browser.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Segment One: Breaking up logic (15 mins)

  • Example: Tabs component
  • Presentational vs container components
  • Controlled vs uncontrolled components

Q&A: 5 mins

Segment Two: Compound Components (15 mins)

  • React.Children
  • Using Compound components
  • Tabs example: Compound components

Segment Three: Inversion of control - Higher-order components (30 mins)

  • Using Higher-order components
  • Handling and forwarding refs
  • Alternative higher-order component patterns
  • Tabs example: Higher-order components

Segment Four: Inversion of control - Render-props (45 mins)

  • Intro to render-props pattern
  • Children-as-a-function
  • Prop-getters
  • Implied/shadow components
  • Handling and forwarding refs
  • Control props
  • State reducers
  • Tabs example: Render props

BREAK/Q&A: 15 mins

Segment Five: Providing Data: Context API (45 mins)

  • When to use the Context API
  • Not to use Context API
  • Using the Context API
  • Tabs example: Context API

FINAL Q&A: 10mins