Updates, 2017-07-03

boilerplates-and-starter-kits.md

@@ -21,13 +21,6 @@
   https://github.com/tstringer/react-laboratory  
   An absolute bare-minimum project.  One tiny Webpack config, one JS file, one component.  Pretty much the smallest possible setup to use React and JSX with Webpack.
 
-- **Hipster Boilerplate**  
-  https://github.com/Jordaanm/hipster-boilerplate  
-  A learning-oriented repo that builds up a small project config step-by-step.  Each commit adds one new feature or capability (Babel+ES6, Webpack bundling, a small Redux app, LESS styling, routing, and hot-reloading).  
-
-- **JavaScript Stack from Scratch**  
-  https://github.com/verekia/js-stack-from-scratch  
-  This is a minimalistic and straight to the point guide to assembling a JavaScript stack. It teaches you how to set up ES6, Babel, Gulp, ESLint, React, Redux, Webpack, Immutable, Mocha, Chai, Sinon, and Flow. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring all these tools together and giving you the simplest possible example for each tool. You can see this tutorial as a way to write your own boilerplate from scratch.
 
 
 #### Full-Featured Starter Kits
@@ -85,3 +78,54 @@
 - **Awesome React Boilerplates**  
   http://habd.as/awesome-react-boilerplates/  
   Another good curated list of boilerplates for both React and React Native
+
+
+
+#### React Project Setup
+
+- **Simple React Development in 2017**  
+  https://hackernoon.com/simple-react-development-in-2017-113bd563691f  
+  An excellent set of instructions for setting up a React project with minimal fuss and effort needed.  Includes links to some useful resources, and info on deploying the app to production.
+
+- **Taming the React Setup**  
+  http://developer.telerik.com/featured/taming-react-setup/  
+  Describes seven different setups for writing React code, from simple (plain react.js loaded into the browser), to complex (use of Babel with Webpack or JSPM).
+
+- **Kick-Start React Projects with Create-React-App**  
+  https://www.sitepoint.com/create-react-app/  
+  Some quick tips on how to use Create-React-App to create a new React project and tweak the setup.
+
+- **Getting Started with React the Easy Way**  
+  http://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/  
+  Shows the simplest way to load React into a web page and start using it
+
+- **The Minimal React Webpack Babel Setup**  
+  https://www.robinwieruch.de/minimal-react-webpack-babel-setup/  
+  A clear walkthrough for the key steps needed to set up a useful Webpack+Babel config from scratch for a productive React dev environment.  Very helpful if you choose not to use Create-React-App.
+
+- **Hipster Boilerplate**  
+  https://github.com/Jordaanm/hipster-boilerplate  
+  A learning-oriented repo that builds up a small project config step-by-step.  Each commit adds one new feature or capability (Babel+ES6, Webpack bundling, a small Redux app, LESS styling, routing, and hot-reloading).  
+
+- **JavaScript Stack from Scratch**  
+  https://github.com/verekia/js-stack-from-scratch  
+  This is a minimalistic and straight to the point guide to assembling a JavaScript stack. It teaches you how to set up ES6, Babel, Gulp, ESLint, React, Redux, Webpack, Immutable, Mocha, Chai, Sinon, and Flow. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring all these tools together and giving you the simplest possible example for each tool. You can see this tutorial as a way to write your own boilerplate from scratch.
+
+- **React Ecosystem Setup - Step-By-Step**  
+  https://codeburst.io/react-ecosystem-setup-step-by-step-walkthrough-721ff45a7fc1  
+  An in-depth walkthrough that shows to to set up Webpack and Babel, and explains why each bit of configuration is needed.
+
+- **Always up-to-date Guide for Modern JavaScript Development**  
+  https://mvilrokx.gitbooks.io/always-up-to-date-guide-for-modern-javascript-dev/content/  
+  An opinionated guide for setting up a modern JS development environment.
+
+- **Setup a React Environment using Webpack and Babel**  
+  https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel  
+  A tutorial that teaches how to set up a basic Webpack 2 + Babel config from scratch.
+
+- **Setting up a Front-End Project**  
+  https://medium.com/@Torwori/setting-up-a-front-end-project-part-1-d7fbaaaa5e14  
+  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.

