Updates, 2017-02-05

basic-concepts.md

@@ -47,6 +47,13 @@
   https://medium.com/@shubheksha/javascript-package-managers-101-9afd926add0a  
   An overview of what packages and package managers are, some related terms, and how these tools work.
 
+- **2016 Javascript Rising Stars**  
+  https://risingstars2016.js.org/  
+  A summary of which JS projects gained the most popularity in 2016, based on new Github stars. Serves as a useful overview of tool categories and popular tools
+
+- **A Brief History of Javascript**  
+  https://auth0.com/blog/a-brief-history-of-javascript/  
+  Despite the name, it's actually an extended, in-depth history of Javascript's creation and evolution over time.
 
 #### Suggested Learning Approaches
 

community-resources.md

@@ -47,6 +47,10 @@
   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.
 
+- **Awesome Create-React-App**  
+  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.
+
 
 #### People
 

es6-features.md

@@ -177,6 +177,10 @@
   https://mockbrian.com/blog/2016/12/29/broken-promises/  
   Some useful tips for dealing with promises.
 
+- **JS: Promises/A+, jQuery Deferreds, and errors**  
+  http://lucybain.com/blog/2017/js-promises-errors-a-plus-vs-deferreds/  
+  A comparison of the two most common Promise definitions, and how they differ in behavior
+
 
 #### Techniques
 
@@ -222,4 +226,9 @@
 
 - **Understanding the State of Javascript Modules**  
   http://georgemauer.net/2016/11/25/how-js-modules-work.html  
-  A look at the major differences in module loading approaches, and why tools like Webpack or Browserify are needed to help, as well as recommendations on which tools to use adn why.
+  A look at the major differences in module loading approaches, and why tools like Webpack or Browserify are needed to help, as well as recommendations on which tools to use adn why.
+
+- **Native ECMAScript Modules: Overview and New Features**  
+  https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview  
+  https://blog.hospodarets.com/native-ecmascript-modules-new-features  
+  An in-depth look at existing module formats, how ES modules work, and how ES modules relate to bundlers like Webpack

git-resources.md

@@ -48,6 +48,10 @@
 - **Git for Humans**  
   https://speakerdeck.com/alicebartlett/git-for-humans  
   A slideshow introducing Git concepts without complex terminology
+
+- **Getting Git**  
+  https://gettinggit.com/  
+  A paid video tutorial series that covers Git commands in detail, as well as everyday scenarios you might encounter while using Git
 
 #### Tips and Useful Info
 

immutable-data.md

@@ -42,6 +42,10 @@
 - **Immutability is Not Enough**  
   https://codewords.recurse.com/issues/six/immutability-is-not-enough  
   A look at how using an immutable data approach doesn't magically prevent all bugs.
+
+- **Javascript Array Methods: Mutating vs Non-Mutating**  
+  http://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/  
+  An overview of how to accomplish add/remove/replace operations on JS arrays, comparing mutable vs immutable approaches to each.
 
 
 

mobx-tutorials.md

@@ -36,6 +36,10 @@
   https://benmccormick.org/2017/01/09/mobx-first-impressions/  
   A quick introduction to MobX's basic concepts and how it works
 
+- **How to Manage your JavaScript Application State with MobX**  
+  https://www.sitepoint.com/manage-javascript-application-state-mobx/  
+  A detailed tutorial that introduces basic MobX usage, using only jQuery for the UI updates
+
 
 #### Testing
 

react-ajax.md

@@ -14,6 +14,14 @@
   http://andrewhfarmer.com/ajax-libraries/  
   A useful overview of the most popular AJAX libraries, including platform support and feature comparisons.
 
+- **Loading data from APIs in React**  
+  http://javascriptplayground.com/blog/2017/01/http-requests-reactjs/  
+  A 10-minute screencast that demonstrates how to create a component that fetches data from an API and renders it in a page.  Covers how to use the React lifecycle to make requests, using the `fetch` API, and dealing with response successes and failures.
+
+- **3 Libraries and 3 Ways to handle AJAX in React Apps**  
+  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.
+
 
 #### Request Implementation Examples
 

react-component-patterns.md

@@ -45,11 +45,11 @@
 
 - **Ownership and Children in React**  
   http://ctheu.com/2015/02/10/ownership-and-children-in-reactjs/  
-  Discusses the difference between "parent" and "owner" relationships, and what the "children" prop can look like.
+  Discusses the difference between "parent" and "owner" relationships, and what the `children` prop can look like.
 
 - **ReactCasts #3: React's Children API**  
   https://www.youtube.com/watch?v=DJ53-G8EbxE  
-  A screencast demonstrating how the "children" prop to compose components together
+  A screencast demonstrating how the `children` prop to compose components together
 
 - **React.Children and the React Top-Level API**  
   http://callahan.io/blog/2016/09/16/react-dot-children-and-the-react-top-level-api/  
