Updates, 2018-01-01

basic-concepts.md

@@ -31,9 +31,9 @@
   https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b  
   An approach to understanding the variety of build tools by categorizing them as "installing" vs "doing"
 
-- **The State of Javascript in 2016: Survey Results**
-  http://stateofjs.com/  
-  Results from a survey of over 9000 developers, covering use of Javascript tools, technologies, and concepts.
+- **The State of Javascript in 2017: Survey Results**
+  https://stateofjs.com/  
+  Results from a survey of over 23000 developers, covering use of Javascript tools, technologies, and concepts.
 
 - **The (R)Evolution of Web Development**  
   http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/  
@@ -80,6 +80,10 @@
   https://closebrace.com/articles/2017-09-11/a-brief-incomplete-history-of-javascript  
   An excellent history lesson that recaps the four major eras of web development and JS usage: the Early Era, the jQuery Era, the Single Page App Era, and the Modern Era.
 
+- **Frontend in 2017: The important parts**  
+  https://blog.logrocket.com/frontend-in-2017-the-important-parts-4548d085977f  
+  An overview of major trends, tools, and concepts in the front-end web dev world in 2017.  Very good look at what's popular, what's changing, and how these pieces fit together.
+
 
 #### Suggested Learning Approaches
 
@@ -123,7 +127,11 @@
 - **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.
-
+
+- **Spellbook of Modern Web Dev**  
+  https://github.com/dexteryy/spellbook-of-modern-webdev#gui-framework  
+  A large list of categorized resources for dozens of web development-related topics.
+
 
 #### General Suggestions for Learning
 

boilerplates-and-starter-kits.md

@@ -3,7 +3,7 @@
 
 #### Suggested Starter Kits for Learners
 
-**NOTE**: It's easy for someone new to the React/Redux ecosystem to get confused by some of these boilerplates and starter kits.  Many of them include dozens of specifically-configured libraries, and it can be hard for a learner to understand how all the pieces fit together.  If you're trying to learn React or Redux for the first time, it's suggested that you start with reading tutorials and articles first, until you have a reasonable understanding of how things work.  However, if you _do_ want to use a starter kit as a learning tool, I specifically suggest the ones in this section.  They are simpler, easier to understand, and well documented.  In particular, Create-React-App is highly recommended.
+**NOTE**: It's easy for someone new to the React/Redux ecosystem to get confused by some of these boilerplates and starter kits.  Many of them include dozens of specifically-configured libraries, and it can be hard for a learner to understand how all the pieces fit together.  If you're trying to learn React or Redux for the first time, it's suggested that you start with reading tutorials and articles first, until you have a reasonable understanding of how things work.  However, if you _do_ want to use a starter kit as a learning tool, I specifically suggest the ones in this section.  They are simpler, easier to understand, and well documented.  In particular, Create-React-App is highly recommended.  Also see [Should I use a boilerplate with React?](http://blog.jakoblind.no/should-i-use-a-boilerplate-for-react/) for similar thoughts.
 
 - **Create-React-App**  
   https://github.com/facebookincubator/create-react-app  
@@ -83,6 +83,10 @@
   http://habd.as/awesome-react-boilerplates/  
   Another good curated list of boilerplates for both React and React Native
 
+- **React Community: Starter Kit**  
+  https://reactjs.org/community/starter-kits.html  
+  A list of starter kits that are officially recommended by the React team, as well as other kits from the community.
+
 
 
 #### React Project Setup

community-resources.md

@@ -71,6 +71,10 @@
   http://madewithreact.com/  
   A collection of websites and applications using the React or React Native JavaScript library.
 
+- **Awesome React**  
+  https://react.libhunt.com/  
+  A categorized collection of awesome React libraries, resources and shiny things, based on the awesome-react list.
+
 
 #### Online IDEs and Editors
 

es6-features.md

@@ -103,6 +103,9 @@
   http://appendto.com/2016/06/why-do-es6-classes-exist-and-why-now/  
   Digs into some of the intricacies of ES6 classes, and some of the pros and cons around using them
 
+- **How ES6 classes really work, and how to build your own**  
+  https://medium.com/@robertgrosse/how-es6-classes-really-work-and-how-to-build-your-own-fd6085eb326a  
+  A deep dive into Javascript's object model, prototypal inheritance, and how ES6 classes are implemented in relation to prototypes.
 
 
 

framework-comparisons.md

@@ -26,6 +26,14 @@
 - **React vs Angular 2+: Developer Ergonomics**  
   https://medium.com/@stelly_ryan/react-vs-angular-2-developer-ergonomics-b6d5103e8699  
   Specific opinion-based comparisons on the developer experience for React and Angular in areas like components, testing, and framework-specific syntax, based on writing equivalent example apps using both frameworks.
+
+- **How is React different from Vue?**  
+  https://javascriptreport.com/how-is-react-different-from-vue/  
+  A higher-level overview of some of the similarities and differences between React and Vue, including quotes from Dan Abramov and Evan You.
+
+- **Unopinionated comparison of Glimmer and React**  
+  https://wyeworks.com/blog/2017/12/20/unopinionated-comparison-of-glimmer-and-react  
+  A well-written comparison of small React and Glimmer components that implement the same functionality.
 
 
 #### React and Flux vs Backbone
