Updates, 2017-02-12

basic-concepts.md

@@ -79,7 +79,7 @@
   A collection of links to help answer your questions about React, including how to get started
 
 - **Front-End Developer Handbook**  
-  https://www.frontendhandbook.com/  
+  https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/  
   A guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it.
 
 - **Top Javascript Frameworks and Topics to Learn in 2017**  

es6-features.md

@@ -118,6 +118,10 @@
   http://www.zsoltnagy.eu/the-reflect-api-of-es6/  
   An overview of the Reflect API, which allows some complex metaprogramming capabilities.
 
+- **Advanced ES6 Destructuring Techniques**  
+  http://untangled.io/advanced-es6-destructuring-techniques/  
+  Examples of advanced ways to use ES6's destructuring capabilities
+
 
 #### Generators
 

git-resources.md

@@ -83,6 +83,13 @@
   https://medium.com/@zlobin/advanced-git-advice-27087a7fbb29  
   A variety of useful tips and commands.
 
+- **A Note about Git Commit Messages**  
+  http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html  
+  Some quick explanations of how to format Git commit messages, and commands where message formatting matters
+
+- **Git Commit Good Practices**  
+  https://wiki.openstack.org/wiki/GitCommitMessages  
+  A number of good practices to follow when making commits and writing commit messages
 
 ## Specific Techniques
 

node-js-and-npm.md

@@ -38,4 +38,8 @@ NPM 3.7 or later, as that fixes a bug with the progress bar that drastically slo
 
 - **Understanding NPM**  
   https://unpm.nodesource.com/  
-  An interactive visualization that is intended to help you understand the role and scope of NPM.
+  An interactive visualization that is intended to help you understand the role and scope of NPM.
+
+- **NPM for Beginners: A Guide for Front-End Developers**  
+  https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/  
+  An excellent introduction to what NPM is, and how to use it for installing and managing package dependencies.

project-structure.md

@@ -71,6 +71,10 @@
 - **When a good plan comes together: React project structure for scaling**  
   http://thereactionary.net/when-a-good-plan-comes-together-react-project-structure-for-scaling/  
   More discussion of tradeoffs in various structure approaches.
+
+- **Structuring and Organizing the React Components Directory**  
+  http://noah-prince-tech-blog.ghost.io/structuring-and-organizing-the-react-components-directory/  
+  Some useful suggestions for folder layout, folder naming, and import handling.
 
 
 #### Project Setup

react-ajax.md

@@ -56,5 +56,10 @@
   http://blog.jenkster.com/2016/06/how-elm-slays-a-ui-antipattern.html  
   https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a  
   https://medium.com/@gcanti/slaying-a-ui-antipattern-with-flow-5eed0cfb627b  
-  Three articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles.
+  https://medium.com/@marsbergen/nice-pattern-for-redux-state-b8641b6ff9d1 
+  Articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles.
+
+- **Better data fetching with RemoteDataJS**  
+  http://javascriptplayground.com/blog/2016/06/remote-data-js/  
+  Examples of how to use the author's RemoteDataJS library to manage request state.  Helpful to see the list of states it tracks, even if you don't use the library.
 

react-architecture.md

@@ -94,7 +94,7 @@
 - **Thinking Statefully**  
   https://daveceddia.com/thinking-statefully/  
   Some great examples of how to think in declarative/stateful terms (such as passing an `isOpen` prop to a modal instead of calling `open()` ).
-  
+
 
 #### React Best Practices
 
@@ -178,4 +178,16 @@
 
 - **Tips to Learn React + Redux**  
   https://www.robinwieruch.de/tips-to-learn-react-redux/  
-  An extensive and excellent list of suggestions to follow when learning and using React and Redux.  Tips include when to use different component patterns, when to bring in a state management library, Redux state structuring, and much more.
+  An extensive and excellent list of suggestions to follow when learning and using React and Redux.  Tips include when to use different component patterns, when to bring in a state management library, Redux state structuring, and much more.
+
+- **10 Reasons why I moved from Angular to React**  
+  https://www.robinwieruch.de/reasons-why-i-moved-from-angular-to-react/  
+  Robin Wieruch gives some good thoughts why he chose to focus on React.  A nice overview of some of React's benefits.
+
+- **Our journey migrating 100K lines of code from AngularJS to React**  
+  https://tech.small-improvements.com/2017/01/25/how-to-migrate-an-angularjs-1-app-to-react/  
+  The Small Improvements team describes how they implemented an Angular>React migration, starting from the bottom up.
+
+- **Our Best Practices for Writing React Components**  
+  https://medium.com/code-life/our-best-practices-for-writing-react-components-dec3eb5c3fc8  
+  A description of the MuseFind team's approaches for writing components

react-component-patterns.md

@@ -174,6 +174,10 @@
   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.
 
