Updates, 2017-08-16

basic-concepts.md

@@ -154,4 +154,8 @@
 
 - **Are we making the web too complicated?**  
   http://seldo.com/weblog/2017/05/21/are_we_making_the_web_too_complicated  
-  Fantastic thoughts from Laurie Voss on why modern web development appears to be complicated: expectations for web usage have changed, and developers are trying to adapt.
+  Fantastic thoughts from Laurie Voss on why modern web development appears to be complicated: expectations for web usage have changed, and developers are trying to adapt.
+
+- **Keeping Up With the JavaScript World**  
+  https://daveceddia.com/keeping-up-with-javascript/  
+  Dave Ceddia offers some great advice on how to manage learning about what's new and changing in the JS community, including sources to follow for keeping up with what's new, choosing what to learn, and how to tackle actually learning things.

community-resources.md

@@ -72,6 +72,21 @@
   A collection of websites and applications using the React or React Native JavaScript library.
 
 
+#### Online IDEs and Editors
+
+- **CodeSandbox**  
+  https://codesandbox.io/  
+  An online IDE focused on React applications.  Includes the ability to import NPM packages, browse existing sandboxes by tags, export projects for use with Create-React-App, and much more.
+
+- **WebpackBin**
+  https://www.webpackbin.com/  
+  An online IDE with the ability to import NPM packages, create ES2015 and TypeScript projects, and more.
+
+- **StackBlitz**  
+  https://stackblitz.com/  
+  An online IDE based on Visual Studio Code, including its Intellisense code completion.  Can create React and Angular projects, import NPM packages, continue development while offline, and more.
+
+
 #### People
 
 - **Dan Abramov's React List**  

es6-features.md

@@ -287,4 +287,12 @@
 
 - **The State of Javascript Modules**  
   https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358  
-  An extended article summarizing the state of ES module implementations, how the transition to modules relates to the Node ecosystem, and what the changes will mean for Webpack users and module authors.
+  An extended article summarizing the state of ES module implementations, how the transition to modules relates to the Node ecosystem, and what the changes will mean for Webpack users and module authors.
+
+- **Reify: Meteor's evolving Javascript module compiler**  
+  https://blog.meteor.com/reify-meteors-evolving-javascript-module-compiler-70425fa45d81  
+  A detailed look at the subtleties of ES6 module syntax, and how Meteor's Reify compiler and Babel's module transform plugin deal with those restrictions in different ways.
+
+- **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. 

git-resources.md

@@ -95,6 +95,11 @@
   https://www.cuttlesoft.com/life-saving-git-tips/  
   A variety of useful tips, including use of cherry-picking, local pulling and testing, and use of aliases to simplify tasks
 
+- **Git Cheat Sheet: Useful Commands, Tips and Tricks**  
+  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.
+
+
 ## Specific Techniques
 
 - **Git's Patch Mode All the Way**  

javascript-resources.md

@@ -160,6 +160,14 @@ While this list is primarily focused on learning React and Redux, and generally
   http://madhatted.com/2016/1/25/let-it-be  
   https://www.reddit.com/r/javascript/comments/44yjzo/let_it_be_how_to_declare_javascript_variables/  
   A look at how `var`, `let`, and `const` behave, and how using them communicates intent.  Further discussion in the Reddit comments.
+
+- **This in Javascript**  
+  https://zellwk.com/blog/this/  
+  Tries to demystify the behavior of the `this` keyword by explaining the six situations that can change the value of `this`.
+
+- **Which Array Function When?**  
+  https://dev.to/andrew565/which-array-function-when  
+  A great explanation of the differences between the various methods that can loop over arrays (`map`, `filter`, `reduce`, and `forEach`), and when you should use each one.
 
 
 #### Paid Courses and Books

pros-cons-discussion.md

@@ -51,6 +51,10 @@
   https://www.lullabot.com/articles/why-choose-react  
   Some high-level thoughts on the benefits of choosing React, including proven use at scale, influence on the community, versatility, and that it's "just Javascript".
 
+- **Why We Chose React To Help Serve Millions of Educators**  
+  http://engineering.teacherspayteachers.com/2017/08/02/why-we-chose-react-to-help-serve-millions-of-educators.html  
+  The Teachers Pay Teachers team describes why they chose React to rebuild their UI, including the small API size, size of the community, battle-tested capabilities, and more.
+
 
 #### Redux/Flux Comparisons
 

react-ajax.md

@@ -13,6 +13,10 @@
 - **Where to fetch Data: componentWillMount vs componentDidMount**  
   https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/  
   A quick comparison of when these two lifecycle methods are called, and why AJAX calls should generally be done in `componentDidMount`
