diff --git a/functional-programming.md b/functional-programming.md index 8c5708b..36facfc 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -153,4 +153,5 @@ - **Classes, Complexity, and Functional Programming** https://medium.com/@kentcdodds/classes-complexity-and-functional-programming-a8dd86903747 - Kent C Dodds looks at pros and cons of using classes, issues with the `this` keyword in Javascript, and some ways to avoid using classes \ No newline at end of file + Kent C Dodds looks at pros and cons of using classes, issues with the `this` keyword in Javascript, and some ways to avoid using classes + diff --git a/immutable-data.md b/immutable-data.md index 2a8dc3f..e22b946 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -138,4 +138,9 @@ - **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. \ No newline at end of file + 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. + +- **Lenses with Immutable.js** + https://medium.com/@drboolean/lenses-with-immutable-js-9bda85674780 + Discusses how "lenses" can be used to dig into data structures and update them in an immutable way, and how to define lenses that work on Immutable.js objects. + diff --git a/mobx-tutorials.md b/mobx-tutorials.md index c32d538..a008217 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -90,7 +90,7 @@ A great video to understand the differences between MobX and Redux. An in-depth comparison of the ideas, concepts, approaches, and use cases for the two state management libraries - **MobX vs Redux: Comparing the Opposing Paradigms** - https://www.youtube.com/watch?v=76FRrbY18Bs&list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0&index=8 + https://youtu.be/76FRrbY18Bs A fantastic presentation by Preethi Kasireddy at ReactConf 2017, comparing the philosophies, concepts, tradeoffs, and use cases for Redux and MobX. - **Redux vs MobX by example** diff --git a/react-component-patterns.md b/react-component-patterns.md index 0add817..2b28fdd 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -410,6 +410,10 @@ 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. +- **React components as jQuery plugins** + https://swizec.com/blog/using-react-in-the-real-world/swizec/6710 + Demonstrates how to wrap up a React component as a jQuery plugin for integration with non-React apps. + #### Modal Dialogs diff --git a/react-forms.md b/react-forms.md index 608c9c7..18ad1bc 100644 --- a/react-forms.md +++ b/react-forms.md @@ -126,6 +126,10 @@ http://presentations.survivejs.com/forms-in-react/#/ Slides for a workshop on approaches for managing forms in React. Includes summaries of the various major approaches for managing forms, and links to several useful form-related libraries. +- **Some Thoughts on Forms in React** + https://medium.com/javascript-inside/some-thoughts-on-forms-in-react-9ca2d9078c20 + An extended look at several form-related concepts, including describing them as "view-driven" vs "model-driven", extracting form management into a Higher-Order Component, adding validation, and more. + #### Form Validation @@ -158,6 +162,10 @@ https://medium.com/@l_e/really-dumb-form-validations-739611d2ffcd Some quick examples of simple but effective form validation handling inside of React components. +- **Why not field-level validations?** + https://goshakkk.name/y-no-field-level-validations/ + Thoughts on why it's better to handle validation at the "whole form" level, rather than strictly per-field. + #### Other diff --git a/react-implementation.md b/react-implementation.md index a2a2b29..0b2ed0d 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -169,6 +169,18 @@ #### React Fiber +- **ReactConf 2017: A Cartoon Intro to Fiber** + https://youtu.be/ZCuYPiUIONs + A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations. + +- **Roadmap for React - Fiber and Beyond** + https://www.youtube.com/watch?v=QW5TE4vrklU + A keynote by Andrew Clark, describing the ideas behind React Fiber and the benefits it will give. + +- **React Fiber: A Closer Look at the New Engine of React** + https://www.infoq.com/news/2017/05/react-fiber-closer-look + A useful summary of the goals and implementation approach for the new React Fiber algorithm + - **React Fiber Architecture** https://github.com/acdlite/react-fiber-architecture A description of React's new core algorithm, React Fiber @@ -185,10 +197,5 @@ https://www.youtube.com/watch?v=crM1iRVGpGQ Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase. -- **ReactConf 2017: A Cartoon Intro to Fiber** - https://youtu.be/ZCuYPiUIONs - A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations. + -- **React Fiber: A Closer Look at the New Engine of React** - https://www.infoq.com/news/2017/05/react-fiber-closer-look - A useful summary of the goals and implementation approach for the new React Fiber algorithm \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 98651f9..99c1df8 100644 --- a/react-performance.md +++ b/react-performance.md @@ -294,4 +294,8 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - **Surprising polymorphism in React applications** https://medium.com/@bmeurer/surprising-polymorphism-in-react-applications-63015b50abc - A Chrome V8 engine developer digs into the nitty-gritty details of how common Redux reducer patterns result in less-optimized behavior from the JS engine running the code. \ No newline at end of file + A Chrome V8 engine developer digs into the nitty-gritty details of how common Redux reducer patterns result in less-optimized behavior from the JS engine running the code. + +- **Redux isn't slow, you're just doing it wrong - an optimization guide for React-Redux** + http://reactrocket.com/post/react-redux-optimization/ + An excellent summary of the basic steps for good performance with React-Redux \ No newline at end of file diff --git a/react-redux-testing.md b/react-redux-testing.md index e858f4d..14691ac 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -210,6 +210,10 @@ - **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. + +- **Testing Redux: Async Action Creators** + http://joeellis.la/testing-redux-actions/ + Describes approaches for testing async action creators, particularly thunks that make AJAX calls. diff --git a/react-routing.md b/react-routing.md index 712fc87..ee6a5d9 100644 --- a/react-routing.md +++ b/react-routing.md @@ -62,6 +62,10 @@ 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. +- **Routes as State in React** + https://blog.boon.gl/2017/06/29/routes-as-state-in-react.html + Some thoughts on why tracking route data as state might make sense, and some examples of how to approach that. + #### Authentication diff --git a/react-server-rendering.md b/react-server-rendering.md index 0862ab0..54fed81 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -8,6 +8,10 @@ http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/ An example of setting up server rendering using React-Router and Express +- **ReactJS: Server side rendering with router v4 and redux** + http://crypt.codemancers.com/posts/2017-06-03-reactjs-server-side-rendering-with-router-v4-and-redux/ + A follow-up to the previous post that shows how to implement SSR using React-Router v4 instead of v3, and includes use of Redux as well. + - **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 @@ -43,4 +47,7 @@ - **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. \ No newline at end of file + A good tutorial that walks through the basic setup needed to start rendering React components into HTML in an Express server. + + + \ No newline at end of file diff --git a/redux-architecture.md b/redux-architecture.md index 70c168b..0a940a3 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -252,6 +252,9 @@ - **React+Redux: Tips and Best Practices for Clean, Reliable, & Maintainable Code** https://speakerdeck.com/goopscoop/react-plus-redux-tips-and-best-practices-for-clean-reliable-and-scalable-code An excellent slideshow with a wide variety of tips and suggestions, including keeping action creators simple and data manipulation in reducers, abstracting away API calls, avoiding spreading props, and more. +- **Why not to store objects in Redux** + https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de + Some quick thoughts on why you should keep plain JS objects in your store, instead of class instances. #### Encapsulation and Reusability diff --git a/redux-side-effects.md b/redux-side-effects.md index 9ab4ad4..4f9ab8d 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -107,6 +107,10 @@ https://shift.infinite.red/redux-observable-epics-vs-redux-sagas-8e53610c0eda A humorous look at how redux-observable and redux-saga compare. It recaps their backgrounds and basic ideas, then shows comparison implementations for some small tasks and rates the approaches. +- **Async operations in React Redux applications** + https://codebrahma.com/structuring-async-operations-react-redux-applications/ + An introduction to the complexities of handling async logic in JS, and comparisons of how the same series of API calls could be handled using JS Promises, thunks, sagas, and observables. + #### Sagas diff --git a/redux-techniques.md b/redux-techniques.md index 3e9906b..063796f 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -96,6 +96,8 @@ Some short but helpful examples of how currying functions can be used to reuse reducer logic for similar use cases. + + #### Selectors and Normalization **Related topics**: @@ -180,6 +182,10 @@ - **Use Selectors in Redux for Great Good** https://medium.com/@TomasEhrlich/use-selectors-in-redux-for-great-good-59286ce2e2a1 A short article explaining the importance of selectors, with a few examples of how they benefit applications and how to use them. + +- **Reselect with Redux and React** + https://www.youtube.com/watch?v=6Xwo5mVxDqI + A screencast that introduces the Reselect library and discusses why it's useful in Redux apps #### UI and Widget Implementations @@ -233,6 +239,10 @@ https://medium.com/@tangbenze/introduce-redux-local-state-to-your-react-app-9f96f18d4f35 Demonstrates setup and use of a addon library to manage scoped actions, reducers, and connections for isolated component state. +- **Using react-redux-set-local** + https://www.andrewfong.com/blog/2017/07/03/react-redux-set-local/ + Discussion of the rationale and implementation of a library for connecting isolated portions of a Redux store state to a component while maintaining separation between presentation and state management. + #### Redux and Forms @@ -343,6 +353,15 @@ https://news.ycombinator.com/item?id=14482215 Describes several concerns with increasing verbosity and complexity in Redux apps, and how the author's library can help simplify those. +- **Manage analytics actions in React** + https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de + Discusses using Redux middleware and redux-observable to manage analytics behavior in isolation from the rest of the application. + +- **VR Redux / ReactVR Redux Revisited** + http://jimpurbrick.com/2017/01/04/vr-redux/ + http://jimpurbrick.com/2017/07/04/react-vr-redux-revisited/ + A pair of posts that discuss using ReactVR and Redux to implement a networked VR application, including using a Redux middleware to synchronize actions between the clients, and approaches to managing consistency and optimistic updates. + #### Network Management diff --git a/static-typing.md b/static-typing.md index 5304b95..56c534b 100644 --- a/static-typing.md +++ b/static-typing.md @@ -65,6 +65,10 @@ - **Hello World with Webpack, TypeScript, and React** https://www.bennadel.com/blog/3293-hello-world-with-webpack-and-typescript-2-3-4-in-react-15-6-1.htm An example of setting up a project that uses Webpack, React, an TypeScript together. + +- **Yet Another TypeScript Book** + https://pagalvin.gitbooks.io/yet-another-typescript-book/content/ + A casual introduction to the main features of TypeScript. #### Flow Tutorials diff --git a/using-react-with-es6.md b/using-react-with-es6.md index 57100c9..8ee6241 100644 --- a/using-react-with-es6.md +++ b/using-react-with-es6.md @@ -66,6 +66,10 @@ https://www.fullstackreact.com/articles/use-property-initializers-for-cleaner-react-components/ A look at how the "Class Properties"/"Property Initializer" syntax allows much cleaner definition of method binding, and how to configure Babel to use that syntax +- **Javascript, React, This, and Programming Fundamentals** + https://www.andrewfong.com/blog/2017/05/13/javascript-react-this-and-programming-fundamentals/ A helpful explanation of how `this` works in Javascript, how method binding works, and how that relates to React classes and class methods. + + #### Method Binding Utilities