+- **Share Code between React and React Apps**  
+  https://hackernoon.com/code-reuse-using-higher-order-hoc-and-stateless-functional-components-in-react-and-react-native-6eeb503c665  
+  An exploration of how to refactor code to extract functional components and higher-order components for improved code reuse,  including reusing the same components in both React and React Native apps.
+
 
 #### Higher-Order Components
 
@@ -289,6 +293,10 @@
   https://medium.com/nthrive-analytics/introducing-react-into-an-existing-application-17490841796e  
   Some examples of how to progressively add React components into an existing jQuery-based application and keep them in sync with the rest of the app.
 
+- **How to use D3.js in React**  
+  http://cmichel.io/how-to-use-d3js-in-react/  
+  An overview of three ways to integrate D3 into a React app: using React to render, using D3 to render, and a hybrid approach.
+
 
 #### Modal Dialogs
 

react-performance.md

@@ -115,6 +115,14 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   https://hackernoon.com/react-at-60fps-4e36b8189a4c  
   A look at several useful techniques for benchmarking and improving React application performance
 
+- **React is Slow, React is Fast: Optimizing React Apps in Practice**  
+  https://medium.com/@francoisz/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba  
+  Some excellent advice on improving React performance.  Covers using React's new Component Profiling capabilities, ways to optimize re-renders, use of Recompose and Reselect, gotchas with JSX and object literals, and more.
+
+- **Optimizing the Performance of Your React Application**  
+  https://auth0.com/blog/optimizing-react/  
+  Covers several ways to improve perf, including profiling with the React Perf Addons, using correct keys for lists, and use of `shouldComponentUpdate` and `PureComponent`.
+
 
 #### Code Splitting and Progressive Apps
 
@@ -135,6 +143,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
   https://medium.com/front-end-hacking/performance-optimizing-a-react-single-page-app-a68985fa72cc  
   https://medium.com/@ryancollinsio/performance-optimizing-a-react-single-page-app-part-2-92a0f0c83202  
   A series of articles looking at various performance-related topics, including server rendering, asset optimization, code splitting, memoization, and immutable data.
+
+- **Javascript Start-up Performance**  
+  https://medium.com/dev-channel/javascript-start-up-performance-69200f43b201  
+  Addy Osmani digs into the issues involved in parsing and compiling JS scripts on load, discusses how to measure performance, and gives advice for lower parse times.
 
 
 #### Immutable Data

react-redux-testing.md

@@ -166,6 +166,14 @@
   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.
 
+- **Workship Slides: React and Redux Testing**  
+  http://www.slideshare.net/visualengin/workshop-23-reactjs-react-redux-testing  
+  A slideshow that gives a helpful overview of the React Test Utilities and Enzyme to test React components
+
+- **Testing React Applications with Jest**  
+  https://auth0.com/blog/testing-react-applications-with-jest/  
+  An in-depth explanation of how to use Jest for React testing, including setup, basic test structure, using Enzyme for rendering React components, mocking, and more.
+
 
 #### General Testing, Tools, and Setup
 

react-server-rendering.md

@@ -27,4 +27,8 @@
 
 - **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
+  Details building a React app that renders on both the client and the server
+
+- **Going Isomorphic with Python and React**  
+  https://dev.to/__amol__/going-isomorphic-with-python-and-react  
+  A look at how to use DukPy and React together to write an isomorphic web application with Python without even installing Node.js.

react-state-management.md

@@ -42,6 +42,10 @@
 - **React state management patterns**  
   http://vijayt.com/post/react-state-management-patterns/  
   Useful summaries of some common patterns for managing state (encapsulated vs uni-directional flow, single store or multiple stores, shared state between components).
+
+- **Watch Out for Undefined State**  
+  https://daveceddia.com/watch-out-for-undefined-state/  
+  Discusses the common mistake of making data requests and not having data fields initialized for use in the initial render, and looks at several ways to handle the issue.
 
 
 #### Using `setState`

redux-architecture.md

@@ -91,6 +91,10 @@
   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.
 
+- **React Redux Architecture**  
+  https://github.com/hirviid/react-redux-architecture  
+  Some notes on an opinionated architecture for large React/Redux applications
+
 
 #### Redux Best Practices
 
@@ -167,6 +171,10 @@
 - **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
+
+- **When to Define Action Creators in Redux**  
+  https://daveceddia.com/redux-action-creators/  
+  An excellent overview of why action creators exist, why they’re worth using, and when you can skip them
 
 
 #### Encapsulation and Reusability
@@ -277,4 +285,8 @@
 
 - **Minimal Redux Setup**  
   https://medium.com/@benevolentNinja/minimal-redux-setup-e6a10fcbcb68  
-  Thoughts on using a single reducer and a single "UPDATE" action type
+  Thoughts on using a single reducer and a single "UPDATE" action type
+
+- **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.

redux-middleware.md

@@ -42,6 +42,10 @@
   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
 
