Updates, 2017-06-24

README.md

@@ -9,27 +9,27 @@ You might also want to check out my categorized list of Redux-related addons, li
 ## Table of Contents
 
 #### Getting Started
-- [Basic Concepts and Overviews](basic-concepts.md)
-- [Community Resources](community-resources.md)
-- [Javascript Resources](javascript-resources.md)
-- [Git Resources and Tutorials](git-resources.md)
-- [Node.js and NPM](node-js-and-npm.md)
-- [Webpack Tutorials](webpack-tutorials.md)
-- [Boilerplates and Starter Kits](boilerplates-and-starter-kits.md)
+- [Basic Concepts and Overviews](./basic-concepts.md)
+- [Community Resources](./community-resources.md)
+- [Javascript Resources](./javascript-resources.md)
+- [Git Resources and Tutorials](./git-resources.md)
+- [Node.js and NPM](./node-js-and-npm.md)
+- [Webpack Tutorials](./webpack-tutorials.md)
+- [Boilerplates and Starter Kits](./boilerplates-and-starter-kits.md)
 
 #### Basic Tutorials
-- [ES6 Features and Samples](es6-features.md)
-- [React Tutorials](react-tutorials.md)
-- [Flux Tutorials](flux-tutorials.md)
-- [Redux Tutorials](redux-tutorials.md)
-- [MobX Tutorials](mobx-tutorials.md)
+- [ES6 Features and Samples](./es6-features.md)
+- [React Tutorials](./react-tutorials.md)
+- [Flux Tutorials](./flux-tutorials.md)
+- [Redux Tutorials](./redux-tutorials.md)
+- [MobX Tutorials](./mobx-tutorials.md)
 
 #### Intermediate Concepts
 
-- [Using React with ES6](using-react-with-es6.md)
-- [Functional Programming](functional-programming.md)
-- [Immutable Data](immutable-data.md)
-- [React/Redux Testing](react-redux-testing.md)
+- [Using React with ES6](./using-react-with-es6.md)
+- [Functional Programming](./functional-programming.md)
+- [Immutable Data](./immutable-data.md)
+- [React/Redux Testing](./react-redux-testing.md)
 - [React Native](./react-native.md)
 
 #### Advanced Topics
@@ -40,7 +40,8 @@ You might also want to check out my categorized list of Redux-related addons, li
   - [React State Management](./react-state-management.md)
   - [React Architecture and Best Practices](./react-architecture.md)
   - [Redux Architecture and Best Practices](./redux-architecture.md)
-  - [React/Redux Performance](react-performance.md)
+  - [React/Redux Performance](./react-performance.md)
+  - [React Deployment](./react-deployment.md)
 - **React**:
   - [React Implementation and Concepts](./react-implementation.md)
   - [React and Forms](./react-forms.md)
@@ -50,17 +51,17 @@ You might also want to check out my categorized list of Redux-related addons, li
   - [React and Routing](./react-routing.md)  
 - **Redux**
   - [Redux Middleware](./redux-middleware.md)
-  - [Redux Side Effects](redux-side-effects.md)
-  - [Redux Tips and Techniques](redux-techniques.md)
+  - [Redux Side Effects](./redux-side-effects.md)
+  - [Redux Tips and Techniques](./redux-techniques.md)
   - [Using Redux Without React](./redux-without-react.md)
 - **Other**
