• Stars
    star
    22,261
  • Rank 1,036 (Top 0.03 %)
  • Language
  • Created over 8 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Curated tutorial and resource links I've collected on React, Redux, ES6, and more

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 Tutorials

Intermediate Concepts

Advanced Topics

Comparisons and Discussion

Recommended Learning Path

You should usually learn these technologies in the following order:

  1. "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
  2. JavaScript: If you don't know JavaScript, nothing else will make sense
  3. 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.
  4. Redux: Redux can be used separately, but it's most commonly used with React.
  5. 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

Additional Resources (read as needed)

General JS
Specific Topics

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.

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

Additional Resources (read as needed)

General React

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

Additional Resources (read as needed)

Specific Topics

TypeScript

Recommended Primary Resources (should read)

Specific Topics

Additional Resources (read as needed)

More Repositories

1

redux-ecosystem-links

A categorized list of Redux-related addons, libraries, and utilities
5,205
star
2

react-community-tools-practices-cheatsheet

Descriptions and use cases for common tools and practices in the React community
JavaScript
313
star
3

project-minimek

A sample app to demonstrate various useful Redux techniques, accompanying the blog series at http://blog.isquaredsoftware.com/series/practical-redux
JavaScript
275
star
4

react-redux-cesium-testing-demo

A sample project demonstrating configuration of React, Redux, Webpack, Cesium, and Mocha
JavaScript
51
star
5

cesium-react-webpack-demo

A sample app to demonstrate using Cesium with React and Webpack, accompanying the blog series at http://blog.isquaredsoftware.com/series/declaratively-rendering-earth-in-3d/
JavaScript
46
star
6

rsk-github-issues-experiment

Prototype for the RSK "Github Issues" example app
TypeScript
43
star
7

cra-spectacle-mdx-boilerplate

A CRA-based boilerplate for creating a Spectacle slideset with MDX syntax
JavaScript
30
star
8

project-minimek-educative

A sample app to demonstrate various useful Redux techniques, accompanying the "Practical Redux" course on Educative.io
JavaScript
27
star
9

redux-fundamentals-workshop-exercises

Exercises for my Redux Fundamentals workshop
JavaScript
19
star
10

react-prod-sourcemaps

A tool to update app sourcemaps with the original code of ReactDOM's production builds
TypeScript
13
star
11

revolution-of-web-dev

Source for my "(R)Evolution of Web Dev" presentation on modern JS tools and technologies
JavaScript
8
star
12

rsk-todos-example

A port of the Redux "Todos" example to use Redux Starter Kit
JavaScript
7
star
13

benchmark-react-redux-perf

Experiments with attempting to benchmark React-Redux
JavaScript
6
star
14

react-redux-ts-intro-2021-12

JavaScript
6
star
15

react-redux-intro

Source for my "Modern Web Dev with React and Redux" presentation
JavaScript
5
star
16

Chameleon2

A C# rewrite of the original Chameleon C++ IDE for beginners
C++
5
star
17

git-js-repo-history-conversion-utils

Scripts for rewriting Git repo history and transforming JS source to ES6+
Python
4
star
18

Chameleon1

Senior project: a C++ IDE designed for beginning students
C++
3
star
19

hooks-hocs-tradeoffs

React Boston 2019 lightning talk
JavaScript
3
star
20

marks-dev-blog-comments

Comments for my blog
3
star
21

hob

JavaScript
2
star
22

BuckRogers

A computer conversion of the Buck Rogers: Battle for the 25th Century board game
C#
1
star
23

rsbuild-spectacle-mdx-boilerplate

An RSBuild-based boilerplate for creating a Spectacle slideset with MDX syntax
TypeScript
1
star