React/Redux Links
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.
Table of Contents
Getting Started
- Basic Concepts and Overviews
- Community Resources
- Javascript Resources
- Git Resources and Tutorials
- Node.js and NPM
- Webpack Tutorials
- Boilerplates and Starter Kits
Basic Tutorials
- ES6 Features and Samples
- React Tutorials
- Flux Tutorials
- Redux Tutorials
- MobX Tutorials
Intermediate Concepts
- Using React with ES6
- Functional Programming
- Immutable Data
- React/Redux Testing
- React Native
- React Tips and Techniques
Advanced Topics
Architecture and Structure
- Project Structure
- React Component Patterns
- React Component Composition
- React State Management
- React Architecture and Best Practices
- Redux Architecture and Best Practices
- React/Redux Performance
- React Deployment
React:
- React Implementation and Concepts
- React and Forms
- React and AJAX
- React Styling
- React Server Rendering
- React and Routing
Redux
- Redux Reducers and Selectors
- Redux Middleware
- Redux Side Effects
- Redux UI Management
- Redux Tips and Techniques
- Using Redux Without React
Other
- Webpack Advanced Techniques
- Static Typing
Comparisons and Discussion
- React/Flux/Redux Pros, Cons, and Discussion
- Framework Comparisons
Recommended Learning Path
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.
How Web Apps Work
Mark's post series that describes the key terms, concepts, technologies, syntax, and data flow used in web apps.
Recommended Primary Resources (should read)
Javascript
Recommended Primary Resources (should read)
General JS
Specific Topics
- Array methods:
- Equality and Comparisons
- Closures
this
keyword and scopes- The JS event loop
- CSS and layout
- Node / NPM
- Build Tools
- Debugging
Additional Resources (read as needed)
General JS
- Core References:
- Syntax Overviews:
- Additional Books / References:
Specific Topics
- Array/object methods / immutability
- JS Event Loop
- Regular Expressions
- CSS
- Node / NPM
- Lodash
- Build Tools
React
Recommended Primary Resources (should read)
General React
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
Read: React docs (converted to show hooks)
Watch: React Tutorial for Beginners
Read: Intro to React, Redux, and TypeScript for 2020 (Mark's presentation slides)
Read: Build a CRUD App in React with Hooks
Read: A Comprehensive Guide to React in 2020
Exercises: Learn React - Interactive Tutorials
Project Setup
- 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.)
Specific Topics
- Understanding how React works conceptually / internally
- State and props
- Component lifecycles
- AJAX requests
- Immutability
- Functional Programming basics
- Forms and "controlled inputs"
- React's new "hooks" API
Additional Resources (read as needed)
General React
- Resource Collections
- Additional Books / References
Redux
Recommended Primary Resources (should read)
General Redux
Start with reading the official docs first.
The other tutorials are also excellent and may explain things in a different way.
Mark Erikson's Redux Resources
- 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)
Specific Topics
- Tradeoffs of using Redux:
- Reducer functions
- Selector functions
- Side effects
- Normalizing data
Additional Resources (read as needed)
- Resource Collections
- Books and Courses
Specific Topics
TypeScript
Recommended Primary Resources (should read)
Specific Topics
interface
vs type
- "Typescript quick start": explains how to configure Redux Toolkit with type safety from action creators through to selectors.
Additional Resources (read as needed)
- Resource Collections
- Techniques
Download Details:
Author: markerikson
Official Github: https://github.com/markerikson/react-redux-links
License: MIT
#redux #es6 #react