Updates, 2017-09-03

basic-concepts.md

@@ -107,6 +107,10 @@
 - **Ten Things a Serious JavaScript Developer Should Learn**  
   https://benmccormick.org/2017/07/19/ten-things-javascript/  
   A well-written, excellent collection of advice for mid-level JS developers, listing important topics that they should be familiar with.
+
+- **So you completed the official React tutorial. Now what?**  
+  https://goshakkk.name/next-steps-official-react-tutorial/  
+  General advice on how to approach learning new things in general without getting overloaded, as well as specific advice for concepts and ideas to learn about after grasping the basics of React.
 
 
 #### General Suggestions for Learning

boilerplates-and-starter-kits.md

@@ -21,6 +21,10 @@
   https://github.com/tstringer/react-laboratory  
   An absolute bare-minimum project.  One tiny Webpack config, one JS file, one component.  Pretty much the smallest possible setup to use React and JSX with Webpack.
 
+- **TypeScript React Starter**  
+  https://github.com/Microsoft/TypeScript-React-Starter  
+  A quick start guide to setting up a TypeScript project using a TS-specific variation on Create-React-app's `react-scripts` package.  Includes instructions for adding TSLint, Jest, Enzyme, and Redux.
+
 
 
 #### Full-Featured Starter Kits

es6-features.md

@@ -76,6 +76,10 @@
   https://ecmasyntax.io  
   A reference site listing the syntax of features in ES6, and comparing them with earlier ES behavior.
 
+- **Laracasts: ES2015 Crash Course**  
+  https://laracasts.com/series/es6-cliffsnotes  
+  A video screencast series that covers the new features and syntax in ES6/ES2015.
+
 
 #### In-Depth Details
 

functional-programming.md

@@ -155,3 +155,6 @@
   https://medium.com/@kentcdodds/classes-complexity-and-functional-programming-a8dd86903747  
   Kent C Dodds looks at pros and cons of using classes, issues with the `this` keyword in Javascript, and some ways to avoid using classes
 
+- **What's Functional Programming All About?**  
+  http://www.lihaoyi.com/post/WhatsFunctionalProgrammingAllAbout.html  
+  A detailed explanation of how "functional" programming differs from "imperative" programming, using a food recipe as an example of the steps involved.

git-resources.md

@@ -121,6 +121,10 @@
 - **A closer look at git rebase**  
   https://dev.to/gonedark/a-closer-look-at-git-rebase  
   An explanation of what "rebasing" is, with some helpful graphics
+
+- **Visualize Merge History with git log --graph, --first-parent, and --no-merges**  
+  https://redfin.engineering/visualize-merge-history-with-git-log-graph-first-parent-and-no-merges-c6a9b5ff109c  
+  Describes issues with using `git log` to visualize history, and some arguments that can be used to give a potentially better picture of what's actually happened.
 
 
 #### E-Books

mobx-tutorials.md

@@ -116,4 +116,8 @@ A great video to understand the differences between MobX and Redux.
 
 - **Comparing Redux and MobX with two CTOs**  
   https://youtu.be/ZGVwMkrL2n0  
-  A recorded presentation of two CTOs comparing several major aspects of React state management with `setState`, MobX, and Redux
+  A recorded presentation of two CTOs comparing several major aspects of React state management with `setState`, MobX, and Redux
+
+- **Introduction to Redux and MobX**  
+  https://medium.com/@guptagaruda/introduction-to-redux-and-mobx-e6fa98b6479  
+  A very nice comparison of the core concepts and benefits for Redux and MobX, with some good diagrams, useful tips, and links to relevant resources.

project-structure.md

@@ -87,3 +87,7 @@
 
 - **Decoupling Hierarchies for Maintainable Code**  
   https://medium.com/altschool-engineering/decoupling-hierarchies-for-maintainable-code-b13c24b2f047  
+
+- **Writing Scalable React Apps with the Component Folder Pattern**  
+  https://medium.com/styled-components/component-folder-pattern-ee42df37ec68  
+  Describes a specific variation on "feature folders" that puts all files for a given component in a separate folder, as well as an approach for providing configurable component rendering with default behavior as a fallback.

