When using React Router, there are times when you may want to have both a static path like /settings along with a dynamic path like /:uid. The problem is that /settings is ambiguous and will match for both /settings and /:uid. In this post we'll look at how to fix this ambiguous matches problem with React Router.
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.
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.
This is the original guide for learning to build apps with React.js. Recently upgraded to support React 16.3 and friends.
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.
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.
In this post you'll learn how to pass props to components being rendered by React Router.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A guide to installing the Facebook SDK into a React Native App
A guide to building UI with pure functions and function composition in React
A guide to utilizing Webpack and Babel in your React app
A guide to understanding the Flux architecture.
A guide to building a React app with Gulp and Browserify.