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

Image for post
Image for post

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 framework in the JavaScript ecosystem when Hooks were released. Despite the existing praise, the React team still saw it necessary to build and release Hooks. Lost in the various Medium posts and blog think pieces on Hooks are the reasons (1) why and for what (2) benefit, despite high praise and popularity, the React team decided to spend valuable resources building and releasing Hooks. …


Image for post
Image for post

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) {
this.name = name
this.energy = energy
}
eat(amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
sleep() {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
play() {
console.log(`${this.name} is playing.`)
this.energy …


Image for post
Image for post

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 why they exist. Look around you right now. Any marginally complex item that you can see is probably built using individual pieces that when put together, form the item. …


Image for post
Image for post

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. …


Image for post
Image for post

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 page. …


Image for post
Image for post

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. …


Image for post
Image for post

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. …


Image for post
Image for post

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) {
this.name = name
this.energy = energy
}
Animal.prototype.eat = function (amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
Animal.prototype.sleep = function (length) {
console.log(`${this.name} is sleeping.`)
this.energy …


Image for post
Image for post

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 email addresses than reject a valid one. Front-end email validation is about figuring out if the syntax is correct, not if the email address is valid. …


Image for post
Image for post

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

One of my favorite sites is BerkshireHathaway.com — 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. …

About

Tyler McGinnis

Educating at TylerMcGinnis.com. 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