Contextual Components in React

Article by David Tang

Contextual Components are one of my favorite features in Ember. They allow you to expose components pre-wired with state and actions as part of a component's public API, without having to directly expose that state or those actions. This same pattern can be applied to React components using the Render Props pattern. Let's look at an example to make this more concrete. If you're coming from Ember, check out this example on Ember Twiddle, as the rest of this post will be implementing the equivalent in React.

Related resources

Compound React Components with Hooks + TypeScript

When writing React components, it always pays off to spend a little bit of time thinking about how another developer would use them. In this post, I'd like to dive a bit into Compound Components, a pattern for creating components that I've found to be a joy to use both as a creator and consumer. We'll [continue]

Tutorial by Martin Di Diego

Learn React By Making a Countdown Timer

This guide aims to help those familiar with DOM manipulation with jQuery to learn and transition to coding in React. We will be building a countdown timer in React and comparing it to a functionally similar version built with jQuery. [continue]

Tutorial by codethesite

How To Master Advanced React Design Patterns: Compound Components

To celebrate the official release of React 16.3, I have decided to share some techniques I have been using recently which have completely changed my approach to creating React components. Using these techniques I am able to design components that are completely reusable, and have the flexibility to use [continue]

Tutorial by Shaun David Hutch

Handling spacing in a UI component library

Building a highly consumable UI component library is no easy feat and this article will focus on one particular tricky aspect of it: outer component spacing. [continue]

Article by Chris Pearce