+- **Workshop Slides: Redux Middleware**  
+  http://www.slideshare.net/visualengin/workshop-22-reactredux-m  
+  A slideshow that explains how Redux middleware work, with several helpful visualizations
+
 
 #### Middleware Techniques
 

redux-side-effects.md

@@ -71,6 +71,10 @@
   https://medium.com/@northerneyes/the-evolution-of-redux-action-creators-2973018bf2ae  
   A comparison of ways to make action creation testable, looking at redux-thunk, a custom thunk-like middleware, and redux-saga 
 
+- **What is the right way to do asynchronous operations in Redux?**  
+  https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/  
+  An excellent look at the most popular libraries for Redux side effects, with comparisons of how each one works.
+
 
 #### Sagas
 

redux-techniques.md

@@ -109,6 +109,10 @@
 - **GraphQL is not only for Backend**  
   https://riad.blog/2017/01/07/graphql-is-not-only-for-backend-react-redux/  
   A look at how to use GraphQL to query into a Redux store
+
+- **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
 
 
 #### UI and Widget Implementations
@@ -213,6 +217,13 @@
   http://cmichel.io/using-actions-in-redux-the-correct-way/  
   An interesting trick using ES6 proxies to ensure wrong action types aren't accidentally used.
 
+- **Object Oriented Functional Programming, or, How You Can Use Classes as Redux Reducers**  
+  https://medium.com/@ustunozgur/object-oriented-functional-programming-or-how-can-you-use-classes-as-redux-reducers-23462a5cae85  
+  An exploration of how to use Immutable.js Record classes with methods as Redux reducers.  This is a very non-idiomatic approach, but the article is reasonably informative.
+
+- **Exploring Interaction History with Redux-DAG-History**  
+  https://blog.atsid.com/exploring-interaction-history-d09a52a7d186  
+  The Microsoft Research group describes a library they built to implement a "branching" approach to application history and undo/redo capabilities.
 
 #### Network Management
 

static-typing.md

@@ -127,6 +127,10 @@
 - **Typing React Components**  
   https://datarockets.com/blog/typing-react-components  
   Examples of migrating from React PropTypes to Flow, as well as typing Redux usage 
+
+- **Type-Checking React and Redux with Flow**  
+  https://blog.callstack.io/type-checking-react-and-redux-thunk-with-flow-part-1-ad12de935c36  
+  Examples of how to define Flow types for React components.  (Part 2 will cover Redux.)
 
 
 #### Advancing Typing Techniques
@@ -147,6 +151,10 @@
   http://sitr.us/2016/12/20/flow-cookbook.html  
   Assorted useful techniques for using Flow types
 
+- **Secret Flow Types**  
+  https://medium.com/@raxwunter/secret-flow-types-86b2ebb30951  
+  A list of "advanced" Flow type declarations, such as Keys, Diff, and Shape.
+
 
 #### Tool Comparisons
 
@@ -172,4 +180,8 @@
 
 - **TypeScript, Flow, and the Importance of Toolchains over Tools**  
   https://dzone.com/articles/typescript-flow-and-the-importance-of-toolchains-o  
-  Some thoughts on why type checkers are important, how they differ, and what considerations go into selecting a type checking tool
+  Some thoughts on why type checkers are important, how they differ, and what considerations go into selecting a type checking tool
+
+- **Refactoring 30000 Lines of JS with types**  
+  https://www.reaktor.com/blog/refactoring-30000-lines-js-types/  
+  A description of the Reaktor team's approach to adding types to their project, their experience with both Typescript and Flow, and why they chose Typescript.

using-react-with-es6.md

@@ -53,6 +53,10 @@
 - **Do you even need that bind?**  
   https://swizec.com/blog/do-you-even-need-that-bind/swizec/7247  
   A dive through React's implementation of event handling, and why callback binding is needed
+
+- **React without `this`**  
+  https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160  
+  Examples of how to write components in a style that does not require the `this` keyword.  Not the common approach, but an interesting idea.
 
 #### Method Binding Utilities
 

webpack-advanced-techniques.md

@@ -113,6 +113,10 @@
   https://dev.to/kayis/dynamic-imports-with-webpack-2  
   A quick example of how to use dynamic imports to load pages or components at runtime
 
+- **Lazy Loaded React Components with Webpack 2**  
+  https://dev.to/kayis/lazy-loaded-react-components-with-webpack-2  
+  A follow-on to the previous article, showing how to extend the dynamic imports approach to lazily load and render components
+
 
 #### Bundle Sizes and Visualization
 
@@ -257,6 +261,10 @@
   https://infinum.co/the-capsized-eight/squeezing-webpack-into-backend-frameworks  
   Covers how to use Webpack to replace the Rails asset pipeline
 
+- **Easy Offline First Apps with Webpack's Offline Plugin**  
+  https://dev.to/kayis/easy-offline-first-apps-with-webpacks-offline-plugin  
+  A look at how to use the OfflinePlugin to cache Webpack-generated assets for offline use.
+
 
 #### Webpack Tools