-  - [Webpack Advanced Techniques](webpack-advanced-techniques.md)
+  - [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
   - [Static Typing](./static-typing.md)
 
 
 #### Comparisons and Discussion
-- [React/Flux/Redux Pros, Cons, and Discussion](pros-cons-discussion.md)
-- [React and Flux vs Backbone](react-vs-backbone.md)
+- [React/Flux/Redux Pros, Cons, and Discussion](./pros-cons-discussion.md)
+- [React and Flux vs Backbone](./react-vs-backbone.md)
 
 
 
@@ -82,6 +83,8 @@ All of the links in this collection are worth reading, but there's obviously a L
 ### Suggested Learning Approaches
   - [A Study Plan to Cure Javascript Fatigue](https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1)  
     The author of the "State of JS 2016" survey gives an excellent step-by-step study plan to use when learning the Javascript ecosystem.
+  - [Grab Front-End Study Guide](https://github.com/grab/front-end-guide)  
+    An excellent guide to learning front-end technologies, based on "A Study Plan to Cure Javascript Fatigue".  Includes descriptions of each topic, links to learning resources, and estimates for how much time to spend on each topic.
   - [React How-To](https://github.com/petehunt/react-howto)  
     Pete Hunt, one of React's creators, gives a high-level suggested order to use when learning React-related technologies (React, NPM, bundlers, ES6, routing, and Flux/Redux)
   - [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/)  

basic-concepts.md

@@ -64,6 +64,10 @@
   https://dev.to/kayis/the-tools-of-the-js-trade  
   A helpful overview of commonly used JS development tools, grouped by type, with short descriptions for each.
 
+- **Choosing a frontend framework in 2017**  
+  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.
+
 
 #### Suggested Learning Approaches
 

community-resources.md

@@ -59,6 +59,10 @@
   https://github.com/tuchk4/awesome-css-in-js  
   A collection of awesome things regarding  CSS in JS approaches
 
+- **"What are your top React/React Native Blogs that you frequent?"**  
+  https://www.reddit.com/r/reactjs/comments/5t8loz/what_are_your_top_reactreact_native_blogs_that/  
+  Several comments listing good React-related blogs, including my own list of high-quality blogs that I subscribe to.
+
 
 #### People
 

immutable-data.md

@@ -77,6 +77,10 @@
   https://blog.komand.com/object-comparison-in-react-js-components  
   Some examples of comparing objects inside of React's lifecycle methods, and how to update them properly.
 
+- **Handling State in React: Four Immutable Approaches to Consider**  
+  https://medium.com/@housecor/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5  
+  A summary of four different ways to update state immutably
+
 
 #### Immutable Data Libraries
 
@@ -119,3 +123,15 @@
 - **Immutable Deep State Updates in React with Ramda.js**  
   https://vanslaars.io/post/setstate-lenses/  
   Some excellent examples of how to use Ramda's "lens" functions to define immutable state update logic
+
+- **Why I Don't Use Immutable.js with Redux**  
+  https://medium.com/front-end-hacking/why-i-dont-use-immutable-js-with-redux-db05004f436  
+  Thoughts on the pros and cons of using Immutable.js in a Redux app
+
+- **Should I use Immutable.js with Redux?**  
+  https://medium.com/@fastphrase/should-i-use-immutablejs-with-redux-58f88d6fd81e  
+  A detailed list of pros and cons for using Immutable.js in a Redux app
+
+- **Practical Guide to using Immutable.js with Redux and React**  
+  https://medium.com/@fastphrase/practical-guide-to-using-immutablejs-with-redux-and-react-c5fd9c99c6b2  
+  A follow-up to the previous article, showing how to correctly set up and use Immutable.js with Redux

mobx-tutorials.md

@@ -40,6 +40,10 @@
   https://www.sitepoint.com/manage-javascript-application-state-mobx/  
   A detailed tutorial that introduces basic MobX usage, using only jQuery for the UI updates
 
+- **MobX + React Tutorial: Building your first app**  
+  http://orlandohamsho.com/javascript/mobx-react-tutorial-building-first-application/  
+  A walkthrough that builds a basic list/detail application, and introduces the basics of MobX along the way.
+
 
 #### Testing
 

pros-cons-discussion.md

@@ -43,6 +43,10 @@
   https://css-tricks.com/projects-need-react/  
   A response to the previous article, suggesting that React has benefits across a wide variety of applications.
 
+- **Why I'm betting on React Native for my next Startup**  
+  https://calbucci.com/why-im-betting-on-react-native-for-my-next-startup-3b8ff5ae03e4  
+  A startup product lead gives several reasons why he's using React Native for their large app, including uniformity of experience, testing, recruiting, and scalability.
+
 
 #### Redux/Flux Comparisons
 

react-ajax.md

@@ -80,4 +80,7 @@
 - **Dealing with APIs in React with ReactRemoteData**  
   http://javascriptplayground.com/blog/2017/03/remote-data-react-components/  
   The author of the RemoteDataJS libraries shows a small React wrapper he created and how to use it
-
+
+- **A Better Way To Handle Loading State In Redux**  
+  http://nikolay.rocks/2017-06-18-better-redux-loading  
+  Discusses several ways to store "loading/success/failure" state, and tradeoffs of the approaches.  Talks about Redux, but applies to React as well.

react-architecture.md

@@ -228,6 +228,10 @@
   https://medium.com/@kylpo/you-can-spread-props-in-jsx-but-should-you-6cc3e766e281  
   Some thoughts on the pros and cons of using JSX's object spread operator, including examples of how it is compiled via Babel
 
+- **Techniques for decomposing React components**  
+  https://medium.com/dailyjs/techniques-for-decomposing-react-components-e8a1081ef5da  
+  Three useful techniques for splitting up components: splitting render methods, passing React elements as props, and extracting higher-order components.
+
 
 
 #### React Architecture

react-component-patterns.md

@@ -107,6 +107,10 @@
   https://github.com/xat/react-component-composition-cheatsheet  
   A useful list of ways to combine components together
 
+- **Avoiding deeply nested component trees**  
+  https://medium.com/@RubenOostinga/avoiding-deeply-nested-component-trees-973edb632991  
+  Examples of `children` to include arbitrary content inside of a component for more flexible handling of presentation and composition.
+
 
 
 #### React Component Lifecycle
@@ -288,7 +292,7 @@
   Comparisons and examples for these two component patterns
 
 - **ReactCasts: Higher Order Components**  
-  https://www.youtube.com/watch?v=LTunyI2Oyzw
+  https://youtu.be/6nVxCWUAEPM  
   A screencast that walks through the idea and usage of Higher Order Components
 
 - **ReactCasts: Function as Child Component**  
@@ -398,6 +402,14 @@
   http://www.primaryobjects.com/2017/05/08/integrating-react-with-an-existing-jquery-web-application/  
   Covers 3 methods for methods for integrating React and jQuery: referencing jQuery from within React, using a helper class passed to React, and using a pub-sub model passed to React.
 
+- **Building D3 Components with React**  
+  https://hackernoon.com/building-d3-components-with-react-7510e4743288  
+  A detailed walk through custom integration of D3 and React without use of an additional library.
+
+- **PixiJS Application in a React Component**  
+  https://www.protectator.ch/post/pixijs-v4-in-a-react-component  
+  A quick example of loading PixiJS and wrapping it in a React component, showing the basics for integration.
+
 
 #### Modal Dialogs
 
@@ -450,6 +462,10 @@
   https://medium.com/@abhiaiyer/top-5-recompose-hocs-1a4c9cc4566  
   A list of 5 useful HOCs provided by the Recompose library, including `branch` and `withHandlers`.
 
+- **ReactCasts #11: Recompose**  
+  https://youtu.be/SQtrgiLy3Fo  
+  A screencast that introduces the Recompose library and explains some of its useful tools like `withState` and `branch`.
+
 
 #### Other Component Patterns
 
@@ -480,4 +496,4 @@
 - **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.
-
+

react-deployment.md

@@ -0,0 +1,30 @@
+### React Deployment
+
+- **Understanding React deployment**  
+  https://medium.com/@baphemot/understanding-react-deployment-5a717d4378fd  
+  An excellent overview of the basic steps needed to deploy a React app, including solutions for common problems such as routing producing 404s and changes not showing up properly.
+
+- **Surge vs Github Pages: How to deploy a create-react-app project**  
+  https://medium.freecodecamp.com/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089  
+  Shows how to deploy a CRA-based app onto the Surge.sh and Github Pages static hosting sites
+
+- **Fullstack React: Deploying a React App**  
+  https://www.fullstackreact.com/articles/deploying-a-react-app-to-s3/  
+  https://www.fullstackreact.com/articles/deploying-a-react-app-with-a-server/  
+  A pair of articles that show how to deploy a React app's static assets onto Amazon S3, and a backend API server onto Heroku
+
+- **Deploying React + Redux to Heroku**  
+  http://www.thegreatcodeadventure.com/deploying-react-redux-to-heroku/  
+  Covers configuring Webpack for production, setting up build tasks and environment variables, configuring an Express server, and pushing the app to Heroku
+
+- **Create-React-App with an Express Backend**  
+  https://daveceddia.com/create-react-app-express-backend/  
+  A quick overview showing how to configure Create-React-App to proxy API requests to a separate server (example uses Express, but applies to any other app server).
+
+- **Create-React-App with Express in Production**  
+  https://daveceddia.com/create-react-app-express-production/  
+  Shows how to set up an React app with an Express server that serves as both API server and static file server, and deploy it to Heroku.
+
+- **From React to an Electron app ready for production**  
+  https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3  
+  Walks through the basics of configuring a Create-React-App-based Electron app and building it for production.

react-performance.md

@@ -151,6 +151,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   http://itsze.ro/blog/2017/04/09/infinite-list-and-react.html  
   A Twitter developer describes some of the challenges they faced in building a performant infinite scrolling list component
 
+- **React at Light Speed**  
+  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.
+
 
 #### Code Splitting and Progressive Apps
 

react-routing.md

@@ -5,13 +5,7 @@
 - **Routing React Apps: The Complete Guide**  
   https://scotch.io/tutorials/routing-react-apps-the-complete-guide  
   An in-depth article covering use of React-Router (v2)
-
-- **Let the URL Do the Talking**  
-  http://formidable.com/blog/2016/07/11/let-the-url-do-the-talking-part-1-the-pain-of-react-router-in-redux/  
-  http://formidable.com/blog/2016/07/19/let-the-url-do-the-talking-part-2-bargaining-and-acceptance-with-redux-and-react-router/  
-  http://formidable.com/blog/2016/07/25/let-the-url-do-the-talking-part-3-empower-the-url-with-redux-little-router/  
-  http://formidable.com/blog/2016/09/13/introducing-nested-routing-in-redux-little-router/  
-  A series of articles discussing pain points when using React-Router and Redux together, and introducing a library called Redux-Little-Router as an alternative
+
 
 - **Do I Even Need a Routing Library?**  
   http://jamesknelson.com/even-need-routing-library/  
@@ -38,6 +32,32 @@
   Examples of how to implement a custom routing approach, with minimal external dependencies.
 
 
+#### Routing with Redux
+
+- **Let the URL Do the Talking**  
+  http://formidable.com/blog/2016/07/11/let-the-url-do-the-talking-part-1-the-pain-of-react-router-in-redux/  
+  http://formidable.com/blog/2016/07/19/let-the-url-do-the-talking-part-2-bargaining-and-acceptance-with-redux-and-react-router/  
+  http://formidable.com/blog/2016/07/25/let-the-url-do-the-talking-part-3-empower-the-url-with-redux-little-router/  
+  http://formidable.com/blog/2016/09/13/introducing-nested-routing-in-redux-little-router/  
+  A series of articles discussing pain points when using React-Router and Redux together, and introducing a library called Redux-Little-Router as an alternative
+
+
+- **An Introduction to the Redux-First Routing Model**  
+  https://medium.freecodecamp.com/an-introduction-to-the-redux-first-routing-model-98926ebf53cb  
+  An article that argues in favor of keeping location state in Redux, updating it with actions, and syncing the browser URL based on that state.  Includes a sample implementation for the approach, and a link to the actual library the author built.
+
+- **Pre Release: Redux-First Router - A Step Beyond Redux-Little-Router**  
+  https://medium.com/faceyspacey/pre-release-redux-first-router-a-step-beyond-redux-little-router-cd2716576aea  
+  An opinionated article that argues against the approaches used by both React-Router and Redux-Little-Router, in favor of basing routing state in Redux, with a corresponding new library.
+
+- **Routedux - Routing the Redux way**  
+  https://cjdev.github.io/routedux/  
+  An article introducing a library that maps URLs to actions and vice versa.
+
+- **Entering/Leaving hooks of routing for Redux apps**  
+  https://medium.com/@kuy/entering-leaving-hooks-of-routing-for-react-redux-app-22e6eea055a5  
+  Discusses use of enter/leave routing hooks for handling component data fetching needs, and how that is handled with the author's Redux-based routing library.
+
 
 #### Authentication
 

react-server-rendering.md

@@ -39,4 +39,8 @@
 
 - **Code Cracked for Code Splitting + SSR in Reactlandia: React Loadable + Webpack Flush Chunks**  
   https://hackernoon.com/code-cracked-for-code-splitting-ssr-in-reactlandia-react-loadable-webpack-flush-chunks-and-1a6b0112a8b8  
-  Describes some of the problems involved in properly implementing both SSR and code-splitting, and how a combination of libraries seems to help solve those problems.
+  Describes some of the problems involved in properly implementing both SSR and code-splitting, and how a combination of libraries seems to help solve those problems.
+
+- **Server-Side React Rendering**  
+  https://css-tricks.com/server-side-react-rendering/  
+  A good tutorial that walks through the basic setup needed to start rendering React components into HTML in an Express server.

react-styling.md

@@ -135,8 +135,13 @@
   The author of the Este.js boilerplate describes his investigation of various React styling libraries, and how he ended up building his own
 
 
-#### Techniques
+#### Techniques and Examples
 
 - **How to build animated microinteractions in React**  
   https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8  Examples of various ways to create small animations to give feedback as the user interacts with components
-
+
+- **Create That Component**  
+  https://medium.com/taitounited/create-that-component-1-7a2267bc2833  
+  https://medium.com/taitounited/create-that-component-2-f6e6ba2e6b5a  
+  https://medium.com/taitounited/create-that-component-3-25f1f722cead  
+  A series of examples that build components for assorted concepts like toggle switches, ripple effects, and toasts, using libraries like styled-components.