community-resources.md

@@ -63,6 +63,10 @@
   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.
 
+- **Awesome MobX**  
+  https://github.com/mobxjs/awesome-mobx  
+  A collection of awesome things regarding MobX.
+
 
 #### People
 

es6-features.md

@@ -64,6 +64,9 @@
   https://zellwk.com/blog/es6/  
   A great look at how several of the most useful ES6 features work, such as block scoping, arrow functions, and destructuring.
 
+- **ES6 Katas: Learn ES6 by doing it**  
+  http://es6katas.org/  
+  Sets of exercises to help you learn ES6 features and syntax.
 
 #### In-Depth Details
 

immutable-data.md

@@ -134,4 +134,8 @@
 
 - **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
+  A follow-up to the previous article, showing how to correctly set up and use Immutable.js with Redux
+
+- **Qim: Select from your Immutable JavaScript Cake and Update It Symmetrically Too**  
+  https://zapier.com/engineering/qim-immutable-javascript/  
+  An in-depth look at a new lens-style immutable update utility called Qim, including what problems it helps solve and how to use it.

javascript-resources.md

@@ -45,9 +45,14 @@ While this list is primarily focused on learning React and Redux, and generally
   https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225  
   Extensive suggestions for resources to use when learning Javascript
 
+- **6 Quick & Proven Tips to Help You Learn JavaScript**  
+  https://blog.alexdevero.com/6-quick-proven-tips-learn-javascript/  
+  Points to a couple of suggested books to help learn JS, and gives several additional suggestions for approaches and resources to use in the process.
+
 - **Array iteration methods summarized**  
   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
+
 
 #### Tutorials, Books, and Courses
 
