Updates, 2017-03-19

community-resources.md

@@ -51,6 +51,10 @@
   https://github.com/tuchk4/awesome-create-react-app  
   A collection of articles, links, issues, and information on how to use and customize the Create-React-App tool.
 
+- **Planet React**  
+  https://www.planet-react.org/  
+  A blog aggregator that collects posts from dozens of blogs written by members of the React community.  An excellent resource.
+
 
 #### People
 

es6-features.md

@@ -251,4 +251,8 @@
 
 - **A 10-Minute Primer to JS Module Formats, Loaders, and Bundlers**  
   http://jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/  
-  A useful introduction to the various module formats and module tools
+  A useful introduction to the various module formats and module tools
+
+- **History of Javascript: Evolution of JS Modularity**  
+  https://github.com/myshov/history_of_javascript/tree/master/4_evolution_of_js_modularity  
+  A well-researched article that recounts the history and development of Javascript module definition approaches

mobx-tutorials.md

@@ -89,3 +89,11 @@ A great video to understand the differences between MobX and Redux.
 - **Redux vs MobX**  
   https://medium.com/@himrc/redux-vs-mobx-a42c8950f3  
   Some quick pros and cons of each, links to other discussions, and thoughts on when to use them.
+
+- **ReactConf 2017: MobX vs Redux: Comparing the Opposing Paradigms**  
+  https://www.youtube.com/watch?v=76FRrbY18Bs&index=8&list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0  
+  A fantastic presentation by Preethi Kasireddy.  She compares several aspects of Redux and MobX, the general principles behind each, and discusses the pros/cons/tradeoffs in using them.
+
+- **Redux or MobX: What I learned after refactoring a medium-sized React app**  
+  https://dannyherran.com/2017/03/react-redux-mobx-takeaways/  
+  A useful list of takeaways, pros and cons of each library and the impact on an existing React application.

react-ajax.md

@@ -5,6 +5,10 @@
 - **AJAX Requests in React: How and Where to Fetch Data**  
   https://daveceddia.com/ajax-requests-in-react/  
   An overview of where AJAX requests fit into React usage.
+
+- **How to make AJAX requests in React?**  
+  https://medium.com/@baphemot/how-to-make-ajax-requests-in-react-a6a52bb5a8b1  
+  A helpful introduction to making AJAX requests, including libraries to use, where to run requests, and a couple examples of handling "loading..." status.
 
 - **React AJAX Best Practices**  
   http://andrewhfarmer.com/react-ajax-best-practices/  
@@ -23,6 +27,8 @@
   Demonstrates three approaches to structuring AJAX calls (root component, containers, and via Redux middleware), and lists three of the most popular AJAX libraries.
 
 
+
+
 #### Request Implementation Examples
 
 - **Implementing React Redux with GraphQL**  

react-architecture.md

@@ -202,4 +202,14 @@
 
 - **10 React mini-patterns**  
   https://hackernoon.com/10-react-mini-patterns-c1da92f068c5  
-  A collection of simple but useful patterns for writing React code, from basic top-down data flow via props to formatting text for display.
+  A collection of simple but useful patterns for writing React code, from basic top-down data flow via props to formatting text for display.
+
+
+
+#### React Architecture
+
+- **State Architecture Patterns in React**  
+  https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6  
+  https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89  
+  https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391  
+  A multi-part series that discusses several variations on component and state architecture in detail, with thoughts on the pros and cons of each.

react-component-patterns.md

@@ -68,6 +68,10 @@
   https://gist.github.com/markerikson/47fff93c92286db72b22bab5b02e2da3  
   My suggested approach for organizing render function logic for clarity and readability
 
+- **Simplify complex React components with generators**  
+  https://nvbn.github.io/2017/03/14/react-generators/  
+  An interesting alternative to the usual if/else-type logic for conditionally rendering components, by using ES6 generators to yield the right pieces to render.
+
 
 #### React Component Children
 
@@ -91,6 +95,15 @@
   http://mxstbr.blog/2017/02/react-children-deepdive/  
   An in-depth look at the power and capabilities of React's `children` prop, and how children can be reused and modified.  Includes several examples and demos.
 
