Updates, 2017-12-10

boilerplates-and-starter-kits.md

@@ -136,4 +136,8 @@
 
 - **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.
+  A step-by-step tutorial that demonstrates each piece of the process needed to set up a build system from scratch.
+
+- **How to set up React, Webpack 3, and Babel, in 2017**  
+  https://www.valentinog.com/blog/react-webpack-babel/  
+  A clear explanation of how to create a basic Webpack+Babel setup for a React app, with descriptions of why each step is necessary.

es6-features.md

@@ -241,6 +241,10 @@
   https://dev.to/maxart2501/gotchas-about-asyncawait-and-promises-9di  
   Several valuable tips about how to safely use async/await and Promise behavior, especially around error-handling.
 
+- **await vs return vs return await**  
+  https://jakearchibald.com/2017/await-vs-return-vs-return-await/  
+  An informative look at the differences in behavior between various uses of the async/await syntax in relation to promises
+
 
 #### Techniques
 

javascript-resources.md

@@ -56,6 +56,10 @@ While this list is primarily focused on learning React and Redux, and generally
   https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff  
   An explanation of all the different Array methods that loop over the array, what they do, and when they should be used
 
+- **Front End Interview Preparation Guide**  
+  https://github.com/Jobeir/front-end-interview-preparation-guide  
+  A list of useful books, courses, and resources for learning JS, and links to interview questions and quizzes that would be beneficial in helping test out knowledge.
+
 
 #### Tutorials, Books, and Courses
 

pros-cons-discussion.md

@@ -283,6 +283,12 @@ similar structures in ClojureScript.
   https://twitter.com/dan_abramov/status/930380316463726593  
   Some great points from Dan Abramov about React focusing on code predictability, maintainability, and data flow, rather than terseness.
 
+- **"Ways to compose components and functionality without altering components?"**  
+  https://twitter.com/andrestaltz/status/939123607426486274  
+  https://twitter.com/andrestaltz/status/939257877600104448  
+  https://gist.github.com/staltz/08bf613199092eeb41ac8137d51eb5e6  
+  A couple very long Twitter threads with discussion from Andre Staltz (creator of Cycle), Dan Abramov, and Andrew Clark, looking at possible ways to handle composition of functionality for a "current humanized time" behavior.  Lots of interesting comments in the Twitter thread, and the example gist.  Also some useful comments from Andre on how someone from outside the React community might approach trying to solve problems using React.
+
 
 
 #### React's PATENTS License

react-component-composition.md

@@ -188,6 +188,10 @@
   https://blog.bigbinary.com/2017/09/12/using-recompose-to-build-higher-order-components.html  
   Examples of refactoring components using the Recompose library, including use of `branch` and `compose`.
 
+- **Curry away in React**  
+  https://hackernoon.com/curry-away-in-react-7c4ed110c65a  
+  Examples of using currying to create reusable callback functions that can be passed to child components.
+
 
 #### Comparing Composition Approaches
 

react-component-patterns.md

@@ -175,6 +175,10 @@
   https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1  
   A helpful description of the major component lifecycle methods, including descriptions of common use cases for each one, and whether you can call `setState` inside.
 
+- **Revisiting use of React's Component Lifecycles in Anticipation of Async Rendering**  
+  https://medium.com/@awebofbrown/how-to-safely-use-reacts-life-cycles-with-fiber-s-async-rendering-fd4469ebbd8f  
+  An informative look at how async rendering in React 16+ might impact current use of lifecycle methods for behavior.
+
 
 #### Component Communication
 
@@ -438,6 +442,21 @@
 - **Using a React 16 Portal to do something cool**  
   https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202  
   Demonstrates using React 16's `createPortal` API to control a separate browser window from the original React component tree.
+
+
+#### Alternate Component Creation Approaches
+
+- **React without `this`**  
+  https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160  
+  Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword.  Not the common approach, but an interesting idea.
+
+- **my-react**  
+  https://github.com/mjackson/my-react  
+  A small library from Michael Jackson (co-creator of React Router) that allows defining components using a Python-style approach where functions receive the component instance as the first argument.
+
+- **lively**  
+  https://github.com/jlongster/lively  
+  An experimental library from James Long that tries to improve React's component API to avoid using classes
 
 
 #### Other Component Patterns
@@ -479,10 +498,6 @@
   https://twitter.com/jlongster/status/921016877408837632  
   James Long describes three things about React that bother him: inability to easily have parents get refs to nested elements, PureComponents comparing both props and state, and a general tendency to do lots of processing in `componentWillReceiveProps`.  Some good discussion in both the gist comments and Twitter.
 
