From 0d6bdeaffa70b220942efc76686eeb8e4e7f896c Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sat, 29 Oct 2016 17:17:03 -0400 Subject: [PATCH] Updates, 2016-10-29 --- basic-concepts.md | 4 ++++ functional-programming.md | 9 +++++++++ javascript-resources.md | 4 ++++ pros-cons-discussion.md | 4 ++++ react-component-patterns.md | 12 ++++++++++++ react-performance.md | 17 +++++++++++++++++ react-server-rendering.md | 7 ++++++- react-tutorials.md | 24 ++++++++++++++++++++++++ redux-side-effects.md | 4 ++++ redux-tutorials.md | 7 +++++++ static-typing.md | 16 +++++++++++++++- webpack-advanced-techniques.md | 8 ++++++++ webpack-tutorials.md | 4 ++++ 13 files changed, 118 insertions(+), 2 deletions(-) diff --git a/basic-concepts.md b/basic-concepts.md index 56d2f7a..714770c 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -47,6 +47,10 @@ 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. +- **Javascript Package Managers 101** + https://medium.com/@shubheksha/javascript-package-managers-101-9afd926add0a + An overview of what packages and package managers are, some related terms, and how these tools work. + #### React Learning Guidelines - **React How-To** diff --git a/functional-programming.md b/functional-programming.md index 6d0ffc4..d029863 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -133,3 +133,12 @@ - **Composability: From Callbacks to Categories in ES6** https://medium.com/@homam/composability-from-callbacks-to-categories-in-es6-f3d91e62451e Explores different solutions to "callback hell", based on various FP concepts + + +- **So You Want To Be a Functional Programmer** + https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-6-db502830403 + A multi-part series on functional programming concepts and learning approaches (links to previous parts in the article). + +- **Imperative vs Declarative Programming** + https://medium.freecodecamp.com/imperative-vs-declarative-programming-283e96bf8aea + Metaphors, examples, and explanations for the terms "declarative" and "imperative", and how those relate to Functional Programming \ No newline at end of file diff --git a/javascript-resources.md b/javascript-resources.md index fdfbb02..58e580a 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -106,6 +106,10 @@ While this list is primarily focused on learning React and Redux, and generally - **Let's Settle `this`, Part One** https://medium.com/@nashvail/lets-settle-this-part-one-ef36471c7d97 Another look at `this`, with a number of examples and explanations + +- **Understanding Javascript Function Invocation and `this`** + http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/ + An excellent explanation of how function calls and the `this` keyword work - **Grokking Scope in Javascript** https://code.tutsplus.com/tutorials/grokking-scope-in-javascript--cms-26259 diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 00dc634..d0d915d 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -151,6 +151,10 @@ similar structures in ClojureScript. https://news.ycombinator.com/item?id=12758514 Yet another rant thread about Javascript churn, but with a couple very insightful comments about the unique complexities and challenges involved in writing applications for the web. +- **"Youtube is being rebuilt on Web Components"** + https://www.reddit.com/r/javascript/comments/59ax4f/youtube_is_being_rebuilt_on_web_components_and/d97rsdd/ + SOme interesting thoughts on how various frameworks have approached composition, and how React helps make it more approachable. + #### React's PATENTS License - **Facebook Open Source License FAQ** diff --git a/react-component-patterns.md b/react-component-patterns.md index a2e0caa..35948c9 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -30,6 +30,10 @@ 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. +- **Ownership and Children in React** + http://ctheu.com/2015/02/10/ownership-and-children-in-reactjs/ + Discusses the difference between "parent" and "owner" relationships, and what the "children" prop can look like. + #### Component Categories @@ -113,6 +117,14 @@ https://youtu.be/6nVxCWUAEPM A screencast that walks through the idea and usage of Higher Order Components +- **ReactCasts: Function as Child Component** + https://www.youtube.com/watch?v=WE3XAt9P8Ek + A screencast that introduces the idea of Functions as Children and demonstrates usage + +- **Annotations about React Higher-Order Components** + https://blog.codeminer42.com/annotations-about-react-higher-order-components-e3561bc7c27a + An explanation of what HOCs are, what they can be used for, and when to use them. + #### Other Component Patterns diff --git a/react-performance.md b/react-performance.md index d9a7a9e..a5c6c22 100644 --- a/react-performance.md +++ b/react-performance.md @@ -83,12 +83,29 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://www.reddit.com/r/reactjs/comments/4ri9x8/dont_use_bind_when_passing_props/ Advice on approaches to function binding, with further discussion. + + +- **React Perf Debugging: Animation and FLIPping** + https://engineering.siftscience.com/browser-dgaf-that-you-use-react/ + https://engineering.siftscience.com/browser-dgaf-use-react-pt-2-flipping-react/ + A deep dive into some tricky issues that come up with running animations, and some ways to work around those. + + + +#### Code Splitting and Progressive Apps + +Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) + - **Progressive Web Apps with React** https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12 https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2 https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline-support-and-network-resilience-c84db889162c A multi-part series by Addy Osmani on building performant Progressive Web Apps, including page loading, code splitting, and offline handling. + +- **Progressive loading for modern web applications via code splitting** + https://medium.com/@lavrton/progressive-loading-for-modern-web-applications-via-code-splitting-fb43999735c6 + Examples of how to set up code splitting, and write components that encapsulate the process for improved loading times. #### Immutable Data diff --git a/react-server-rendering.md b/react-server-rendering.md index 154a5b3..d73372b 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -6,4 +6,9 @@ - **React.js: Server side rendering** http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/ - An example of setting up server rendering using React-Router and Express \ No newline at end of file + An example of setting up server rendering using React-Router and Express + +- **Build a Universal Javascript App** + https://www.packtpub.com/books/content/build-universal-javascript-app-part-1 + https://www.packtpub.com/books/content/build-universal-javascript-app-part-2 + A tutorial that discusses some benefits of building a universal app, and walks through building an app with Express, React, and React Router. \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index 85c7322..032a729 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -96,6 +96,10 @@ https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ An example of how to set up a server to work with Create-React-App +- **A Walk Through My "Just Enough React To Get You Into Trouble" Presentation** + http://www.globalnerdy.com/2016/07/22/a-walk-through-my-just-enough-react-to-get-you-into-trouble-presentation-at-tampa-code-camp-2016/ + A blog post version of a talk introducing React's core concepts, and demoing them in JSFiddle + #### Project-Based Tutorials @@ -192,6 +196,22 @@ http://myappincome.co.uk/rock-and-roll-react-js-tutorial-part-2/ http://myappincome.co.uk/rock-and-roll-react-js-tutorial-part-3/ A tutorial that builds a React version of the Ember "Rock and Roll App" example. Covers more intermediate topics, and is aimed at new React devs trying to grow their knowledge. + +- **Find Your Park with React and the DarkSky API** + https://appendto.com/2016/10/find-your-park-with-reactjs-and-the-darksky-api/ + Demonstrates building a small app that displays info on a Google map + +- **React Daily UI** + http://codepen.io/collection/DoLZRm/ + https://www.fullstackreact.com/react-daily-ui/001-sign-up-form/ + https://www.fullstackreact.com/react-daily-ui/002-checkout/ + https://www.fullstackreact.com/react-daily-ui/003-landing-page/ + https://www.fullstackreact.com/react-daily-ui/004-calculator/ + A series of tutorials that build small apps, and explain React features and concepts that are used in the process. + +- **Building your First React Javascript App** + http://www.primaryobjects.com/2016/09/19/building-your-first-react-javascript-app/ + A tutorial that builds a small app demonstrating form inputs and remote data requests. #### React Implementation Walkthroughs @@ -276,6 +296,10 @@ https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm Digs into the behavior of React's setState method, and discusses when it may be synchronous vs asynchronous +- **React Source Code Annotations** + https://annot.io/github.com/facebook/react + Crowdsourced annotations and descriptions for files in the React codebase + #### Paid Courses and Books diff --git a/redux-side-effects.md b/redux-side-effects.md index e092d47..05441c0 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -68,5 +68,9 @@ - **Should I use redux-saga or not?** https://speakerdeck.com/kuy/should-i-use-redux-saga-or-not A presentation from Yuki Kodama, comparing side effect approaches. In Japanese, but still has a number of useful diagrams that can be understood by English speakers. + +- **Interview with Redux-Saga Author Yassine Eloaufi** + http://survivejs.com/blog/redux-saga-interview/ + An interview with the author of Redux-Saga, where he describes some of its concepts and history \ No newline at end of file diff --git a/redux-tutorials.md b/redux-tutorials.md index 1a8c740..81314f3 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -167,6 +167,10 @@ - **Building Redux in TypeScript with Angular 2** http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ An extended tutorial that builds up a mini-Redux in TypeScript, then transitions to building an application + +- **Redux without React - State Management in Vanilla Javascript** + https://www.sitepoint.com/redux-without-react-state-management-vanilla-javascript/ + A tutorial teaching Redux usage with a plain JS UI layer on top #### Redux Implementation Walkthroughs @@ -190,6 +194,9 @@ http://www.aaron-powell.com/tagged/reducks.html Another "build a mini-Redux" article series. +- **AMA with the Redux Creators** + https://hashnode.com/ama/with-redux-cisteui6p005gzx53fstg8t6l + Dan Abramov and Andrew Clark answer questions about Redux, and describe the history of its original development. #### Redux Middleware diff --git a/static-typing.md b/static-typing.md index e4656c1..d64353e 100644 --- a/static-typing.md +++ b/static-typing.md @@ -18,6 +18,10 @@ - **Accessing React PropTypes Meta-data** https://medium.com/@nunogrilopinheiro/accessing-react-proptypes-meta-data-45b3465abda7 A look at how to access PropTypes info at runtime using various tooling + +- **React: Validating Children** + http://www.mattzabriskie.com/blog/react-validating-children + Examples of using PropTypes to enforce what children can be passed to a component #### TypeScript @@ -29,7 +33,17 @@ #### Flow - +- **Setting up Flow when you've already got Babel in place** + https://medium.freecodecamp.com/using-flow-with-babel-c04fdca8d14d + Instructions for integrating Flow into an existing project + +- **Eradicate Runtime Errors in React with Flow** + http://technologyadvice.github.io/eradicate-runtime-errors-in-react-with-flow/ + An introduction to Flow's benefits in a project, and how to use it + +- **Flow Guide: The Definitive Guide for using Flow** + https://github.com/ryyppy/flow-guide + Instructions on setting up Flow, a style guide, and links to further info - **Runtime Introspection of Flow Types** https://medium.com/@joe_stant/runtime-introspection-of-flow-types-ddb7e5b042a5 diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 997fda7..29483a0 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -80,6 +80,10 @@ https://github.com/vector-im/vector-web/issues/2498 Web perf expert Nolan Lawson analyzes why the JS bundle for the Vector.im web app is too big, and ways it could potentially be improved using code splitting and app structure changes. A good example of ways to improve bundle sizes. +- **Webpack Performance: The Comprehensive Guide** + https://github.com/lcxfs1991/blog/issues/15 + An in-depth look at the parts that go into a Webpack build, and how each piece can be optimized for a faster build. + #### Hot Module Replacement - **Webpack and Hot Module Replacement** @@ -120,6 +124,10 @@ - **Adding HMR to Create-React-App** http://chrisshepherd.me/posts/adding-hot-module-reloading-to-create-react-app A quick example of the basic pattern for using plain HMR with Webpack + +- **Webpack Hot Reloading and React** + https://ctheu.com/2015/12/29/webpack-hot-reloading-and-react-how/ + An explanation of how Hot Reloading works, and how the various pieces fit together. #### Other Tips and Examples diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 83044b6..e7d469c 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -101,6 +101,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack Tutorials for Beginners** https://www.youtube.com/playlist?list=PL4cUxeGkcC9iTQ3J5oa6orDIMQKKxl8dC A video tutorial series explaining Webpack config and loaders + +- **Getting Started with Webpack 2** + https://medium.com/written-with-envy/getting-started-with-webpack-2-ed2b86c68783 + An introduction to Webpack's concepts and configuration, and how to use the latest version to handle various build goals. #### Configuration Terms and Concepts