@@ -59,4 +67,8 @@
 
 - **AngularJS migration to React/Redux**  
   https://hashnode.com/post/angularjs-migration-to-reactredux-cj7t0m67x012ehowugcvjn1xj  
-  Examples of how to approach migrating an Angular 1 app by first switching some components to use React, then adding state management to use Redux.
+  Examples of how to approach migrating an Angular 1 app by first switching some components to use React, then adding state management to use Redux.
+
+- **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.

functional-programming.md

@@ -173,4 +173,8 @@
 
 - **Currying vs Partial Application**  
   http://www.datchley.name/currying-vs-partial-application/  
-  A great explanation of the difference between "currying" functions and "partially applying" them
+  A great explanation of the difference between "currying" functions and "partially applying" them
+
+- **Lodash is not (only) for list manipulation!**  
+  https://blog.pragmatists.com/lodash-is-not-only-for-list-manipulation-791c2e3b9de1  
+  Examples of how to compose the `lodash/fp` functions to create functional data transformation pipelines.

git-resources.md

@@ -116,6 +116,9 @@
   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.
 
+- **Advanced Git Commands You Will Actually Use**  
+  https://stosb.com/blog/advanced-git-commands-you-will-actually-use/  
+  Describes a wide variety of useful commands, such as ways to refer to commits, searching commit logs, manipulating history, and much more.
 
 ## Specific Techniques
 

immutable-data.md

@@ -81,6 +81,9 @@
   https://medium.com/@housecor/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5  
   A summary of four different ways to update state immutably
 
+- **Immutability in React and Redux**  
+  https://medium.com/@nitishkr88/immutability-in-react-and-redux-7137f7b3197  
+  A good introduction to immutability concepts and practical usage.  Covers how equality comparisons work in Javascript, reference comparisons vs deep quality checks, ways to avoid mutations, use of Immutable.js, and how to handle nested updates.
 
 #### Immutable Data Libraries
 

javascript-resources.md

@@ -178,7 +178,14 @@ While this list is primarily focused on learning React and Redux, and generally
 - **What is This in Javascript?**  
   https://developer.telerik.com/topics/web-development/what-is-this-in-javascript/  
   An easy-to-read explanation of the different ways `this` can be defined in a function.
-
+
+- **Everything you wanted to know about JavaScript scope**  
+  https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/  
+  A detailed look at the concept of "scopes" in JS, including global, local, function, and lexical scopes, and how `this` behaves in relation to scopes.
+
+- **On `this` in Javascript**  
+  http://georgemauer.net/2017/08/03/on-this-in-javascript.html  
+  Describes how `this` is just a function parameter you don't get to name, and shows how it works with normal functions, arrow functions, and classes
 
 #### Paid Courses and Books
 

pros-cons-discussion.md

@@ -67,6 +67,10 @@
   https://blog.cloud-elements.com/dev-discuss-why-we-built-our-new-ui-in-react-from-the-ground-up  
   The Cloud Elements team describes why they rewrote their UI in React, and how the React ecosystem worked well for their approach.
 
+- **Advocating for software quality at METRO**  
+  https://www.thoughtworks.com/insights/blog/advocating-software-quality-metro  
+  The METRO Cash & Carry team discusses how they've handled migrating parts of their app from Reflux to Redux, including motivation, business issues, the case for quality, and their strategy for migrating.
+
 
 #### Redux/Flux Comparisons
 

react-component-composition.md

@@ -99,7 +99,13 @@
   https://codeburst.io/save-the-zombies-how-to-add-state-and-lifecycle-methods-to-stateless-react-components-1a996513866d  
   A humorously-written look at how to extract state management logic into HOCs.
 
-
+- **HOC in a nutshell**  
+  http://coding4real.com/2017/12/23/hoc-nutshell-bonus-example/  
+  Describes how HOCs can be used to encapsulate reusable code, and demonstrates HOcs that help with route authentication and work with Redux.
+
+- **Composing Higher-Order Components**  
+  https://medium.com/@caseymorrisus/react-composing-higher-order-components-hocs-3a5288e78f55  
+  Gives examples of common use cases for HOCs, shows some example implementations, and  demonstrates how to compose HOcs together.
 
 
 #### Render Props/Function As Child
@@ -230,4 +236,12 @@
 
 - **React Developer's Everyday Struggle - Extending Big Applications**  
   https://blog.callstack.io/react-developers-everyday-struggle-extending-big-applications-84ec4e62e2ad  
