Updates, 2016-12-27

community-resources.md

@@ -43,6 +43,10 @@
   https://github.com/mightyCrow/awesome-react-talks  
   A curated list of talks about React or topics related to React.
 
+- **230 Curated Resources and Tools for Building Apps with React**  
+  https://appendto.com/2016/12/230-resources-and-tools-for-building-apps-with-react-js/  
+  A useful list of articles, libraries, and tools that cover the range of React development.
+
 
 #### People
 

es6-features.md

@@ -75,10 +75,6 @@
 
 
 #### Specific Features
-
-- **Powering Javascript with Generators**  
-  http://appendto.com/2016/06/powering-javascript-with-generators  
-  A useful introduction to the generators feature in ES6.
 
 - **Metaprogramming in ES6: Symbols, Reflection, and Proxies**  
   https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/  
@@ -102,6 +98,29 @@
   http://untangled.io/in-depth-es6-destructuring-with-assembled-avengers/  
   A thorough set of examples for ES6's destructuring feature
 
+- **My New Favorite ES6 Toy: Destructured Objects as Parameters**  
+  https://css-tricks.com/new-favorite-es6-toy-destructured-objects-parameters/  
+  An example of using objects and destructuring to act like named parameters
+
+- **Extract Nested Data from Arrays and Objects with Destructuring Assignment**  
+  https://angulartoreact.com/es6-destructuring/  
+  Examples of how destructuring can make it easy to create new variables from other data.
+
+- **The Reflect API of ES6**  
+  http://www.zsoltnagy.eu/the-reflect-api-of-es6/  
+  An overview of the Reflect API, which allows some complex metaprogramming capabilities.
+
+
+#### Generators
+
+- **Javascript Generators**  
+  https://blog.ragnarson.com/2016/12/15/javascript-generators.html  
+  A nice readable introduction to what generator functions are and how to use them
+
+- **Powering Javascript with Generators**  
+  http://appendto.com/2016/06/powering-javascript-with-generators  
+  A useful introduction to the generators feature in ES6.
+
 - **Using ES6 Generators and Yield to Implement Async Workflows**  
   https://www.bennadel.com/blog/3123-using-es6-generators-and-yield-to-implement-asynchronous-workflows-in-javascript.htm  
   A dive into how generators work, and how they can be used to handle async behavior
@@ -114,13 +133,6 @@
   http://goshakkk.name/javascript-generators-understanding-sample-use-cases/  
   A simple thinking pattern for easily understanding generators, plus 3 practical applications.
 
-- **My New Favorite ES6 Toy: Destructured Objects as Parameters**  
-  https://css-tricks.com/new-favorite-es6-toy-destructured-objects-parameters/  
-  An example of using objects and destructuring to act like named parameters
-
-- **Extract Nested Data from Arrays and Objects with Destructuring Assignment**  
-  https://angulartoreact.com/es6-destructuring/  
-  Examples of how destructuring can make it easy to create new variables from other data.
 
 
 #### Promises

immutable-data.md

@@ -86,3 +86,7 @@
 - **Immutable.js: An Introduction with examples written for humans**  
   http://untangled.io/immutable-js-an-introduction-with-examples-written-for-humans/  
   A detailed series of tutorials explaining how to use Immutable.js's API
+
+- **Seamless-Immutable: An Alternative to Immutable.js**  
+  https://medium.com/@ckoster22/seamless-immutable-an-alternative-to-immutablejs-12795d6bf577  
+  Examples of how to use the Seamless-Immutable library, and how it compares to Immutable.js

javascript-resources.md

@@ -45,7 +45,9 @@ While this list is primarily focused on learning React and Redux, and generally
   https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225  
   Extensive suggestions for resources to use when learning Javascript
 
-
+- **Array iteration methods summarized**  
+  https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff  
+  An explanation of all the different Array methods that loop over the array, what they do, and when they should be used
 
 #### Tutorials, Books, and Courses
 

project-structure.md

@@ -32,6 +32,8 @@
 
 - **Rules for Structuring (Redux) Applications**  
   http://jaysoo.ca/2016/02/28/organizing-redux-application/  
+  http://jaysoo.ca/2016/02/28/applying-code-organization-rules-to-concrete-redux-code/  
+  http://jaysoo.ca/2016/12/12/additional-guidelines-for-project-structure/  
   Gives several useful rules for structuring code, with examples.
 
 - **A Better File Structure for React/Redux Applications**  

react-architecture.md