pros-cons-discussion.md

@@ -116,6 +116,12 @@
   https://twitter.com/modernserf/status/886426115874717697  
   Deep and fascinating analysis of how Redux compares to OOP and message-passing, how typical Redux usage can devolve towards Java-like "setter" functions with more boilerplate, and something of a plea for a higher-level "blessed" abstraction on top of Redux to make it easier to work with and learn for newbies.  Very worth reading.  The author originally wrote a tweetstorm, which I captured in the Storify link, and wrote the blog post to expand on those thoughts.  Finally, he followed up with a few more thoughts on abstract vs concrete examples in another shorter tweet thread.
 
+- **6 mistakes Reacters make that Re-framers avoid**  
+  https://purelyfunctional.tv/article/react-vs-re-frame/  
+  https://news.ycombinator.com/item?id=15157527  
+  https://news.ycombinator.com/item?id=15158334
+  Comparisons between common React/Redux patterns, and how ClojureScript developers using the Reframe toolkit might solve the problems instead.  Some decent discussion in the HN comments, including one comment that directly responds to the points in the original article, and discusses how React+Redux give you the power to solve the specific problems you're dealing with.
+
 
 #### Comment Threads and Discussions
 
@@ -268,6 +274,18 @@ similar structures in ClojureScript.
   https://medium.com/@dwalsh.sdlr/react-facebook-and-the-revokable-patent-license-why-its-a-paper-25c40c50b562  
   Analysis of the React patent license from an IP lawyer, in response to the latest set of discussions and arguments online
 
+- **3 Points to Consider before Migrating Away from React because of Facebook's 'BSD+Patent' License**  
+  https://medium.com/progressive-web-apps/react-progressive-web-apps-part-2-d55c6bd4b316  
+  Several valuable thoughts from a patent attorney on what the React PATENTS license actually means, how it relates to "React alternatives" like Preact, and how it affects React users legally.
+
+- **Open Source Community Over-REACTS to X Rated Code**  
+  https://heathermeeker.com/2017/08/19/open-source-community-over-reacts-to-x-rated-code/  
+  A patent attorney gives perspective on how React's PATENTS license is similar to already-existing licenses, and what that means for both the Apache Software Foundation and other React users.
+
+- **Undersatnding the Facebook vs Apache Software Foundation License Kerfluffle**  
+  http://writing.jan.io/2017/08/19/understanding-the-facebook-vs-asf-license-kerfuffle.html  
+  A no-nonsense, clearly-written explanation of exactly what has happened regarding the Apache Software Foundation and the Facebook BSD+Patents license, including a timeline of events, summary of stances on both sides, and an FAQ on what it means.
+
 - **Comments from other companies on the acceptability of the license**  
   https://wptavern.com/automattic-will-continue-to-use-react-js-in-calypso-despite-patent-clause  
   https://twitter.com/paul_irish/status/754864479460929536  
@@ -279,6 +297,9 @@ similar structures in ClojureScript.
   https://www.reddit.com/r/programming/comments/6nnxir/apache_foundation_bans_use_of_facebook_bsdpatents/dkb3v4p/?context=3  
   One of the best layman's summaries I've seen about what the patents file actually means and is intended to do.
 
+
+
+
 - **Further discussions**  
   https://news.ycombinator.com/item?id=12108273  
   https://news.ycombinator.com/item?id=12108526  

react-ajax.md

@@ -10,6 +10,10 @@
   https://medium.com/@baphemot/how-to-make-ajax-requests-in-react-a6a52bb5a8b1  
   A helpful introduction to making AJAX requests, including libraries to use, where to run requests, and a couple examples of handling "loading..." status.
 
