Updates, 2016-08-13

README.md

@@ -3,13 +3,14 @@ Curated tutorial and resource links I've collected on React, Redux, ES6, and mor
 
 Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies.  There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn.  The invite link is at https://www.reactiflux.com.
 
-You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links).  Other useful resource lists include [Awesome React](https://github.com/enaqx/awesome-react), [Awesome React Native](https://github.com/jondot/awesome-react-native), and [Awesome Redux](https://github.com/xgrommx/awesome-redux).
+You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links).  Also see [Community Resources](community-resources.md) for links to other links lists, podcasts, and email newsletters.
 
 
 ## 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)

community-resources.md

@@ -0,0 +1,77 @@
+### Community Resources
+
+
+#### Link Lists
+
+- **Awesome React**  
+  https://github.com/enaqx/awesome-react  
+  A collection of awesome things regarding the React ecosystem.
+
+- **Awesome React Native**  
+  https://github.com/jondot/awesome-react-native  
+  An "awesome" type curated list of React Native components, news, tools, and learning material  
+
+- **Redux Ecosystem Links**  
+  https://github.com/markerikson/redux-ecosystem-links  
+  A categorized list of Redux-related addons, libraries, and utilities
+
+- **Awesome Redux**  
+  https://github.com/xgrommx/awesome-redux  
+  Awesome list of Redux examples, articles, and libraries.
+
+- **Awesome Webpack**  
+  https://github.com/d3viant0ne/awesome-webpack  
+  A curated list of awesome Webpack resources, libraries and tools
+
+
+#### Podcasts
+
+- **Javascript Air**  
+  https://javascriptair.com/  
+  The live broadcast podcast all about JavaScript
+
+- **React30**  
+  https://react30.com/  
+  The weekly React podcast that promises to waste no more than 30 minutes of your time.
+
+
+#### Newsletters
+
+- **Full Stack React**  
+  http://newsletter.fullstackreact.com/  
+  Fullstack React is a weekly newsletter about the React ecosystem with an emphasis on useful libraries, tutorials and code. Subscribe to read the best articles each week on React, Flux, GraphQL, Relay, and friends.
+
+- **React.js Newsletter**  
+  http://reactjsnewsletter.com/  
+  The free, weekly newsletter of the best React.js news, articles, projects, and more - brought to you by React.js Program
+
+- **React Digest**  
+  http://reactdigest.net/  
+  A free, weekly newsletter about the latest news in React Javascript community.  The only news source you need targeted on (but not limited to) React, Javascript, Flux and functional programming.
+
+- **Curated React**  
+  http://curatedreact.com/  
+  Curated React is a weekly curated publication full of interesting, relevant links geared towards ReactJS and React Native. 
+
+- **React Statuscode**  
+  http://react.statuscode.com/  
+  A free, once-weekly e-mail newsletter on React from the authors of JavaScript Weekly.
+
+- **JavaScript Weekly**  
+  http://javascriptweekly.com/  
+  A free, once-weekly e-mail round-up of JavaScript news and articles.
+
+- **PonyFoo Weekly**  
+  https://ponyfoo.com/weekly  
+  A single email every thursday, discussing front-end web development and related technologies.
+
+
+#### Online Course Sites
+
+- **Egghead.io**  
+  https://egghead.io/  
+  Numerous courses with short, bite-size videos on a wide variety of topics.  Some courses and videos are free, others require a paid subscription to Egghead to access.
+
+- **Frontend Masters**  
+  https://frontendmasters.com/  
+  Front-end training courses from masters who are shaping the industry.

es6-features.md

@@ -53,6 +53,16 @@
   http://appendto.com/2016/06/powering-javascript-with-generators  
   A useful introduction to the generators feature in ES6.
 
+- **Metaprogramming in ES6: Symbols, Reflection, and Proxies**  
+  https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/  
+  https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-2-reflect/  
+  https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-3-proxies/  
+  A deep dive into three new features of ES6 that enable different ways of metaprogramming.
+
+- **Detailed overview of well-known Symbols**  
+  https://rainsoft.io/detailed-overview-of-well-known-symbols/  
+  An in-depth look at the predefined Symbols in ES6 and what they are used for.
+
 
 #### Techniques
 

functional-programming.md

@@ -88,4 +88,14 @@
 
 - **Functional Programming Isn't the Answer**  
   http://degoes.net/articles/fp-is-not-the-answer  
-  A reminder that while FP has potential benefits, it's ultimately just a tool, and the end goal is useful software.
+  A reminder that while FP has potential benefits, it's ultimately just a tool, and the end goal is useful software.
+
+- **An Intro to Functional Programming Concepts in Javascript**  
+  https://medium.com/@collardeau/intro-to-functional-programming-concepts-in-javascript-b0650773139c  
+  https://medium.com/@collardeau/intro-to-functional-programming-concepts-in-javascript-part-2-f45228c49eed  
+  https://medium.com/@collardeau/part-3-an-intro-to-functional-programming-concepts-in-javascript-febf9368ffe6  
+  A multi-part series covering a number of FP concepts, how to use them in Javascript, and use of the Ramda FP utility library
+
+- **JavaScript and Functional Programming**  
+  https://bethallchurch.github.io/JavaScript-and-Functional-Programming/  
+  An overview of the basic principles of functional programming, and how they can be applied in Javascript.  Also includes links to a variety of other articles and resources.