@@ -83,6 +83,10 @@
   https://www.reddit.com/r/reactjs/comments/5gmywc/what_were_the_biggest_aha_moments_you_had_while/  
   Some great discussion of important concepts and things to understand about React.
 
+- **React "aha" moments**  
+  https://tylermcginnis.com/react-aha-moments/  
+  Tyler McGinnis shares some of his own "aha" moments in thinking about React
+
 
 #### React Best Practices
 
@@ -153,4 +157,12 @@
 
 - **The Top 5 [Tips] of Effective React**  
   https://code.kiwi.com/the-top-5-of-effective-react-984e54cceac3  
-  Tips include using container/presentational components, keeping components simple, and more.
+  Tips include using container/presentational components, keeping components simple, and more.
+
+- **Advice on large scale React apps - rebuilding the social publishing platform for Latam**  
+  https://medium.com/taringa-on-publishing/advice-on-large-scale-react-js-apps-rebuilding-the-biggest-social-publishing-platform-for-latam-1f4c8fa35a4f  
+  Lessons learned from migrating a PHP application to a universal React/Redux/Webpack application, including introducing React to a team, documentation, types, and more.
+
+- **11 lessons learned as a React contractor**  
+  https://medium.com/@jolyon_russ/11-lessons-learned-as-a-react-contractor-f515cd0491cf  
+  A number of useful tips, including using multiple small components instead of one customizable one, migrating build processes, keeping things simple, and more.

react-component-patterns.md

@@ -2,6 +2,8 @@
 
 **Related topics**:
 - [Thinking in React](./thinking-in-react-and-flux.md): Articles discussing ways to think about React applications and component structure
+- **React Implementation and Concepts**: Includes articles that explain the differences between "components", "elements", and "instances"
+
 
 #### Terms and Concepts
 
@@ -124,6 +126,14 @@
   https://medium.com/@delveeng/react-and-flux-in-production-best-practices-c87766c57cb6  
   Delve's practice of describing components as "containers", "smart", and "dumb"
 
+- **Content vs Container**  
+  https://hackernoon.com/content-vs-container-e0a1ada681c1  
+  General advice for determining component responsibilities in terms of content, layout, and logic
+
+- **The React + Redux Container Pattern**  
+  http://www.thegreatcodeadventure.com/the-react-plus-redux-container-pattern/  
+  Explanation and examples of "container" and "presentational" components and their responsibilities.  Uses Redux for the examples, but the principles apply to "just" React as well.
+
 
 #### Higher-Order Components
 
@@ -192,6 +202,10 @@
   https://www.okgrow.com/posts/compose-react-sphoc  
   Thoughts and examples of composing multiple small focused HOCs together into a final combined HOC
 
+- **What are Higher Order Components?**  
+  https://benmccormick.org/2016/12/14/what-are-higher-order-components/  
+  A short, simple explanation of what an HOC is, and how they can be used
+
 
 #### Wrapping Non-React Code
 
@@ -224,6 +238,21 @@
   Looks at how to incrementally add some React-based functionality into an existing app, including interaction with jQuery.
 
 
+#### Modal Dialogs
+
+- **How to Render Components Outside the Main React App**  
+  https://blog.komand.com/how-to-render-components-outside-the-main-react-app  
+  An example of a technique that's also know as the "portal" approach, commonly used for rendering modals on top of the rest of an application. 
+
+- **Modals in React**  
+  https://medium.com/@david.gilbertson/modals-in-react-f6c3ff9f4701  
+  A demonstration of building a reusable modal component using the "portals" technique
+
+- **Modal Dialogs in React**  
+  https://daveceddia.com/open-modal-in-react/  
+  An excellent example of how to approach rendering modals in React, by controlling them with props
+
+
 #### Other Component Patterns
 
 - **Dynamically Rendering React Components**  
@@ -253,14 +282,7 @@
 - **"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
-
-- **How to Render Components Outside the Main React App**  
-  https://blog.komand.com/how-to-render-components-outside-the-main-react-app  
-  An example of a technique that's also know as the "portal" approach, commonly used for rendering modals on top of the rest of an application. 
-
-- **Modals in React**  
-  https://medium.com/@david.gilbertson/modals-in-react-f6c3ff9f4701  
-  A demonstration of building a reusable modal component using the "portals" technique
+
 
 - **On Privacy with React Context**  
   https://medium.com/@amireh/on-privacy-with-react-context-aa77ffd08509  

react-forms.md

