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

Overview

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

Best of the Best / Suggested Reading List

All of the links in this collection are worth reading, but there's obviously a LOT of them. Here's a "best-of" list to get you started:

Basic Concepts and Learning Approaches

Overviews of Javascript Tools and Concepts

Suggested Learning Approaches

  • A Study Plan to Cure Javascript Fatigue
    The author of the "State of JS 2016" survey gives an excellent step-by-step study plan to use when learning the Javascript ecosystem.
  • Grab Front-End Study Guide
    An excellent guide to learning front-end technologies, based on "A Study Plan to Cure Javascript Fatigue". Includes descriptions of each topic, links to learning resources, and estimates for how much time to spend on each topic.
  • React How-To
    Pete Hunt, one of React's creators, gives a high-level suggested order to use when learning React-related technologies (React, NPM, bundlers, ES6, routing, and Flux/Redux)
  • Timeline for Learning React
    How to Learn React
    Another high-level suggested timeline for how to approach learning React and related technologies.
  • Tips to learn React + Redux
    An extensive and excellent list of suggestions to follow when learning and using React and Redux. Tips include when to use different component patterns, when to bring in a state management library, Redux state structuring, unit testing, and much more.

Learning Core Javascript (ES5)

General Resources

Books

  • Eloquent Javascript
    A full online book teaching Javascript from the ground up. Very recommended.
  • You Don't Know Javascript
    An online book series intended to teach all aspects of Javascript, including the "tougher" parts.
  • Exploring Javascript
    Multiple free online books from Dr. Axel Rauschmayer. "Speaking Javascript" covers all of Javascript through ES5; "Exploring ES6" covers ES6 in depth; and other books look at versions of Javascript after ES6 and how to set up an ES6+ development environment.

Learning Current Javascript (ES6+)

ES6 Feature Overviews

In-Depth Details

  • ES6 In Depth
    Many articles covering each feature in greater detail
  • Exploring ES6
    A full online book covering every aspect of ES6 in fine detail

React Walkthrough

If you are new to React, try reading these articles in order.

Getting Started

  • React Documentation: Hello World
    React Documentation: Tutorial
    The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information.
  • Create-React-App
    The official project creation tool from the React team. Allows you to set up a new React project, with no configuration work required.
  • Simple React Development in 2017
    An excellent set of instructions for setting up a React project with minimal fuss and effort needed. Includes links to some useful resources, and info on deploying the app to production.
  • Modern Web Development with React and Redux
    An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples.
  • Learn Raw React
    A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms.
  • 30 Days of React
    A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment.

Data Flow: “State” and “Props”

Component Patterns

  • React Patterns
    An excellent list of common patterns for structuring React components, with examples
  • The React Component Lifecycle
    A useful description of the order and purpose of React’s component lifecycle methods.
  • Presentational and Container Components
    Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React.
  • Mixins Considered Harmful
    Dan Abramov explains why the React team discourages use of mixins, and prefers a pattern called “Higher Order Components” instead
  • Components, React, and Flux
    A fantastic HTML slideshow that discusses how to organize code as reusable components, and the basic concepts and benefits of a Flux unidirectional architecture
  • Reactive, Component-Based UIs
    Another fantastic HTML slideshow describing the three principles of React: "functional over OOP", "stateless over stateful", "clarity over brevity" (use arrow keys to advance slides)

Function Binding and this

AJAX requests and Data Fetching

Immutable Data

Functional Programming

  • The Little Idea of Functional Programming
    Describes the three basic principles of FP: "data in/data out", "code as data", and "function composition" all the way down, and demonstrates transforming some data. Has some very helpful graphics and illustrations.
  • What Is Functional Programming?
    Describes how side effects and "hidden inputs" add complexity to code, in very clear terms.

Forms and Inputs

Styles

  • Styling in React
    An introduction to using React's built-in inline styling abilities
  • How To Style React
    An excellent overview of the four major ways to deal with styles in React, and what the various tools are. Includes a decision tree to help you decide what to use.

Redux

Getting Started

  • Redux Docs
    The official Redux documentation. Contains an excellent tutorial that walks you through “here’s what you want to do, and how we came up with this”, as well as recipes for more advanced topics. Be sure to read through the FAQ for answers to common questions and links to further information.
  • Getting Started with Redux - Video Series
    Getting Started with Redux - Course Notes
    Dan Abramov, the creator of Redux demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos.
  • Building React Applications with Idiomatic Redux - Video Series
    Building React Applications with Idiomatic Redux - Course Notes
    Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos.
  • Redux: From Twitter Hype to Production
    An extremely well-produced slideshow that visually steps through core Redux concepts, usage with React, project organization, and side effects with thunks and sagas. Has some absolutely fantastic animated diagrams demonstrating how data flows through a React+Redux architecture.
  • Leveling Up with React: Redux
    A very well-written introduction to Redux and its related concepts, with some useful cartoon-ish diagrams.
  • Connect.js explained
    A very simplified version of React Redux's connect() function that illustrates the basic implementation

AJAX, Timeouts, and other “Side Effects”

Middleware

  • Redux Middleware
    A tutorial describing how Redux compares to typical "MVC", what a "middleware" is, what they can do, and how you can test them.
  • Exploring Redux Middlewares
    Understanding middlewares through a series of small experiments

Debugging