-- **React without `this`**  
-  https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160  
-  Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword
-
 - **You don't need to know "Dependency Injection"**  
   https://hackernoon.com/you-dont-need-to-know-dependency-injection-2e9d2ba1978a  
   Looks at the concept of dependency injection, and three ways that that relates to React components and props.

react-forms.md

@@ -138,6 +138,10 @@
   https://medium.com/javascript-inside/some-thoughts-on-forms-in-react-9ca2d9078c20  
   An extended look at several form-related concepts, including describing them as "view-driven" vs "model-driven", extracting form management into a Higher-Order Component, adding validation, and more.
 
+- **How to Work with Forms, Inputs, and Events in React**  
+  https://medium.com/capital-one-developers/how-to-work-with-forms-inputs-and-events-in-react-c337171b923b  
+  An excerpt from the book "React Quickly", which gives an overview of the recommended way to use forms in a React app.
+
 
 #### Form Validation
 

react-implementation.md

@@ -172,6 +172,9 @@
   https://stackshare.io/posts/the-react-story  
   An extensive podcast interview with Pete Hunt, former React team member, recounting his early work at Facebook, how he began using React at Instagram, how that led to the growth of React inside Facebook, and how the decision to open-source React happened.  Page includes a complete transcript of the discussion.
 
+- **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.
 
 #### React Fiber
 

react-native.md

@@ -107,4 +107,8 @@
 
 - **React Native app performance: Major issues and insights on improving your app's performance**  
   https://www.simform.com/react-native-app-performance/  
-  A detailed look at common causes of perf issues in RN, such as memory leaks, large app size, and slow rendering, and discusses various solutions.
+  A detailed look at common causes of perf issues in RN, such as memory leaks, large app size, and slow rendering, and discusses various solutions.
+
+- **React Native at Grofers: Using React Native components inside native views**  
+  https://lambda.grofers.com/starting-with-react-native-at-grofers-a-guide-to-using-react-native-components-inside-native-bbdd6a3470d4  
+  Looks at the pros and cons of using RN components in native views, including turnaround shipping speed, approach for bridging views, and performance.

react-performance.md

@@ -182,6 +182,18 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6  
   Discusses React perf issues like bad `sCU` implementations, changing the DOM too fast, and event/callback usage, with possible solutions.  
 
+- **React Performance Fixes on Airbnb Listing Pages**  
+  https://medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4  
+  Excellent practical discussion of actual perf issues that were showing up in Airbnb pages and how they resolved them.  Covers performance recordings, handling initial renders, scrolling, only using component state for values that affect re-rendering, and more.
+
+- **Debugging React Performance with React 16 and Chrome DevTools**  
+  https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad  
+  Shows how to use the Chrome DevTools to profile React code using performance recordings, including analysis of recordings to track down perf issues.
+
+- **Demystifying Memory Usage using ES6 React Classes**  
+  https://medium.com/@donavon/demystifying-memory-usage-using-es6-react-classes-d9d904bc4557  
+  A quick look at the memory usage differences between calling `Function.bind` and using the Class Properties syntax, and the readability tradeoffs involved.
+
 
 #### Code Splitting and Progressive Apps
 
@@ -236,6 +248,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
   https://codeburst.io/firebase-react-optimizing-for-the-real-world-4d9edbbd54c5  
   Describes shrinking a React + Firebase app bundle from 1.7MB to 230KB by switching to smaller alternative packages and analyzing bundle size.
 
+- **A Pinterest Progressive Web App Performance Case Study**  
+  https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154  
+  A deep dive into how Pinterest optimized their new PWA app, including route chunking, use of babel-preset-env, service workers, and use of normalized Redux state.
+
 
 #### Immutable Data
 
@@ -357,4 +373,8 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
 
 - **Optimizing Redux Components**  
   https://medium.com/riipen-engineering/optimizing-redux-components-cbaad062abc7  
-  Discusses Redux-specific perf optimizations, such as avoiding unnecessary work in `mapState` functions, memoization, and advanced comparison function options for `connect`.
+  Discusses Redux-specific perf optimizations, such as avoiding unnecessary work in `mapState` functions, memoization, and advanced comparison function options for `connect`.
+
+- **React + Redux Performance and the Benchmarks to Prove It**  
+  https://tech.smartling.com/react-redux-performance-and-the-benchmarks-to-prove-it-79b0bc9f25a4  
+  Describes an approach for benchmarking a React+Redux app to understand how much impact performance optimizations actually give.

