The Internet is so full of learning material that it can be difficult to know where to start. Here are some materials I used for learning React and Redux that I found useful. These were either recommended to me by coworkers or helpful resources I found on my own and learned from.
Important Note: There is more than one way to React. The tutorials and articles mentioned here do not necessarily follow the same best practices for writing React that Seller Labs engineers use. Other organizations likely have their own standards. Using these resources will not teach you the standards your organization follows, unless you’re specifically told: “Read this; this is exactly how we do it here.”
Before learning React, I highly recommend making sure you’re up to speed on ES6 (also known as ES2015) first. I highly recommend Wes Bos’s ES6 course, which is what I used. It is on the pricey side, but I would recommend getting the Master package so you get the Async/Await modules as well.
Official documentation for learning new libraries can be hit and miss. Back when jQuery was popular I was often asked for learning resources. I never pointed people totally new to jQuery to the official documentation. The React documentation is different. The Quick Start section provides a solid introduction to the framework and what makes it unique and lets you get started using it right away.
Following the Introduction is the official React tutorial. It’s great for starting off with React and getting used to the way it works.
This is a paid course offered by Pluralsight, which often offers free or inexpensive trials that should be long enough for you to complete this course. If you’re taking this after the official React introduction and tutorial, most of it will be review. I found the last section on React and Ajax to be the most useful.
The official React hooks instructions were all I needed to get started using the basic built-in React hooks. For creating custom hooks, I like the Create a Custom useFetch() React Hook tutorial on Scotch.io because unlike many of the examples out there, this is one you might actually want to use in a real application.
The React tutorials above explain how to use React’s built-in state management, which is good enough for dabbling in React or creating simple, personal projects. For large-scale applications, most React developers prefer to use an alternative such as Redux. Other options include MobX and Relay with GraphQL. I’m only including Redux resources here because it’s what we use, and it’s the most popular option.
I highly recommend this article as a starting point. It was the first time I was able to look at some Redux code and think, “Hey, I know what’s going on here!” It’s short and gets you covered on the basic concepts.
This tutorial has nearly the same name as the previous article but goes further in depth. It was created by Dan Abramov, the person who created Redux, so you know he knows what he’s talking about.
I received an email about this article while I was in the middle of writing these learning Redux resources. It’s like they knew I was writing this! I read the introduction and I’m pretty impressed, so I’m going to include it here. While it looks like an article, it’s really a whole online class. There’s even an ebook (and a coupon code to get the ebook for free).
Unlike the ES6 tutorial I suggested earlier, this Redux tutorial from Wes Bos is free. I really like how he presents information, and this tutorial is specific to using Redux with React. He also has a paid React tutorial that’s probably awesome as well, but I haven’t taken it myself.
Even if you go through all of the React and Redux resources listed here, you’ll still run into code patterns and syntax that makes you go “huh?” This section provides resources that touch on a few common patterns.
One common pattern you’ll see in React projects is the use of Higher-Order Components. HOCs are functions that take a Component as an argument and return a Component. Sound confusing? This article not only explains HOCs but includes all the background knowledge you need to understand the concept.
This article is shorter than the previous one, but provides all the basic information on what a HOC is, why you might use one, and how they work.
Most introductory React tutorials teach how to create components using the ES6 class syntax. Many React developers eschew this practice in favor of functional components as described in this mini tutorial.
Before the introduction of hooks, large React applications needed something like Reselect to improve performance. Reselect allowed developers to create selectors that are prevented from re-rendering unnecessarily by using caching state data. This article describes the concept of Reselect and the Reselect documentation delves into the details.
Some learners prefer video tutorials to reading articles. Here is a tutorial that covers HOCs, functional components, reselect, and other common React design patterns. I have not gone through the tutorial myself but I was impressed with the included sections and may go through it as a refresher in the future.
Learning By Doing
While articles and tutorials can help you understand React and Redux, I’ve found the best way to supplement them is by digging in the codebase and taking a look around. Looking at old Pull Requests and reading code review comments is a great way to learn how your organization uses React. If you’re not sure about a piece of code and why or how it was used, ask. Build your own mini React app, or tackle some small tasks on a larger project to get your feet wet.