thumbnail

Route Config with React Router v4

by
author avatar
5 min read.

React Router moved away from a route config approach to routing to a component based approach. However, if you need it, you can still have a central route config with React Router. In this post, we'll walk through how by breaking down the 'Route Config' example on the React Router docs.

thumbnail

Building Serverless React GraphQL Applications with AWS AppSync

20 min read.

Even though GraphQL has gained a lot of popularity over the past year, building the backend for a GraphQL API can be a major pain and a source of confusion for developers new to the ecosystem. AWS AppSync allows developers to offload the complexity and time involved with building a GraphQL backend and only worry about building their application, and it does so with real-time and offline capabilities. In this post, we'll look at how to create a new AppSync GraphQL API & connect it to a React application. We'll also add mutations, queries, and subscriptions to the application to make the data real-time.

thumbnail

WTF is this - Understanding the this keyword, call, apply, and bind in JavaScript

10 min read.

I could argue that one of the most misunderstood aspects of JavaScript is the 'this' keyword. In this video, we'll walk through four techniques for figuring out what the 'this' keyword is referencing. They are 1) Implicit Binding 2) Explicit Binding 3) new Binding and 4) window Binding. In covering these techniques we'll also cover some other confusing parts of JavaScript as well. call, apply, bind, and the new keyword.

thumbnail

Query Strings with React Router

3 min read.

In this post we'll break down how to implement and parse query strings with React Router.

thumbnail

React Tutorial: A Comprehensive Guide to learning React.js in 2018

21 min read.

This is the original guide for learning to build apps with React.js. Recently upgraded to support React 16.3 and friends.

thumbnail

Server Rendering with React and React Router

26 min read.

Server side rendering a React app can provide a few different benefits including performance and SEO. The problem is with those benefits comes a cost of additional complexity to your application. In this post, we'll start from scratch and slowly build a server side rendered React (with React Router) while breaking down some of the complexity as we go.

thumbnail

Animated Transitions with React Router

18 min read.

If you're reading this you've probably discovered that React Router doesn't come with a solution for animated transitions out of the box. That ties into React Router's philosophy - it gives you routing primitives that you can build on and trusts you can figure out the rest. Because every app has different needs, this approach is the safest. What we'll do in this post is figure out a way to use 'React Transition Group' alongside React Router to add animated transitions to our app.

thumbnail

Pass props to a component rendered by React Router

2 min read.

In this post you'll learn how to pass props to components being rendered by React Router.

thumbnail

Fixing the "cannot GET /URL" error on refresh with React Router (or how client side routers work)

6 min read.

A very common error developers run into when building (and specifically refreshing) an app with React Router is 'Cannot GET /url'. In this post we'll look at why that error happens and what to do about it.

thumbnail

Nested routes with React Router v4

14 min read.

React Router v4 introduced a new declarative, component based approach to routing. With that approach came some confusion around nested routes. In this post we'll break down that confusion and you'll learn how to nest routes with React Router.

thumbnail

Programmatically navigate with React Router

4 min read.

When building an app with React Router, eventually you'll run into the question of navigating programmatically. Because of the churn that React Router has gone through in the last few years, there are a lot of outdated, and frankly incorrect tutorials out there. The goal of this post is to break down the correct approaches to programmatically navigating with React Router.

thumbnail

Handling 404 pages (catch all routes) with React Router v4

4 min read.

Often time when building an app with React Router, you want to have a 'catch all' route which will render if none of the other routes match. In this post, we'll learn how to do just that by breaking down the 'No Match (404)' example from the React Router docs.

thumbnail

URL Parameters with React Router

2 min read.

URL parameters are a fundamental aspect of React Router and a fundamental aspect of building web applications. In this post, we'll break down the 'URL Parameters' example on the React Router documentation to learn how you to effectively leverage URL parameters in your React app.

thumbnail

Code Splitting with React and React Router

9 min read.

Code splitting has gained popularity recently for its ability to allow you to split your app into separate bundles your users can progressively load. In this post we'll take a look at not only what code splitting is and how to do it, but also how to implement it with React Router.

thumbnail

React Router v4: Philosophy and Introduction

11 min read.

React Router v4 introduces a new dynamic, component based approach to routing. In this post, we'll talk about the philosophies behind React Router and give an introduction to the syntax by breaking down the 'Basic' example on the React Router docs.

thumbnail

Protected routes and authentication with React Router v4