@@ -48,6 +48,10 @@
 - **Controllable React Components**  
   https://speakerdeck.com/lettertwo/controllable-react-components  
   A slideshow discussing how React components can themselves either be controlled or uncontrolled, and introducing a library to help make components controllable.
+
+- **Collecting data from a wizard form**  
+  https://goshakkk.name/wizard-form-collect-info/  
+  Examples of how to handle data management for a multi-step form
 
 
 #### Form Tutorials and Usage

react-implementation.md

@@ -19,6 +19,10 @@
   https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html  
   A post celebrating React's progress, including a history of how React's concepts came together over time
 
+- **React Elements vs React Components**  
+  https://tylermcginnis.com/react-elements-vs-react-components/  
+  An explanation of how elements represent DOM nodes, what `createElement` does, and how components and rendering relate to elements
+
 
 #### Miniature React Implementations
 
@@ -52,6 +56,7 @@
   Some thoughts on why and how you might want to try writing your own React-alike, and some of the tradeoffs involved in writing something like React.
 
 
+
 #### Implementation and Internals
 
 - **React.js Reconciliation**  
@@ -98,6 +103,10 @@
   http://goshakkk.name/react-custom-renderers/  
   Describes techniques for building custom rendering components that bridge between normal rendering and something like a canvas
 
+- **The Inner Workings of Virtual DOM**  
+  https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf  
+  An in-depth article that digs into how a Virtual DOM implementation works, using Preact as an example.  Includes some detailed flowcharts of their behavior.
+
 
 #### React Fiber
 
@@ -111,4 +120,8 @@
 
 - **React Fiber Resources**  
   https://github.com/koba04/react-fiber-resources  
-  Links and info on the new React Fiber algorithm
+  Links and info on the new React Fiber algorithm
+
+- **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.

react-performance.md

@@ -103,7 +103,9 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
 - **React Snippets: Debug Component performance with ES7 Annotations**  
   https://www.neos.io/blog/react-snippets-debug-component-performance-with-es7-annotations.html  Demonstrates using a custom decorator to wrap components and log information on when and why components re-rendered
 
-
+- **How to Benchmark React Components: The Quick and Dirty Guide**  
+  https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c  
+  Suggestions for using React's Perf API to benchmark component rendering, and use of shouldComponentUpdate to cut down on unnecessary renders.
 
 
 #### Code Splitting and Progressive Apps

react-redux-testing.md

@@ -158,6 +158,10 @@
   https://cafedev.org/article/2016/12/testing-with-wepack-2-inject-loader-karma-mocha-chai-and-sinon/  
   Examples of using these tools to test some complex code, including mocking out dependencies
 
+- **Best practices for testing React components using Mocha, Chai, and Enzyme**  
+  https://reflect.io/blog/js-testing-mocha-chai-enzyme/  
+  A number of useful tips for improving component tests, including use of shallow rendering, avoiding errors while testing, and making test code consistent
+
 
 #### General Testing, Tools, and Setup
 

react-routing.md

@@ -1,5 +1,7 @@
 ### React and Routing
 
+#### Routing
+
 - **Routing React Apps: The Complete Guide**  
   https://scotch.io/tutorials/routing-react-apps-the-complete-guide  
   An in-depth article covering use of React-Router (v2)
@@ -25,4 +27,16 @@
 
 - **How to Handle Routing in React**  
   https://code.tutsplus.com/tutorials/understanding-how-to-handle-routing-in-react--cms-27355  
-  A quick example of using React-Router v2 in a small React app
+  A quick example of using React-Router v2 in a small React app
+
+
+
+#### Authentication
+
+- **How to Build a React Application with User Login and Authentication**  
+  https://stormpath.com/blog/build-a-react-app-with-user-authentication  
+  Builds a small React app from the ground up, with use of React-Router for routing and the Stormpath SDK to handle authentication and authorization.
+
+- **JWT Authentication with React + Redux**  
+  http://www.thegreatcodeadventure.com/jwt-authentication-with-react-redux/  
+  Demonstrates handling sign-in flow, including a dynamic login/logout link, and implementing routes that can only be seen by logged-in users.

react-server-rendering.md

@@ -19,4 +19,8 @@
 
 - **Server Side React**  
   https://remysharp.com/2016/12/07/server-side-react  
