Updates, 2017-11-26

javascript-resources.md

@@ -71,6 +71,10 @@ While this list is primarily focused on learning React and Redux, and generally
   http://exploringjs.com/  
   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.
 
+- **The Modern Javascript Tutorial**  
+  http://javascript.info/  
+  A large tutorial series that covers all aspects of the modern Javascript language (basic syntax, data types, objects, and advanced function usage), as well as a section on using Javascript to interact with the DOM in web pages.
+
 - **23 Free Javascript Books**  
   https://hackerlists.com/free-javascript-books/  
   A list of many Javascript books available for free online.
@@ -102,15 +106,9 @@ While this list is primarily focused on learning React and Redux, and generally
   http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/  
   A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`.  The second edition includes more of a focus on ES6 and newer features.
 
-- **The Modern Javascript Tutorial**  
-  http://javascript.info/  
-  A large tutorial series that covers all aspects of the modern Javascript language (basic syntax, data types, objects, and advanced function usage), as well as a section on using Javascript to interact with the DOM in web pages.
-
 - **The JavaScript Way**  
   https://github.com/bpesquet/thejsway  
   A modern introduction to the JavaScript language, intended to be beginner-friendly, comprehensive, standards-aligned with the latest syntax and good practices, and hands-on.
-
-
 
 
 #### Online Code Editors

react-ajax.md

@@ -38,7 +38,9 @@
   https://appendto.com/2017/01/3-libraries-and-3-ways-to-handle-ajax-in-react-apps/  
   Demonstrates three approaches to structuring AJAX calls (root component, containers, and via Redux middleware), and lists three of the most popular AJAX libraries.
 
-
+- **How to make AJAX API calls in React**  
+  https://www.techiediaries.com/react-ajax/  
+  Looks at common libraries that are used for making AJAX calls in React apps, discusses which lifecycle methods to use for starting AJAX calls, and gives examples of using `fetch` to make AJAX calls.
 
 
 #### Request Implementation Examples

react-component-composition.md

@@ -222,4 +222,8 @@
 
 - **Simplifying life with React render callbacks**  
   https://medium.com/@adamrackis/simplifying-life-with-react-render-callbacks-cb37d58e55  
-  Compares several approaches for passing data from a parent component directly to a child, including cloning children, using a HOC, and using render props.
+  Compares several approaches for passing data from a parent component directly to a child, including cloning children, using a HOC, and using render props.
+
+- **React Developer's Everyday Struggle - Extending Big Applications**  
+  https://blog.callstack.io/react-developers-everyday-struggle-extending-big-applications-84ec4e62e2ad  
+  Looks at different possible solutions to handling form inputs and validation logic, including existing form libs, a validation HOC, and a function-as-children approach.

react-component-patterns.md

@@ -51,6 +51,10 @@
   https://hackernoon.com/10-react-mini-patterns-c1da92f068c5  
   Ten useful patterns for working with React components, including data flow, techniques for working with inputs, controlling CSS usage, switching between components, and more.
 
+- **React Training: Advanced React - React Patterns**  
+  https://reacttraining.com/patterns/  
+  The lecture videos from React Training's "Advanced React" course.  The videos themselves are now free.  Covers topics like declarative vs imperative, compound components, context, Higher Order Components, render props, and controlled components.
+
 
 #### Component Definition Approach Comparisons
 
@@ -136,6 +140,10 @@
   https://medium.com/@RubenOostinga/avoiding-deeply-nested-component-trees-973edb632991  
   Examples of `children` to include arbitrary content inside of a component for more flexible handling of presentation and composition.
 
+- **Tips on Creating Reusable Components**  
+  http://dylanpaulus.com/reactjs/2017/09/08/tips-on-creating-reusable-components.1/  
+  Examples of using `children` and other props to make components more composable and reusable.
+
 
 #### React Component Lifecycle
 
@@ -473,4 +481,9 @@
 
 - **React without `this`**  
   https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160  
-  Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword
+  Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword
+
+- **You don't need to know "Dependency Injection"**  
+  https://hackernoon.com/you-dont-need-to-know-dependency-injection-2e9d2ba1978a  
+  Looks at the concept of dependency injection, and three ways that that relates to React components and props.
+

react-implementation.md

@@ -227,3 +227,6 @@
   http://makersden.io/blog/look-inside-fiber/  
   Traces through the source code for React 16 / React Fiber, starting with the main `render()` function and diving down from there through the system.
 
+- **What is React Fiber?**  
+  https://giamir.com/what-is-react-fiber  
+  An overview of the React Fiber rewrite, and how React's reconciler has been rewritten to improve performance and make rendering more flexible.

react-native.md

@@ -103,4 +103,8 @@
 - **A Year of React Native: Styling**  
   https://madebymany.com/stories/a-year-of-react-native-styling-part-1  
   https://madebymany.com/stories/a-year-of-react-native-styling-part-2  
-  Looks at ways that styling in RN differs from styling on the web, and useful patterns for organizing styling logic in RN apps.
+  Looks at ways that styling in RN differs from styling on the web, and useful patterns for organizing styling logic in RN apps.
+
+- **React Native app performance: Major issues and insights on improving your app's performance**  
+  https://www.simform.com/react-native-app-performance/  
+  A detailed look at common causes of perf issues in RN, such as memory leaks, large app size, and slow rendering, and discusses various solutions.

react-performance.md

@@ -178,6 +178,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   https://medium.com/riipen-engineering/the-virtual-dom-and-its-anti-patterns-aa4c523d00ed  
   First in a 3-part series discussing causes of slow components and wasteful rendering.  Later posts will cover ways to optimize Redux usage, and tools to find bottlenecks that can be optimized.
 
+- **How to greatly improve your React app performance**  
+  https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6  
+  Discusses React perf issues like bad `sCU` implementations, changing the DOM too fast, and event/callback usage, with possible solutions.  
+
 
 #### Code Splitting and Progressive Apps
 
@@ -345,4 +349,12 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
 
 - **Measuring performance gains - AngularJS to React (with Redux or MobX)**  
   https://medium.com/@guptagaruda/measuring-performance-gains-angularjs-to-react-with-redux-or-mobx-fb221517455  
-  A highly detailed article that investigates and benchmarks performance between an Angular 1.x app and equivalent React+Redux and React+MobX apps in a variety of real-world use cases.  Excellently written and researched.
+  A highly detailed article that investigates and benchmarks performance between an Angular 1.x app and equivalent React+Redux and React+MobX apps in a variety of real-world use cases.  Excellently written and researched.
+
+- **The most unknown Redux performance trick**  
+  https://medium.com/@jidefr/the-most-unknown-redux-performance-trick-986fdfe871fa  
+  Examples of how `connect`'s lesser-known `areStatesEqual` option can be used to skip unnecessary re-renders.
+
+- **Optimizing Redux Components**  
+  https://medium.com/riipen-engineering/optimizing-redux-components-cbaad062abc7  
+  Discusses Redux-specific perf optimizations, such as avoiding unnecessary work in `mapState` functions, memoization, and advanced comparison function options for `connect`.

react-redux-testing.md

@@ -145,6 +145,16 @@
   https://medium.com/bluepick-dev/testing-with-semantic-ui-react-and-enzyme-7cb39228a5ea  
   Specific tips and advice for testing components that use the Semantic-UI-React library, including advice on focusing your tests on your own components' behavior.  The tips are also applicable to React component testing in general.
 
+- **Implementing basic Component tests using Jest and Enzyme**  
+  https://hackernoon.com/implementing-basic-component-tests-using-jest-and-enzyme-d1d8788d627a  
+  Describes the Jest and Enzyme tools, how they're used for testing React components, and gives examples of some simple tests.
+
+- **Snapshot testing React Components with Jest**  
+  https://medium.com/@lukepierotti/snapshot-testing-react-components-with-jest-744a1e980366  
+  Covers the basics of snapshot testing, and how it can be used to test React components to ensure the rendering is consistent.
+
+
+
 #### Redux
 
 - **Simple React/Redux Testing**  
@@ -277,6 +287,10 @@
 - **Recipes for Testing Redux Actions and Reducers**  
   https://densitylabs.io/blog/recipes-for-testing-redux-actions-and-reducers  
   Useful examples of testing Redux code, using redux-thunk, chai, axios, redux-mock-store, and axios-mock-adapter.
+
+- **Unit Testing Redux Connected Components**  
+  https://medium.com/@lukepierotti/unit-testing-redux-connected-components-692fa3c4441c  
+  Discusses testing connected components with a mock store vs testing `mapState` functions and plain components separately.
 
 
 

react-routing.md

@@ -55,6 +55,10 @@
   https://appdividend.com/2017/09/12/react-router-tutorial-example-scratch/  
   A short tutorial demonstrating use of React Router v4
 
+- **React Router v4 Unofficial Migration Guide**  
+  https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a  
+  Practical advice and specific steps needed to migrate an app from React-Router v3 to v4.
+
 
 #### Routing with Redux
 

react-styling.md

@@ -39,6 +39,11 @@
   https://medium.com/gitconnected/a-brief-history-of-css-in-js-how-we-got-here-and-where-were-going-ea6261c19f04  
   A pair of articles that look at the history of CSS, discuss the problems it tries to solve, 
   and describe the use of CSS-in-JS as a way to help solve certain use cases in today's apps.
+
+- **Four ways to style React components**  
+  https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822  
+  Quick examples of plain CSS, CSS modules, inline styles, and the styled-components library.
+
 
 #### Components and Styling
 

react-techniques.md

@@ -39,6 +39,10 @@
   https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/  
   An excellent article that describes the concepts of state machines, how they relate to applications, and how they can be applied to help manage React component behavior.
 
+- **Adventures in creating a React component library with Create React App and TypeScript**  
+  https://medium.com/@stokedbits/adventures-in-creating-a-react-component-library-with-create-react-app-and-typescript-26d1116a7d87  
+  Walks through the process of using the TS+CRA starter kit as a baseline for building and publishing a component library.
+
 
 #### Security
 

react-tutorials.md

@@ -144,6 +144,9 @@
   https://medium.freecodecamp.org/everything-you-need-to-know-about-react-eaedf53238c4  
   A comprehensive tutorial that covers topics like components, rendering, JSX, state, event handling, async behavior, props, and refs.  
 
+- **Introduction to React**  
+  http://ivanjurina.com/2017/11/19/introduction-to-react/  
+  Useful notes and info on the basics of React, from someone who just learned React.
 
 
 #### React Concept Overviews

redux-architecture.md

@@ -296,6 +296,14 @@
 - **How We Built Our UI**  
   https://www.endgame.com/blog/technical-blog/how-we-built-our-ui  
   The Endgame team discusses why they rebuilt their app's UI, why they picked React and Redux, use of REdux-Saga to manage business logic, and how the data workflow fits together.
+
+- **Best practices with React and Redux application development**  
+  https://developers.redhat.com/blog/2017/11/15/best-practices-react-redux-web-application-development/  
+  A wide variety of suggestions, including use of TypeScript, customizing build configurations, managing dependencies, handling callbacks with params, using selectors, and more.
+
+- **How Bitmovin used React/Redux to Develop Its New Dashboard**  
+  https://bitmovin.com/bitmovin-used-reactredux-to-develop-new-dashboard/  
+  The Bitmovin team describes their React+Redux architecture, including how they approached organizing Redux actions.
 
 
 #### Encapsulation and Reusability
@@ -384,6 +392,10 @@
 - **Building a simple Redux library**  
   https://medium.com/@tcclevela/building-a-simple-redux-library-44ce4f004822  
   Looks at important steps to follow when building a Redux addon library: only use middleware if really needed, keep things simple, and encapsulate abstractions.  Shows a particularly good example of using selectors in the library to encapsulate state lookups, and allowing the end user to initialize the selectors so that the data can be mounted anywhere in the state tree the user wants.
+
+- **Namespacing Actions for Redux**  
+  https://kickstarter.engineering/namespacing-actions-for-redux-d9b55a88b1b1  
+  Looks at ways to namespace actions so that multiple copies of components and logic can work in an isolated manner, especially in conjunction with the `redux-loop` library.
 
 
 #### Variations on Redux Architectures
@@ -477,4 +489,12 @@
 
 - **The joy of React+Redux with Elixir/OTP**  
   https://limenius.com/elixir-otp-react-redux/  
-  Covers building a Redux-based client that receives update messages from an Elixir server.
+  Covers building a Redux-based client that receives update messages from an Elixir server.
+
+- **Reslice - Yet Another Way of Managing Scale in React and Redux**  
+  https://medium.com/@mike.es6.programmer/reslice-yet-another-way-of-managing-scale-in-react-and-redux-223971139d6b  
+  Discusses the Reslice toolkit, how it wraps up Redux+Reselect+React-Redux, and how it differs from a standard React+Redux architecture.
+
+- **"How to deal with dumb REdux views that import containers?"**  
+  https://www.reddit.com/r/javascript/comments/7eavyx/how_to_deal_with_dumb_redux_views_that_import/  
+  Interesting discussion on ways to organize nested Redux-connected components for reusability.

redux-middleware.md

@@ -46,6 +46,10 @@
   http://www.slideshare.net/visualengin/workshop-22-reactredux-m  
   A slideshow that explains how Redux middleware work, with several helpful visualizations
 
+- **Understanding Redux Middleware and Writing Custom Ones**  
+  https://dev.to/imwiss/understanding-redux-middleware-and-writing-custom-ones  
+  Describes the concept of middleware in Redux, possible use cases, and gives an example of writing a middleware to handle caching.
+
 
 #### Middleware Techniques
 

redux-reducers-selectors.md

@@ -196,4 +196,8 @@
 
 - **Usage of Reselect in a React-Redux Application**  
   https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application  
-  Discusses the importance of memoized selectors for performance, and good practices for using Reselect.
+  Discusses the importance of memoized selectors for performance, and good practices for using Reselect.
+
+- **Redux: Up your game with selectors**  
+  https://medium.com/@emilycoco/redux-up-your-game-with-selectors-9aee3a6928ae  
+  A quick look at the benefits of using selector functions to encapsulate looking up data from the store.

redux-side-effects.md

@@ -281,6 +281,10 @@
   https://sandstorm.de/de/blog/post/states-and-react-step-by-step-user-interaction-with-state-machines.html  
   Demonstrates managing "snackbar" popup notifications using sagas to show and hide the popups
 
+- **Taming Redux with Sagas**  
+  https://objectpartners.com/2017/11/20/taming-redux-with-sagas/  
+  A good overview of Redux-Saga, including info on generator functions, use cases for sagas, using sagas to deal with promises, and testing sagas.
+
 
 
 #### Other Side Effect Approaches

redux-techniques.md

@@ -144,6 +144,10 @@
   https://blog.prismatik.com.au/redux-and-json-schema-c63368931143  
   Short discussion of the overall benefits of using JSON Schema to define data structures, and a Redux library that helps use those for Redux.
 
+- **A Simple Way to Implement Timers and Timeouts in Redux**  
+  https://spin.atomicobject.com/2017/11/20/timers-timeouts-redux/  
+  A quick example of storing a "current time" value and timers as "expire times".
+
 
 
 #### Reducing Boilerplate
@@ -180,6 +184,22 @@
 - **ARC - Simplifying async requests in Redux apps**  
   https://medium.com/front-end-hacking/arc-simplifying-async-requests-in-redux-apps-e8052b874216  Describes the "async action" pattern commonly used with Redux, and how the ARC library can simplify the process of generating actions, action creators, and reducers that work with async actions.
 
+- **Abstracting Vuex/Redux Action Patterns**  
+  https://medium.com/coding-stones/abstracting-vuex-redux-action-patterns-8df36b0e2fcc  
+  Examples of generating action types and action creators that use similarly-formatted actions (such as FETCH_DATA_REQUEST/SUCCESS/ERROR).
+
+- **Stop writing mapStateToProps, start using declarative models**  
+  https://medium.com/@kyleramirez/part-1-stop-writing-mapstatetoprops-start-using-declarative-models-ce72716db9fc  
+  https://medium.com/@kyleramirez/part-2-stop-writing-mapstatetoprops-start-using-declarative-models-403734a5f9ee  
+  Discusses a library called ReactiveRecord, which encapsulates the process of defining client-side models for REST APIs, fetching data, and reading it from the store.
+
+- **"Comments on 'reducing boilerplate'"**  
+  https://www.reddit.com/r/reactjs/comments/7069ct/i_love_redux_but_i_hate_the_boilerplate/dn1mj4s/  
+  A great comment on what "boilerplate" actually means, how people optimize too much for initial dev time, and how Redux improves long-term maintainability.
+
+- **How to delete hundreds (or thousands) of lines of ReduxJS code**  
+  https://medium.com/@ianduvall/how-to-delete-hundreds-or-thousands-of-lines-of-reduxjs-code-4736b34f7345  
+  Short examples of reusable action creator and reducer logic for handling "loading" state for multiple features in an app.
 
 
 #### Network Management
@@ -208,3 +228,7 @@
 - **Redux Websocket Integration**  
   https://medium.com/@ianovenden/redux-websocket-integration-c1a0d22d3189  
   A summary of one possible approach for integrating Websocket functionality into a React/Redux application architecture.
+
+- **What's the best way to store tokens in Redux?**  
+  https://michaelwashburnjr.com/whats-the-best-way-to-store-tokens-in-redux/  
+  Discusses pros and cons of storing auth tokens in app state vs localStorage, and what code should be responsible for handling the tokens.