+
+- **How to fetch data in React**  
+  https://www.robinwieruch.de/react-fetching-data/  
+  An excellent look at several key aspects of fetching in data in React apps, including what components should containg the fetching and display logic, what lifecycle methods to use for API calls, and how to abstract out the fetching process into its own component.
 
 - **React AJAX Best Practices**  
   http://andrewhfarmer.com/react-ajax-best-practices/  

react-architecture.md

@@ -110,6 +110,10 @@
 - **Front End Center: Single-Responsibility Components: Object-Oriented Design in React**  
   https://youtu.be/pSdp92Up8O8  
   An excellent screencast that discusses how the "Single Responsibility Principle" can be applied to organizing and designing React components.
+
+- **React's Ecosystem as a flexible Framework**  
+  https://www.robinwieruch.de/essential-react-libraries-framework/  
+  Robin Wieruch discusses why React's "just the view" + "pick-and-choose libraries" approach is ultimately a good thing, and provides some opinionated decisions on good library choices for several categories such as app boilerplate, utility library, styling, AJAX requests, and more.
 
 
 #### React Best Practices

react-component-patterns.md

@@ -368,6 +368,11 @@
   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.
 
+- **"HOCs vs render callbacks / function-as-child"**  
+  https://twitter.com/mjackson/status/890725796117176321  
+  https://twitter.com/acdlite/status/890727843302301700  
+  A short but interesting Twitter thread with some comments from Michael Jackson, Andrew Clark, and others, on the mental differences between using HOCs and render callbacks.
+
 
 #### Wrapping Non-React Code
 
@@ -451,6 +456,14 @@
   https://spin.atomicobject.com/2017/07/20/d3-react-typescript/  
   Examples of some possible approaches to using D3 inside of React, including use of refs and components.
 
+- **Wrapping Web Components With React**  
+  https://www.sitepen.com/blog/2017/08/08/wrapping-web-components-with-react/  
+  A detailed walkthrough of how to create React components that wrap up existing web components, including managing props, handling events, and keeping the DOM in sync.
+
+- **Migrating complex Javascript applications**  
+  https://javascriptplayground.com/blog/2017/08/migrating-complex-javascript-angular-react/  
+  Jack Franklin describes the lessons learned when his team migrated from Angular to React, including why they migrated, how they approached the architecture changes, how they prioritized what to change, and more.  Includes some examples of the Angular->React change, but also good advice in general.
+
 
 #### Modal Dialogs
 

react-forms.md

@@ -65,6 +65,10 @@
 - **Understanding your options with forms in React**  
   https://medium.com/@thegreengreek/understanding-your-options-with-forms-in-react-afedc91ebf3e  
   A quick summary of the three major forms approachs (controlled inputs, uncontrolled inputs + refs, uncontrolled inputs + serialization), with code examples for each
+
+- **Transitioning from uncontrolled inputs to controlled**  
+  https://goshakkk.name/turn-uncontrolled-into-controlled/  
+  Explains how to refactor React forms with uncontrolled inputs to use controlled inputs instead.
 
 
 #### Form Tutorials and Usage

react-implementation.md

@@ -193,6 +193,10 @@
   https://www.infoq.com/news/2017/05/react-fiber-closer-look  
   A useful summary of the goals and implementation approach for the new React Fiber algorithm
 
+- **Top Resources to Explore React Fiber**  
+  https://hackernoon.com/top-resources-to-explore-react-fiber-9a2b19114520  
+  A helpful list of links to further articles and resources for learning about React Fiber
+
 - **React Fiber Architecture**  
   https://github.com/acdlite/react-fiber-architecture  
   A description of React's new core algorithm, React Fiber

react-performance.md

@@ -156,6 +156,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   https://blog.vixlet.com/react-at-light-speed-78cd172a6411  
   The Vixlet team discusses perf optimizations they've applied to their app.  Includes a lot of the common advice like use of `shouldComponentUpdate`, but also has advice on use of literal values and issues with performance traps with JS timer functions.
 
+- **React Performance Anti-Pattern: Creating Functions in `render()`**  
+  https://medium.com/@erikras/react-performance-anti-pattern-creating-functions-in-render-ddeb5ebd2933  
+  Describes why creating functions inside of `render()` is bad for perf, specifically in relation to optimization and prop reference comparisons, and offers several alternate patterns as solutions.
+
 
 #### Code Splitting and Progressive Apps
 

react-redux-testing.md

