Updates, 2017-10-21

basic-concepts.md

@@ -68,6 +68,14 @@
   https://medium.com/this-dot-labs/building-modern-web-applications-in-2017-791d2ef2e341  
   An excellent look at the history of the major client-side web frameworks, how they developed over the last few years, and some suggestions for when each framework might be appropriate.
 
+- **The melting pot of JavaScript**  
+  https://increment.com/development/the-melting-pot-of-javascript/  
+  Dan Abramov discusses the apparent messiness of the JavaScript ecosystem, why there's a proliferation of tools and libraries, the complexity of configuring those tools, and how providing good defaults can lead to a better experience for the community.
+
+- **Modern JavaScript Explained for Dinosaurs**  
+  https://medium.com/@peterxjang/modern-javascript-explained-for-dinosaurs-f695e9747b70  
+  Recaps the history of how JavaScript tools have evolved to what they are today in 2017, to provide historical context.  Includes examples of how different tools were used and and what problems they help solve.
+
 
 #### Suggested Learning Approaches
 

boilerplates-and-starter-kits.md

@@ -132,4 +132,8 @@
   https://medium.com/@Torwori/setting-up-a-front-end-project-part-2-cbbae56ffd15  
   https://medium.com/@Torwori/setting-up-a-front-end-project-part-3-38f1681d310b  
   https://medium.com/@Torwori/setting-up-a-front-end-project-part-4-b6fe32e58e5  
-  An in-depth tutorial series covering setup and configuration of many tools, including Git, Webpack, Babel, ESLint, and Typescript.
+  An in-depth tutorial series covering setup and configuration of many tools, including Git, Webpack, Babel, ESLint, and Typescript.
+
+- **Setting up Webpack, Babel, and React from scratch in 2017**  
+  https://stanko.github.io/webpack-babel-react-revisited/  
+  A step-by-step tutorial that demonstrates each piece of the process needed to set up a build system from scratch.

framework-comparisons.md

@@ -9,6 +9,10 @@
 - **Comparing Frontend Approaches**  
   https://medium.com/@peterxjang/comparing-frontend-frameworks-part-1-introduction-6cf3d49e42cf  
   A series that builds the same notes app with jQuery, Vue, React, and Elm, and compares the pros and cons of the approaches.
+
+- **Web Framework Comparisons**  
+  https://www.sitepen.com/blog/2017/06/13/if-we-chose-our-javascript-framework-like-we-chose-our-music/  
+  A 9-part series that compares Angular 2+, React+Redux, Vue, Ember, Dojo 2, and Aurelia.  Covers topics like UI development, UX design, foundational technologies, common usage, testing, and soundness.  The series is written by a company that works on Dojo, but the comparisons and descriptions are fair.
 
 
 #### React and Flux vs Backbone
@@ -28,3 +32,10 @@
 - **From Backbone to React (comments)**  
   https://news.ycombinator.com/item?id=8329837  
   Discussion on the previous article
+
+
+#### Migrating to React
+
+- **How to migrate an application from AngularJS to React and Redux**  
+  https://hackernoon.com/how-to-migrate-an-application-from-angularjs-to-react-and-redux-de0e2d1f70aa  
+  Recaps several useful techniques to use when migrating an Angular 1.x app to React and Redux, including moving the build to use Webpack, rendering React components inside of Angular directives, sharing dependencies, and integrating Redux into the application.

mobx-tutorials.md

@@ -82,6 +82,10 @@
   https://medium.com/@mweststrate/the-curious-case-of-mobx-state-tree-7b4e22d461f  
   Michel Weststrate, author of MobX, introduces the MobX-State-Tree library, which builds on MobX to add additional useful capabilities.
 
+- **MobX (with Decorators) in create-react-app**  
+  https://www.robinwieruch.de/create-react-app-mobx-decorators/  
+  Covers how to use MobX in a CRA project, with and without decorators.
+
 
 #### MobX and Redux Comparisons
 

react-architecture.md

@@ -114,6 +114,10 @@
 - **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.
+
+- **Making website building fun**  
+  https://www.gatsbyjs.org/blog/2017-10-16-making-website-building-fun/  
+  The author of the Gatsby static site generator discusses how creating the right building blocks can make development simpler and more fun, and gives examples of how specific React components can be those kinds of building blocks.
 
 
 #### React Best Practices
@@ -252,6 +256,9 @@
   https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/  
   An excellent list of principles to consider when designing React components, including single responsibility, encapsulation, reusability, testability, and meaning.
 
+- **8 Key React Component Decisions**  
+  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.
 
 
 #### React Architecture

react-component-composition.md

@@ -142,6 +142,10 @@
   https://www.bignerdranch.com/blog/destroy-all-classes-turn-react-components-inside-out-with-functional-programming/  
   Demonstrates progressively refactoring a class component with logic into separate functional components, and then tying them together with Recompose
 
+- **A React journey: from vanilla, to type-safe, to monadic**  
+  https://medium.com/@giuseppemaggiore/a-react-journey-from-vanilla-to-type-safe-to-monadic-41beaa386910  
+  Demonstrates adding TypeScript to a JS React app for type-checking, then using a specialized library called Monadic-React to perform complex and type-safe composition of React components and logic.
+
 
 #### Comparing Composition Approaches
 