+- **The "Forwarded Refs" pattern**  
+  https://github.com/reactjs/react-redux/pull/270#issuecomment-175217424  
+  An example of the "forwarded refs" pattern, where a parent component passes a callback through one or more layers of children, it's used as a `ref` callback, and the parent receives the nested DOM element reference directly.
+
+- **React component composition cheatsheet**  
+  https://github.com/xat/react-component-composition-cheatsheet  
+  A useful list of ways to combine components together
+
+
 
 #### React Component Lifecycle
 
@@ -348,7 +361,9 @@
   https://daveceddia.com/open-modal-in-react/  
   An excellent example of how to approach rendering modals in React, by controlling them with props
 
-
+- **Modal window in React from scratch**  
+  https://peteris.rocks/blog/modal-window-in-react-from-scratch/  
+  Walks through creating a Modal component with styling and display logic
 
 
 #### Other Component Patterns
@@ -373,6 +388,10 @@
   https://medium.com/@mirkomariani/functional-components-with-react-stateless-functions-and-ramda-e83e54fcd86b  
   Examples of using Ramda functions to compose together components
 
+- **Composing React Components with Ramda**  
+  https://medium.com/let-s-learn/lets-learn-composing-react-components-with-ramda-5db457997554  
+  Another set of examples showing how to use composition of small functional components to create a larger set of behaviors.
+
 - **"What is the ideal way to pass data to a callback prop?**  
   https://gist.github.com/jazlalli/fdee443405680f96d19211daa15d1d38  
   Discussion and examples of various ways to pass data to callbacks between children and parents

react-forms.md

@@ -93,6 +93,10 @@
   https://goshakkk.name/array-form-inputs/  
   Covers how to build a form that can add and remove entries dynamically, with examples.
 
+- **How to handle forms with just React**  
+  https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f  
+  Describes a different approach for reading and managing form data, besides the usual "controlled inputs" pattern, based on the Javascript FormData object.
+
 
 #### Form Validation
 

react-implementation.md

@@ -117,7 +117,12 @@
 - **React Internals**  
   https://zackargyle.github.io/react-internals-slides/#/  
   An informative slideshow that walks through many aspects of React's implementation and behavior, including rendering, reconciliation, setState, Fiber, and more, with helpful visualizations.
-
+
+ - **Preact Internals**  
+   https://medium.com/@asolove/preact-internals-1-the-easy-parts-3a081fa36205  
+   https://medium.com/@asolove/preact-internals-2-the-component-model-36a05e32957b  
+   A series of posts that walk through the Preact codebase and explain its implementation, as well as the component model.
+
 
 #### React Fiber
 
@@ -135,4 +140,8 @@
 
 - **Why, What, and How of React Fiber**  
   https://www.youtube.com/watch?v=crM1iRVGpGQ  
-  Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase.
+  Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase.
+
+- **ReactConf 2017: A Cartoon Intro to Fiber**  
+  https://www.youtube.com/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0  
+  A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations.

react-performance.md

@@ -250,4 +250,7 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
 - **Performance Optimizations in Redux's `mapStateToProps`**  
   http://cmichel.io/performance-optimizations-in-redux-mapstatetoprops/  
   Some quick tips on how to properly cache and memoize selectors for use in `mapState` functions
-
+
+- **Surprising polymorphism in React applications**  
+  https://medium.com/@bmeurer/surprising-polymorphism-in-react-applications-63015b50abc  
+  A Chrome V8 engine developer digs into the nitty-gritty details of how common Redux reducer patterns result in less-optimized behavior from the JS engine running the code.

react-redux-testing.md

@@ -182,6 +182,14 @@
   https://hackernoon.com/low-effort-high-value-integration-tests-in-redux-apps-d3a590bd9fd5  
   A discussion of the benefits of unit tests vs integration tests, with examples of how to test the various aspects of a Redux app
 