-  Looks at different possible solutions to handling form inputs and validation logic, including existing form libs, a validation HOC, and a function-as-children approach.
+  Looks at different possible solutions to handling form inputs and validation logic, including existing form libs, a validation HOC, and a function-as-children approach.
+
+- **Seven patterns by example: the many ways to `type="radio"` in React**  
+  https://techblog.commercetools.com/seven-patterns-by-example-the-many-ways-to-type-radio-in-react-bfe14322bb6f  
+  Compares multiple approaches for rendering and controlling a group of radio inputs, including passing a list of options as an array, creating a RadioOption component, compound components, context, function as a child, prop getters, and dynamic RadioOption creation.
+
+- **How "Controllable" React components maximize reusability**  
+  https://medium.com/myheritage-engineering/how-controllable-react-components-maximize-reusability-86e3d233fa8e  
+  Gives examples of uncontrolled, controlled, and controllable components, looks at pros and cons of those approaches, and describes how controllable components improve reusability.

react-component-patterns.md

@@ -55,6 +55,10 @@
   https://reacttraining.com/patterns/  
   The lecture videos from React Training's "Advanced React" course.  The videos themselves are now free.  Covers topics like declarative vs imperative, compound components, context, Higher Order Components, render props, and controlled components.
 
+- **The Common Patterns of React**  
+  https://blog.pixelingene.com/2017/09/the-common-patterns-of-react/  
+  A friendly visual overview of common React patterns like higher-order components, function-as-child, context, callbacks, container/presentational components, and compound components.
+
 
 #### Component Definition Approach Comparisons
 
@@ -163,6 +167,14 @@
   https://www.kirupa.com/react/component_lifecycle.htm  
   Another useful description of the order and purpose of the lifecycle methods.
 
+- **Understanding React - Component life-cycle**  
+  https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d  
+  An extensive description of the various React lifecycle methods, and how you should and shouldn't use them.
+
+- **Lifecycle Simulators**  
+  https://reactarmory.com/guides/lifecycle-simulators  
+  An interactive set of simulators for React components that let you step through a component's lifecycle and watch how state and props respond to actions over time.
+
 - **React In-Depth: The React Life Cycle**  
   https://developmentarc.gitbooks.io/react-indepth/content/  
   A deep dive into the lifecycle methods, and various techniques for using them.
@@ -404,9 +416,13 @@
   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.
+- **How to integrate React into an existing app?**  
+  https://reactarmory.com/answers/how-to-integrate-react-into-existing-app  
+  Looks at ways to add React to an existing page, even if there's no build step.
+
+- **Integrating Imperative APIs into a React application**  
+  https://medium.com/netflix-techblog/integrating-imperative-apis-into-a-react-application-1257e1b45ac6  
+  A higher-level discussion of how to design declarative React components that encapsulate imperative APIs.
 
 
 #### Modal Dialogs

react-forms.md

@@ -178,6 +178,10 @@
   https://goshakkk.name/y-no-field-level-validations/  
   Thoughts on why it's better to handle validation at the "whole form" level, rather than strictly per-field.
 
+- **Validating React forms upon submit**  
+  https://goshakkk.name/submit-time-validation-react/  
+  Discusses core concepts of validating form inputs, and demonstrates how to handle validations on submit for both uncontrolled and controlled components.
+
 
 #### Other
 
@@ -191,4 +195,22 @@
 
 - **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.
+  A good comparison of several different React/Redux-based form libraries, with code snippets demonstrating usage.
+
+- **The Joy of Forms with React and Formik**  
+  https://keyholesoftware.com/2017/10/23/the-joy-of-forms-with-react-and-formik/  
+  Looks at some of the complexities with handling forms in React, and how the Formik library can help simplify that logic.
+
+- **Painless React Forms with Formik**  
+  https://hackernoon.com/painless-react-forms-with-formik-e61b70473c60  
+  Describes how the Formik library can help solve transforming props to form state, validation and error messages, and handling form submission.
+
+- **Formik - Handling files and reCaptch**  
+  https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc  
+  Demonstrates how to use the Formik library to accept uploaded files and work with reCaptcha validation.
+
+- **Final Form / React Final Form**  
+  https://codeburst.io/final-form-the-road-to-the-checkered-flag-cd9b75c25fe  
+  https://medium.com/@erikras/final-form-arrays-and-mutators-13159cb7d285  
+  https://blog.cloudboost.io/final-form-decorators-calculated-fields-and-warnings-bf9cccd21b7e  
+  Erik Rasmussen, author of the popular Redux-Form library, introduces his new framework-agnostic Final Form library and its bindings for React.

react-implementation.md

@@ -175,6 +175,14 @@
 - **How exactly does React handle events?**  
   https://levelup.gitconnected.com/how-exactly-does-react-handles-events-71e8b5e359f2  
   A detailed look at how React's internal event handling works, including normalization of events, SyntheticEvent objects, and more.
+
+- **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.
+
+- **Understanding the React Source Code**  
+  https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-i-80263fe46cf1  
+  Walks through the critical path of React's source code, tracing how a simple component gets rendered.
 
 #### React Fiber
 
@@ -226,10 +234,6 @@
   https://www.youtube.com/watch?v=crM1iRVGpGQ  
   Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase.
 
-- **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.
-
 - **What is React Fiber?**  
   https://giamir.com/what-is-react-fiber  
   An overview of the React Fiber rewrite, and how React's reconciler has been rewritten to improve performance and make rendering more flexible.