Screencasts

Create a useMousePosition Hook with useEffect and useState in React
4:26

Create a useMousePosition Hook with useEffect and useState in React

React

In this lesson we'll explore how to combine useEffect with useState to create a reusable hook. It will listen add a window listener for mousemove and update state with each movement.

Create a componentDidMount useEffect hook in React
5:11

Create a componentDidMount useEffect hook in React

React

In this lesson we'll explore how to create useEffect call, and listen to the window for mouse movement. We'll learn about cleaning up our effects, and how to pass an empty array into the second argument of our effect to create a componentDidMount like effect. Finally we'll trigger a mount/unmount to show effects getting cleaned up correctly.

Immutable Data with Immer and React setState
6:05

Immutable Data with Immer and React setState

React

In this lesson we'll show the traditional method of updating state with a spread operator and then transform it into using the Immer produce functionality. This will allow us to achieve immutability on our data with simple mutations We'll then show how Immer can use currying to create updater functions that can be passed directly to setState.

Test Successful Async Form Submissions with React Router
7:06

Test Successful Async Form Submissions with React Router

React

In this lesson we'll explore how to test that an async form submission successfully happened using Jest. We'll also take advantage of react-testing-library to render our react components to a fake dom. We'll use MemoryRouter to mock what a browser would normally do in the event of a transition, and create a fake component route to confirm that the submission successfully redirected us to the url we wanted.

Custom Handling the Android Back Button with React Navigation
7:52

Custom Handling the Android Back Button with React Navigation

React Native

In this lesson we'll explore setting up a stack navigator in React Navigation. We'll create a custom component that uses withNavigation to allow us to listen to navigation transitions. Using the BackHandler from React Native we can ask the screen if custom needs are required when the hardware back button is pressed. Finally we'll prompt the user if they want to navigate.

Conditional JavaScript Callbacks with Reanimated in React Native
9:53

Conditional JavaScript Callbacks with Reanimated in React Native

React Native

In this lesson we'll explore how to setup a draggable circle. Then we'll dive into using the call method to create JavaScript callbacks whenever certain conditions are met inside of Reanimated.

Create a Draggable Opacity Changing Circle with Reanimated in React Native
9:16

Create a Draggable Opacity Changing Circle with Reanimated in React Native

React Native

In this lesson we'll use a PanGestureHandler to track a single gesture state. We'll use additional declarative animation functions like cond, eq, add, set, and event. We'll then use interpolate to create opacity and border effects whenever the circle is dragged to new locations.

Create a Tap-and-Hold Toggle Opacity Animated Box with Reanimated in React Native
10:30

Create a Tap-and-Hold Toggle Opacity Animated Box with Reanimated in React Native

React Native

In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a touchable opacity button using TapGestureHandler. With declarative animations in Reanimated we'll use tools like timing, Clock, set cond, and eq to create a purely native opacity animation.

Introduction to Reanimated in React Native
4:52

Introduction to Reanimated in React Native

React Native

In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a button using TapGestureHandler. With declarative animations in Reanimated we'll use cond, and eq to create a purely native opacity change animation when the button is pressed.

Create an Interactive Line Graph with a Hover Dual Line Highlight using VX and D3
9:01

Create an Interactive Line Graph with a Hover Dual Line Highlight using VX and D3

D3

In this lesson we'll take a look at how to render a basic line graph using D3, and VX. We'll move on to analyzing how to add some interactivity that will render a line where ever the user hovers using bisect from D3. Then we'll show how to render another line path using the scales and manipulating our data. Finally we'll add another line split so we're rendering 2 line paths.