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 and Reach 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.