11 min read.

Protected routes are an important part of any web application. In this article you'll learn how to create authenticated routes (routes that only certain users can access based on their authentication status) using React Router.

thumbnail

Arrow Functions in JavaScript

6 min read.

Arrow functions are the new fundamental building blocks of building modern web applications. In this post/video, you'll learn how Arrow Functions both make your code more concise while also making the 'this' keyword more manageable. You'll also learn about implicit returns, logging with arrow functions, and combining implicit returns with objects.

thumbnail

Template Literals (Template Strings) in JavaScript

3 min read.

Template literals are like strings on steroids. In this video, we'll look at the main benefits of template literals including string interpolation and multiline strings.

thumbnail

Compiling vs Polyfills with Babel (JavaScript)

5 min read.

A compiler like Babel will almost certainly be a foundational tool in building JavaScript applications going forward. A fundamental part of Babel is understanding the difference between compiling your code and polyfilling it. In most cases, doing one without the other will only get your code part of the way there. In this post, we'll break down the differences between the two so you can confidently future proof your code.

thumbnail

Default Parameters in JavaScript | ES6 | ES2015

3 min read.

In this video you'll learn how ES6's (ES2015) Default Parameters allow you to set default values for any arguments that are undefined when a function is invoked. You'll also learn how to use Default Parameters to make certain arguments required.

thumbnail

ECMAScript, TC39, and the History of JavaScript

6 min read.

In this video we'll dive deep into the history of JavaScript including Netscape, ECMA, ECMAScript, TC-39, and the steps needed for an idea to become part of the official EcmaScript specification.

thumbnail

Computed Property Names in JavaScript

1 min read.

In this video, you'll learn how to have an expression be computed as a property name on an object in JavaScript using ES6's (ES2015) 'computed property names' feature.

thumbnail

Shorthand Property and Method Names in JavaScript | ES6

1 min read.

In this video you'll learn two new ways to create variables in ES6 (ES2015). They are const and let. To better do that, we'll compare var with let and const by diving into function vs block scope, variable hoisting, and immutability.

thumbnail

Object and Array Destructuring in JavaScript

9 min read.

In this video you'll learn how to more easily extract data from both Arrays and Objects in JavaScript using ES6's (ES2015) destructuring feature.

thumbnail

var vs let vs const in JavaScript

10 min read.

In this video you'll learn two new ways to create variables in ES6 (ES2015). They are const and let. To better do that, we'll compare var with let and const by diving into function vs block scope, variable hoisting, and immutability.

thumbnail

Build your own React Router v4

16 min read.

Learn how React Router v4 works under the hood by building your own version of it.

thumbnail

React Interview Questions

10 min read.

Have an interview related to React coming up? Here are some questions (and answers) you should know.

thumbnail

React "Aha" Moments

5 min read.

A collection of "Aha" moments while learning React.

thumbnail

React Elements vs React Components

5 min read.

A guide to understanding the difference between Components and Elements in React.

thumbnail

How to Install the Facebook SDK into a React Native Android or iOS App

9 min read.

A guide to installing the Facebook SDK into a React Native App

thumbnail

Imperative vs Declarative Programming

8 min read.

A guide to understanding the difference between Imperative and Declarative programming.

thumbnail
thumbnail
thumbnail

An Introduction to Life Cycle Events in React

4 min read.

A guide to understanding life cycle events in React

thumbnail

Building User Interfaces with Pure Functions and Function Composition in React

4 min read.

A guide to building UI with pure functions and function composition in React

thumbnail

React Tutorial 1.5: Utilizing Webpack and Babel to build a React.js App

12 min read.

A guide to utilizing Webpack and Babel in your React app

thumbnail

React Tutorial Pt 3: Architecting React.js Apps with Flux.

15 min read.

A guide to understanding the Flux architecture.

thumbnail

React Tutorial Pt 2: Building React Applications with Gulp and Browserify.

24 min read.

A guide to building a React app with Gulp and Browserify.

thumbnail
thumbnail

AngularJS: Factory vs Service vs Provider

13 min read.

A guide to understanding the difference between Factories, Services, and Providers in Angular.

thumbnail
Newsletter

Listen, I get it, newsletters are the worst.

This one is different though.

Stay up to date with the latest and greatest in the JavaScript ecosystem.

Already a member? Enter your email to check your score.

Filter


The Socials

The Newsletter