This was originally published at and is part of the React Hooks course. If you enjoy this post, check it out.

The first thing you should do whenever you’re about to learn something new is ask yourself two questions -

  1. Why does this thing exist?
  2. What problems does this thing solve?

If you never develop a convincing answer for both of those questions, you won’t have a solid enough foundation to build upon when you dive into the specifics. These questions are specifically interesting in regards to React Hooks. React was the most popular and most loved front-end…

This post is designed to be read after you read JavaScript Inheritance and the Prototype Chain.

If you’d prefer to watch rather than read,

Previously we looked at how to accomplish inheritance in JavaScript using both ES5 and ES6. In our example, we abstracted the common features amongst every animal (name, energy, eat, sleep, and play) to an Animal base class. Then, whenever we wanted to create an individual type of animal (Dog, Cat, etc.), we created a subclass for that type.

class Animal { constructor(name, energy) { = name = energy } eat(amount) { console.log(`${} is…

I’ve taught JavaScript for a long time to a lot of people. Consistently the most commonly under-learned aspect of the language is the module system.

There’s good reason for that. Modules in JavaScript have a strange and erratic history. In this post we’ll walk through that history and you’ll learn modules of the past to better understand how JavaScript modules work today.

If you’d rather watch than read, here’s a video that covers the same material. Feel free to subscribe 🙂

Before we learn how to create modules in JavaScript, we first need to understand what they are and…

Because React Router is just components, you can do crazy things like having recursive routes. In this post we’ll learn how they work by breaking down the ‘Recursive Paths’ example on the React Router docs.

Recursive routes aren’t the most pragmatic thing in the world, but they really show off the benefits of React Router’s component based approach to routing.

The main idea here is that since React Router is just components, theoretically, you can create recursive and therefor infinite routes. The secret lies in setting up the right data structure which can lead to infinite routes. …

Often times when building an app with React Router you’ll need to pass props through a Link component to the new route. In this post, we’ll break down how that process works.

There are two different ways to pass data from a Link component through to the new route that’s being rendered. The first is through URL Parameters and the second is through state.

First, let’s take a look at URL parameters. If you’ve read our URL Parameters post, you’ll be familiar with this example. Say we were in charge of building out the Route that renders Twitter’s profile

In this post you’ll learn two new ways to create variables in JavaScript (ES6), let and const. Along the way we’ll look at the differences between var, let, and const as well as cover topics like function vs block scope, variable hoisting, and immutability.

If you prefer to watch a video, check this out:

ES2015 (or ES6) introduced two new ways to create variables, let and const. But before we actually dive into the differences between var, let, and const, there are some prerequisites you need to know first. …

When building an app with React Router, often you’ll want to implement a sidebar or breadcrumb navbar. In this post you’ll learn how that’s done with React Router by breaking down the Sidebar example from the React Router documentation.

A common UI pattern is to have a sidebar or breadcrumb navbar in your app. Because React Router allows you to render and match more than one Route per page, implementing this pattern is pretty straight forward. …

This post is designed to be read after you read JavaScript Private and Public Class Fields.

If you prefer to watch a video instead,

Previously we learned how to create an Animal class both in ES5 as well as in ES6. We also learned how to share methods across those classes using JavaScript’s prototype. To review, here’s the code we saw in an earlier post.

// ES5
function Animal (name, energy) { = name = energy
} = function (amount) {
console.log(`${} is eating.`) += amount
Animal.prototype.sleep = function (length) { console.log(`${} is sleeping.`)…

Email validation is hard. With the vast amount of complex, but valid email addresses that exist today, the only way to truly tell if an email address is valid is to send the email and see if it bounces. With that said, there are a few things we can do on the front end to make the experience better for everyone. In this post, we’ll talk about a few common approaches for validating email addresses in JavaScript.

First, when validating email addresses I believe it’s better to error on the permissive side. I’d much rather let pass a few fake…

Note: This is part of my Advanced JavaScript course. If you enjoy this post, check it out.

One of my favorite sites is — it’s simple, effective, and has been doing its job well since it launched in 1997. Even more remarkable, over the last 20 years, there’s a good chance this site has never had a bug.

Why? Because it’s all static. It’s been pretty much the same since it launched over 20 years ago.

Turns out sites are pretty simple to build if you have all of your data up front. Unfortunately, most sites now days don’t…

Tyler McGinnis

Educating at Google Developer Expert.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store