So You Wanna Learn React

React is a powerful JavaScript library that powers web applications like Facebook and Pinterest. Paired with Redux, it’s incredibly robust for building dynamic front end applications, which makes it excellent to use, but daunting to learn. I found myself needing to learn React for my new job with Seller Labs. My new coworkers were kind enough to supply me with some excellent training materials they made themselves, and someone was always available to answer my questions. Even with their support, I didn’t want to just jump into the codebase without doing some training and reading on my own.

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

Prep Work

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.

The subscription service CodeSchool has a course called JavaScript Fundamentals for ES6 which comes recommended by a coworker, as does this Syntax podcast episode on Async/Await.

Learning React

React Introduction

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.

Tutorial: Intro to React

Following the Introduction is the official React tutorial. It’s great for starting off with React and getting used to the way it works.

Powering Up With React

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.

Introducing Hooks

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.

Learning Redux

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.

Getting Started with Redux – An Intro

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.

Getting Started with Redux

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.

Understanding Redux: The World’s Easiest Guide to Beginning Redux

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

Learn Redux

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.

Learning More

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.

Higher-Order Components (HOCs) for Beginners

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.

What is a Higher-Order Component in React?

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.

Pure Components

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. 

React and Redux Performance with Reselect

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.

React Design Patterns for Beginners

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.

Leave a Reply