Updates, 2017-11-05

es6-features.md

@@ -307,4 +307,8 @@
 
 - **ES6 Modules in Node Today**  
   https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b  
-  John-David Dalton, author of Lodash, announces his new ES6 module loader, which enables ES module usage in Node right now. 
+  John-David Dalton, author of Lodash, announces his new ES6 module loader, which enables ES module usage in Node right now. 
+
+- **State of Modules in JavaScript**  
+  https://www.sitepen.com/blog/2017/10/26/state-of-modules-in-javascript/  
+  Covers the key features of ES modules, including basic syntax, syntax for importing/exporting/re-exporting, dynamic imports, debugging, bundling, and more.

git-resources.md

@@ -56,6 +56,11 @@
 - **Learn Enough Git to Be Dangerous**  
   https://www.learnenough.com/git-tutorial  
   A tutorial that teaches practical use of Git basics, Github, and Git workflows.
+
+- **Git Magic**  
+  https://crypto.stanford.edu/~blynn/gitmagic/  
+  An extensive Git tutorial that teaches usage instructions first, and works its way up to advanced Git techniques and concepts.
+
 
 #### Tips and Useful Info
 
@@ -103,6 +108,10 @@
   https://sentheon.com/blog/git-cheat-sheet.html  
   A large cheat sheet / reference for a variety of Git usage topics, including workflow, configuration, .gitignore syntax, different categories of commands, and more.
 
+- **Git Flight Rules**  
+  https://github.com/k88hudson/git-flight-rules  
+  A guide for Git users about what to do when things go wrong.  Covers topics like editing commits, staging and unstaging files, fixing branches, rebasing/merging, and much more.
+
 
 ## Specific Techniques
 

project-structure.md

@@ -95,4 +95,11 @@
 
 - **Fractal: A React app structure for infinite scale**  
   https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af  
