In this lesson, I use Enzyme and Jest's Snapshot functionality to write an integration test for a component called CounterConsumer that consumes the Render Prop component Counter. This integration test is great because it doesn't necessarily care that CounterConsumer uses Counter behind the scenes, just that it works when integrated.
Testing ⚛️ components using render props
In this lesson we look at how the Apollo @client directive can be used to fetch client-side state along with server data with one query. I also show how to update the client-side state using a mutation connected to a button.
Additional Resources Apollo Client 2.0
In this lesson I refactor a React component that utilizes the graphql higher-order component to the new Query render prop component baked into react-apollo.
What's next for React Apollo
In this lesson I refactor a simple application built with Apollo, GraphQL, and React to utilize Apollo Boost. Apollo Boost combines many of the Apollo libraries we had to import and configure separately into one awesome API.
In this lesson, I use Enzyme and Jest to unit test a Counter Render Prop component. Writing integration tests are perfect for components that consume a Render Prop component. Likewise, unit tests are important to write for the Render Prop component itself, as you can test each individual unit that makes up the component.
In this lesson I refactor a React component that uses local state to use Unstated. Unstated provides a very nice and straight-forward API to help you manage global state painlessly.
React PowerPlug is a set of pluggable renderless components to help you prototype quickly. These components don't actually render DOM to the page but contain the state and logic for you to power your presentation components via render props. In this lesson we'll look at the
<State> component and re-create the traditional counter example to see the potential of React PowerPlug.
In this lesson, we look at where we came from with refs in React. Starting with the deprecated string ref pattern, callback refs, and then how to use the new
createRef() method in React 16.3.
Additional Resources: refs and the dom
In this lesson, we look at the new forwardRef() method in React 16.3, and how it helps us forward a ref through a Higher-order component to reference an inner DOM node.
The componentWillReceiveProps() method is being deprecated in future version of React (17). Many of us use this method day-to-day to check for incoming prop changes, store state, and to invoke side effects like logging or fetching data from a server.
In this lesson, we'll look at how to refactor an existing component that uses componentWillReceiveProps() to instead use getDerivedStateFromProps() and componentDidUpdate().
In this lesson I refactor a React component that utilizes a higher-order component for mutations to the new Mutation render prop component baked into react-apollo 2.1.
In this lesson we look at two React components that render a Chuck Norris joke and share common functionality via a Higher-Order Component. We'll refactor this Higher-Order Component to be a Render Prop component to help make it easier to reason about.