Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem, as well as a source for quality information on advanced topics and techniques. Not quite "awesome", but hopefully useful as a starting point I can give to others. Suggestions welcome.
Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies. There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn. The invite link is at https://www.reactiflux.com.
You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at Redux Ecosystem Links. Also see Community Resources for links to other links lists, podcasts, and email newsletters. Finally, I also keep a dev blog at blog.isquaredsoftware.com, where I write about React, Redux, Webpack, and more.
- Basic Concepts and Overviews
- Community Resources
- Javascript Resources
- Git Resources and Tutorials
- Node.js and NPM
- Webpack Tutorials
- Boilerplates and Starter Kits
- Using React with ES6
- Functional Programming
- Immutable Data
- React/Redux Testing
- React Native
- React Tips and Techniques
- Architecture and Structure
- React:
- Redux
- Other
You should usually learn these technologies in the following order:
- "How Web Apps Work": a series of posts that lays out the big picture of the core technologies, terms, and concepts used in client/server web apps
- JavaScript: If you don't know JavaScript, nothing else will make sense
- React: You can use React by itself, or with Redux and/or TypeScript. Learning it separately will minimize the number of new concepts and syntax you have to learn at once.
- Redux: Redux can be used separately, but it's most commonly used with React.
- TypeScript: Because it adds static types on top of JS, you need to understand JS first. Also, it's easiest to understand React and Redux first, then learn how to use them with static types.
The resources in this page are listed in that order.
You are not required to read every single link and article listed in this page. However, you should try to read through as many of the articles linked in the "Recommended Primary Resources" sections as possible, especially for topics you are not already familiar with. Many of the recommended tutorials do cover the same topics, so feel free to skip past concepts you've already learned.
Links in the "Additional Resources" sections are available as references and reading as needed.
Mark's post series that describes the key terms, concepts, technologies, syntax, and data flow used in web apps.
- How Web Apps Work: HTTP and Servers
- How Web Apps Work: Client Development and Deployment
- How Web Apps Work: Browsers, HTML, and CSS
- How Web Apps Work: JavaScript and the DOM
- How Web Apps Work: AJAX, APIs, and Data Transfer
- Slides: Mark's "JavaScript for Java Developers" slides
- Read: MDN: A re-introduction to JavaScript
- Read: The Modern JavaScript Tutorial
- Read: Javascript Cheatsheet
- Exercises: CodeCademy - Introduction to JavaScript Tutorial
- Array methods:
- Equality and Comparisons
- Closures
this
keyword and scopes- The JS event loop
- CSS and layout
- Node / NPM
- Build Tools
- Debugging
- Core References:
- Syntax Overviews:
- Additional Books / References:
- The Complete JavaScript Handbook
- Eloquent JavaScript
- Exploring JS books (cover what's new in each yearly revision of the language)
- Links: ES6+ Features and Syntax (links to additional articles on new features in ES6+)
- You Don't Know JS (advanced concepts and understanding of JS behavior)
- Array/object methods / immutability
- JS Event Loop
- Regular Expressions
- CSS
- Node / NPM
- Lodash
- Build Tools
Start with reading the official docs first. The React team is in the process of starting a major rewrite of the React docs site to focus on teaching function components and hooks first, which is now available in beta. We've linked to that rather than the existing "main" documentation.
These other listed tutorials are also excellent and may explain things in a different way.
-
Read: official React docs
- Getting Started (docs overview and related resources)
- Main Concepts (read the whole series, but especially these two):
- React Hooks guide (lays out the motivation, teaches hooks, API reference, in-depth FAQ)
-
Watch: React Tutorial for Beginners
-
Read: Intro to React, Redux, and TypeScript for 2020 (Mark's presentation slides)
-
Exercises: Learn React - Interactive Tutorials
- Read: Simple React Development in 2019 (a guide to setting up an app, development environment, and deployment)
- Use: CodeSandbox.io (an online IDE that uses VS Code's editor, and can let you develop and run your apps completely in the browser)
- Use: Create-React-App (the official CLI tool for creating a React app with one command. Sets up a project with good default build settings out of the box.)
- Understanding how React works conceptually / internally
- React as a UI Runtime (deep dive - not required reading, but will definitely help you understand React better)
- Mark Erikson: A (Mostly) Complete Guide to React Rendering Behavior
- Build your own React
- State and props
- Component lifecycles
- AJAX requests
- Immutability
- Functional Programming basics
- Forms and "controlled inputs"
- React's new "hooks" API
- React docs - Hooks (lays out the motivation, teaches hooks, API reference, in-depth FAQ)
- A Complete Guide to useEffect (very long article, but a must-read. Teaches how hooks use closures, defining when effects run, and much more.)
- What are React Hooks?
- React Hooks: Not Magic, Just Arrays (looks under the hood to explain how hooks are implemented)
- Resource Collections
- Mark Erikson's React-Redux links collection (many categories of links to articles)
- Mark's suggested resources for learning React
- Dave Ceddia's blog (everything he's written)
- Robin Wieruch's blog (also everything he's written)
- Additional Books / References
Start with reading the official docs first.
The other tutorials are also excellent and may explain things in a different way.
- Read: Redux core docs
- "Redux Essentials" tutorial: explains "how to use Redux, the right way", using the latest recommended techniques and practices like Redux Toolkit and the React-Redux API, while building a real-world-ish example app.
- "Redux Fundamentals" tutorial: teaches "how Redux works, from the ground up". including core Redux data flow and why standard Redux patterns exist.
- "Typescript quick start": explains how to configure Redux Toolkit with type safety from action creators through to selectors.
- Use: Redux Toolkit (an official Redux package to simplify common tasks, including store setup and writing reducers)
- Read: React-Redux docs
- React-Redux hooks API reference
- These APIs are now considered outdated, but are widely used in existing Redux codebases
- Watch: Dan Abramov's tutorial videos on Egghead
- Read: A Complete React-Redux Tutorial
- Read: React Redux Tutorial for Beginners: The Definitive Guide
- Read: Leveling Up with React: Redux
- Read: "Idiomatic Redux" concepts and opinion series. A series of blog posts that describes standard Redux development best practices, why they exist, and how Redux is meant to be used. (These are not required reading to get started, but highly recommended once you understand the basics.)
- Legacy resources (do not cover "Modern Redux", but still informative)
- Read: Redux Fundamentals Workshop slices: a 2-day internal workshop that covers Redux from the ground up. Includes complete recordings of each section, slides, and an exercises repo. (Does not cover "Modern Redux", but
- Read: "Practical Redux" blog tutorial series. Covers multiple React and Redux concepts through building a larger example application
- Tradeoffs of using Redux:
- Reducer functions
- Selector functions
- Side effects
- Stack Overflow: How do we dispatch an action with a timeout?
- Stack Overflow: Why do we need middleware for async flow?
- What the heck is a "thunk"?
- What is the right way to do asynchronous operations in Redux? (side-by-side comparison of multiple side effects approaches)
- Redux Power Tools: Redux-Saga
- Normalizing data
- Resource Collections
- Redux Style Guide: best practices and recommendations for using Redux the right way
- Redux FAQ (answers to many common questions about Redux)
- Redux Ecosystem Links (a curated list of Redux-related addons and utilities)
- Books and Courses
- Pure Redux course by Dave Ceddia
- Redux course by Tyler McGinnis
- Learn Redux course by Wes Bos (free)
- Redux in Action
- The Complete Redux Book (free)
- Taming the State in React
- How does Redux work?
- Read: official TypeScript docs
- Typescript Playground - an interactive playground for testing typescript behavior and reproducing issues - includes some built-in examples
- Read: Get Started with TypeScript in 2019
- Read: The Definitive TypeScript Guide
- Read: The TypeScript Guide
interface
vstype
- "Typescript quick start": explains how to configure Redux Toolkit with type safety from action creators through to selectors.
- Resource Collections
- React+TypeScript Cheatsheets (a definitive set of information on how to use TypeScript with React)
- React + Redux in TypeScript - Static Typing Guide (a comprehensive set of info on using React, Redux, and TS together, with a focus on getting complete / "correct" type coverage of an app)
- Techniques