Writing Reducers

  • Redux Docs: Structuring Reducers
    Comprehensive information on writing reducers and structuring data, covering reducer composition, use of combineReducers, normalizing data, proper immutable updating, and more.
  • Taking Advantage of combineReducers
    Examples of using combineReducers multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic.

Selectors and Normalization

Webpack

Getting Started

Configuration and Concepts

  • Webpack: The Confusing Parts
    A great simplification and breakdown of the different pieces that make up a Webpack configuration: dev vs prod, CLI vs dev-server, the "entry" option, the "output" option / "path" vs "publicPath", loaders and configuration, Babel, plugins, and path resolving.
  • Angular + Webpack < 3
    A long presentation that describes Webpack and its core concepts in depth. A few parts are Angular-centric, but still an extremely clear and informative set of slides. Covers topics like the "entry" and "output" options, "loaders", and "plugins".
  • Advanced Webpack
    An in-depth presentation that walks through Webpack concepts, terms, configuration, and usage. Covers a number of advanced topics, and very worth reading.

Build Optimization

Hot Module Reloading

Issues
  • Refactoring: split up React Component Patterns

    Refactoring: split up React Component Patterns

    The React Component Patterns page has gotten really large, and is probably due to be split up into smaller pages.

    The first step would be to extract the "Higher Order Components" and "Composing Components with Functional Programming" subcategories into a new page called "React Component Composition", and split up the "HOC" subcategory into separate subcategories for HOCs and render prop/function-as-a-child info.

    So, the new page would look like:

    • React Component Composition
      • Higher-Order Components
      • Render Props
      • Functional Composition

    We'd then need to add links to those categories back into the top of the "React Component Patterns" page, and add anchor tags so that any external links to react-component-patterns.md#higher-order-components would auto-scroll to have the link at the top of the page.

    Finally, the Table of Contents in the README would need to have the new page added as a list item underneath the "React Component Patterns" entry.

    opened by markerikson 10
  • Refactor react component patterns

    Refactor react component patterns

    Refactor react component patterns (#71)

    Fixed a couple of dead links on the road.

    opened by john-d-pelingo 5
  • Add react-boilerplate

    Add react-boilerplate

    Add react-boilerplate to boilerplates-and-starter-kits.md

    opened by mxstbr 4
  • Update react-tutorials.md

    Update react-tutorials.md

    Adding appendTo courses to tutorials page.

    opened by DevelopIntelligenceBoulder 4
  • (docs): Relative Links are broken at Repository Main Page

    (docs): Relative Links are broken at Repository Main Page

    Issue

    When you try to navigate clicking in the links at the README.md rendered on the repo main page, it actually is using the last resource of the url (the repo name) and replacing with the .md filename.

    When you open the README.md content and click on them they work just fine, since you're browsing through the blob files of the repo.

    Proposed Solution

    Was reading this article https://help.github.com/articles/relative-links-in-readmes/, and absolute paths are not recommended. So I would recommend you to put a relative link operand (./path/to/file.md) in each link so it can be found.

    opened by armand1m 4
  • Adding Understand and implement your own Redux

    Adding Understand and implement your own Redux

    I didn't make the link text bold because none of the other links are bold. If you'd like me to update that just let me know. Thanks!

    opened by jakelumetta 4
  • remove duplicate link

    remove duplicate link

    opened by devvmh 3
  • React/Redux - Help

    React/Redux - Help

    Hello, i have a component, that renders 5 cards from react-bootstrap, the imgs, names, etc... When i start my app, i see all the cards. So i have made a simple drop down menu, whit 2016 and 2017 options. My objective is when i click the year that i want, i want to show the cards respectives of that year !! Im not asking for some one to do this for me, i want to do it for myself, but i need some help getting started or some tutorial., if some one could help me, i will apriciated . Thanks in advanced

    opened by hseleiro 3
  • Draft: Configured link check action and removed dead links

    Draft: Configured link check action and removed dead links

    Removed lots of dead links. Configured Github Action to perform a health check on all links found in .md files.

    opened by keithort 3
  • Added blogs related to React state management and Redux middleware

    Added blogs related to React state management and Redux middleware

    • Added blogs for React state management and Redux middleware.
    opened by Akash-Patil 0
  • Potential Links Dump:

    Potential Links Dump: "Front End Learning Resources"

    I assembled this list at my day job to train folks who had done C++/Java/etc, but never even touched JS or React before. Most of these links could be included here.

    This list is at least somewhat less stale than the rest of the repo, although some of the links are likely outdated (like, Tania Rascia's React tutorial is still class-based, and I think Dave Ceddia has a couple newer posts that should be referenced).

    Content follows:

    Recommended Learning Path

    You should 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.

    true

    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. However, 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. That won't be published until mid-2021. Until then, a third party has made a fork of the React docs and converted the tutorials and examples to show function components instead of classes, so I'm going to link that here and suggest reading it.

    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, and also watch Mark Erikson's "Redux Fundamentals Workshop" videos.

    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)

    TypeScript

    Recommended Primary Resources (should read)

    Specific Topics

    Additional Resources (read as needed)

    opened by markerikson 0
  • Scaffolding / App generation

    Scaffolding / App generation

    opened by metaclass-nl 2
  • Potential Links Dump: 2020-08-15

    Potential Links Dump: 2020-08-15

    • A Pattern for Redux Thunk Async Actions
      https://spin.atomicobject.com/2018/11/19/redux-thunk-async-actions/

    • The Power of Redux and React.lazy: Reusing UI and the Data Layer
      https://medium.com/front-end-hacking/the-power-of-redux-and-react-lazy-bdeb21028f43

    • Building the Unsplash.com Uploader (with open source React/Redux/TS prototype)
      https://www.reddit.com/r/reactjs/comments/9zen8l/building_the_unsplashcom_uploader_with_open/

    • koba04/react-fiber-resources
      https://github.com/koba04/react-fiber-resources

    • Inside Fiber: in-depth overview of the new reconciliation algorithm in React
      https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e

    • The how and why on React’s usage of linked list in Fiber
      https://www.reddit.com/r/reactjs/comments/9uyo6u/the_how_and_why_on_reacts_usage_of_linked_list_in/

    • Solving Circular Dependencies in Modular Redux
      http://randycoulman.com/blog/2018/06/12/solving-circular-dependencies-in-modular-redux/

    • React Tutorial : Learn React JS For Free
      https://scrimba.com/g/glearnreact

    • Using Socket.io with Redux - Websocket Redux Middleware
      https://nmajor.com/posts/using-socket-io-with-redux-websocket-redux-middleware

    • Post not available yet
      https://react.christmas/2018/2

    • The best way to test Redux Sagas
      https://dev.to/phil/the-best-way-to-test-redux-sagas-4hib

    • In-depth explanation of state and props update in React
      https://medium.com/react-in-depth/in-depth-explanation-of-state-and-props-update-in-react-51ab94563311

    • Modernizing the Web Playback UI
      https://medium.com/netflix-techblog/modernizing-the-web-playback-ui-1ad2f184a5a0

    • When To Use Redux And When Stick To The Context API? Simplify Your App!
      https://ideamotive.co/blog/redux-vs-context-api/

    • The state of CSS, CSS in JS & how styled-components is solving the problems we’ve had for decades
      https://medium.com/@piggyslasher/the-state-of-css-css-in-js-how-styled-components-is-solving-the-problems-weve-had-for-decades-d8abbc8bc148

    • Exposing a Promise-Based API from a Reactive Core (v3.0 Journal)
      https://snipcart.com/blog/redux-middleware-example

    • Developing React custom hooks for Redux without react-redux
      https://medium.com/@dai_shi/developing-react-custom-hooks-for-redux-without-react-redux-483a90de0c71

    • Redux Typescripted
      https://blog.rangle.io/redux-typescripted/

    • The best way to architect your Redux app
      https://medium.freecodecamp.org/the-best-way-to-architect-your-redux-app-ad9bd16c8e2d

    • Creating Reusable React Components
      https://www.pluralsight.com/courses/react-creating-reusable-components

    • Conquering a Double-Barrel Webpack Upgrade
      https://www.stackery.io/blog/webpack-upgrade/

    • Upgrading to React-Redux v6: Around the New Context API
      https://dev.to/wgao19/upgrading-to-react-redux-v6-around-the-new-context-api-5725

    • Five Tips for Working with Redux in Large Applications
      https://techblog.appnexus.com/five-tips-for-working-with-redux-in-large-applications-89452af4fdcb

    • Become a Git pro in just one blog. A thorough guide to Git architecture and command line interface
      https://itnext.io/become-a-git-pro-in-just-one-blog-a-thorough-guide-to-git-architecture-and-command-line-interface-93fbe9bdb395

    • Redux Middleware Patterns
      https://medium.com/@bkilrain/redux-middleware-patterns-7dab3a2cdec9

    • React Redux Tutorial for Beginners: The Definitive Guide (2020)
      https://www.valentinog.com/blog/redux/

    • Redux Middleware Patterns
      https://www.reddit.com/r/reactjs/comments/a8ndbv/redux_middleware_patterns/

    • 4 Features to Boost React-Redux Performance
      https://patrickdesjardins.com/blog/4-features-to-boost-react-redux-performance

    • Controlling Web Audio With React and Redux Middleware
      https://itnext.io/controlling-web-audio-with-react-and-redux-middleware-39b1a4b0c2ba

    • Making Redux more accessible with Rematch framework
      https://diophant.com/blog/making-redux-more-accessible-with-rematch-framework/

    • How to learn React.js in 2019
      https://www.robinwieruch.de/learn-react-js

    • Redux middlewares to decouple dependencies.
      https://itnext.io/redux-middlewares-to-decouple-dependencies-4d5dc4c1dd06

    • How to Load Initial Data on Startup with Redux Thunk
      https://spin.atomicobject.com/2019/01/03/redux-thunk-load-initial-data/

    • Simple Redux—A bare-bones redux implementation for teaching purposes
      https://www.reddit.com/r/reactjs/comments/acgav3/simple_reduxa_barebones_redux_implementation_for/

    • Complete Intro to React v4
      https://btholt.github.io/complete-intro-to-react-v4/

    • The React Handbook
      https://reacthandbook.com/

    • JavaScript Modules: From IIFEs to CommonJS to ES6 Modules
      https://tylermcginnis.com/javascript-modules-iifes-commonjs-esmodules/

    • Array iteration methods summarized
      https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff

    • How to teach Git : Hacker News
      https://news.ycombinator.com/item?shownew&id=18919599

    • How to teach Git
      https://www.reddit.com/r/programming/comments/agko6r/how_to_teach_git/

    • Bridging the Gap Between CSS and JavaScript: CSS-in-JS
      https://css-tricks.com/bridging-the-gap-between-css-and-javascript-css-in-js/

    • React Introduction For People Who Know Just Enough jQuery To Get By (2019 version)
      https://medium.freecodecamp.org/react-introduction-for-people-who-know-just-enough-jquery-to-get-by-2019-version-28a4b4316d1a

    • The Good/The Bad of React & Redux: And Why Ducks Might Be The Solution
      https://medium.com/swlh/the-good-the-bad-of-react-redux-and-why-ducks-might-be-the-solution-1567d5bdc698

    • Garbage Collection in Redux Applications
      https://developers.soundcloud.com/blog/garbage-collection-in-redux-applications

    • Implementation notes on react's scheduling model as of (shortly before) 16.8.0
      https://gist.github.com/Jessidhia/49d0915b7e722dc5b49ab9779b5906e8

    • Git Beginner Cheatsheet - with diagrams and animated code gifs explaining fundamentals
      https://www.reddit.com/r/programming/comments/akdrak/git_beginner_cheatsheet_with_diagrams_and/

    • The Ultimate Beginner Git Cheatsheet
      https://mukul-rathi.github.io/git-beginner-cheatsheet/

    • Advanced Redux Patterns: Normalisation
      https://blog.brainsandbeards.com/advanced-redux-patterns-normalisation-6b9a5aa46e1f

    • The Request Lifecycle
      https://nielskrijger.com/posts/2018-09-22/the-request-lifecycle/


    • https://benmccormick.org/2019/02/11/reusable-react/

    • Getting a Promise from Redux Actions
      https://medium.com/@erikras/getting-a-promise-from-redux-actions-d92787894368

    • Four Ways to Immutability in JavaScript
      https://dev.to/glebec/four-ways-to-immutability-in-javascript-3b3l

    • An Overview of JavaScript Testing in 2019
      https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2019-264e19514d0a

    • React Resources
      https://reactresources.com/

    • A Complete Guide to useEffect
      https://overreacted.io/a-complete-guide-to-useeffect/

    • A Complete React Redux Tutorial for Beginners (2019)
      https://daveceddia.com/redux-tutorial/

    • Pure Redux
      https://daveceddia.com/pure-redux/

    • Write yourself a Git!
      https://wyag.thb.lt/

    • React Function Components
      https://www.robinwieruch.de/react-function-component

    • Architecting UIs for Change
      https://joreteg.com/blog/architecting-uis-for-change

    • My Redux Learning Experience
      https://medium.com/@shaungc/my-redux-learning-experience-de09f5150adb

    • There is No U in CRUD
      https://dev.to/jlhcoder/there-is-no-u-in-crud

    • Modular redux architecture
      https://dev.to/jovidecroock/modular-redux-57nl

    • From Redux to Hooks: A Case Study
      https://www.reddit.com/r/reactjs/comments/ba3bem/from_redux_to_hooks_a_case_study/

    • React State Hooks: useReducer, useState, useContext
      https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext

    • How to pass props to components in React
      https://www.robinwieruch.de/react-pass-props-to-component/

    • Why Action is a bad name for a Redux Action
      https://medium.com/magnetis-backstage/why-action-is-a-bad-name-for-a-redux-action-68bec375539e

    • JavaScript (ES2015+) Enlightenment
      https://frontendmasters.com/books/javascript-enlightenment/

    • React Hooks cheat sheet: Unlock solutions to common problems
      https://blog.logrocket.com/react-hooks-cheat-sheet-unlock-solutions-to-common-problems-af4caf699e70/

    • A Few Gripes With Styled Components
      https://dreith.com/blog/a-few-gripes-with-styled-components/

    • React Hooks - A deeper dive featuring useContext and useReducer
      https://testdriven.io/blog/react-hooks-advanced/

    • The CSS Handbook: a handy guide to CSS for developers
      https://medium.freecodecamp.org/the-css-handbook-a-handy-guide-to-css-for-developers-b56695917d11

    • Choosing a CSS in JS library
      https://gist.github.com/troch/c27c6a8cc47b76755d848c6d1204fdaf

    • Why use thunks?
      https://www.reddit.com/r/reactjs/comments/binitb/why_use_thunks/

    • Managing side effects and building scalable React apps with Redux Saga
      https://www.reddit.com/r/reactjs/comments/bjgclw/managing_side_effects_and_building_scalable_react/

    • donavon/hook-flow
      https://github.com/donavon/hook-flow

    • Redux with Code-Splitting and Type Checking
      https://www.matthewgerstman.com/tech/redux-code-split-typecheck/

    • Hands down the best presentation I've ever seen over JavaScript Bundlers/Module system
      https://www.reddit.com/r/javascript/comments/blzd1m/hands_down_the_best_presentation_ive_ever_seen/

    • React Code Splitting in 2019
      https://itnext.io/react-code-splitting-in-2019-9a5d2776c502

    • Articles
      https://www.javascriptstuff.com/articles/

    • React Data Layer Series - Part 1
      https://www.bignerdranch.com/blog/react-data-layer/

    • JavaScript Engines: How Do They Even Work? From Call Stack to Promise, (almost) Everything You Need to Know
      https://www.valentinog.com/blog/engines/

    • Scalable Frontend #3 — The State Layer
      https://blog.codeminer42.com/scalable-frontend-3-the-state-layer-b23ed69ca57c

    • Another perspective of some css-in-js solutions
      http://justthisguy.co.uk/css-in-js/

    • Redesigning Redux
      https://hackernoon.com/redesigning-redux-b2baee8b8a38

    • New Redux Hooks: A Before And After Comparison. Are They Better?
      https://dev.to/gsto/new-redux-hooks-a-before-and-after-comparison-are-they-better-loj

    • How to fix nasty circular dependency issues once and for all in JavaScript & TypeScript
      https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de

    • Advanced Redux: Design Patterns and Practices - Nir Kaufman | JSHeroes 2018
      https://www.youtube.com/watch?v=5gl3cCB_26M

    • btholt/complete-intro-to-react-v5
      https://github.com/btholt/complete-intro-to-react-v5

    • Css Modules by Example
      https://www.javascriptstuff.com/css-modules-by-example/

    • Bridging the Gap Between CSS and JavaScript: CSS Modules, PostCSS and the Future of CSS
      https://css-tricks.com/bridging-the-gap-between-css-and-javascript-css-modules-postcss-and-the-future-of-css/

    • Matthew Gerstman - TypeScript: Seeing Past the Hype
      https://www.youtube.com/watch?v=veXkJq0Z2Qk

    • Why is my webpack build slow?
      https://samsaccone.com/posts/why-is-my-webpack-build-slow.html

    • Types or Tests: Why Not Both?
      https://css-tricks.com/types-or-tests-why-not-both/

    • How to convert your existing Redux containers to Hooks
      https://blog.logrocket.com/how-to-convert-your-existing-redux-containers-to-hooks/

    • JavaScript fundamentals before learning React
      https://www.robinwieruch.de/javascript-fundamentals-react-requirements

    • Выведение Action type с помощью Typescript
      https://habr.com/ru/company/alfa/blog/452620/

    • React Testing Library Common Scenarios
      https://rafaelquintanilha.com/react-testing-library-common-scenarios/

    • The Complete Introduction to React
      https://jscomplete.com/learn/complete-intro-react

    • When a rewrite isn’t: rebuilding Slack on the desktop
      https://slack.engineering/rebuilding-slack-on-the-desktop-308d6fe94ae4

    • All about Immutable Arrays and Objects in JavaScript
      https://ultimatecourses.com/blog/all-about-immutable-arrays-and-objects-in-javascript

    • Scheduling is the Future - Brandon Dail aka @aweary at @ReactEurope 2019
      https://www.reddit.com/r/reactjs/comments/cgvler/scheduling_is_the_future_brandon_dail_aka_aweary/

    • Do React Hooks Replace Redux?
      https://medium.com/javascript-scene/do-react-hooks-replace-redux-210bab340672

    • Why React Hooks?
      https://tylermcginnis.com/why-react-hooks/

    • CSS: From Zero to Hero
      https://dev.to/aspittel/css-from-zero-to-hero-3o16

    • ooooops I guess we’re full-stack developers now*
      https://full-stack.netlify.com/

    • 5 Tips to Help You Avoid React Hooks Pitfalls
      https://kentcdodds.com/blog/react-hooks-pitfalls

    • Testing redux reducers - leveraging selectors
      https://blog.thepete.net/blog/2019/08/07/testing-redux-reducers---leveraging-selectors/

    • Testing React components: Enzyme vs React Testing Library
      https://claritydev.net/blog/testing-react-components-enzyme-vs-react-testing-l

    • Fun with React Hooks - great 1hr talk on the mental modal of useState and useEffect by Michael Jackson and Ryan Florence
      https://www.reddit.com/r/reactjs/comments/cpi5ra/fun_with_react_hooks_great_1hr_talk_on_the_mental/

    • The Differing Perspectives on CSS-in-JS
      https://css-tricks.com/the-differing-perspectives-on-css-in-js/

    • Asynchronous with Redux Sagas
      https://dev.to/irmerk/asynchronous-with-redux-sagas-44dm

    • Artem Sapegin on Twitter
      https://twitter.com/iamsapegin/status/1163428505721475074

    • Have Confidence in Your Redux Apps With Integration and Unit Testing
      https://www.robertcooper.me/testing-redux-apps

    • Can You Replace Redux with React Hooks?
      https://dev.to/chrisachard/can-you-replace-redux-with-react-hooks-20gm

    • Handling API request race conditions in React
      https://sebastienlorber.com/handling-api-request-race-conditions-in-react

    • How to Become a Front-end Developer in 2019
      https://www.dimitrimarion.com/blog/2019/08/28/how-to-become-front-end-developer/

    • How to test React-Redux connected Components
      https://www.robinwieruch.de/react-connected-component-test

    • Why is React doing this?
      https://gist.github.com/sebmarkbage/a5ef436427437a98408672108df01919

    • We’re using Redux selectors too much
      https://medium.com/iadvize-engineering/were-using-redux-selectors-too-much-2d5d24ac92d5

    • Stale props and zombie children in Redux2019-09-09
      https://kaihao.dev/posts/Stale-props-and-zombie-children-in-Redux

    • Profile a React App for Performance
      https://kentcdodds.com/blog/profile-a-react-app-for-performance

    • Amelia Wattenberger
      https://wattenberger.com/blog/react-hooks

    • CSS Modules with React: The Complete Guide
      https://blog.yipl.com.np/css-modules-with-react-the-complete-guide-a98737f79c7c

    • The ultimate guide to drag and drop in React
      https://blog.logrocket.com/drag-and-drop-in-react/

    • State Colocation will make your React app faster
      https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster

    • React Boston | mcrowder65
      https://testingreactboston.netlify.com/about-me

    • Reasons to learn Redux as a JavaScript Developer
      https://www.robinwieruch.de/redux-javascript

    • Performance Testing React With Anonymous Functions
      https://www.matthewgerstman.com/tech/performance-testing-anonymous-functions/

    • Under the hood of React’s hooks system
      https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba

    • Don't Sync State. Derive It!
      https://kentcdodds.com/blog/dont-sync-state-derive-it

    • Creating reusable and composable paramaterized Reselect selectors
      https://flufd.github.io/reselect-with-multiple-parameters/

    • tranbathanhtung/react-fiber-implement
      https://github.com/tranbathanhtung/react-fiber-implement

    • Redux Devtools for Dummies
      https://codeburst.io/redux-devtools-for-dummies-74566c597d7

    • Debugging Redux applications
      http://freecontent.manning.com/debugging-redux-applications/

    • The melting pot of JavaScript
      https://increment.com/development/the-melting-pot-of-javascript/

    • Why Redux makes you a better JavaScript Developer
      https://www.reddit.com/r/reactjs/comments/df0bvv/why_redux_makes_you_a_better_javascript_developer/

    • JS illustrated: Promises
      https://dev.to/kapantzak/js-illustrated-promises-3ign

    • React State: this.state and setState (Legacy)
      https://www.robinwieruch.de/react-state

    • Good Action Hygiene with NgRx Mike Ryan
      https://www.youtube.com/watch?v=JmnsEvoy-gY

    • Portals with Context
      https://reacttraining.com/blog/portals-with-context/

    • React hooks... Oops! Part 3 - an effect doesn't run again when its dependencies change
      https://lukaszmakuch.pl/post/react-hooks-oops-part-3-an-effect-does-not-run-again-when-its-dependencies-change/

    • Redux Selectors: A Quick Tutorial
      https://daveceddia.com/redux-selectors/

    • Build your own React
      https://pomb.us/build-your-own-react/

    • Suspense Explained
      https://adamrackis.dev/suspense-explained/

    • A better approach for testing your Redux code
      https://blog.henriquebarcelos.dev/a-better-approach-for-testing-your-redux-code-ck3dnpqnu00uro4s178b8aw3e

    • Why is modern web development so complicated? A long yet hasty explanation: Part 1!
      https://www.vrk.dev/2019/07/11/why-is-modern-web-development-so-complicated-a-long-yet-hasty-explanation-part-1/

    • How to know what to test
      https://kentcdodds.com/blog/how-to-know-what-to-test

    • dmmulroy/talks
      https://github.com/dmmulroy/talks/blob/master/event-driven-redux/slides.pdf

    • Our Redux Anti Pattern
      https://rangle.slides.com/yazanalaboudi/deck

    • How to manage components renderings
      https://breakingjs.com/react-rendering-performances/

    • How the Web Works Part III: HTTP & REST
      https://www.preethikasireddy.com/post/how-the-web-works-part-iii-http-rest

    • 3 Reasons to Avoid Using ImmutableJS With Redux
      https://medium.com/better-programming/3-reasons-to-avoid-using-immutablejs-with-redux-b0109d0123e8

    • An abbreviated history of JavaScript package managers
      https://medium.com/@MattGoldwater/an-abbreviated-history-of-javascript-package-managers-f9797be7cf0e

    • The Many Jobs of JS Build Tools
      https://www.swyx.io/writing/jobs-of-js-build-tools

    • React Tutorial: An Overview and Walkthrough
      https://www.taniarascia.com/getting-started-with-react/

    • Using Redux with React Hooks
      https://thoughtbot.com/blog/using-redux-with-react-hooks

    • ‌‌
      https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5

    • Implementing Undo/Redo Functionality in Redux using Immer
      https://techinscribed.com/implementing-undo-redo-functionality-in-redux-using-immer/

    • A journey through the implementation of the useState hook
      https://newline.co/@CarlMungazi/a-journey-through-the-usestate-hook--a4983397

    • The complete guide to building headless interface components in React
      https://blog.logrocket.com/the-complete-guide-to-building-headless-interface-components-in-react/

    • React with TypeScript: Best Practices
      https://www.sitepoint.com/react-with-typescript-best-practices/

    • Redux Explained in One Simple Sentence
      http://evanxmerz.com/blog/index.php/2020/01/18/redux-explained-in-one-simple-sentence/

    • Dillon Mulroy on Twitter
      https://twitter.com/dillon_mulroy/status/1218915941003620353

    • Restorable Randomness in a Redux App, Part 1 – Getting Started
      https://spin.atomicobject.com/2020/01/21/redux-restorable-randomness/

    • Redux is half of a pattern (1/2)
      https://dev.to/davidkpiano/redux-is-half-of-a-pattern-1-2-1hd7

    • Restorable Randomness in a Redux App, Part 2 – Middleware & Reducers
      https://spin.atomicobject.com/2020/01/22/randomness-redux-middleware/

    • What React Does (and Doesn't Do)
      https://daveceddia.com/what-react-does/

    • Immutable.js’s toJS Should be Avoided
      https://medium.com/@benlorantfy/immutable-jss-tojs-should-be-avoided-68b01273f29

    • React Libraries in 2020
      https://www.robinwieruch.de/react-libraries

    • React hooks from scratch
      https://vedranb.com/blog/building-react-hooks/

    • Lowest Common Ancestor
      http://www.samselikoff.com/blog/lowest-common-ancestor/

    • Improve your Redux skills by writing custom middleware
      https://medium.com/javascript-in-plain-english/improve-your-redux-skills-by-writing-custom-middleware-32a70b9dfb25

    • Build a CRUD App in React with Hooks
      https://www.taniarascia.com/crud-app-in-react-with-hooks

    • React Component Types: A complete Overview
      https://www.robinwieruch.de/react-component-types

    • Deep Dive into Redux Toolkit - The Official toolset for efficient Redux Development (Video)
      https://www.reddit.com/r/reactjs/comments/fbejn2/deep_dive_into_redux_toolkit_the_official_toolset/

    • The JavaScript Beginner's Handbook (2020 Edition)
      https://www.freecodecamp.org/news/the-complete-javascript-handbook-f26b2c71719c/

    • Redux vs. Context vs. State
      https://medium.com/better-programming/redux-vs-context-vs-state-4202be6d3e54

    • Using Redux with React: Complete Tutorial with Real-World Examples (Plain Redux and Redux Toolkit)
      https://www.taniarascia.com/redux-react-guide

    • Redux Devtools: tips & tricks for faster debugging
      https://blog.logrocket.com/redux-devtools-tips-tricks-for-faster-debugging/

    • React Suspense in Practice
      https://css-tricks.com/react-suspense-in-practice/

    • Profile a React App for Performance
      https://kentcdodds.com/blog/profile-a-react-app-for-performance

    • The Beginner's Guide to React
      https://egghead.io/courses/the-beginner-s-guide-to-react

    • React debugging session - Why is this function called hundreds of times?
      https://jkettmann.com/react-debugging-session-hundreds-of-function-calls/

    • Understanding (all) JavaScript module formats and tools
      https://weblogs.asp.net/dixin/understanding-all-javascript-module-formats-and-tools

    • Complete React Tutorial for Beginners (2020)
      https://daveceddia.com/react-tutorial/

    • Auto Effect Pattern with Redux and React Hooks
      https://tech.ebayinc.com/engineering/auto-effect-pattern-with-redux-and-react-hooks/

    • Demystifying React Redux
      https://blog.scottlogic.com/2020/05/01/demystifying-react-redux.html

    • Common mistakes with React Testing Library
      https://kentcdodds.com/blog/common-mistakes-with-react-testing-library

    • An in-depth guide to performance optimization with webpack
      https://blog.logrocket.com/guide-performance-optimization-webpack/

    • Handling errors with async/await and promises
      https://medium.com/@vcarl/handling-errors-with-async-await-and-promises-cd2fea534f08

    • Testing React Components: Complete Guide
      https://www.freecodecamp.org/news/testing-react-hooks/


    • https://www.freecodecamp.org/news/flex-vs-grid

    • How to CSS Style in React
      https://www.robinwieruch.de/react-css-styling

    • Redux made easy with Redux Toolkit and Typescript
      https://www.mattbutton.com/redux-made-easy-with-redux-toolkit-and-typescript/

    • Inside Fiber: in-depth overview of the new reconciliation algorithm in React
      https://indepth.dev/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react/

    • Auto Effect Pattern with Redux and React Hooks
      https://medium.com/ebaytech/auto-effect-pattern-with-redux-and-react-hooks-d7f96b8fca8e

    • Answering Your App's Questions with Redux Selectors
      https://denisw.de/posts/redux-selectors-logic/

    • Death by a thousand useCallbacks
      https://royi-codes.now.sh/thousand-usecallbacks/

    • Case study: Analyzing Notion app performance
      https://3perf.com/blog/notion/

    • Under-the-hood of test runners (e.g Mocha)
      https://craigtaub.dev/under-the-hood-of-test-runners

    • A deep dive into React Context API
      https://blog.logrocket.com/a-deep-dive-into-react-context-api/

    • An in-depth beginner's guide to testing React applications
      https://jkettmann.com/beginners-guide-to-testing-react/

    • Client-Side Architecture Basics [Guide]
      https://khalilstemmler.com/articles/client-side-architecture/introduction/

    • Slides for Programming Courses
      https://marko-knoebl.github.io/slides/

    • florinpop17/app-ideas
      https://github.com/florinpop17/app-ideas

    • The best way to learn React
      https://www.benmvp.com/blog/best-way-to-learn-react/

    • When to useMemo and useCallback
      https://kentcdodds.com/blog/usememo-and-usecallback

    opened by markerikson 1
  • Dead link in react-implementations.md

    Dead link in react-implementations.md

    This particular link leads to a 404 now...

    • Building Your Own React Clone in Five Easy Steps http://blog.javascripting.com/2016/10/05/building-your-own-react-clone-in-five-easy-steps/ Builds a mini-React implementation to illustrate the basic principles
    opened by buoyantair 1
  • Adding a tutorial that is useful for learning - Most Basic React Redux

    Adding a tutorial that is useful for learning - Most Basic React Redux

    Formatting

    Please follow the existing formatting for each entry. In order to get newlines without paragraph breaks, each entry should have two spaces at the end of the line after both the URL and the title. Also, two-space indents before the URL and the description. Example:

    - **Link Title**<space><space>  
    <space><space>http://example.com<space><space>  
    <space><space>Link description here
    

    Result:

    • Link Title
      http://example.com
      Link description here

    Please do not strip whitespace for existing entries!

    opened by gsantoshb 0
  • Suggested resource as an introduction to React Redux

    Suggested resource as an introduction to React Redux

    I had found the link https://www.valentinog.com/blog/redux/ and thought it was a great tutorial for beginners

    opened by AveryTheDev 0
  • Added a tutorial to the Getting Started section

    Added a tutorial to the Getting Started section

    Formatting

    Please follow the existing formatting for each entry. In order to get newlines without paragraph breaks, each entry should have two spaces at the end of the line after both the URL and the title. Also, two-space indents before the URL and the description. Example:

    - **Link Title**<space><space>  
    <space><space>http://example.com<space><space>  
    <space><space>Link description here
    

    Result:

    • Link Title
      http://example.com
      Link description here

    Please do not strip whitespace for existing entries!

    opened by derekcoleman 0
  • Added a resource about Accessibility

    Added a resource about Accessibility

    I was searching through some links and I couldn't find any link regarding accessibility. I think this is quite an important point of modern web applications so I added one link (Disclaimer: I'm the author of the article).

    Formatting

    Please follow the existing formatting for each entry. In order to get newlines without paragraph breaks, each entry should have two spaces at the end of the line after both the URL and the title. Also, two-space indents before the URL and the description. Example:

    - **Link Title**<space><space>  
    <space><space>http://example.com<space><space>  
    <space><space>Link description here
    

    Result:

    • Link Title
      http://example.com
      Link description here

    Please do not strip whitespace for existing entries!

    opened by lucalanca 0
Owner
Mark Erikson
Redux maintainer. Jack-Of-All-Trades code monkey. Collector of interesting links. Answerer of questions. Nerd, geek, gamer.
Mark Erikson
Source Code For the TextUtils React Application from CodeWithHarry YouTube Tutorial.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 65 Dec 2, 2021
Super simple react-anchor tutorial

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

null 16 Nov 22, 2021
This tutorial to guide you how to add react.js into shopify normal theme

Integrate-react.js-into-shopify-theme Tutorial to integrate the react.js into shopify theme https://prnt.sc/1w0rgx0 Step note: you have to run theme w

Roman Gavrilov 1 Oct 28, 2021
The Fullstack Tutorial for GraphQL

How to GraphQL is a fullstack tutorial website to learn all about GraphQL! It was built by Prisma and many amazing contributors. All content on the site is completely free and open-source.

How to GraphQL 8k Nov 25, 2021
Youtube Tutorial showcasing how to create a fullstack NFT mingint dapp.

Emoji Faces NFT Minting dApp This a complete example of fullstack NFT minting dApp. EmojiFaces is built with the purpose of providing an entry point f

codingwithdidem 6 Nov 26, 2021
Generate GitBook style modern docs/tutorial websites using Gatsby + MDX

gatsby-gitbook-starter Kick off your project with this starter to create a powerful/flexible docs/tutorial web apps. Motivation We wanted to create a

Vaishnavi Dwivedi 3 Nov 21, 2021
Desafio de React usando API de clima y bibliotecas Redux + Redux-Saga

React Challenge - Aplicacion de Clima Desarrollo de una aplicación de consulta de clima que pueda visualizar el pronóstico actual, próximos 5 días par

Igna Garcia 1 Oct 29, 2021
Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

Write components once, run everywhere. Compiles to: At a glance Mitosis is inspired by many modern frameworks. You'll see components look like React c

Builder.io 2.8k Dec 2, 2021
This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

null 1k Nov 24, 2021
A website for browsing ECMAScript proposals/champions/specs and more.

proposals.es A website for keeping up to date with ECMAScript proposals. Created with React, TypeScript, and Next.js. Developing Setup Clone this repo

Saad Quadri 85 Nov 29, 2021
React Translator is a Web Interface created for make the creation of locales.json more easier.

React Translator is a Web Interface created for make the creation of locales.json more easier. Theses locales files can be used in the package @oneforx/react-translator

null 0 Nov 25, 2021
Tetromino - A tetris-style game created with React, Redux and TailwindCSS.

Tetromino - A tetris-style game created with React, Redux and TailwindCSS.

Reactgular 119 Nov 22, 2021
A real estate website built using React and Redux for State Management

Rea Estate Website This is a website build using react and redux for state management. I used the compound component pattern of react. This website in

Kevin Caster 12 Nov 8, 2021
A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

A reference project to build a React Redux app in TypeScript, and deploy to GCP Cloud Run

Matthew Lau 4 Nov 27, 2021
Brainn challenge with ReactJs, Typescript, Redux and Cypress.

Exercício de Front-end Introdução A proposta do exercício de front-end da Brainn é ser simples e divertido. Exercício O objetivo é construir uma aplic

Dheyson Alves 2 Nov 9, 2021
React JSON Viewer Component, Extracted from redux-devtools

This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull requests. react-json-tre

Alexander Kuznetsov 988 Nov 22, 2021
Complete token authentication system for react + redux that supports isomorphic rendering.

Simple, secure authentication for react + redux TL;DR - View the Live Demo You can see a complete working example here. The code for the demo is here.

Lynn Dylan Hurley 2.2k Nov 19, 2021
Mozaïk is a tool based on nodejs / react / redux / nivo / d3 to easily craft beautiful dashboards

Mozaïk is a tool based on nodejs / react / redux / d3 to easily craft beautiful dashboards. See demo Features: Scalable layout Themes support Extendab

Raphaël Benitte 3.5k Nov 30, 2021
TypesScript React Redux

Univeristies Assignment Description Create table screen. Create two popup pages for edit and create a program. Table of Contents Installation Getting

Mohamed Ragab 0 Nov 1, 2021