@@ -59,6 +59,10 @@
   http://jaketrent.com/post/send-props-to-children-react/  
   Examples of how to pass new props to child components using `React.Children`
 
+- **A deep dive into children in React**  
+  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.
+
 
 #### React Component Lifecycle
 
@@ -124,6 +128,7 @@
 
 - **Higher Order With Context**  
   https://dev.to/kayis/higher-order-with-context  
+  https://dev.to/kayis/higher-order-components-and-context-example 
   Examples of using Higher Order Components to pass data to nested components using `context`
 
 
@@ -165,6 +170,10 @@
   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.
 
+- **Refactoring React - Extracting Layout Components**  
+  http://erikaybar.name/refactoring-react-extracting-layout-components/  
+  Demonstrates creating reusable components that manage some aspects of styling and layout, such as a button with multiple sizes and colors.
+
 
 #### Higher-Order Components
 
@@ -325,8 +334,11 @@
 - **"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
-
 
 - **On Privacy with React Context**  
   https://medium.com/@amireh/on-privacy-with-react-context-aa77ffd08509  
-  Thoughts on some potential issues with various component/state patterns (globals, Redux, Flux, Ember), and a sketch of a notional approach that might help solve some of those issues.
+  Thoughts on some potential issues with various component/state patterns (globals, Redux, Flux, Ember), and a sketch of a notional approach that might help solve some of those issues.
+
+- **Internationalizing React Apps**  
+  https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/  
+  An extended investigation of server and client aspects needed for internationalization.

react-forms.md

@@ -89,6 +89,10 @@
   https://www.viget.com/articles/building-a-multi-step-registration-form-with-react  
   A form example that shows how to track the current form step, render the right form component, and store all the necessary form data
 
+- **Making dynamic form inputs with React**  
+  https://goshakkk.name/array-form-inputs/  
+  Covers how to build a form that can add and remove entries dynamically, with examples.
+
 
 #### Form Validation
 

react-implementation.md

@@ -113,6 +113,10 @@
 - **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 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.
 
 
 #### React Fiber

react-performance.md

@@ -111,6 +111,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   https://60devs.com/pure-component-in-react.html  
   A look into what React.PureComponent is, how it works, and how it can be used to improve performance
 
+- **React at 60FPS**  
+  https://hackernoon.com/react-at-60fps-4e36b8189a4c  
+  A look at several useful techniques for benchmarking and improving React application performance
+
 
 #### Code Splitting and Progressive Apps
 

react-redux-testing.md

@@ -162,6 +162,10 @@
   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
 
+- **The Right Way to Test React Components**  
+  https://medium.com/@suchipi/the-right-way-to-test-react-components-548a4736ab22  
+  Excellent advice on how to determine a component's "contract", what aspects of that are worth testing, and how to approach testing that contract.
+
 
 #### General Testing, Tools, and Setup
 

react-routing.md

@@ -43,4 +43,12 @@
 
 - **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.
+  Demonstrates handling sign-in flow, including a dynamic login/logout link, and implementing routes that can only be seen by logged-in users.
+
+- **Role-based authorization using React-Router**  
+  http://frontendinsights.com/role-based-authorization-using-react-router/  
+  A look at some ways to control component routes based on user roles
+
+- **Role based authorization in React**  
+  https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4  
+  Some alternative approaches to the previous post, using React component patterns like Higher Order Components to control authorization and rendering

react-server-rendering.md

@@ -24,3 +24,7 @@
 - **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 on the Server for Beginners: Build a Universal React and Node App**  
+  https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app  
+  Details building a React app that renders on both the client and the server

react-state-management.md

@@ -68,4 +68,8 @@
 
 - **Using a function in `setState` instead of an object**  
   https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1  
-  An introduction to a lesser-known feature of `setState`: the ability to pass a callback function to update the state.  Useful for ensuring proper updates.
+  An introduction to a lesser-known feature of `setState`: the ability to pass a callback function to update the state.  Useful for ensuring proper updates.
+
+- **"Best kept React secret: declare state changes separately from component classes"**  
+  https://twitter.com/dan_abramov/status/824308413559668744  
+  Dan Abramov shows some screenshots that demonstrate how to define state update functions outside a component, then pass them to `setState`

react-styling.md

@@ -83,3 +83,11 @@
 - **Orthogonality and CSS in JS**  
   https://benmccormick.org/2017/01/03/orthogonality-and-css-in-js/  
   Some thoughts on the "separation of concerns" concept, and how that relates to defining modular code and components (including styling).
+
+- **Styled-Components: Enforcing Best Practices**  
+  https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/  
+  A look at some best practices for writing styles for reusable components, and how the styled-components library can help enforce those principles.
+
+- **CSS-in-JS comparisons**  
+  https://github.com/MicheleBertoli/css-in-js  
+  A repository that contains implementation comparisons between many different CSS-in-JS libraries

react-tutorials.md

@@ -108,6 +108,9 @@
   https://www.kirupa.com/react/events_in_react.htm  
   An introduction to React's event handling system, including useful tips and some gotchas
 