@@ -233,11 +233,20 @@
 - **Building a React/Redux app with Test Driven Development**  
   https://medium.com/@gilly.ames/building-a-react-redux-app-with-test-driven-development-b2ed73e60be9  
   A guided walkthrough that shows how to apply TDD to actions, reducers, and services
+
+- **Testing Replicated Redux**  
+  http://jimpurbrick.com/2017/07/31/testing-replicated-redux/  
+  Describes how the use of "property testing" to generate possible actions helped the author track down bugs in his distributed multiplayer Redux application.
 
 
 
 #### General Testing, Tools, and Setup
 
+
+- **An Overview of JavaScript Testing in 2017**  
+  https://medium.com/powtoon-engineering/a-complete-guide-to-testing-javascript-in-2017-a217b4cd5a2a  
+  A detailed guide to the terms, tools, and concepts used in testing Javascript.
+
 - **Javascript Testing: Unit vs Functional vs Integration**  
   https://www.sitepoint.com/javascript-testing-unit-functional-integration/  
   A comparison of the various levels of tests you can run, and what roles they play in development.

react-routing.md

@@ -39,6 +39,14 @@
   https://medium.com/@pshrmn/a-little-bit-of-history-f245306f48dd  
   A deep look at the "history" library, which is the core of React Router and used by other routing libraries as well.
 
+- **Building a context-free React router**  
+  https://reactarmory.com/guides/context-free-react-router  
+  A tutorial that teaches how to create a simple push-state based React router without relying on React's context API.
+
+- **All About React Router 4**  
+  https://css-tricks.com/react-router-4/  
+  A deep look at patterns and strategies for using React-Router v4 successfully.
+
 
 #### Routing with Redux
 
@@ -74,6 +82,14 @@
   https://medium.com/faceyspacey/redux-first-router-data-fetching-solving-the-80-use-case-for-async-middleware-14529606c262  
   An extended article discussing "component-first" vs "route-first" data fetching approaches, and how the author's library helps solve the "route-first" approach.
 
+- **Redux-First Router: Just Dispatch Actions**  
+  https://survivejs.com/blog/redux-first-router-interview/  
+  An interview with the author of the redux-first-router library.  The author describes the core concepts, how it differs from React-Router, useful features, and why he developed it.
+
+- **A Redux First Router Saga**  
+  https://medium.com/@bryanfillmer/a-redux-first-router-saga-67c2cda9252e  
+  Examples and discussion of how to use sagas in conjunction with Redux-based routing to handle side effects that are connected to route changes.
+
 
 #### Authentication
 

react-server-rendering.md

@@ -50,4 +50,10 @@
   A good tutorial that walks through the basic setup needed to start rendering React components into HTML in an Express server.
 
 
-
+- **Server-Render like a Pro /w Redux-First Router in 10 steps**  
+  https://medium.com/faceyspacey/server-render-like-a-pro-w-redux-first-router-in-10-steps-b27dd93859de  
+  A walkthrough for using the author's Redux-First Router library for managing SSR, including setting up Webpack configs.
+
+- **Introducing Second: a framework for mostly-static React applications**  
+  https://wildlyinaccurate.com/introducing-second-a-framework-for-mostly-static-react-applications/  
+  Describes a new library for rendering static sites with React, with the ability to opt-in to "dehydrating" certain components on the client to make them interactive.

react-techniques.md

@@ -11,6 +11,29 @@
   https://www.dailydrip.com/blog/adding-drag-and-drop-to-react.html  
   An example of using react-dnd to add drag-and-drop behavior, in conjunction with Redux.
 
+- **Exploiting Script Injection Flaws in ReactJS Apps**  
+  https://medium.com/dailyjs/exploiting-script-injection-flaws-in-reactjs-883fb1fe36c1  
+  Describes how React is safe by design as long as it's used as intended, and looks at several possible attack vectors that can result from wrong use of React.
+
+- **Climbing Up the React Component Tree**  
+  https://www.ynonperek.com/2017/08/05/react-parent-hirearchy/  
+  https://www.reddit.com/r/reactjs/comments/6s4czp/traversing_react_tree_in_the_opposite_direction/  
+  Gives examples for calculating an array describing a component's parents, including using a HOC and using context.  Not a recommended thing to try, but the exploration of the idea is interesting.
+  The Reddit comments have a bit more useful discussion.
+
+#### Using React Without JSX
+
+- **Is JSX Still Relevant? Are there other options?**  
+  https://goshakkk.name/jsx-relevancy-options/  
+  Gosha Arinich addresses complaints about using JSX and "mixing HTML into JS" by discussing how JSX is syntax sugar for `React.createElement()` calls, and how JSX is really optional.
+
+- **React Without JSX**  
+  https://mockbrian.com/blog/2017/08/11/react-without-jsx/  
+  Describes how to add React to an existing page with no build tools, and a couple approaches to writing render functions that don't use JSX.
+
+- **Integrating React and Redux Into an Existing Backbone App**  
+  http://blog.isquaredsoftware.com/2017/07/react-redux-backbone-integration/
+  A look at ways to show React components inside of Backbone views, and some discussion of how to simplify React rendering when JSX isn't available by using libraries like `react-hyperscript-helpers`.
 
 
 #### Debugging and Error Handling
