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.
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
Developer Machine 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
React
- React documentation
- Recommended Folder Structure
- React Coding Conventions
- React - The Complete Guide - Udemy
- React and Typescript
- Dan Abramov's Blog
- Kent Dodd's Blog
- React+TypeScript Cheatsheets
React Router
- Version 6 docs -
Note that v6 is in beta. The only up-to-date docs are here in the dev branch.
React Hook Form
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
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.
React Testing Library
Storybook
Mock Service Worker
Cypress
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