+- **Understanding React: data hydration / initialization**  
+  https://medium.com/@baphemot/understanding-reactjs-data-hydration-initialization-bacbb790c7cb  
+  Describes several possible approaches to loading data from a server at app startup, including API calls and ways to embed data into the page.
+
 - **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`

react-component-patterns.md

@@ -258,6 +258,14 @@
 - **Extracting Logic from React Components**  
   https://javascriptplayground.com/blog/2017/07/react-extracting-logic/  
   Demonstrates taking a component that includes some logic for formatting a value, and refactoring it to extract out the formatting logic into separate functions.
+
+- **Refactoring React**  
+  https://8thlight.com/blog/josh-mccormick/2017/08/21/refactoring-react.html  
+  Demonstrates extracting state and logic out of a component to separate responsibility and improve ease of testing.
+
+- **How do you separate React components?**  
+  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.
 
 
 
@@ -373,6 +381,10 @@
   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.
 
+- **Real World Higher-Order Components**  
+  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.
+
 
 #### Wrapping Non-React Code
 
@@ -491,6 +503,10 @@
   https://medium.com/@MoneyhubEnterpr/tasks-and-portals-in-react-1df2438cdebb  
   Describes how MoneyHub implemented modal dialogs with wizard-like workflows that tie together multiple screens, using a combination of container components and portals.
 
+- **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.
+
 
 #### Composing Components with Functional Programming
 
@@ -558,4 +574,7 @@
 - **Creating a cross-domain React component with xcomponent**  
   https://medium.com/@bluepnume/creating-a-cross-domain-react-component-with-xcomponent-fbcccc4778fd  
   A look at how to wrap a React component using the xcomponent library, so that it can be rendered and used across domains.
-
+
+- **Using React v16 to create self-destructing components**  
+  https://medium.com/@gajus/using-react-v16-to-create-self-destructing-components-de8e4eb61d0f  
+  Demonstrates how a tiny component that simply returns its own children can simplify the process of returning arrays of components in React 16.

react-forms.md

@@ -69,6 +69,10 @@
 - **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.
+
+- **Tightly Controlled Textareas - Building solid plain text editors in React**  
+  https://hashnode.com/post/tightly-controlled-textareas-building-solid-plain-text-editors-in-react-cj6yvu6yq00cls5wtrbbkw96d  
+  A tutorial for implementing controlled behavior for a simple Markdown text editor component, including examples.
 
 
 #### Form Tutorials and Usage
@@ -179,4 +183,8 @@
 
 - **List or Form, why not both? Making a list with a built in editor in React**  
   http://thereactionary.net/list-or-form-why-not-both-making-a-list-with-a-built-in-editor-in-react/  
-  Builds an example of a list with the ability to do inline editing of items.
+  Builds an example of a list with the ability to do inline editing of items.
+
+- **Comparison of form libraries in React**  
+  https://codebrahma.com/form-libraries-in-react/  
+  A good comparison of several different React/Redux-based form libraries, with code snippets demonstrating usage.

react-performance.md

@@ -160,6 +160,14 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   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.
 
+- **Memoize React components**  
+  https://medium.com/@planttheidea/memoize-react-components-33377d7ebb6c  
+  Discusses the basic ideas of memoization, and shows how they can be applied to wrapping React components using the `moize` library (or other memoization libraries).
+
+- **When to use Component or PureComponent**  
+  https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81  
+  Good advice on the potential benefits of using `PureComponent`, as well as several potential downsides or gotchas (such as binding functions in `render()`).
+
 
 #### Code Splitting and Progressive Apps
 
@@ -193,6 +201,11 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
   https://mackness.github.io/react/patterns/2017/03/20/simple-pattern-for-asynchronously-loading-react-components.html  
   A quick example of using dynamic importing to lazy-load React components
 
+- **React Progressive Web Apps**  
+  https://medium.com/progressive-web-apps/react-progressive-web-apps-part-1-1cf381421672  
+  https://medium.com/progressive-web-apps/react-progressive-web-apps-part-2-d55c6bd4b316  
+  A pair of posts that cover how to set up an initial PWA and check its behavior against best practices, and how to add offline-first behavior to a React+Redux PWA. 
+
 
 #### Immutable Data
 
@@ -302,4 +315,8 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
 
 - **Redux isn't slow, you're just doing it wrong - an optimization guide for React-Redux**  
   http://reactrocket.com/post/react-redux-optimization/  
-  An excellent summary of the basic steps for good performance with React-Redux
+  An excellent summary of the basic steps for good performance with React-Redux
+
+- **Measuring performance gains - AngularJS to React (with Redux or MobX)**  
+  https://medium.com/@guptagaruda/measuring-performance-gains-angularjs-to-react-with-redux-or-mobx-fb221517455  
+  A highly detailed article that investigates and benchmarks performance between an Angular 1.x app and equivalent React+Redux and React+MobX apps in a variety of real-world use cases.  Excellently written and researched.

react-routing.md

@@ -90,6 +90,10 @@
   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.
 
+- **Redux First Router - First Impressions**  
+  https://www.dailydrip.com/topics/react/drips/redux-first-router-first-impressions  
+  A short tutorial that shows how to add redux-first-router to a CRA project and configure it.
+
 
 #### Authentication
 

react-techniques.md

@@ -1,7 +1,5 @@
 ### React Tips and Techniques
 
-
-
 
 - **Get your React.js application translated with style**  
   https://medium.com/@jamuhl/get-your-react-js-application-translated-with-style-4ad090aefc2c  
@@ -10,18 +8,34 @@
 - **Adding Drag and Drop to React**  
   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
+- **SVG Patterns in React - Build a Twitter Wall**  
+  https://www.robinwieruch.de/react-svg-patterns/  
+  A tutorial that covers several aspects of using SVG in React, and demonstrates how to use the svg-patterns library to generate patterend backgrounds.
+
+- **Using React v16 to create self-destructing components**  
+  https://medium.com/@gajus/using-react-v16-to-create-self-destructing-components-de8e4eb61d0f  
+  Demonstrates how a tiny component that simply returns its own children can simplify the process of returning arrays of components in React 16.
+
+
+#### Security
+
+- **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.
+
+- **How can I securely use CSS-in-JS with React?**  
+  https://reactarmory.com/answers/how-can-i-use-css-in-js-securely  
+  Covers several potential security holes that can result from allowing user input into CSS-in-JS libraries, with examples.
+
+
+#### JSX
 
 - **Is JSX Still Relevant? Are there other options?**  
   https://goshakkk.name/jsx-relevancy-options/  
@@ -35,6 +49,14 @@
   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`.
 