-  A well-written article detailing lessons learned trying to use React to render on the server, including tools used, bumps in the road and links to further resources
+  A well-written article detailing lessons learned trying to use React to render on the server, including tools used, bumps in the road and links to further resources
+
+- **Universal React Rendering: How We Rebuilt SitePoint**  
+  https://www.sitepoint.com/universal-react-rendering-sitepoint/  
+  The SitePoint team explains how they added server-rendered React content into their existing Wordpress application

react-tutorials.md

@@ -108,6 +108,10 @@
   https://www.sitepoint.com/create-react-app/  
   Some quick tips on how to use Create-React-App to create a new React project and tweak the setup.
 
+- **Events in React**  
+  https://www.kirupa.com/react/events_in_react.htm  
+  An introduction to React's event handling system, including useful tips and some gotchas
+
 
 #### Project-Based Tutorials
 
@@ -233,6 +237,10 @@
   http://www.eloquentwebapp.com/instagram-app-node-react-redux/  
   An in-depth tutorial that demonstrates several advanced React concepts, including routing, hot loading, use of Redux and redux-saga, and more.
 
+- **Building a chat component in React and ES6**  
+  http://www.zsoltnagy.eu/building-a-chat-component-in-react-and-es6/  
+  An introduction to React by building a small chat app
+
 
 #### Paid Courses and Books
 
@@ -259,3 +267,7 @@ Also see the course sites listed in the [Community Resources](community-resource
   https://appendto.com/courses/react-training/  
   appendTo offers instructor-led, hands-on React training courses on React, Redux, React Native, ES6, and Webpack.
 
+- **The Road to Learn React**  
+  http://www.robinwieruch.de/the-road-to-learn-react/  
+  A pay-what-you-want ebook that teaches a good foundation for React itself, including React component patterns, working with data (fetching, sorting, and filtering), unit testing, and more.  The author's blog posts are excellent, and this book is definitely recommended.
+

redux-architecture.md

@@ -146,6 +146,10 @@
 - **4 Things for Efficient Redux**  
   https://blog.spacelab.team/4-things-for-efficient-redux-17e87b4cd6cb  
   Suggestions for improved Redux apps based on experience, including using Immutable.js, use of `combineReducers`, listening for actions in multiple reducers, and "aliasing" actions.
+
+- **Seven Months Into Redux: Two Things My Team Learned Along the Way**  
+  https://medium.com/@benipsen/seven-months-into-redux-two-things-my-team-learned-along-the-way-5d979c25ea61  
+  A couple useful suggestions on use of RxJS for managing action updates and handling derived data in selectors.
 
 
 #### Encapsulation and Reusability
@@ -214,6 +218,10 @@
 - **Scoped Selectors for Redux Modules**  
   http://www.datchley.name/scoped-selectors-for-redux-modules/  
   A follow-on to Randy Coulman's series on local vs global selectors, discussing tradeoffs in approaches for defining and managing selectors.
+
+- **Scaling React and Redux at IOOF**  
+  http://www.slideshare.net/VivianFarrell/scaling-react-and-redux-at-ioof  
+  A slideshow discussing creation of enterprise-scale Redux apps built with "micro-frontends" that can be composed together, and a look at a "Redux-Subspace" library to help with that
 
 
 #### Variations on Redux Architectures

redux-techniques.md

@@ -90,6 +90,9 @@
   https://www.reddit.com/r/reactjs/comments/5dxasp/any_deepdiveadvanced_tutorials_on_reselect/  
   Discussion on passing arguments to Reselect selectors, and how to use "factory functions" to define per-component selectors for Redux `mapState` functions
 
+- **ReactCasts #8: Selectors in Redux**  
+  https://www.youtube.com/watch?v=frT3to2ACCw  
+  A great overview of why and how to use selector functions to retrieve data from the store, and derive additional data from store values
 
 
 #### UI and Widget Implementations
@@ -163,6 +166,14 @@
   http://engineering.tes.com/post/secure-file-uploads/  
   Some examples of how to use Redux-Plupload to manage file uploads
 
+- **Redux: Perils of Time**  
+  http://redux-perils-of-time.surge.sh/#/?presenter  
+  A slideshow with some intriguing thoughts on how to manage offline experiences, cached data, and optimistic UI in a Redux app.
+
+- **{Persist}ence is Key: Using Redux-Persist to Store Your State in LocalStorage**  
+  https://medium.com/@clrksanford/persist-ence-is-key-using-redux-persist-to-store-your-state-in-localstorage-ac6a000aee63  
+  A quick introduction to using redux-persist to reuse store state between page refreshes
+
 
 #### Network Management