@@ -166,3 +170,6 @@
    https://medium.com/alexkrolick/react-composition-patterns-from-the-ground-up-8401aaad93d7  
    Comparison of patterns such as Lifting State, Higher-Order Components, Render Callbacks, and "Renderless" State Providers, and how they relate to React's component model.
 
+- **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.

react-component-patterns.md

@@ -27,21 +27,9 @@
   https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components-630fdfd90c9c  
   Clarifies the meaning of the terms, which are often used in overlapping ways.
 
-- **How to use Classes and Sleep at Night**  
-  https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4  
-  Some pragmatic opinions on when and how to use the ES6 "class" keyword, particularly in relation to React components.
-
 - **Embracing Functions in React**  
   https://medium.com/javascript-inside/embracing-functions-in-react-d7d558d8bd30  
-  A look at stateless functional components in React, and why they might be useful or should be considered in the first place.
-
-- **React Stateless Functional Components: Nine Wins You Might Have Overlooked**  
-  https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc  
-  Thoughts on reasons why you might want to write more components using the functional syntax.
-
-- **How to declare React Components in 2017**  
-  https://medium.com/@npverni/how-to-declare-react-components-in-2017-2a90d9f7984c  
-  A quick overview of the three ways to declare React components, and which ones should be preferred.
+  A look at stateless functional components in React, and why they might be useful or should be considered in the first placee.
 
 - **Building User Interfaces with Pure Functions and Function Composition in React**  
   https://tylermcginnis.com/building-user-interfaces-with-pure-functions-and-function-composition-in-react-js/  
@@ -51,6 +39,29 @@
   https://github.com/vasanthk/react-bits  
   An extensive list of terms, concepts, patterns, and techniques for writing React components, with explanations and examples.  A few of the descriptions are overly opinionated and some items are not things the React team would recommend, but overall an excellent resource.
 
+- **Simple React Patterns**  
+  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".
+
+
+#### Component Definition Approach Comparisons
+
+- **How to use Classes and Sleep at Night**  
+  https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4  
+  Some pragmatic opinions on when and how to use the ES6 "class" keyword, particularly in relation to React components.
+
+- **React Stateless Functional Components: Nine Wins You Might Have Overlooked**  
+  https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc  
+  Thoughts on reasons why you might want to write more components using the functional syntax.
+
+- **7 Reasons to Outlaw React's Functional Components**  
+  https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c 
+  The author of the "Nine Wins" post gives some counter-arguments on why you might want to prefer writing class components instead of functional components.  Some good discussion in the comments.
+
+- **How to declare React Components in 2017**  
+  https://medium.com/@npverni/how-to-declare-react-components-in-2017-2a90d9f7984c  
+  A quick overview of the three ways to declare React components, and which ones should be preferred.
+
 - **We Jumped the Gun Moving React Components to ES2015 Class Syntax**  
   https://medium.com/dailyjs/we-jumped-the-gun-moving-react-components-to-es2015-class-syntax-2b2bb6f35cb3  
   A Netflix engineer raises concerns about React deprecating `createClass` and pushing users to use ES6 classes.  I personally think his concerns are overstated, but there's some interesting points, plus good discussion in the comments.
@@ -269,6 +280,8 @@
   Describes four categories of React components ("view", "control", "controllers", and "containers"), and gives suggestions on when and how to factor out new components.
 
 
+
+
 #### Wrapping Non-React Code
 
 - **React and third-party libraries**  

react-deployment.md

@@ -40,4 +40,7 @@
 - **Using React in Multiple Environments**  
   https://daveceddia.com/multiple-environments-with-react/  
   Discusses strategies for handling deployments to dev/staging/prod-type environments, including configuration of API endpoints and feature flags.
-
+
+- **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.

react-implementation.md

@@ -33,21 +33,7 @@
 
 #### JSX and Events
 
-- **How the JSX Transform Works**  
-  https://jaketrent.com/post/how-jsx-transform-works/  
-  A helpful explanation of how JSX tags are transformed into React elements, with example snippets
 
-- **JSX In Depth - an interactive tutorial**  
-  http://blog.klipse.tech/javascript/2016/12/14/jsx.html  
-  An interactive version of the "JSX in Depth" tutorial from the React docs
-
-- **Events in React**  
-  https://www.kirupa.com/react/events_in_react.htm  
-  An introduction to React's event handling system, including useful tips and some gotchas
-
-- **React events in depth**  
-  https://www.youtube.com/watch?v=dRo_egw7tBc  
-  A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React
 
 
 #### Miniature React Implementations
@@ -87,7 +73,8 @@
   https://engineering.hexacta.com/didact-rendering-dom-elements-91c9aa08323b  
   https://engineering.hexacta.com/didact-instances-reconciliation-and-virtual-dom-9316d650f1d0  
   https://engineering.hexacta.com/didact-components-and-state-53ab4c900e37  