-
+
+- **Domain directory structure for React apps - why it's worth trying**  
+  https://tech.offgrid-electric.com/domain-directory-structure-for-react-apps-why-its-worth-trying-b3855ee77a1e  
+  Discusses experience with the "A Better File Structure" approach, and gives advice on best practices for import paths, creating sub-domains, and more.
+
+- **The 100% correct way to structure a React app (or why there's no such thing**  
+  https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed  
+  An extensive set of pragmatic thoughts on good practices for React project structure.  Tries to quantify time spent on activities like creating new files and switching editor tabs, and gives some opinions on which patterns are more useful.

pros-cons-discussion.md

@@ -59,6 +59,10 @@
   https://rangle.io/resources/why-redux-future-of-angular-react/  
   A webinar video from Rangle.io, discussing the benefits of functional components and Redux for state management, and how Redux can be used with both React and Angular.
 
+- **Justifying React to the Business**  
+  https://daveceddia.com/react-business-value/  
+  Covers several reasons why using React is a good business decision, including ease of maintenance, long-term usefulness, and risk, with a summary of justifications.
+
 
 #### Redux/Flux Comparisons
 

react-ajax.md

@@ -79,6 +79,7 @@
   https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a  
   https://medium.com/@gcanti/slaying-a-ui-antipattern-with-flow-5eed0cfb627b  
   https://medium.com/@marsbergen/nice-pattern-for-redux-state-b8641b6ff9d1 
+  https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-react-64a3b98242c  
   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**  

react-architecture.md

@@ -260,6 +260,10 @@
   https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594  
   A list of important design decisions to consider when starting a React project, including use of a starter kit, preferred component definition approach, state management, styling, and more.
 
+- **Is React SOLID?**  
+  https://dev.to/kayis/is-react-solid-630  
+  Looks at the SOLID architectural principles, and discusses how those apply to React components. 
+
 
 #### React Architecture
 

react-component-composition.md

@@ -87,6 +87,16 @@
   http://blog.jakoblind.no/real-world-higher-order-components-hocs/  
   Several useful examples of actual HOCs, such as adding a hidden prop, providing toggle functionality, and only showing a component if a feature flag is turned on.
 
+- **Composing React components through props transference**  
+  https://blog.echobind.com/composing-react-components-through-property-transference-d8bc2dbecef5  
+  Quick examples of how to use `React.children.map()` and `React.cloneElement()` to pass props onto arbitrary child elements.
+
+- **Higher Order Components in React**  
+  https://www.sitepen.com/blog/2017/08/15/higher-order-components-in-react/  
+  Shows an example of a React app that needs to authenticate routes, and how a HOC can help handle that in a reusable way.  Also includes example HOCs for A/B-testing features, collecting metrics, and injecting props.
+
+
+
 
 #### Render Props/Function As Child
 
@@ -106,6 +116,14 @@
   https://trevordmiller.com/blog/react-render-callback-components  
   Examples of how to use the "render callback" / "function as a child" pattern to extract common logic for reuse.
 
+- **Declarative Components in React**  
+  https://blog.echobind.com/declarative-components-in-react-b21ced9895b5  
+  Demonstrates ways to make reusable flexible components using the "function as a child" pattern. 
+
+- **Upgrade your React.js HOC with renderProps**  
+  https://reactrocket.com/post/turn-your-hocs-into-render-prop-components/  
+  Gives examples of how to adapt HOCs for use with the render props pattern.
+
 
 #### Functional Composition
 
@@ -172,4 +190,8 @@
 
 - **Solving the problems of Higher Order Components without throwing the baby out with the bathwater**  
   https://hackernoon.com/solving-the-problems-of-higher-order-components-without-throwing-the-baby-out-with-the-bathwater-40ddc72df5aa  
-  A response to some criticisms of HOCs, such as indirection and naming collisions, showing some ways to compose HOCs to avoid the issues.
+  A response to some criticisms of HOCs, such as indirection and naming collisions, showing some ways to compose HOCs to avoid the issues.
+
+- **Randomness in React Props**  
+  https://medium.com/@joshuawcomeau/randomness-in-react-props-3929c1669f8b  
+  Demonstrates several approaches to structuring logic for generating values and passing them to children, including initialization in a constructor, creating a wrapper component, and using a function-as-a-child.

react-component-patterns.md

@@ -43,6 +43,10 @@
   http://lucasmreis.github.io/blog/simple-react-patterns/  
   A clearly written set of examples that showcase common React component patterns like "container/presentational", "Higher-Order Components", "Function-as-Child" / "render props", and "providers".
 
+- **React Component Patterns**  
+  https://medium.com/gitconnected/react-component-patterns-ab1f09be2c82  
+  A summary of common React component patterns with short examples.
+
 
 #### Component Definition Approach Comparisons
 
@@ -216,6 +220,14 @@
   https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17  
   Some short examples of how to pass data between parents, children, and siblings.
 
+- **How to structure components in React?**  
+  https://reallifeprogramming.com/how-to-structure-components-in-react-54fc43e71546  
+  Compares multiple ways to pass data from a parent to a child, including no props, passing a value object, passing required props, passing a map of props, and using `children`.
+
+- **Context 101**  
+  http://reactboston.surge.sh/#/  
+  Slides from Ken Wheeler's ReactBoston talk on React's `context` feature. Covers what context is, why you might want to use it, and when/ how to use it/
+
 
 #### Component Categories
 
@@ -279,6 +291,10 @@
   https://reactarmory.com/answers/how-should-i-separate-components  
   Describes four categories of React components ("view", "control", "controllers", and "containers"), and gives suggestions on when and how to factor out new components.
 
+- **Refactoring: Moving API calls to a higher-order component**  
+  https://medium.com/@guigonc/refactoring-moving-api-calls-to-a-higher-order-component-53062c086cb  
+  Shows how to progressively refactor fetching logic out of a component and move it into a parent component, then make that parent component reusable.
+
 
 
 
@@ -402,7 +418,7 @@
 - **Good React Modals**  
   https://medium.com/@elsdoerfer/good-react-modals-548cd9c2f7f4  
   Covers ways to handle issues with modal content not being rendered while doing animations, and side-loading data for a modal while maintaining a loading indicator.
-  
+
 
 #### Other Component Patterns
 

react-deployment.md

@@ -43,4 +43,8 @@
 
 - **Deploy a React app with SASS using Nginx**  
   http://zabana.me/notes/build-deploy-react-app-with-nginx.html  
-  Covers several important notes for adding SASS to an ejected CRA app, creating a deploy step using rsync, and setting up the Nginx web server to serve the app.
+  Covers several important notes for adding SASS to an ejected CRA app, creating a deploy step using rsync, and setting up the Nginx web server to serve the app.
+
+- **How to deploy a React application: an in depth overview of various options to deploy**  
+  https://codebrahma.com/deploy-react-application-depth-overview-various-options-deploy/  
+  A detailed look at what deployment for production means, what files are involved, how to properly build an app for production, and places to host a react app.

react-implementation.md

@@ -200,6 +200,10 @@
   http://www.benmvp.com/slides/2017/reactboston/fiber.html#/  
   Slides from Ben Ilegbodu's ReactBoston presentation, which summarize the changes in React 16.
 
+- **What's new in React 16?**
+  https://www.robinwieruch.de/what-is-new-in-react-16/  
+  A very useful look at the new user-facing features in React 16, with code examples.
+
 - **React Fiber Architecture**  
   https://github.com/acdlite/react-fiber-architecture  
   A description of React's new core algorithm, React Fiber
@@ -218,4 +222,5 @@
 
 - **A look inside React Fiber**  
   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.
+  Traces through the source code for React 16 / React Fiber, starting with the main `render()` function and diving down from there through the system.
+

react-performance.md

@@ -147,7 +147,8 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
 - **Optimizing React Rendering**  
   https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02  
   https://flexport.engineering/optimizing-react-rendering-part-2-7b2e9a9ea21f  
-  Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`.  Has a link to further discussion on HN.  Part 2 describes how they built a library called `mutation-sentinel` to detect accidental mutations.
+  https://flexport.engineering/ending-the-debate-on-inline-functions-in-react-8c03fabd144  
+  Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`.  Has a link to further discussion on HN.  Part 2 describes how they built a library called `mutation-sentinel` to detect accidental mutations, and Part 3 covers a Babel plugin for optimizing inline functions in render methods.
 
 - **Introducing react-wastage-monitor**  
   https://blog.listium.com/introducing-react-wastage-monitor-404565d679b2  

react-redux-testing.md

@@ -133,6 +133,13 @@
   http://acco.io/a-practical-guide-to-testing-react-apps/  
   An excellent, comprehensive guide to React testing, covering some of the major tools, types of tests, how to write good React tests, and more. 
 
+- **Testing React Components** 
+  https://nerdblog.pl/post/166842840969/testing-react-components  
+  An extensive look at different ways to test React components using the Enzyme library.  Discusses Enzyme's shallow and full rendering methods, methods to inspect the contents of a component, and different forms of tests like snapshots, rendering tests, and behavior tests.
+
+- **Creating a React Component using TDD**  
+  http://www.alayor.com/2017/Creating-a-React-Component-using-TDD  
+  Demonstrates writing a simple React component using the TDD "red-green" testing approach.
 
 #### Redux
 
@@ -240,6 +247,7 @@
 
 - **Test-Driven Development with React and Redux, using Redux TDD**  
   https://medium.freecodecamp.org/test-driven-development-with-react-and-redux-using-redux-tdd-3fd3be299918  
+  https://hackernoon.com/redux-tdd-a-deep-dive-344cd7682a54  
   Describes using a specific set of helper functions to drive testing the behavior and data flow of a React+Redux application.
 
 - **Writing tests for redux-observable**  
@@ -249,6 +257,14 @@
 - **End-to-end testing on a React-Redux app**  
   https://medium.com/@darioghilardi/end-to-end-testing-on-a-react-redux-app-10f5a26f2f61  
   Some high-level thoughts of how to best implement end-to-end testing in a way that works with React-Redux apps.  Discusses use of Cypress, real APIs vs mock APIs, and some Rails-specific setup. 
+
+- **How to Snapshot Test Everything in Your Redux App with Jest**  
+  https://hackernoon.com/how-to-snapshot-test-everything-in-your-redux-app-with-jest-fde305ebedea  
+  Detailed examples of how to test React components, Redux reducers, connected components, and selectors using Jest snapshot tests.
+
+- **Unit Testing React, Redux, Selectors, and Epics**  
+  https://codeburst.io/unit-testing-react-redux-selectors-and-epics-664e7b4798a8  
+  Quick examples of ways to different parts of a React+Redux app.
 
 
 
@@ -328,4 +344,12 @@
 
 - **Javascript unit testing frameworks: Comparing Jasmine, Mocha, AVA, Tape, and Jest**  
   https://raygun.com/blog/javascript-unit-testing-frameworks/  
-  A useful comparison and summary of the major unit testing frameworks available
+  A useful comparison and summary of the major unit testing frameworks available
+
+- **Effective Snapshot Testing**  
+  https://blog.kentcdodds.com/effective-snapshot-testing-e0d1a2c28eca  
+  Kent C Dodds looks at the pros and cons of using snapshot testing, and how to make snapshot tests more useful.
+
+- **Write tests. Not too many. Mostly integration.**  
+  https://blog.kentcdodds.com/write-tests-not-too-many-mostly-integration-5e8c7fff591c  
+  Some short thoughts on the value of different kinds of tests, with extensive discussion in the comments.

react-server-rendering.md

@@ -73,4 +73,13 @@
 
 - **Case study of SSR with React in a large e-commerce app**  
   http://blog.jakoblind.no/case-study-of-ssr-with-react-in-a-large-e-commerce-app/  
-  A set of tips and lessons learned from implementing SSR in an existing React app over the course of several years, including some concrete implementation details.
+  A set of tips and lessons learned from implementing SSR in an existing React app over the course of several years, including some concrete implementation details.
+
+- **Scaling React Server-Side Rendering**  
+  http://arkwright.github.io/scaling-react-server-side-rendering.html  
+  A long, detailed look at how a team implemented React+Redux SSR on top of an existing monolithic application.  Includes discussion of many real-world issues experienced, such as load balancing and component caching.
+
+- **Making CRA apps work with SSR**  
+  https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-1-8f5f813d510b  
+  https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-2-fb871868216e  
+  A 2-part post that shows how to add SSR to an ejected CRA app, including use of Redux.

react-styling.md

@@ -162,6 +162,10 @@
   https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c  
   A talk transcript that discusses the history and future direction of the Styled-Components library, including how it works, improvements in v2, and plans for interoperability between CSS-in-JS libraries.
 
+- **The performance of styled React components**  
+  http://blog.primehammer.com/2017/09/27/the-performance-of-styled-react-components/  
+  Benchmarks comparing size, build speed, and other aspects of different CSS-in-JS libraries.
+
 
 #### Techniques and Examples
 

react-techniques.md

@@ -23,6 +23,10 @@
   https://tech.gadventures.com/translating-react-apps-99dede52d924  
   Discusses how to use the React-Intl library to add translations to a React app
 
+- **Lessons from migrating a large codebase to React 16**  
+  https://blog.discordapp.com/lessons-from-migrating-a-large-codebase-to-react-16-e60e49102aa6  
+  An excellent post from the Discord team recapping how they migrated an older React codebase to work with React 16, including use of codemods, replacing private API usage, upgrading dependencies, and other issues they ran into.
+
 
 #### Security
 

redux-architecture.md

@@ -272,6 +272,18 @@
 - **Chart the Stock Market with React, Redux, React-Vis, and Socket.io**  
   https://medium.com/@ddcreationstudi/chart-the-stock-market-with-react-redux-react-vis-and-socket-io-18caf312693c  
   An overview of approaches used and lessons learned in writing a real-time stock market charting example app.  Not a tutorial specifically, but some useful ideas for structuring things.
+
+- **Growing Pains: Migrating Slack's Desktop App to BrowserView**  
+  https://slack.engineering/growing-pains-migrating-slacks-desktop-app-to-browserview-2759690d9c7b  
+  The Slack team discusses how they use Redux in an Electron app, including use of the `electron-redux` middleware for syncing actions between Redux stores in different Electron processes and use of `redux-observable` for managing side effects.
+
+- **Redux: Architecting and scaling a new web app at the NY Times**  
+  https://www.youtube.com/watch?v=lI3IcjFg9Wk  
+  A talk from an NY Times developer describing how they scaled a React+Redux app to over a million users per month.
+
+- **"React and Redux as a framework"**  
+  https://www.reddit.com/r/javascript/comments/747vx1/react_and_redux_as_a_framework/  
+  Useful discussion of where "business logic" should live in a Redux app, such as data fetching and transformation.
 
 
 #### Encapsulation and Reusability
@@ -439,4 +451,8 @@
 
 - **"Anyone using Redux with a render prop?"**  
   https://twitter.com/threepointone/status/913701233394900992  
-  A Twitter thread discussing use of render props as an alternative to `connect`.  Includes a reply by Dan Abramov, who points out that this is how React-Redux originally worked, but it was changed to an HOC to better deal with side effects from state changes.
+  A Twitter thread discussing use of render props as an alternative to `connect`.  Includes a reply by Dan Abramov, who points out that this is how React-Redux originally worked, but it was changed to an HOC to better deal with side effects from state changes.
+
+- **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.