Tutorials

Use matchPath to Match Nested Route Paths in Parent Routes with React-Router

React Router

In this lesson we'll use the matchPath function exported by react-router to find active nested routes inside of a parent component. This technique can be used for comparing routes outside of a React component, or even inside of life cycle methods to do data loading.

Create a Modal Route with Link and Nav State in React Router

React Router

In this lesson we'll show how the Link component to prop can receive an object. This allows us to pass state to the route. With the nav state we destructure off of location we can determine if a user wants to open a modal or on a cold visit show an image embedded in the page.

Prevent Navigation with the React Router Prompt Component When Data is Being Edited

React Router

In this lesson we'll show how to setup the Prompt component from React Router. We'll prompt with a static message, as well as a dynamic method with the message as a function. Finally we'll show that you can return true from the message as a function to dynamically allow navigation.

Create Nested Tab Routes with Dynamic Paths with React-Router

React Router

In this lesson we'll use the match.path value passed in by React Router to setup dynamic routes for Tabs. This will allow us to setup dynamic tabs which can be navigated to based upon the URL. With this pattern we can change the base path and our tab routes will automatically match and render correctly.

Add Interactivity to a Line Graph using scaleLinear.invert to Find a Data Point to Highlight on Mouse Move

D3

In this lesson we'll use scaleLinear to render a line, and additionally add data points using circle. Using onMouseMove we will call the invert function to do a reverse range to domain value interpolation. Then we will use Math.round and adjust the radius of the circle to highlight the selected point.

Fundamentals of Rendering Data as an SVG Bar Graph with D3 and scaleBand

D3

In this lesson we'll start by using d3-scale to build up a scaleBand for our x data and a scaleLinear for our y data points to allow them to map and extrapolate our data correctly to renderable bars. We'll add in padding between each bar, and then using the svg rect will render a collection of bars.

Fundamentals of Rendering Data as an SVG Line with D3 and scaleLinear

D3

In this lesson we'll start by using d3-scale to build up a scaleLinear for both our x and y data points to allow them to map and extrapolate our data correctly to renderable points. Then we'll use line from d3-shape to build out our path. We'll supply it with different sets of data and explore how range can effect how our data renders. Finally we'll show off using curveStep to see how it changes our graph rendering.

How to Create an Optional Dynamic Validation Schema based on a Value with the Yup Validation Library

React

In this lesson we'll show how to setup a nested validation structure using the yup library. We'll then use the yup.lazy method to evaluate the value at runtime and adjust our validation schema. We'll make our nested validation optional only if our optionalObject actually exists.

How to use a setState Updater Function with a Reducer Pattern

React

In this lesson we'll show how to create an updater function. We'll also dive into how to separate your state management logic into a separate reducer function much like how Redux operates. It will receive an action with a type, and any data and update state accordingly.

Make a Beautiful Interactive Bitcoin Price Chart with React, D3, and VX

React

In this lesson we'll walk through building an interactive bitcoin price chart. We'll use React combined with VX to render our chart and tooltips. D3 will power all of the data processing to ensure everything is rendered where it should be. We'll also walk through explaining what scales, ranges, domains and bisectors are and how to use them.