React + Redux community articles and references

A list of topics to study before implementing a large and scalable React + Redux application.

• Front-End

  • Organization
  • Micro Frontend and decoupling
  • React
  • React Router
  • React Native
  • Redux
  • Redux Saga
  • Redux Forms
  • Redux Dev Tools
  • Testing
  • Advanced ES6 Features
  • Functional programming
  • Immutability
  • Offline first & Progressive Web Apps
  • Webpack

• CSS

  • CSS Modules
  • Sass
  • Grid System

• Environment

• Shell

• Server-side

  • JSON Web Token
  • Amazon S3

• Libraries to take a look

  • Browser/Server
  • React
  • Redux
  • Yarn

• Others

  • Services
  • React Ecosystem Links

Front-End

Organization

• Project Structure
• How To Scale React Applications
• https://marmelab.com/blog/2015/12/17/react-directory-structure.html
• https://jaysoo.ca/2016/02/28/organizing-redux-application/
• https://tech.okcupid.com/how-okcupid-organizes-its-multi-page-react-app/
• https://www.smashingmagazine.com/2016/09/how-to-scale-react-applications/
• http://engineering.kapost.com/2016/01/organizing-large-react-applications/
• https://hackernoon.com/my-journey-toward-a-maintainable-project-structure-for-react-redux-b05dfd999b5
• Fractal — A react app structure for infinite scale

Micro Frontend and decoupling

• https://www.slideshare.net/mobile/VivianFarrell/scaling-react-and-redux-at-ioof
• https://github.com/neuland/micro-frontends
• https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16

React

• Presentational and Container Components – Dan Abramov – Medium
• How To Scale React Applications – Smashing Magazine
• Advice on large scale React.js apps, rebuilding the biggest social publishing platform for Latam
• Tips For a Better Redux Architecture: Lessons for Enterprise Scale
• Large open source react/redux projects
• sound-redux
• Concepts
  • Higher-Order Components
  • What If React Was Really Only The V in MVC?
  • Mixins Are Dead. Long Live Composition
• Modais & Overlays
  • Scalable Modals with React and Redux
  • https://github.com/souporserious/react-tether

React Router

• A Simple React Router v4 Tutorial
• Switch
• Code Split with Webpack
• Code Split Example
• React router modal-only routes

React Native

• Code Sharing Between React Native and React Web Apps
• Sharing Code between React Web and Native Apps Using redux-saga To Simplify Your Growing React Native Codebase

Redux

• Anti-pattern: reacting to @@INIT action
• redux-define
• Redux Ecosystem
• Usage with React
• ToDo Example
• Large SPA boilerplate use react redux
• [WP] Redux state organization with large application (source)
• How to use Redux on highly scalable javascript applications?
• Redux AJAX request examples
• Usage with React Router
• Timers in React Apps with Redux
• A Beginner's Guide to Redux Middleware (timers)
• Discussion about action constats names (redux issue) (wp example)
• Actions (playing sound) based on Redux store changes
• Flux Standard Action
• Concepts
  • Reusing Reducer Logic (see multireducer)
  • Question: How to choose between Redux's store and React's state?
  • Encapsulation in Redux: the Right Way to Write Reusable Components
• Organization
  • Organizing State
  • Where should my “business logic” go?
  • Where do I put my business logic in a React-Redux application?
  • https://github.com/erikras/ducks-modular-redux
  • Action names reduxjs/redux#786
• Libs
  • Redux Hero Part 3: Choose Wisely (a Fun Introduction to reselect.js)
  • https://github.com/erikras/multireducer
  • https://github.com/DataDog/redux-doghouse
• Convention
  • Where to write to localStorage in a Redux app?
  • A Simple Naming Convention for Action Creators in Redux.js

Redux Saga

• using root saga or multiple sagas
• Managing Side Effects In React + Redux Using Sagas
• Redux Saga: Você no controle das operações assíncronas
• What is the difference between a saga, a process manager and a document-based approach?
• redux-saga - Saga Middleware for Redux to Handle Side Effects - Interview with Yassine Elouafi
• JavaScript Power Tools: Redux-Saga
• Discussions
  • Question: Authentication flow
  • Different ways to watch actions
  • https://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es7-async
  • How to cancel "all"?

Redux Forms

• Redux Forms and Sagas

Redux Dev Tools

https://github.com/gaearon/redux-devtools

• https://github.com/zalmoxisus/redux-devtools-extension
• https://github.com/zalmoxisus/redux-remotedev
• Using Redux Devtools in Production