+- **React 101: Condensed**  
+  http://erikaybar.name/react-101-medium-and-slides/  
+  Links to an HTML slideshow and accompanying blog post that introduce just enough info to give you a taste of what React is about.
 
 
 #### React Concept Overviews
@@ -173,6 +176,10 @@
   http://btholt.github.io/complete-intro-to-react/  
   An online workshop intended to get you up to speed on modern development and give you an idea what it's like to develop an app in the React ecosystem.
 
+- **React+Redux Workshop**  
+  https://github.com/btholt/react-redux-workshop  
+  An online workshop that gets you up to speed on using React and Redux
+
 - **React Tutorial: Build a Yelp Clone**  
   https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/  
   A full-length walkthrough of how to build an app that uses routing, Google Maps integration, and more.
@@ -208,10 +215,6 @@
   http://academy.plot.ly/#react  
   Max Stoiber's full-size tutorial on building an app using React.  Includes an intro to React, project setup, using external libraries, data management with Redux, use of Immutable.js, and testing with Jest.
 
-- **React on the Server for Beginners: Build a Universal React App**  
-  https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app  
-  Details building a React app that renders on both the client and the server
-
 - **React 101**  
   https://blog.tighten.co/react-101-building-a-gif-search-engine  
   https://blog.tighten.co/react-101-using-redux  
@@ -299,3 +302,6 @@ Also see the course sites listed in the [Community Resources](community-resource
   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.
 
+- **Learn Pure React**  
+  https://daveceddia.com/learn-pure-react/  
+  A paid ebook that lays out a guided step-by-step process for learning React quickly and in the right order, with a focus on the fundamentals of React.

redux-architecture.md

@@ -87,6 +87,10 @@
   https://hackernoon.com/thinking-in-redux-when-all-youve-known-is-mvc-c78a74d35133  
   Some useful mental comparisons for understanding Redux when coming from an MVC architecture background
 
+- **React + Redux: Architecture Overview**  
+  https://medium.com/mofed/react-redux-architecture-overview-7b3e52004b6e  
+  A look at the common pieces that make up a Redux application, with some very useful diagrams to illustrate what they are and how they fit together.
+
 
 #### Redux Best Practices
 
@@ -151,17 +155,18 @@
   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.
-
 - **A Year of Development with Redux**  
   https://blog.shakacode.com/a-year-of-development-with-redux-part-i-a5791e124a7d  
-  Some quick tips for working with Redux and structuring data
+  https://blog.shakacode.com/a-year-of-development-with-redux-part-ii-3035ff0b1781  
+  Some quick tips for working with Redux, structuring data, and encapsulation of components
 
 - **Avoiding False Cause**  
   http://sebinsua.com/avoiding-false-cause/  
   Some high-level general thoughts on cargo-culting, dogma, and best practices, followed by some specific examples of problematic Redux code (unclear reducer state shape, managing "editing" mode data, applying arbitrary value updates)
+
+- **Isn't our code just the BEST**  
+  https://medium.com/bumpers/isnt-our-code-just-the-best-f028a78f33a9  
+  A quirkily-written look at how a dev team rewrote their project using React and Redux, including examples of project structure, component usage, and data normalization
 
 
 #### Encapsulation and Reusability

redux-middleware.md

@@ -38,6 +38,10 @@
   https://www.youtube.com/watch?v=T-qtHI1qHIg  
   A screencast that describes how middleware fit into Redux, their uses, and how to implement a custom middleware 
 
+- **Redux Middleware**  
+  https://vmayakumar.wordpress.com/2016/12/27/redux-middleware/  
+  Some analogies for understanding middleware in terms of the OOP "Decorator Pattern" vs  Functional Programming composition
+
 
 #### Middleware Techniques
 

redux-side-effects.md

@@ -35,6 +35,10 @@
   https://daveceddia.com/what-is-a-thunk/  
   A quick explanation for what the word "thunk" means in general, and for Redux specifically..
 
+- **Understanding how redux-thunk works**  
+  https://medium.com/@gethylgeorge/understanding-how-redux-thunk-works-72de3bdebc50  
+  An attempt to explain both redux-thunk and Redux's applyMiddleware enhancer, by rewriting the original implementations to add logging and rework names for ease of understanding.
+
 
 #### Side Effect Approach Comparisons
 
@@ -130,6 +134,10 @@
   https://devblog.xero.com/the-three-rs-refactoring-react-and-redux-for-robust-async-js-252648a8632f  
   More information from Xero on how they have used sagas for async workflows, including splitting code up into smaller sagas that can be composed.
 
+- **4 Quick Tips for Managing Many Sagas in a React-Redux-Saga App**  
+  https://decembersoft.com/posts/4-tips-for-managing-many-sagas-in-a-react-redux-saga-app/  
+  Some useful suggestions for structuring and organizing sagas
+
 
 #### Other Side Effect Approaches