-  An ongoing series of articles showing how to build parts of React's API and implementation, like `createElement`.
+  https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec  
+  An ongoing series of articles showing how to build parts of React's API and implementation, like `createElement`, `setState`, and the "Fiber" reconciliation approach.
 
 - **deact: React under the hood**  
   https://github.com/lukebelliveau/deact  
@@ -209,6 +196,10 @@
   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 for the rest of us**  
+  http://www.benmvp.com/slides/2017/reactboston/fiber.html#/  
+  Slides from Ben Ilegbodu's ReactBoston presentation, which summarize the changes in React 16.
+
 - **React Fiber Architecture**  
   https://github.com/acdlite/react-fiber-architecture  
   A description of React's new core algorithm, React Fiber

react-performance.md

@@ -9,6 +9,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   https://facebook.github.io/react/docs/advanced-performance.html  
   https://facebook.github.io/react/docs/perf.html  
   The React doc pages on performance.  Describes the core concepts, including shouldComponentUpdate, using immutable data, and the Performance API for benchmarking.
+
+- **React, Inline Functions, and Performance**  
+  https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578  
+  An excellent article Ryan Florence that pushes back against the "creating functions in render is slow" conventional wisdom in the React community.  This article is a must-read discussion on React performance.
 
 - **Performance Engineering with React**  
   http://benchling.engineering/performance-engineering-with-react/  
@@ -168,6 +172,7 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
 - **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
@@ -207,6 +212,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
   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. 
 
+- **What profiling my Universal React-Redux app revealed**  
+  https://medium.com/@darioghilardi/what-profiling-a-universal-react-redux-app-revealed-c5cc4986353c  
+  Discusses using the Chrome DevTools to debug and do CPU profiling of a Node server process that was doing server-side rendering of a React app.
+
 
 #### Immutable Data
 

react-redux-testing.md

@@ -245,6 +245,10 @@
 - **Writing tests for redux-observable**  
   https://dev.to/julioolvr/writing-tests-for-redux-observable  
   Quick examples of how to set up tests for redux-observable epics.
+
+- **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. 
 
 
 

react-server-rendering.md

@@ -61,4 +61,16 @@
 
 - **Simple declarative Redux state with React Router 4 server side rendering**  
   https://medium.com/@AlexFaunt/satisfying-your-apps-state-343118b0730d  
-  Demonstrates using a combination of React-Router 4 and a custom promise middleware to manage async data handling in an SSR React+Redux application. 
+  Demonstrates using a combination of React-Router 4 and a custom promise middleware to manage async data handling in an SSR React+Redux application. 
+
+- **Server-side rendering with create-react-app**  
+  https://medium.com/@cereallarceny/server-side-rendering-with-create-react-app-fiber-react-router-v4-helmet-redux-and-thunk-275cb25ca972  
+  Demonstrates how to set up server-side-rendering with a standard CRA project to allow proper meta tags to be added without having to eject.  Includes sample code for creating an Express app that does the work.
+
+- **React SSR**  
+  https://blog.eleven-labs.com/en/react-ssr/  
+  A step-by-step guide to setting up an SSR React app from scratch, including use of Redux.
+
+- **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.

react-state-management.md

@@ -11,7 +11,7 @@
   Explains that "props" are data passed in to a component, while "state" is data managed inside a component.
 
 - **Props vs State**  
-  https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
+  https://github.com/uberVU/react-guide/blob/master/props-vs-state.md  
   A quick summary of the differences between "props" and "state" in React components
 
 - **The 5 Types of React Application State**  

react-styling.md

@@ -158,7 +158,9 @@
   https://medium.com/@tkh44/emotion-ad1c45c6d28b  
   The author of the Emotion library gives an overview of its principles, benchmarks, and uses.
 
-
+- **With styled-components into the future**  
+  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.
 
 
 #### Techniques and Examples

react-techniques.md

@@ -35,7 +35,7 @@
   Covers several potential security holes that can result from allowing user input into CSS-in-JS libraries, with examples.
 
 
-#### JSX
+#### JSX and Events
 
 - **Is JSX Still Relevant? Are there other options?**  
   https://goshakkk.name/jsx-relevancy-options/  
@@ -57,6 +57,26 @@
   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.
 
+- **9 Things You Should Know About JSX**  
+  https://dev.to/sarah_chima/9-things-you-should-know-about-jsx-3bm  
+  A useful explanation of what JSX syntax is, how it works, and and how to use it.
+
+- **How the JSX Transform Works**  
+  https://jaketrent.com/post/how-jsx-transform-works/  
+  A helpful explanation of how JSX tags are transformed into React elements, with example snippets
+
+- **JSX In Depth - an interactive tutorial**  
+  http://blog.klipse.tech/javascript/2016/12/14/jsx.html  
+  An interactive version of the "JSX in Depth" tutorial from the React docs
+
+- **Events in React**  
+  https://www.kirupa.com/react/events_in_react.htm  
+  An introduction to React's event handling system, including useful tips and some gotchas
+
+- **React events in depth**  
+  https://www.youtube.com/watch?v=dRo_egw7tBc  
+  A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React
+
 
 #### Debugging and Error Handling