Testing

• Saga, Testing error handling?
• Real integration tests with React, Redux and Router
• Testing React Router apps with Jest and Enzyme
• Enzyme: JavaScript Testing utilities for React
• Testing Redux
• https://github.com/wix/redux-testkit
• Unit Testing React Components: Jest or Enzyme?
• React and Enzyme example
• Testing Components
• Enzyme
• enzyme-matchers for React
• Am I testing connected components correclty?
• http://redux.js.org/docs/recipes/WritingTests.html

Advanced ES6 Features

• Generators
  • The Hidden Power of ES6 Generators: Observable Async Flow Control
  • The Definitive Guide to the Javascript Generators

Functional programming

• Why care about functional programming? Part 1: Immutability
• What is a Pure Function?-
• What is Thunk
• Functional Programming In JavaScript — With Practical Examples (Part 1) (Functors, Monads)

Immutability

• Efficient implementation of immutable (double) LinkedList
• Anjana Vakil: Immutable data structures for functional JS | JSConf EU 2017

Offline first & Progressive Web Apps

• The App Shell Model
• Offline-First Architecture for Progressive Web Applications and React Native
• redux-offline
• create-react-app + sw-precache = PWA
• https://github.com/GoogleChrome/sw-precache
• Progressive Web Apps with React.js: Part 3 — Offline support and network resilience
• Redux Persist
• How to refresh the page after a ServiceWorker update?
• Service Worker Issues
  • https://stackoverflow.com/questions/41891031/refresh-page-on-controllerchange-in-service-worker
  • https://stackoverflow.com/questions/41502870/service-worker-reload-page-on-cache-update
  • https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js

Webpack

• A beginner's guide to Code Splitting with React Router and Webpack 2
• Code Spliting
  • https://github.com/insin/react-examples/tree/master/code-splitting-redux-reducers
  • Extract text chunks
• Plugins
  • https://github.com/dominique-mueller/simple-progress-webpack-plugin
  • https://github.com/faceyspacey/extract-css-chunks-webpack-plugin
• Loaders
  • https://survivejs.com/webpack/loading/images/
• Hot Loading
  • HMR issue with modules
  • Redux HMR
  • https://github.com/gaearon/react-hot-loader
  • https://webpack.js.org/guides/hot-module-replacement/
  • https://github.com/KleoPetroff/react-webpack-boilerplate
• Split Config
  • https://github.com/react-boilerplate/react-boilerplate/commit/d61413074e1463e1f959e59878381e968558745b
  • https://github.com/goldhand/cookiecutter-webpack/tree/master/%7B%7Bcookiecutter.repo_name%7D%7D/config
• Cache
  • https://webpack.js.org/guides/caching/
• DllPlugin
  • https://robertknight.github.io/posts/webpack-dll-plugins/
  • https://engineering.bitnami.com/articles/optimizing-your-webpack-builds.html
• Issues
  • Moment locale issue
  • Generate CSS from chunks

CSS

CSS Modules

• CSS Modules by Example
• CSS Modules — Solving the challenges of CSS at scale
• CSS Modules - Welcome to the Future

Sass

• https://github.com/shakacode/sass-resources-loader (to load sass mixins, functions, etc in every file)

Grid Systems

• http://gridlex.devlint.fr/
• http://flexboxgrid.com/

Environment

• .env metodology
• https://www.npmjs.com/package/dotenv

Shell

• Command-line interface description language

Server-side

JSON Web Token

• Introduction to JSON Web Token
• Securing React Redux Apps With JWT Tokens
• Express JWT Permissions

Amazon S3

• Static Website on S3
• Deploying create-react-app to S3 and CloudFront

Libraries to take a look

Browser/Server

• https://www.npmjs.com/package/debug (example)
• https://github.com/mafintosh/is-my-json-valid
• https://codemix.github.io/flow-runtime/#/

React

• https://github.com/atlassian/react-beautiful-dnd (drag-drop)
• https://github.com/paypal/react-autocompletely (autocomplete)
• https://github.com/souporserious/react-tether (overlays)

Redux

• https://github.com/acdlite/redux-actions
• https://github.com/acdlite/redux-promise
• https://github.com/gaearon/redux-thunk
• https://github.com/jaredpalmer/formik
• https://github.com/kuy/redux-tower

Yarn

• Interactive Upgrade

Others

Services

Package Quality

React Ecosystem Links

• https://github.com/markerikson/react-redux-links