React Learning Resources

A curated list of resources to learn React and related web technologies as fast as possible. The goal is to help you create production quality React apps even if you are starting from scratch. Just bring plenty of motivation and perseverance 😄

If you are curious, this is my preferred React stack:

Core

• TypeScript for type safety
• React - for building component-based UIs
• React Context & hooks for state management

Foundational libraries

• React Router for navigation
• React Query for fetching data using REST
• Apollo GraphQL for fetching data using GraphQL
• React Hook Form for form handling
• ag-Grid - a feature-packed JavaScript grid
• Highcharts for interactive charts

Essential tools

• Storybook to develop UI components in isolation
• React Testing Library for unit testing
• Cypress for end-to-end testing
• Mock Service Worker to mock HTTP requests
• Prettier to format code consistently

I have created the React Accelerate template to kick-start React apps using the above stack.

P.S. If you find this content useful, please show your appreciation by starring this repository.

Contents

• The React Crash Course
• Developer Machine Setup
• CSS
• TypeScript
• React
• React Router
• React Hook Form
• GraphQL
• Highcharts
• ag-Grid
• Testing Best Practices
• Jest
• React Testing Library
• Storybook
• Mock Service Worker
• Cypress
• Git and Code Reviews
• Visual Design
• Domain-Driven Design

The React Crash Course

This crash course is designed to teach you React and related web technologies as fast as possible. Feel free to skip any topic that you already know. For video tutorials, I highly recommend to type along with the instructor to have it sink in faster.

• HTML Crash Course For Absolute Beginners (1:00) by Brad Traversy
• CSS Crash Course For Absolute Beginners (1:25) by Brad Traversy
• Flexbox CSS In 20 Minutes (20:00) by Brad Traversy
• JavaScript Crash Course For Beginners (1:40) by Brad Traversy
• TypeScript Crash Course (0:53) by Brad Traversy
• React Crash Course (1:49) by Brad Traversy
• Jest Crash Course (0:57) by Brad Traversy (does not cover mocking, see below for mocking)
• Jest Crash Course (start at 0:50 for mocking) by Laith Harb
• Coding Conventions and Patterns by Naresh Bhatia
• Recommended Folder Structure by Naresh Bhatia
• Code Shaper (React best practices using code generation) by Naresh Bhatia

Once done, you can test your understanding by taking this practice exercise.

Developer Machine Setup

• MacOS setup
• Windows setup

CSS

• A Complete Guide to Flexbox
• Pixels vs. Relative Units in CSS
• When to Use Em vs. Rem
• EM vs REM vs PX – Why you shouldn't “just use pixels”
• Learn CSS Variables in 5 minutes
• Difference between CSS variables and preprocessor variables
• CSS Variables - Lea Verou
• MindBEMding – getting your head ’round BEM syntax
• Get BEM - Naming

TypeScript

• Official TypeScript documentation
• TypeScript Deep Dive
• Understanding TypeScript - Udemy

React

• React documentation
• Coding Conventions and Patterns
• Recommended Folder Structure
• Code Shaper - React best practices using code generation
• Epic React by Kent C. Dodds - detailed hands-on training in React
• React - The Complete Guide - Udemy
• React and Typescript - Udemy
• Dan Abramov's Blog
  • A Complete Guide to useEffect
  • Writing Resilient Components
• Kent C. Dodd's Blog
  • State Colocation - Where to Put State - explains when to lift state up (so that multiple components can access it) vs. push it down, i.e. colocate it (because only one component needs it)
  • Application State Management with React - makes a case for using React Context and Hooks to manage state vs. external libraries like Redux
  • How to use React Context effectively - describes a nice pattern for using React Context
  • Should I useState or useReducer? - both can be used for most state management scenarios, however depending on the scenario, one may be cleaner than the other
  • useState lazy initialization and function updates - talks about a subtle bug that can occur when using useState and how to fix it by doing a function update
• React+TypeScript Cheatsheets

React Router

• React Router docs

React Hook Form

• React Hook Form documentation
• React Hook Form example with Yup validation
• Complex form example

GraphQL

• GraphQL concepts I wish someone explained to me a year ago
• Introduction to GraphQL
• Apollo GraphQL Tutorial
• Apollo Documentation
• GraphQL Schema Design
• GraphQL Code Generator
• GraphQL Scalars
• Apollo Link Scalars
• AWS AppSync

Highcharts

• Documentation
• API
• Examples
• Pie chart with drilldown

ag-Grid

ag-Grid supports multiple frameworks. We use the React version of ag-Grid along with some concepts (like columnDefs) from the JavaScript version.

• JavaScript Grid Documentation
• React Grid Documentation

Testing Best Practices

• React Testing Techniques
• How to know what to test
• Write tests. Not too many. Mostly integration.
• Write fewer, longer tests
• Making your UI tests resilient to change
• Testing Implementation Details

Jest

• Documentation

React Testing Library

• Introduction
• Guiding Principles
• Example
• Cheatsheet
• Query Priority Guidelines
• Common mistakes with React Testing Library

Storybook

• Introduction to Storybook

Mock Service Worker

• Documentation

Cypress

• Documentation

Git and Code Reviews

• How to Make Your Code Reviewer Fall in Love with You - Must read! Shows how to raise good PRs.
• git - the simple guide
• Trunk Based Development
• Trunk-based Development vs. Git Flow
• OneFlow – a Git branching model and workflow - OneFlow is just another name for Trunk-based Development.

Visual Design

• Refactoring UI (written by the authors of Tailwind CSS)
• Foundations of Design Systems - Emma Wedekind

Domain-Driven Design

• Naresh Bhatia's Blog