+- **How I learned to stop worrying and love the JSX**  
+  http://jamesknelson.com/learned-stop-worrying-love-jsx/  
+  Discusses several aspects of JSX, including "separation of concerns", how JSX translates into function calls, that JSX is optional, when to avoid using JSX, and more.
+
+- **React without a build step**  
+  https://medium.com/@alexkrolick/writing-react-components-for-3rd-party-embedding-50331c18e26  
+  Describes how using `React.createElement` instead of JSX eliminates the need for a compile step, compares examples of equivalent JSX and `createElement` usage, and shows how to write a small embeddable widget using React/Preact that doesn't need any build step at all.
+
 
 #### Debugging and Error Handling
 

react-tutorials.md

@@ -340,6 +340,18 @@
   https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/  
   Demonstrates building a component that listens to mouse events, saves the coordinates, and draws the resulting lines using SVG.
 
+- **React Crash Course for Beginners**  
+  https://code.tutsplus.com/series/react-crash-course-for-beginners--cms-1204  
+  A tutorial series that teaches React concepts by building a movie gallery app.
+
+- **Creating a Blogging App Using React**  
+  https://code.tutsplus.com/series/creating-a-blogging-app-using-react--cms-1171  
+  A tutorial series that shows how to build a blogging app with a server backend that includes routing authentication, and CRUD.
+
+- **Build a Metronome in React**  
+  https://daveceddia.com/build-metronome-react/  
+  An easy-to-follow, step-by-step tutorial that demonstrates key concepts like loading data, initializing state, and handling input changes.
+
 
 #### Paid Courses and Books