@@ -21,4 +44,9 @@
 
 - **React v16 beta is out, suddenly everyone needs to catch UI errors**  
   https://medium.com/shiftgig-blog/react-v16-beta-is-out-suddenly-everyone-needs-to-catch-ui-errors-37c8c4b527e9  
-  Discussion and examples of using the new `componentDidCatch` and `ErrorBoundary` features in React 16, including a demo of what errors they will and won't catch.
+  Discussion and examples of using the new `componentDidCatch` and `ErrorBoundary` features in React 16, including a demo of what errors they will and won't catch.
+
+- **Catching exceptions using Higher Order Components in React 16**  
+  https://codeburst.io/catching-exceptions-using-higher-order-components-in-react-16-b8a401853a10  
+  https://twitter.com/dan_abramov/status/890716011133100032  
+  Examples of how to write a Higher-Order-Component that adds error boundaries.  ALso worth contrasting with Dan's tweet, where he suggests that you shouldn't need to use HOCs to make use of error boundaries.

react-tutorials.md

@@ -17,7 +17,8 @@
   A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment.
 
 - **Learn React From Your Browser: Introducing React**  
-  https://reactarmory.com/guides/learn-react-in-browser-with-animated-fractal/introducing-react  An excellent tutorial that teaches React concepts from basic principles without buzzwords or build tools, using interactive editable examples.  (This is a rewritten and improved version of the "Learn Raw React" tutorial.)  
+  https://reactarmory.com/guides/learn-react-by-itself  
+  An excellent tutorial that teaches React concepts from basic principles without buzzwords or build tools, using interactive editable examples.  (This is a rewritten and improved version of the "Learn Raw React" tutorial.)  
 
 - **Learn Raw React**  
   http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/  

redux-architecture.md

@@ -259,6 +259,11 @@
 - **10 Redux tips to scale your dev team**  
   https://blog.matters.tech/10-redux-tips-from-the-trenches-55e06ed1c0a8  
   Some excellent suggestions for helping larger dev teams use Redux successfully, including planning traing/docs reading time, generalizing action types, normalizing state, and more.
+
+- **Scaling Redux: Codebase Organization and Organizing State**  
+  https://medium.com/@uttamkini/scaling-redux-part-1-codebase-organization-80f978cd8a72  
+  https://medium.com/@uttamkini/scaling-redux-part-2-organizing-state-8a1c5e8fffbf  
+  Several suggestions for managing a Redux codebase, including use of feature folders / ducks, separating data and UI state in the store, organizing data by API structure, and more.
 
 
 #### Encapsulation and Reusability
@@ -348,6 +353,9 @@
   https://medium.com/@alexmngn/how-to-use-redux-on-highly-scalable-javascript-applications-4e4b8cb5ef38  
   Discussion of ways to structure reducers, selectors, and other logic into reusable features
 
+- **Building a simple Redux library**  
+  https://medium.com/@tcclevela/building-a-simple-redux-library-44ce4f004822  
+  Looks at important steps to follow when building a Redux addon library: only use middleware if really needed, keep things simple, and encapsulate abstractions.  Shows a particularly good example of using selectors in the library to encapsulate state lookups, and allowing the end user to initialize the selectors so that the data can be mounted anywhere in the state tree the user wants.
 
 
 #### Variations on Redux Architectures

redux-side-effects.md

@@ -229,6 +229,10 @@
   https://medium.com/@chanakyabhardwaj/modelling-common-patterns-with-redux-saga-464a380a37ce  
   Examples of saga logic patterns for behaviors like "first-amongst-these", "keep-doing-until", and "step-by-step".
 
+- **Building an event system using Redux and Sagas**  
+  http://blog.servicebot.io/building-our-event-and-user-notification-system-in-express-using-redux-and-sagas/  
+  Some quick examples of using Redux-Saga in a Node Express app to handle processing for things like sending emails.
+
 
 #### Other Side Effect Approaches