diff --git a/es6-features.md b/es6-features.md index 2785fd8..090fc03 100644 --- a/es6-features.md +++ b/es6-features.md @@ -67,6 +67,10 @@ http://exploringjs.com/es6/index.html A full online book covering every aspect of ES6 in fine detail +- **Understanding ES6** + https://leanpub.com/understandinges6/read + An online book that covers all the changes and features involved in ES6 + - **Why Do ES6 Classes Exist, and Why Now?** http://appendto.com/2016/06/why-do-es6-classes-exist-and-why-now/ Digs into some of the intricacies of ES6 classes, and some of the pros and cons around using them diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 7958764..d2860c5 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -62,6 +62,10 @@ http://danielearwicker.github.io/What_s_good_about_Redux.html Some thoughts on Redux's core "what-if?" questions, and some of the potential implications of those decisions. +- **Use Redux before it's too late** + https://medium.com/@ian.mundy/use-redux-before-its-too-late-a73d837a06aa + A response to the "you may not need Redux" discussions, suggesting that it's worth using Redux because it changes how you think about your data. + #### Comment Threads and Discussions diff --git a/react-architecture.md b/react-architecture.md index 7358e23..35b2b71 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -91,6 +91,10 @@ https://frontendne.co.uk/talks/from-backbone-to-react-how-to-write-great-code A talk that looks at a number of key ideas that React helps you understand, and uses some comparisons between Backbone and React to illustrate them. +- **Thinking Statefully** + https://daveceddia.com/thinking-statefully/ + Some great examples of how to think in declarative/stateful terms (such as passing an `isOpen` prop to a modal instead of calling `open()` ). + #### React Best Practices @@ -169,4 +173,5 @@ - **11 lessons learned as a React contractor** https://medium.com/@jolyon_russ/11-lessons-learned-as-a-react-contractor-f515cd0491cf - A number of useful tips, including using multiple small components instead of one customizable one, migrating build processes, keeping things simple, and more. \ No newline at end of file + https://news.ycombinator.com/item?id=13332138 + A number of useful tips, including using multiple small components instead of one customizable one, migrating build processes, keeping things simple, and more. Extended discussion in the HN comments. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index b53ffeb..6315245 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -210,6 +210,10 @@ https://benmccormick.org/2016/12/14/what-are-higher-order-components/ A short, simple explanation of what an HOC is, and how they can be used +- **Higher Order What?** + https://dev.to/kayis/higher-order-what + A quick introduction to the concept of Higher Order Functions and Components + #### Wrapping Non-React Code diff --git a/react-forms.md b/react-forms.md index edcd304..483e387 100644 --- a/react-forms.md +++ b/react-forms.md @@ -109,6 +109,10 @@ http://goshakkk.name/form-recipe-disable-submit-button-react/ Some simple examples of validating data from controlled inputs +- **Instant form field validation with React's controlled inputs** + https://goshakkk.name/instant-form-fields-validation-react/ + Examples of how to perform validation during rendering, and immediately show which inputs are invalid + #### Other diff --git a/react-implementation.md b/react-implementation.md index 42500e5..663c069 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -1,6 +1,13 @@ ### React Implementation and Concepts +#### Resources + +- **React Team core Notes** + https://github.com/reactjs/core-notes + Notes from the React team's weekly-ish meetings + + #### Core Concepts - **React Components, Elements, and Instances** diff --git a/react-state-management.md b/react-state-management.md index 28fc806..c15aebd 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -38,6 +38,10 @@ - **ReactJS: Props vs State** http://lucybain.com/blog/2016/react-state-vs-pros/ Explains that "props" are data passed in to a component, while "state" is data managed inside a component. + +- **React state management patterns** + http://vijayt.com/post/react-state-management-patterns/ + Useful summaries of some common patterns for managing state (encapsulated vs uni-directional flow, single store or multiple stores, shared state between components). #### Using `setState` @@ -60,4 +64,8 @@ - **A case for setState** https://medium.com/@zackargyle/a-case-for-setstate-1f1c47cd3f73 - An article arguing that React component state still has a number of uses. \ No newline at end of file + An article arguing that React component state still has a number of uses. + +- **Using a function in `setState` instead of an object** + https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1 + An introduction to a lesser-known feature of `setState`: the ability to pass a callback function to update the state. Useful for ensuring proper updates. \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index a74cc65..ccc6a70 100644 --- a/react-styling.md +++ b/react-styling.md @@ -79,3 +79,7 @@ - **The magic behind styled-components** http://mxstbr.blog/2016/11/styled-components-magic-explained/ A look at how the styled-components library uses the new ES6 "tagged template literals" feature to interpolate arguments and build up CSS + +- **Orthogonality and CSS in JS** + https://benmccormick.org/2017/01/03/orthogonality-and-css-in-js/ + Some thoughts on the "separation of concerns" concept, and how that relates to defining modular code and components (including styling). diff --git a/react-tutorials.md b/react-tutorials.md index b20dfb2..71df5e8 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -80,10 +80,6 @@ https://github.com/jesstelford/react-workshop A self-directed set of workshop lessons that teach React basics. -- **React Cheat Sheet** - http://reactcheatsheet.com/ - A filterable list of React's APIs and concepts - - **How React Do?** http://blog.jfo.click/how-react-do/ A tutorial written by someone as they learned React, stepping up through a series of React concepts. @@ -112,6 +108,31 @@ https://www.kirupa.com/react/events_in_react.htm An introduction to React's event handling system, including useful tips and some gotchas + + +#### React Concept Overviews + +- **React's Five Fingers of Death: Master these concepts to master React** + https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3 + A humorously-titled quick introduction to some of React's basic concepts + +- **13 Things you need to know about React** + http://aimforsimplicity.com/post/13-things-you-need-to-know-about-react/ + A list of useful key concepts to understand if you want to "speak React" + +- **React Interview Questions** + https://tylermcginnis.com/react-interview-questions/ + Assorted questions and answers that come up while learning React + +- **React Cheat Sheet** + http://reactcheatsheet.com/ + A filterable list of React's APIs and concepts + +- **React Cheat Sheet** + https://ihatetomatoes.net/react-cheat-sheet-pdf/ + A downloadable PDF with snippets demonstrating uses of React's syntax and APIs + + #### Project-Based Tutorials diff --git a/redux-side-effects.md b/redux-side-effects.md index fdda119..4df0cbd 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -34,19 +34,39 @@ - **What the heck is a "thunk"?** https://daveceddia.com/what-is-a-thunk/ A quick explanation for what the word "thunk" means in general, and for Redux specifically.. - + + +#### Side Effect Approach Comparisons + +- **Redux side effects and you** + https://medium.com/javascript-and-opinions/redux-side-effects-and-you-66f2e0842fc3 + Thoughts on the proliferation of new side effect libs for Redux, and some comparisons of the commonly used approaches. + - **"Controversial opinion: redux-thunk is too powerful"** https://twitter.com/intelligibabble/status/800103510624727040 https://twitter.com/dan_abramov/status/800310164792414208 Some discussion on the pros and cons of redux-thunk's flexibility and usage, as well as possible issues with multiple dispatches in a row. -- **A simplified approach to calling APIs with Redux** - http://www.sohamkamani.com/blog/2016/06/05/redux-apis/ - A well-written example of creating a "data service" middleware that handles API requests, as well as examples of handling some request status state. +- **Idiomatic Redux: Thoughts on Thunks, Sagas, Abstractions, and Reusability** + http://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/ + A response to several "thunks are bad" concerns, arguing that thunks (and sagas) are still a valid approach for managing complex sync logic and async side effects. + +- **What are the benefits, pros, and cons of redux-thunk over redux-saga?** + https://hashnode.com/post/what-are-the-benefits-of-redux-thunk-over-redux-saga-what-pros-and-cons-do-they-have-over-each-other-ciqvyydh7065w3g53ffalif61 + An excellent discussion of where side effects belong in a Redux app, and how thunks and sagas can be used to handle async logic. + +- **Keeping Redux in check** + https://medium.com/@georgeleeme/keeping-redux-in-check-78534504b215 + Some tips on use of the Flux Standard Actions convention, and comparison of using redux-thunk vs redux-promise. + +- **"Argument: We should switch from thunks to sagas"** + http://en.arguman.org/we-should-switch-from-redux-thunk-to-redux-saga + An debate flowchart with arguments for and against using thunks and sagas - **The Evolution of Redux Action Creators** https://medium.com/@northerneyes/the-evolution-of-redux-action-creators-2973018bf2ae A comparison of ways to make action creation testable, looking at redux-thunk, a custom thunk-like middleware, and redux-saga + #### Sagas @@ -106,6 +126,10 @@ https://devblog.xero.com/a-saga-that-led-xero-to-redux-aa1361b9a800 Examples of how Xero's async logic for their dashboard evolved over team, from nested callbacks to promises to Redux with sagas +- **The Three 'R's: Refactoring, React, and Redux for robust async JS** + https://devblog.xero.com/the-three-rs-refactoring-react-and-redux-for-robust-async-js-252648a8632f + More information from Xero on how they have used sagas for async workflows, including splitting code up into smaller sagas that can be composed. + #### Other Side Effect Approaches @@ -115,4 +139,12 @@ - **Better async Redux** https://blog.scottnonnenberg.com/better-async-redux-i18n-and-node-js-versions/ - Comparisons and examples of using Redux-Loop for declarative side effects \ No newline at end of file + Comparisons and examples of using Redux-Loop for declarative side effects + +- **Action Streams and Redux** + https://medium.com/@markusctz/action-streams-and-redux-77f8ac99c2e9 + Examples of how Redux-Observable can simplify complex async logic + +- **A simplified approach to calling APIs with Redux** + http://www.sohamkamani.com/blog/2016/06/05/redux-apis/ + A well-written example of creating a "data service" middleware that handles API requests, as well as examples of handling some request status state. \ No newline at end of file diff --git a/redux-without-react.md b/redux-without-react.md index 1fae301..0490e0a 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -26,4 +26,9 @@ - **The Easiest Way to Start Using Redux Today** https://viktorfonic.com/start-using-redux/ - A useful tutorial that introduces Redux and demonstrates using it with a jQuery-based UI \ No newline at end of file + A useful tutorial that introduces Redux and demonstrates using it with a jQuery-based UI + +- **Building a Redux Application with Angular 2** + https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-1 + https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-2 + A tutorial that teaches how to use Redux and Angular 2 together, by building a small finance app \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 05097a1..ee8b29e 100644 --- a/static-typing.md +++ b/static-typing.md @@ -119,6 +119,10 @@ - **Typed Redux** https://blog.callstack.io/typed-redux-2aa8bff926ff Examples of how to use Flow to add typing to Redux apps + +- **Tagged Unions, React, and Redux** + https://hackernoon.com/tagged-unions-react-and-redux-55e262e4d0ea + Examples of using Flow union types to define component props #### Advancing Typing Techniques @@ -135,6 +139,10 @@ https://ouicar.github.io/2016/08/08/exhaustive-switch.html A trick to help catch missing case errors in switch statements. +- **Flow Cookbook** + http://sitr.us/2016/12/20/flow-cookbook.html + Assorted useful techniques for using Flow types + #### Tool Comparisons diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 80626e4..f94d97b 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -222,6 +222,10 @@ https://github.com/rstacruz/webpack-tricks A useful list of tips for improving Webpack usage +- **Useful Webpack DefinePlugin Usage** + http://tomasalabes.me/blog/_site/web-development/2017/01/03/Useful-Webpack-Define-Plugin-Usages.html + Several useful tips and use cases for using the Webpack DefinePlugin, including logging, feature flags, and handling multiple environments + #### Webpack Tools diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 200f172..9618719 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -40,6 +40,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Seamless client side Javascript with Webpack** https://opbeat.com/community/posts/seamless-client-side-javascript-with-webpack-by-jack-franklin/ A talk by Jack Franklin, talking about what problems Webpack solves + +- **4 Key Concepts of Webpack** + https://www.netlify.com/blog/2017/01/03/4-key-concepts-of-webpack/ + A recorded presentation by Webpack core team member Sean Larkin, explaining Webpack's core concepts and future goals. #### Basic Tutorials