+- **Testing React/Redux Applications**  
+  https://github.com/leocristofani/testing-react-redux-applications  
+  Several useful resources for testing, including tips/guidelines, a sample application with tests, and links to more resources.
+
+- **React + TDD = Love**  
+  https://medium.com/@admm/test-driven-development-in-react-is-easy-178c9c520f2f  
+  A tutorial that walks through a TDD-based approach to building components in an application.
+
 
 #### General Testing, Tools, and Setup
 

react-state-management.md

@@ -50,6 +50,10 @@
 - **How to Work with and Manipulate State in React**  
   https://www.sitepoint.com/work-with-and-manipulate-state-in-react/  
   Covers how to access and update state in components, the difference between state and props, and working with stateless components.
+
+- **Lowest Common Ancestor**  
+  https://blog.embermap.com/lowest-common-ancestor-fbf5d5313a1  
+  An article that discusses the principle of keeping shared state at the "lowest common ancestor" of the components that need it.  Actually talks about Ember, but the concepts are completely applicable to React as well.
 
 
 #### Using `setState`
@@ -84,4 +88,9 @@
 
 - **Functional `setState` is the future of React**  
   https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b  
-  Discusses passing a function to `setState` to perform updates, why that approach is useful, and how that pattern can be used to separate state update logic from component definition
+  Discusses passing a function to `setState` to perform updates, why that approach is useful, and how that pattern can be used to separate state update logic from component definition
+
+- **Does React have a `setState` problem? / `setState() Gate: Navigating Behavior Confusion**  
+  https://twitter.com/i/moments/842710066826530816  
+  https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82  
+  Eric Elliott recently posted a tweet saying that `setState` is bad for learners, and advanced devs have learned to avoid it.  That spawned a large Twitter thread arguing the idea.  Elliott later posted an article explaining his concerns in detail.  Some excellent reading and points to consider all around - the "Moments" link includes a few of the tweets, but the whole thread is worth reading.

react-styling.md

@@ -83,6 +83,10 @@
   https://github.com/MicheleBertoli/css-in-js  
   A repository that contains implementation comparisons between many different CSS-in-JS libraries
 
+- **Comparing CSS in JS Solutions**  
+  http://ludovf.net/blog/comparing-css-in-js-solutions/  
+  An overview of the various CSS-in-JS libraries and how their implementations differ.
+
 
 #### Style Libraries
 

redux-architecture.md

@@ -41,10 +41,6 @@
   https://blog.boldlisting.com/so-youve-screwed-up-your-redux-store-or-why-redux-makes-refactoring-easy-400e19606c71  
   Describes some useful practices for organizing Redux actions, reducers, and selectors.
 
-- **How we reduced boilerplate and handled asynchronous actions with Redux**  
-  https://blog.algolia.com/how-we-reduced-boilerplate-and-handled-asynchronous-actions-with-redux/  
-  A look at conventions that have helped the Algolia team write Redux apps.
-
 - **10 Tips for Better Redux Architecture**  
   https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44  
   A great article covering when and why to use Redux, benefits, and several tips for a better application architecture.
@@ -309,4 +305,12 @@
 
 - **Scaling your Redux App with Ducks**  
   https://medium.freecodecamp.com/scaling-your-redux-app-with-ducks-6115955638be  
-  An overview of a modified version of the "ducks" architecture, with the contents for a given feature in a folder instead of a single file.
+  An overview of a modified version of the "ducks" architecture, with the contents for a given feature in a folder instead of a single file.
+
+- **Implementing Redux is tedious. But it doesn't have to be.**  
+  https://medium.com/@jeswin/implementing-redux-is-tedious-but-it-doesnt-have-to-be-33702a1fb1dd  
+  Describes another "minimal Redux" variation.  Definitely not "idiomatic Redux" usage, but a technically valid implementation.  Some discussion of tradeoffs in the comments.
+
+- **How we reduced boilerplate and handled asynchronous actions with Redux**  
+  https://blog.algolia.com/how-we-reduced-boilerplate-and-handled-asynchronous-actions-with-redux/  
+  A look at conventions that have helped the Algolia team write Redux apps.

redux-techniques.md

@@ -66,6 +66,14 @@
   http://kyleshevlin.com/state-snapshots-in-redux/  
   Describes a useful technique for saving copies of state slices on command, and re-applying those copies at a later point to ensure a known starting point for further actions.
 
+- **"Problems with Flux"**  
+  http://www.code-experience.com/problems-with-flux/  
+  Discusses the idea of having all state updates for an action listed in one place, vs spread throughout the store.  Written shortly after the release of Redux, but definitely relevant.
+
+- **Redux Tree**  
+  https://blog.shakacode.com/redux-tree-efc9e3d22d6e  
+  Looks at structuring a reducer/state tree as "branches" and "leaves", and introduces the idea of an "interaction" to encapsulate all related state changes for a given action, with a library to implement the idea.
+
 
 #### Selectors and Normalization
 
@@ -122,6 +130,10 @@
 - **Dissecting Twitter's Redux Store**  
   https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1  
   An informative look at the contents of the Redux store for Twitter's new mobile site
+
+- **Advanced Redux Entity Normalization**  
+  https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5  
+  Describes a "keyWindow" concept for tracking subsets of entities in state, similar to an SQL "view".  A useful extension to the idea of normalized data.
 
 
 #### UI and Widget Implementations

redux-without-react.md

@@ -50,3 +50,6 @@
   https://emberway.io/using-ember-changeset-with-ember-redux-200a7e46c59a  
   Examples of using a tool called ember-changeset to handle in-progress form edits in conjunction with the ember-redux bindings.
 
+- **Explorations in Adapting Redux to C#**  
+  https://spin.atomicobject.com/2017/03/13/adapting-redux-c-sharp-xamarin/  
+  An informative look at how AtomicObject has a Redux variant in C#

static-typing.md

@@ -96,6 +96,10 @@
 - **Better docs and static analysis**  
   https://blog.scottnonnenberg.com/better-docs-and-static-analysis/  
   A walk through setting up Flow, some possible problems you might encounter, and ways to customize and improve the typing process.
+
+- **Flow type cheat sheet**  
+  http://www.saltycrane.com/blog/2016/06/flow-type-cheat-sheet/  
+  A comprehensive list of built-in Flow types
 
 
 #### React, Redux, and Static Types

webpack-advanced-techniques.md

@@ -74,6 +74,10 @@
   https://github.com/jmblog/how-to-optimize-momentjs-with-webpack  
   Tips on using IgnorePlugin and ContextReplacementPlugin to strip out uneeded locales from Moment
 
+- **Declaratively Rendering Earth in 3D, Part 1: Building a Cesium + React App with Webpack**  
+  http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/  
+  Shows how to configure Webpack to load the Cesium 3D globe library, and how to set up a Webpack config that uses DllPlugin to build a separate bundle for Cesium.
+
 
 #### Code Splitting and Chunking
 
@@ -217,6 +221,10 @@
 - **"Difference between Webpack HMR and React-Hot-Loader?"**  
   https://github.com/facebookincubator/create-react-app/issues/1063#issuecomment-261788083  
   Dan Abramov clarifies that HMR is the API and capability that Webpack gives you, while React-Hot-Loader is a specialized tool that uses the HMR API to automatically add HMR handling to React code.
+
+- **Hot reload all the things!**  
+  https://hackernoon.com/hot-reload-all-the-things-ec0fed8ab0  
+  A tutorial that shows how to use Webpack and HMR to hot-reload both front-end and back-end code for faster development.
 
 
 #### Other Tips and Examples

webpack-tutorials.md

@@ -210,6 +210,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
   https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172  
   Explains some of the changes in Webpack 2 configuration, and discusses some approaches for handling dev/prod configuration environments.
 
+- **Webpack 2 Loader Variations**  
+  http://andrewhfarmer.com/webpack-2-loader-variations/  
+  A clear and informative overview of the various equivalent ways to write the loader-related parts of a Webpack 2 config file.
+
 
 #### Webpack Configuration Utilities