Andrew Del Prete - React Videos

Watch User Created Playlist (15)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Integration test a React component that consumes a Render Prop

P

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

P

Fetch Data from GraphQL with React Apollo Query Component

P

Zero-config Apollo + GraphQL with Apollo Boost

Unit test a React Render Prop component

P

Use Unstated for State Management in React

Create and import React components with Markdown using MDXC

Rapid Prototyping with React PowerPlug

Reference a node using createRef() in React 16.3

Use forwardRef() in React 16.3

Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3

Update Application State with React Apollo Mutation Component

P

Refactor a Higher-Order Component to a Render Prop Component

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

P

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

P
react tutorial about Integration test a React component that consumes a Render Prop

Integration test a React component that consumes a Render Prop

3:07 react PRO

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

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

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

2:16 react PRO

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

react tutorial about Fetch Data from GraphQL with React Apollo Query Component

Fetch Data from GraphQL with React Apollo Query Component

1:48 react PRO

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

react tutorial about Zero-config Apollo + GraphQL with Apollo Boost

Zero-config Apollo + GraphQL with Apollo Boost

1:34 react

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

Zero config GraphQL State Management

react tutorial about Unit test a React Render Prop component

Unit test a React Render Prop component

2:40 react PRO

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.

react tutorial about Use Unstated for State Management in React

Use Unstated for State Management in React

2:16 react

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
- Unstated github

react tutorial about Create and import React components with Markdown using MDXC

Create and import React components with Markdown using MDXC

4:38 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

react tutorial about Rapid Prototyping with React PowerPlug

Rapid Prototyping with React PowerPlug

1:27 react

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.

react tutorial about Reference a node using createRef() in React 16.3

Reference a node using createRef() in React 16.3

1:20 react

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

react tutorial about Use forwardRef() in React 16.3

Use forwardRef() in React 16.3

2:08 react

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

react tutorial about Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3

Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3

4:06 react

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

react tutorial about Update Application State with React Apollo Mutation Component

Update Application State with React Apollo Mutation Component

1:30 react PRO

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

react tutorial about Refactor a Higher-Order Component to a Render Prop Component

Refactor a Higher-Order Component to a Render Prop Component

4:38 react

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.

react tutorial about Refactor a Stateful List Component to a Functional Component with React PowerPlug

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

2:00 react PRO

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.

react tutorial about Refactor a Stateful Toggle Component to a Functional Component with React PowerPlug

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

1:58 react PRO

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?