react-performance.md

@@ -65,6 +65,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   https://medium.com/modus-create-front-end-development/component-rendering-performance-in-react-df859b474adc  
   A comparison of how fast rendering happens in React 14 vs 15, and functional components vs class components
 
+- **Performance Conditionally Rendered Content in React**  
+  https://gist.github.com/ryanflorence/a301dc184f75e929a263dc1e80399a28  
+  A tip for improving performance when conditionally rendering components: use a function as a child, and only call that function if the condition is true.
+
 #### Immutable Data
 
 - **Building Efficient UI with React and Redux**  
@@ -112,4 +116,12 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
 - **Improving React and Redux Performance with Reselect**  
   http://blog.rangle.io/react-and-redux-performance-with-reselect/  
   Covers how to use Reselect to define memoized "selector" functions that can cut down on duplicate work
+
+- **Chat discussion - summary of Redux connection perf considerations**  
+  https://gist.github.com/markerikson/53735e4eb151bc228d6685eab00f5f85  
+  An overview of how having many connected components can improve performance
+
+- **Chat discussion - single connected component vs many connected components**  
+  https://gist.github.com/markerikson/6056565dd65d1232784bf42b65f8b2ad  
+  An extended chat log discussing pros and cons of various approaches to managing connected components in a Redux app
 

react-redux-architecture.md

@@ -90,6 +90,41 @@
   http://jaketrent.com/post/smart-dumb-components-react/  
   Another look at ways to conceptually categorize components based on responsibilities, and some ways you can organize your code based on those concepts.
 
+- **Functional Components vs. Stateless Functional Components vs. Stateless Components**  
+  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.
+
+- **React Component Jargon as of August 2016**  
+  https://medium.com/@arcomito/react-component-jargon-as-of-august-2016-28451d8ceb1d  
+  A very useful glossary of widely-used terms describing React components
+
+- **Dynamically Rendering React Components**  
+  https://wail.es/dynamically-rendering-react-components/  
+  Examples of how to dynamically determine which React component to render
+
+- **Higher Order Components: A React Application Design Pattern**  
+  https://www.sitepoint.com/react-higher-order-components/  
+  A discussion of how to use Higher Order Components to keep your React applications tidy, well structured and easy to maintain.  Also, how pure functions keep code clean and how these same principles can be applied to React components.
+
+- **The React Controller View Pattern**  
+  http://blog.andrewray.me/the-reactjs-controller-view-pattern/  
+  Describes using top-level components to hold state and pass it to children as props
+
+- **Functional React Serie - Part 1: Get your App outta my Component**  
+  https://medium.com/@adamterlson/functional-react-series-part-1-get-your-app-outta-my-component-92656ae13e25  
+  Part 1 in a series about writing React applications by treating components as functions, not templates.
+
+- **How to handle state in React: The Missing FAQ**  
+  https://medium.com/react-ecosystem/how-to-handle-state-in-react-6f2d3cd73a0c  
+  An article that dispels misunderstandings and answers common questions about how to handle state in React.
+
+- **Where to Hold React Component Data: state, store, static, and this**  
+  https://medium.freecodecamp.com/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00  
+  A great summary of different places to store state, and when and why you should use each.
+
+- **Function as Child Components**  
+  https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9  
+  Explains the "function as a child" technique as an alternative to Higher Order Components
 
 #### React and AJAX
 
@@ -166,6 +201,22 @@
   http://donavon.js.org/react-forms/  
   A look at controlled vs uncontrolled inputs, with a useful note about issues with controlled inputs and certain browsers.
 
+- **React "controlled" vs "uncontrolled" inputs**  
+  https://gist.github.com/markerikson/d71cfc81687f11609d2559e8daee10cc  
+  An explanation of the terms "controlled inputs" and "uncontrolled inputs"
+
+- **Uncontrolled components are an anti-pattern**  
+  https://medium.com/@jedwards8/uncontrolled-components-are-an-anti-pattern-abbdd86fd39e  
+  Argues that uncontrolled components are a bad idea and should be avoided.
+
+- **ReactJS and controlled forms**  
+  http://leftdevel.com/blog/reactjs-controlled-forms/  
+  A look at the difference between controlled and uncontrolled inputs, and some problems that can come from using uncontrolled inputs.
+
+- **Managing React Controlled Component State**  
+  http://spraso.com/managing-react-controlled-component-state/  
+  Some short examples of how to properly manage state for controlled inputs
+
 
 #### Project File Structure
 
@@ -212,12 +263,13 @@
 - **Wordpress Calypso: Our Approach to Data**  
   https://github.com/Automattic/wp-calypso/blob/master/docs/our-approach-to-data.md  
   The team behind Wordpress's new admin panel looks at their migration from emitters to Flux to Redux, and describes how they organize their state tree, use selectors to extract state, run queries with components, and persist their store state through refreshes.