@@ -94,6 +99,10 @@ While this list is primarily focused on learning React and Redux, and generally
   http://dmitrysoshnikov.com/ecmascript/javascript-the-core/  
   A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`.
 
+- **The Modern Javascript Tutorial**  
+  http://javascript.info/  
+  A large tutorial series that covers all aspects of the modern Javascript language (basic syntax, data types, objects, and advanced function usage), as well as a section on using Javascript to interact with the DOM in web pages.
+
 
 #### Interactive Exercises
 

project-structure.md

@@ -76,21 +76,14 @@
   http://noah-prince-tech-blog.ghost.io/structuring-and-organizing-the-react-components-directory/  
   Some useful suggestions for folder layout, folder naming, and import handling.
 
-- **How OkCupied organizes its multi-page React App**  
+- **How OkCupid organizes its multi-page React App**  
   https://tech.okcupid.com/how-okcupid-organizes-its-multi-page-react-app/  
   https://www.reddit.com/r/reactjs/comments/5widfg/how_okcupid_organizes_its_multipage_react_app/  
   The OkCupid team discusses their approach for a multi-page app, including bundles, use of the Ducks pattern, and folder structures.  Some good follow-up discussion in the Reddit comments.
 
 - **React Project Structure**  
   https://daveceddia.com/react-project-structure/  
   An excellent article that gives practical advice for structuring the source of a React app, especially if you're a beginner or using `create-react-app`.
-
 
-#### Project Setup
-
-- **Setting up a Front-End Project**  
-  https://medium.com/@Torwori/setting-up-a-front-end-project-part-1-d7fbaaaa5e14  
-  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.
+- **Decoupling Hierarchies for Maintainable Code**  
+  https://medium.com/altschool-engineering/decoupling-hierarchies-for-maintainable-code-b13c24b2f047  

pros-cons-discussion.md

@@ -90,6 +90,18 @@
   https://medium.com/@maxlynch/redux-is-the-pivotal-frontend-innovation-a406736552cb  
   An opinionated article that says state management is even more important than components.
 
+- **Reflections on React**  
+  https://medium.com/@burkeholland/reflections-on-react-65d152a13d9e  
+  A former Telerik dev gives his thoughts on the current state of the React world, including how much people like it, use of standard JS syntax like classes, the variety of UI libs, and the lack of serious enterprise-class components like data grids and schedulers.  Some good discussion in the comments, too.
+
+- **The delight of working on a React + Redux app**  
+  https://medium.com/dailyjs/the-delight-of-working-on-a-react-redux-app-affc22757e81  
+  Some interesting personal opinions on the benefits of working with React+Redux, including explicitness, traceability, and easy unit testing.
+
+- **Don't Blame it on React or Redux**  
+  https://diessi.ca/blog/dont-blame-it-on-react-or-redux/  
+  Some short but well-written thoughts that argue in favor of React and Redux's "do it yourself" / "don't prescribe how to solve everything" approach, and that blaming them for bad app design or boilerplate is wrong.
+
 
 #### Comment Threads and Discussions
 
@@ -217,6 +229,11 @@ similar structures in ClojureScript.
   https://www.reddit.com/r/javascript/comments/5wixxc/reactredux_or_angular_2_better_for_big_enterprise/  
   Some good discussion on what "enterprise" means, and the relative merits of various frameworks for building enterprise apps.
 
+- **"Redux is overused. Use setState first unless you know why you need Redux"**  
+  https://twitter.com/_jayphelps/status/846226930416345088  
+  Jay Phelps, author of redux-observable, starts a long and involved Twitter thread about when it's appropriate to use Redux - use cases, app sizes, and reasons.  Lots of interesting opinions.
+
+
 #### React's PATENTS License
 
 - **Facebook Open Source License FAQ**  

react-architecture.md

@@ -106,6 +106,10 @@
 - **Thinking in React**  
   https://www.codementor.io/radubrehar/thinking-in-react-8duata34n  
   Some quick thoughts on how React's rendering approach can be applied universally, how it simplifies dealing with state transitions, and how its API helps devs build UIs naturally.
+
+- **Front End Center: Single-Responsibility Components: Object-Oriented Design in React**  
+  https://youtu.be/pSdp92Up8O8  
+  An excellent screencast that discusses how the "Single Responsibility Principle" can be applied to organizing and designing React components.
 
 
 #### React Best Practices
@@ -232,6 +236,10 @@
   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.
 
+- **How to become a more productive React developer**  
+  https://dev.to/karljakoblind/how-to-become-a-more-productive-react-developer  
+  Quick suggestions for useful tools that increase productivity, including Prettier for formatting, ESLint for error checking, the React and Redux DevTools for debugging, and React-Hot-Loader for faster edits.
+
 
 
 #### React Architecture

react-component-patterns.md

@@ -433,6 +433,10 @@
   https://medium.com/@danparkk/react-modals-scalable-customizable-neat-components-f2088d60f3d3  
   An extended discussion of what concepts are involved in creating modals in web pages, why this can become complex, and how to implement them in a scalable way using React and Redux.
 
+- **Tasks and Portals in React**  
+  https://medium.com/@MoneyhubEnterpr/tasks-and-portals-in-react-1df2438cdebb  
+  Describes how MoneyHub implemented modal dialogs with wizard-like workflows that tie together multiple screens, using a combination of container components and portals.
+
 
 #### Composing Components with Functional Programming
 

react-deployment.md

@@ -27,4 +27,13 @@
 
 - **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.
+  Walks through the basics of configuring a Create-React-App-based Electron app and building it for production.
+
+- **React with Any Backend**  
+  http://andrewhfarmer.com/react-with-any-backend/  
+  Some short discussion and suggestions for project structure and deployment steps when building a React app that talks to a non-Javascript backend server.
+
+- **Building a Full-Stack App with Serverless and React**  
+  http://serverless-stack.com/  
+  A large, well-written, in-depth tutorial that covers all aspects of building a React app with an AWS "serverless" backend: creating an AWS account, setting up the serverless backend and API, building a React app that talks to the API, and deploying the React app on AWS.
+

react-implementation.md

@@ -30,6 +30,25 @@
   https://tylermcginnis.com/react-elements-vs-react-components/  
   An explanation of how elements represent DOM nodes, what `createElement` does, and how components and rendering relate to elements
 
+
+#### 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
 
@@ -142,6 +161,10 @@
 - **Preact: Into the void 0**  
   https://youtu.be/LY6y3HbDVmg  
   A talk by Jason Miller, author of Preact, covering some of the core implementation concepts behind Preact (and other virtual DOM/component libraries), as well as some important aspects for DOM manipulation performance.
+
+- **Under the hood: ReactJS**  
+  https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/  
+  An incredibly detailed walkthrough of React's entire codebase and execution flow, with many diagrams and flowcharts illustrating things.  Very impressive. 
 
 
 #### React Fiber

react-native.md

@@ -75,4 +75,12 @@
 
 - **Where does authentication fit in a React Native app?**  
   https://goshakkk.name/auth-in-react-native-apps/  
-  Some quick thoughts on what authentication involves and how to handle it in an RN app
+  Some quick thoughts on what authentication involves and how to handle it in an RN app
+
+- **The building blocks of React Native animations**  
+  https://goshakkk.name/react-native-animated-building-blocks/  
+  Several useful sets of guidelines for thinking through and implementation animations in React Native, including "how should this change", visual state, transitions, and interpolations, plus links to additional resources for RN animations.
+
+- **6 Tips You Want to Know about React Native Performance**  
+  https://www.simplytechnologies.net/blog/2017/6/6/6-tips-you-want-to-know-about-react-native-performance  
+  Several useful suggestions for improving RN performance, including RN-specific suggestions like using FlatList instead of ListView, and pushing animations into native code.

react-performance.md

@@ -93,8 +93,9 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
   Discussion and examples of using the "virtualization" technique to only render list components that are currently in view.
 
 - **Creating more efficient React views with windowing**  
-  https://bvaughn.github.io/connect-tech-2016/#/  
-  An excellent slideshow on performance topics from the author of the React-Virtualized library.  Covers sources of slowness, ways to avoid re-renders, and a deep look at "windowing/virtualization" for high-performance lists.
+  https://bvaughn.github.io/forward-js-2017/#/  
+  https://youtu.be/t4tuhg7b50I  
+  An excellent talk on performance topics from Brian Vaughn, a React core team member and author of the React-Virtualized library.  Covers sources of slowness, ways to avoid re-renders, and a deep look at "windowing/virtualization" for high-performance lists.
 
 - **React Component Profiling**  
   https://blog.yld.io/2016/11/25/react-component-profiling/  
@@ -184,6 +185,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
   https://hackernoon.com/improving-first-time-load-of-a-production-react-app-part-1-of-2-e7494a7c7ab0  
   A detailed look at the various approaches used by UrbanClap to improve their load time, including file chunking, on-demand loading, dropping non-critical libraries, and more
 
+- **Simple Pattern for Asynchronously Loading React Components**  
+  https://mackness.github.io/react/patterns/2017/03/20/simple-pattern-for-asynchronously-loading-react-components.html  
+  A quick example of using dynamic importing to lazy-load React components
+
 
 #### Immutable Data
 

react-redux-testing.md

@@ -206,6 +206,10 @@
 - **Redux Testing Step by Step: A simple Methodology for Testing Business Logic**  
   https://hackernoon.com/redux-testing-step-by-step-a-simple-methodology-for-testing-business-logic-8901670756ce  
   An excellent article by Tal Kol, describing how different types of tests fit together, the different kinds of Redux code that need to be tested, and how to write tests for each.
+
+- **TDDing React + Redux**  
+  http://engineering.pivotal.io/post/tdding-react-and-redux/  
+  Helpful examples of patterns for testing various parts of a React+Redux app.
 
 
 

react-routing.md

@@ -31,6 +31,10 @@
   https://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997  
   Examples of how to implement a custom routing approach, with minimal external dependencies.
 
+- **Build your own React Router v4**  
+  https://tylermcginnis.com/build-your-own-react-router-v4/  
+  Tyler McGinnis, a React Training partner, walks through the process of building a miniature version of React Router v4 to help explain its concepts and implementation.
+
 
 #### Routing with Redux
 

react-state-management.md

@@ -58,6 +58,10 @@
 - **Understanding State and Props in React**  
   https://hackernoon.com/understanding-state-and-props-in-react-94bc09232b9c  
   A helpful explanation of the difference between "props" and "state".
+
+- **Local Storage in React**  
+  https://www.robinwieruch.de/local-storage-react/  
+  Demonstrates how to persist state in React using local storage, how to use it as a cache, and how to make it expire.
 
 
 #### Using `setState`