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.

Other resources:
[Testing ⚛️ components using render props](https://blog.kentcdodds.com/testing-%EF%B8%8F-components-using-render-props-5623ab1814c)


react

Integration test a React component that consumes a Render Prop 

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](https://dev-blog.apollodata.com/apollo-client-2-0-beyond-graphql-apis-888807b53afe)


Fetch Server Data and Client-side State in One Query using React Apollo + GraphQL

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.

Additional Resources:
[What's next for React Apollo](https://dev-blog.apollodata.com/whats-next-for-react-apollo-4d41ba12c2cb)


Fetch Data from GraphQL with React Apollo Query Component

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. 

Resources:

[What's in Apollo Boost](https://github.com/apollographql/apollo-client/tree/master/packages/apollo-boost#whats-in-apollo-boost)

[Zero config GraphQL State Management](https://dev-blog.apollodata.com/zero-config-graphql-state-management-27b1f1b3c2c3)


Zero-config Apollo + GraphQL with Apollo Boost

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.

Unit test a React Render Prop 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. 

Additional Resources:
 - [State Management with Unstated](https://medium.com/react-native-training/unstated-the-setstate-of-react-state-management-8ce47b240e6d)
 - [Unstated github](https://github.com/jamiebuilds/unstated)

Use Unstated for State Management in React

In this lesson I demonstrate how to use the library MDXC to create and import React components with Markdown. MDXC converts markdown into JavaScript and supports JSX.

*Additional Resources:*
https://github.com/jamesknelson/mdxc

Create and import React components with Markdown using MDXC

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.

Rapid Prototyping with 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](https://reactjs.org/docs/refs-and-the-dom.html
https://reactjs.org/blog/2018/03/29/react-v-16-3.html)

Reference a node using createRef() in React 16.3

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.


Additional Resources:
https://reactjs.org/docs/forwarding-refs.html

Use forwardRef() in React 16.3

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().

Additional Resources:
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles



Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3

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.

Additional Resources:
https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926

Update Application State with React Apollo Mutation Component

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.

Refactor a Higher-Order Component to a Render Prop Component

In this lesson we'll look at React PowerPlug's List component by refactoring a normal class component with state and handlers to a functional component powered by React PowerPlug.

Refactor a Stateful List Component to a Functional Component with React PowerPlug

In this lesson we'll look at React PowerPlug's Toggle component by refactoring a normal class component with state and handlers to a functional component powered by React PowerPlug.

Andrew Del Prete - React Videos

Andrew Del Prete

Course Content