-
-- **Redux and the Elm Architecture**  
-  http://salsita.github.io/redux-elm/  
-  Redux lacks built-in abstractions for real-world, maintainable, scalable applications. In particular, it is difficult to create and distributed encapsulated, reusable components.  The Elm Architecture clearly addresses some important areas where Redux alone is lacking.
 
 - **So you've screwed up your Redux store - or, why Redux makes refactoring easy**  
   https://blog.boldlisting.com/so-youve-screwed-up-your-redux-store-or-why-redux-makes-refactoring-easy-400e19606c71  
   Describes some useful practices for organizing Redux actions, reducers, and selectors.
 
+- **How we reduced boilerplate and handled asynchronous actions with Redux**  
+  https://blog.algolia.com/how-we-reduced-boilerplate-and-handled-asynchronous-actions-with-redux/  
+  A look at conventions that have helped the Algolia team write Redux apps.
+
+

react-redux-testing.md

@@ -68,6 +68,14 @@
   http://silvenon.com/testing-react-and-redux/  
   A three-part article that shows how to set up Ava and Babel, then walks through testing Redux code (action creators, reducers, selectors, thunks, and sagas), and React components.
 
+- **Testing React Applications Examples**  
+  https://github.com/mxstbr/react-testing  
+  A repo showcasing how to test various parts of a common React/Redux app using Mocha, expect and enzyme
+
+- **Unit Testing Redux Container Components**  
+  http://pebblecode.com/blog/testing-redux-containers/  
+  Demonstrates techniques for properly testing Redux-connected React components using a mock store.
+
 
 #### General Testing, Tools, and Setup
 
@@ -89,4 +97,10 @@
 
 - **ESLint Part 1: Exploration**  
   https://blog.scottnonnenberg.com/eslint-part-1-exploration/  
-  A solid look at what ESLint is, how you can use it to help keep your code clean, and a number of useful linting plugins that are available.
+  A solid look at what ESLint is, how you can use it to help keep your code clean, and a number of useful linting plugins that are available.
+
+- **Keep Calm and Love Javascript Unit Tests**  
+  http://www.theodo.fr/blog/2016/04/keep-calm-and-love-javascript-unit-tests-part-1/  
+  http://www.theodo.fr/blog/2016/06/keep-calm-and-love-javascript-unit-tests-part-2-asynchronism/  
+  An introduction to using Mocha, Chai, and Sinon to write unit tests for various scenarios.
+

react-styling.md

@@ -14,4 +14,8 @@
 
 - **Elephants, The Three Code Ilities, & Two Months With CSS Modules**  
   http://chrispearce.co/elephants-the-three-code-ilities-two-months-with-css-modules/  
-  A look at how Lystable used CSS Modules to scale their codebase.
+  A look at how Lystable used CSS Modules to scale their codebase.
+
+- **Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS**  
+  https://medium.com/maintainable-react-apps/journey-to-enjoyable-maintainable-styling-with-react-itcss-and-css-in-js-632cfa9c70d6  
+  A long, in-depth article detailing one dev's progression through various approaches to handling CSS.

react-tutorials.md

@@ -140,6 +140,12 @@
 - **SurviveJS - React**  
   http://survivejs.com/react/introduction  
   A full book online book that shows how to develop a Kanban application. Covers key ideas of React, Flux, and advanced concepts such as styling. The commercial version has more content, but you can complete the basic tutorial for free.  
+
+- **A Primer on the React Ecosystem**  
+  http://patternhatch.com/2016/07/06/a-primer-on-the-react-ecosystem-part-1-of-3/  
+  http://patternhatch.com/2016/08/02/a-primer-on-the-react-ecosystem-part-2-of-3/  
+  A multi-part tutorial that demonstrates how to set up a React development environment, create React components and have them respond to data changes, and manage app state with Redux.
+
 
 #### React Implementation Walkthroughs
 
@@ -186,6 +192,7 @@
 
 #### Paid Courses and Books
 
+Also see the course sites listed in the [Community Resources](community-resources.md#online-course-sites) page.
 
 - **React.js Program**  
   http://courses.reactjsprogram.com/courses  
@@ -203,5 +210,6 @@
   https://appendto.com/courses/react-training/  
   appendTo offers instructor-led, hands-on React training courses on React, Redux, React Native, ES6, and Webpack.
 
+
 
 

redux-side-effects.md

@@ -57,6 +57,10 @@
   https://www.reddit.com/r/reactjs/comments/4ng8rr/redux_sagas_benefits/  
   Some great examples in the comments of how Redux Saga works and how to use it.
 
+- **Async Operations using Redux-Saga**  
+  https://medium.com/@andresmijares25/async-operations-using-redux-saga-2ba02ae077b3  
+  An example of using Redux-Saga to coordinate multiple async calls based on another article's flight data scenario.
+
 
 #### Other