react-routing.md

@@ -47,6 +47,10 @@
   https://css-tricks.com/react-router-4/  
   A deep look at patterns and strategies for using React-Router v4 successfully.
 
+- **React Router DOM: set-up, essential components, & parameterized routes**  
+  https://blog.logrocket.com/react-router-dom-set-up-essential-components-parameterized-routes-505dc93642f1  
+  An introduction to the concept of a router, setting up React-Router, essential parts of the library, and how to build routes that have parameters.
+
 - **Advanced React Router concepts: recursive path, code splitting, animated transitions, and more**  
   https://blog.logrocket.com/advanced-react-router-concepts-code-splitting-animated-transitions-scroll-restoration-recursive-17096c0cf9db  
   A tutorial that demonstrates how to implement a variety of useful features using React-Router v4.
@@ -144,4 +148,8 @@
 
 - **Protected Routes and Authentication with React Router v4**  
   https://tylermcginnis.com/react-router-protected-routes-authentication/  
-  A great tutorial that shows how to create routes that only authenticated users can access.
+  A great tutorial that shows how to create routes that only authenticated users can access.
+
+- **Securing a React Web App with Authorization Rules**  
+  https://medium.appbase.io/securing-a-react-web-app-with-authorization-rules-2e43bf5592ca  
+  A tutorial that shows how to add authorization and authentication to a Todo app

react-styling.md

@@ -44,6 +44,10 @@
   https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822  
   Quick examples of plain CSS, CSS modules, inline styles, and the styled-components library.
 
+- **The best "styling in React" tutorial you've ever seen**  
+  https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945  
+  A comparison of how to style an application using inline styles, the styled-components library, and CSS modules.  Has some good explanations of how each approach works.
+
 
 #### Components and Styling
 
@@ -90,6 +94,10 @@
   https://medium.com/geckoboard-under-the-hood/how-we-made-our-product-more-personalized-with-css-variables-and-react-b29298fde608  
   A walkthrough of how to build a themeable application using React components that update CSS variables for dynamic styles
 
+- **Styling your React app for beginners**  
+  https://medium.com/@dylan.broadbridge/styling-your-react-app-for-beginners-f6b39779019b  
+  Examples of basic CSS usage in a CRA-based application, including importing CSS files and use of inline styles in components for layout.
+
 
 #### JS-Based Approaches
 
@@ -180,6 +188,10 @@
   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.
 
+- **Structuring our Styled Components**  
+  https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28  
+  Discusses applying the Block-Element-Modifier styling structure approach to use of the styled-components library, with examples.
+
 
 #### Techniques and Examples
 

react-techniques.md

@@ -43,6 +43,18 @@
   https://medium.com/@stokedbits/adventures-in-creating-a-react-component-library-with-create-react-app-and-typescript-26d1116a7d87  
   Walks through the process of using the TS+CRA starter kit as a baseline for building and publishing a component library.
 
+- **The Complete Firebase in React Authentication Tutorial**  
+  https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/  
+  A comprehensive article that covers setting up a React app that uses React Router for handling routes, and Firebase for authentication and user management.
+
+- **Don't Over React! Rendering Binary Data**  
+  https://www.bignerdranch.com/blog/dont-over-react/  
+  Useful approaches for handling file blobs in a React app
+
+- **Global Component Registration**  
+  http://dylanpaulus.com/reactjs/2017/12/08/global-component-registration/  
+  An example of extending the standard approach for looking up component types at runtime, by allowing the lookup table to be modified.
+
 
 #### Security
 

react-tutorials.md

@@ -148,6 +148,10 @@
   http://ivanjurina.com/2017/11/19/introduction-to-react/  
   Useful notes and info on the basics of React, from someone who just learned React.
 
+- **React Holiday**  
+  https://react.holiday/  
+  A series of short lessons that teach core React concepts, each with an interactive sandbox example to play with.
+
 
 #### React Concept Overviews
 
@@ -187,6 +191,10 @@
   https://github.com/Pau1fitz/react-interview  
   A large list of questions on React concepts that might pop up in an interview, with answers.
 
+- **A React Christmas**  
+  https://react.christmas/  
+  A series of short posts that look at specific aspects of using React, including using Create-React-App, testing code, using Fragments, component composition, and much more.
+
 
 #### Project-Based Tutorials