diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md index 65a02b5..c5207d1 100644 --- a/boilerplates-and-starter-kits.md +++ b/boilerplates-and-starter-kits.md @@ -136,4 +136,8 @@ - **Setting up Webpack, Babel, and React from scratch in 2017** https://stanko.github.io/webpack-babel-react-revisited/ - A step-by-step tutorial that demonstrates each piece of the process needed to set up a build system from scratch. \ No newline at end of file + A step-by-step tutorial that demonstrates each piece of the process needed to set up a build system from scratch. + +- **How to set up React, Webpack 3, and Babel, in 2017** + https://www.valentinog.com/blog/react-webpack-babel/ + A clear explanation of how to create a basic Webpack+Babel setup for a React app, with descriptions of why each step is necessary. \ No newline at end of file diff --git a/es6-features.md b/es6-features.md index 2b75e31..d53d241 100644 --- a/es6-features.md +++ b/es6-features.md @@ -241,6 +241,10 @@ https://dev.to/maxart2501/gotchas-about-asyncawait-and-promises-9di Several valuable tips about how to safely use async/await and Promise behavior, especially around error-handling. +- **await vs return vs return await** + https://jakearchibald.com/2017/await-vs-return-vs-return-await/ + An informative look at the differences in behavior between various uses of the async/await syntax in relation to promises + #### Techniques diff --git a/javascript-resources.md b/javascript-resources.md index 8057775..42ff68f 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -56,6 +56,10 @@ While this list is primarily focused on learning React and Redux, and generally 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 +- **Front End Interview Preparation Guide** + https://github.com/Jobeir/front-end-interview-preparation-guide + A list of useful books, courses, and resources for learning JS, and links to interview questions and quizzes that would be beneficial in helping test out knowledge. + #### Tutorials, Books, and Courses diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 5256132..1cebac1 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -283,6 +283,12 @@ similar structures in ClojureScript. https://twitter.com/dan_abramov/status/930380316463726593 Some great points from Dan Abramov about React focusing on code predictability, maintainability, and data flow, rather than terseness. +- **"Ways to compose components and functionality without altering components?"** + https://twitter.com/andrestaltz/status/939123607426486274 + https://twitter.com/andrestaltz/status/939257877600104448 + https://gist.github.com/staltz/08bf613199092eeb41ac8137d51eb5e6 + A couple very long Twitter threads with discussion from Andre Staltz (creator of Cycle), Dan Abramov, and Andrew Clark, looking at possible ways to handle composition of functionality for a "current humanized time" behavior. Lots of interesting comments in the Twitter thread, and the example gist. Also some useful comments from Andre on how someone from outside the React community might approach trying to solve problems using React. + #### React's PATENTS License diff --git a/react-component-composition.md b/react-component-composition.md index ae401f7..86bc833 100644 --- a/react-component-composition.md +++ b/react-component-composition.md @@ -188,6 +188,10 @@ https://blog.bigbinary.com/2017/09/12/using-recompose-to-build-higher-order-components.html Examples of refactoring components using the Recompose library, including use of `branch` and `compose`. +- **Curry away in React** + https://hackernoon.com/curry-away-in-react-7c4ed110c65a + Examples of using currying to create reusable callback functions that can be passed to child components. + #### Comparing Composition Approaches diff --git a/react-component-patterns.md b/react-component-patterns.md index 6e3a925..27968ee 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -175,6 +175,10 @@ https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1 A helpful description of the major component lifecycle methods, including descriptions of common use cases for each one, and whether you can call `setState` inside. +- **Revisiting use of React's Component Lifecycles in Anticipation of Async Rendering** + https://medium.com/@awebofbrown/how-to-safely-use-reacts-life-cycles-with-fiber-s-async-rendering-fd4469ebbd8f + An informative look at how async rendering in React 16+ might impact current use of lifecycle methods for behavior. + #### Component Communication @@ -438,6 +442,21 @@ - **Using a React 16 Portal to do something cool** https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202 Demonstrates using React 16's `createPortal` API to control a separate browser window from the original React component tree. + + +#### Alternate Component Creation Approaches + +- **React without `this`** + https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160 + Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword. Not the common approach, but an interesting idea. + +- **my-react** + https://github.com/mjackson/my-react + A small library from Michael Jackson (co-creator of React Router) that allows defining components using a Python-style approach where functions receive the component instance as the first argument. + +- **lively** + https://github.com/jlongster/lively + An experimental library from James Long that tries to improve React's component API to avoid using classes #### Other Component Patterns @@ -479,10 +498,6 @@ https://twitter.com/jlongster/status/921016877408837632 James Long describes three things about React that bother him: inability to easily have parents get refs to nested elements, PureComponents comparing both props and state, and a general tendency to do lots of processing in `componentWillReceiveProps`. Some good discussion in both the gist comments and Twitter. -- **React without `this`** - https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160 - Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword - - **You don't need to know "Dependency Injection"** https://hackernoon.com/you-dont-need-to-know-dependency-injection-2e9d2ba1978a Looks at the concept of dependency injection, and three ways that that relates to React components and props. diff --git a/react-forms.md b/react-forms.md index 9efc297..2e15a0c 100644 --- a/react-forms.md +++ b/react-forms.md @@ -138,6 +138,10 @@ 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. +- **How to Work with Forms, Inputs, and Events in React** + https://medium.com/capital-one-developers/how-to-work-with-forms-inputs-and-events-in-react-c337171b923b + An excerpt from the book "React Quickly", which gives an overview of the recommended way to use forms in a React app. + #### Form Validation diff --git a/react-implementation.md b/react-implementation.md index c5671a8..a40af1a 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -172,6 +172,9 @@ https://stackshare.io/posts/the-react-story An extensive podcast interview with Pete Hunt, former React team member, recounting his early work at Facebook, how he began using React at Instagram, how that led to the growth of React inside Facebook, and how the decision to open-source React happened. Page includes a complete transcript of the discussion. +- **How exactly does React handle events?** + https://levelup.gitconnected.com/how-exactly-does-react-handles-events-71e8b5e359f2 + A detailed look at how React's internal event handling works, including normalization of events, SyntheticEvent objects, and more. #### React Fiber diff --git a/react-native.md b/react-native.md index feacc1e..7ac3a39 100644 --- a/react-native.md +++ b/react-native.md @@ -107,4 +107,8 @@ - **React Native app performance: Major issues and insights on improving your app's performance** https://www.simform.com/react-native-app-performance/ - A detailed look at common causes of perf issues in RN, such as memory leaks, large app size, and slow rendering, and discusses various solutions. \ No newline at end of file + A detailed look at common causes of perf issues in RN, such as memory leaks, large app size, and slow rendering, and discusses various solutions. + +- **React Native at Grofers: Using React Native components inside native views** + https://lambda.grofers.com/starting-with-react-native-at-grofers-a-guide-to-using-react-native-components-inside-native-bbdd6a3470d4 + Looks at the pros and cons of using RN components in native views, including turnaround shipping speed, approach for bridging views, and performance. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 1b28396..4d73d1a 100644 --- a/react-performance.md +++ b/react-performance.md @@ -182,6 +182,18 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6 Discusses React perf issues like bad `sCU` implementations, changing the DOM too fast, and event/callback usage, with possible solutions. +- **React Performance Fixes on Airbnb Listing Pages** + https://medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4 + Excellent practical discussion of actual perf issues that were showing up in Airbnb pages and how they resolved them. Covers performance recordings, handling initial renders, scrolling, only using component state for values that affect re-rendering, and more. + +- **Debugging React Performance with React 16 and Chrome DevTools** + https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad + Shows how to use the Chrome DevTools to profile React code using performance recordings, including analysis of recordings to track down perf issues. + +- **Demystifying Memory Usage using ES6 React Classes** + https://medium.com/@donavon/demystifying-memory-usage-using-es6-react-classes-d9d904bc4557 + A quick look at the memory usage differences between calling `Function.bind` and using the Class Properties syntax, and the readability tradeoffs involved. + #### Code Splitting and Progressive Apps @@ -236,6 +248,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) https://codeburst.io/firebase-react-optimizing-for-the-real-world-4d9edbbd54c5 Describes shrinking a React + Firebase app bundle from 1.7MB to 230KB by switching to smaller alternative packages and analyzing bundle size. +- **A Pinterest Progressive Web App Performance Case Study** + https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154 + A deep dive into how Pinterest optimized their new PWA app, including route chunking, use of babel-preset-env, service workers, and use of normalized Redux state. + #### Immutable Data @@ -357,4 +373,8 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - **Optimizing Redux Components** https://medium.com/riipen-engineering/optimizing-redux-components-cbaad062abc7 - Discusses Redux-specific perf optimizations, such as avoiding unnecessary work in `mapState` functions, memoization, and advanced comparison function options for `connect`. \ No newline at end of file + Discusses Redux-specific perf optimizations, such as avoiding unnecessary work in `mapState` functions, memoization, and advanced comparison function options for `connect`. + +- **React + Redux Performance and the Benchmarks to Prove It** + https://tech.smartling.com/react-redux-performance-and-the-benchmarks-to-prove-it-79b0bc9f25a4 + Describes an approach for benchmarking a React+Redux app to understand how much impact performance optimizations actually give. \ No newline at end of file diff --git a/react-routing.md b/react-routing.md index 7230fc4..54aa95b 100644 --- a/react-routing.md +++ b/react-routing.md @@ -47,6 +47,10 @@ https://css-tricks.com/react-router-4/ A deep look at patterns and strategies for using React-Router v4 successfully. +- **React Router DOM: set-up, essential components, & parameterized routes** + https://blog.logrocket.com/react-router-dom-set-up-essential-components-parameterized-routes-505dc93642f1 + An introduction to the concept of a router, setting up React-Router, essential parts of the library, and how to build routes that have parameters. + - **Advanced React Router concepts: recursive path, code splitting, animated transitions, and more** https://blog.logrocket.com/advanced-react-router-concepts-code-splitting-animated-transitions-scroll-restoration-recursive-17096c0cf9db A tutorial that demonstrates how to implement a variety of useful features using React-Router v4. @@ -144,4 +148,8 @@ - **Protected Routes and Authentication with React Router v4** https://tylermcginnis.com/react-router-protected-routes-authentication/ - A great tutorial that shows how to create routes that only authenticated users can access. \ No newline at end of file + A great tutorial that shows how to create routes that only authenticated users can access. + +- **Securing a React Web App with Authorization Rules** + https://medium.appbase.io/securing-a-react-web-app-with-authorization-rules-2e43bf5592ca + A tutorial that shows how to add authorization and authentication to a Todo app \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index 3821286..959dfc5 100644 --- a/react-styling.md +++ b/react-styling.md @@ -44,6 +44,10 @@ https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 Quick examples of plain CSS, CSS modules, inline styles, and the styled-components library. +- **The best "styling in React" tutorial you've ever seen** + https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945 + A comparison of how to style an application using inline styles, the styled-components library, and CSS modules. Has some good explanations of how each approach works. + #### Components and Styling @@ -90,6 +94,10 @@ https://medium.com/geckoboard-under-the-hood/how-we-made-our-product-more-personalized-with-css-variables-and-react-b29298fde608 A walkthrough of how to build a themeable application using React components that update CSS variables for dynamic styles +- **Styling your React app for beginners** + https://medium.com/@dylan.broadbridge/styling-your-react-app-for-beginners-f6b39779019b + Examples of basic CSS usage in a CRA-based application, including importing CSS files and use of inline styles in components for layout. + #### JS-Based Approaches @@ -180,6 +188,10 @@ http://blog.primehammer.com/2017/09/27/the-performance-of-styled-react-components/ Benchmarks comparing size, build speed, and other aspects of different CSS-in-JS libraries. +- **Structuring our Styled Components** + https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28 + Discusses applying the Block-Element-Modifier styling structure approach to use of the styled-components library, with examples. + #### Techniques and Examples diff --git a/react-techniques.md b/react-techniques.md index fb2bf96..7d75f9f 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -43,6 +43,18 @@ https://medium.com/@stokedbits/adventures-in-creating-a-react-component-library-with-create-react-app-and-typescript-26d1116a7d87 Walks through the process of using the TS+CRA starter kit as a baseline for building and publishing a component library. +- **The Complete Firebase in React Authentication Tutorial** + https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/ + A comprehensive article that covers setting up a React app that uses React Router for handling routes, and Firebase for authentication and user management. + +- **Don't Over React! Rendering Binary Data** + https://www.bignerdranch.com/blog/dont-over-react/ + Useful approaches for handling file blobs in a React app + +- **Global Component Registration** + http://dylanpaulus.com/reactjs/2017/12/08/global-component-registration/ + An example of extending the standard approach for looking up component types at runtime, by allowing the lookup table to be modified. + #### Security diff --git a/react-tutorials.md b/react-tutorials.md index 33340f4..2562ca0 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -148,6 +148,10 @@ http://ivanjurina.com/2017/11/19/introduction-to-react/ Useful notes and info on the basics of React, from someone who just learned React. +- **React Holiday** + https://react.holiday/ + A series of short lessons that teach core React concepts, each with an interactive sandbox example to play with. + #### React Concept Overviews @@ -187,6 +191,10 @@ https://github.com/Pau1fitz/react-interview A large list of questions on React concepts that might pop up in an interview, with answers. +- **A React Christmas** + https://react.christmas/ + A series of short posts that look at specific aspects of using React, including using Create-React-App, testing code, using Fragments, component composition, and much more. + #### Project-Based Tutorials diff --git a/redux-architecture.md b/redux-architecture.md index 84f23ee..71867e4 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -172,7 +172,7 @@ Discussion of how Redux helped Knewton improve their app, including dev middleware to catch accidental mutations, normalization to help with caching, and other tradeoffs. - **4 Things for Efficient Redux** - https://blog.spacelab.team/4-things-for-efficient-redux-17e87b4cd6cb + https://medium.com/@iJaniashvili/4-things-for-efficient-redux-17e87b4cd6cb Suggestions for improved Redux apps based on experience, including using Immutable.js, use of `combineReducers`, listening for actions in multiple reducers, and "aliasing" actions. - **A Year of Development with Redux** @@ -181,7 +181,7 @@ Some quick tips for working with Redux, structuring data, and encapsulation of components - **Avoiding False Cause** - http://sebinsua.com/avoiding-false-cause/ + http://duplo.tech/avoiding-false-cause/ Some high-level general thoughts on cargo-culting, dogma, and best practices, followed by some specific examples of problematic Redux code (unclear reducer state shape, managing "editing" mode data, applying arbitrary value updates) - **Isn't our code just the BEST** @@ -249,7 +249,7 @@ https://tech.iheart.com/video-journey-of-a-thousand-ducks-f0bb1a9b982c Devs from the iHeartRadio web team describe how they have approached refactoring their React app with homegrown state management to use Redux. -- **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 +- **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** @@ -304,6 +304,18 @@ - **How Bitmovin used React/Redux to Develop Its New Dashboard** https://bitmovin.com/bitmovin-used-reactredux-to-develop-new-dashboard/ The Bitmovin team describes their React+Redux architecture, including how they approached organizing Redux actions. + +- **What I've learned from a few large-scale React and Redux projects** + https://medium.com/20spokes-whiteboard/what-ive-learned-from-a-few-large-scale-react-and-redux-projects-d454000da167 + Some short thoughts on best practices from using React and Redux, including ensuring all logic is tested, having descriptive Redux actions that tell a story, and ensuring React components are understandable by using prop types. + +- **Redux Anti-Patterns: State Management** + http://blog.mgechev.com/2017/12/07/redux-anti-patterns-race-conditions-state-management-duplication/ + Some good descriptions of common anti-patterns in Redux apps, with examples and solutions. Looks at state duplication, state ownership, and handling of state updates. + +- **"So much to learn about organizing Redux state by looking at popular apps"** + https://mobile.twitter.com/tharakawj/status/937285802287124480 + A tweet with screenshots of the Redux DevTools, showing the contents of Redux stores from Twitter and Pinterest. #### Encapsulation and Reusability @@ -346,7 +358,7 @@ http://randycoulman.com//blog/2016/09/13/encapsulating-the-redux-state-tree/ http://randycoulman.com/blog/2016/09/20/redux-reducer-selector-asymmetry/ http://randycoulman.com/blog/2016/09/27/modular-reducers-and-selectors/ - http://randycoulman.com/blog/2016/11/29/globalizing-redux-selectors + http://randycoulman.com/blog/2016/11/29/globalizing-redux-selectors A blog series discussing approaches to encapsulating Redux data using selectors and other related approaches - **Redux State Keys - A predictable yet dynamic substate** @@ -396,6 +408,10 @@ - **Namespacing Actions for Redux** https://kickstarter.engineering/namespacing-actions-for-redux-d9b55a88b1b1 Looks at ways to namespace actions so that multiple copies of components and logic can work in an isolated manner, especially in conjunction with the `redux-loop` library. + +- **Selector Pattern: Painless Redux Store Destructuring** + https://hackernoon.com/selector-pattern-painless-redux-store-destructuring-bfc26b72b9ae + Good examples of creating encapsulated selectors that are given just their slice of state as arguments, with a centralized definition of how the state slices map to those selectors. #### Variations on Redux Architectures diff --git a/redux-middleware.md b/redux-middleware.md index caf124e..7a4bce7 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -50,6 +50,10 @@ https://dev.to/imwiss/understanding-redux-middleware-and-writing-custom-ones Describes the concept of middleware in Redux, possible use cases, and gives an example of writing a middleware to handle caching. +- **Build your own Redux middleware** + https://blog.campvanilla.com/redux-middleware-basics-getting-started-17dc31c6435c + A good explanation of how middleware fit into the Redux data flow, how middleware are defined, and how to write a simple logging middleware. + #### Middleware Techniques @@ -84,4 +88,12 @@ - **Practical Advanced Redux Webinar: Redux Middleware** https://www.youtube.com/watch?v=DqWiuvuK_78 - A recorded screenshare livestream that discusses the usefulness of Redux middleware, and demonstrates building middleware for fetching data, logging, and throttling. \ No newline at end of file + A recorded screenshare livestream that discusses the usefulness of Redux middleware, and demonstrates building middleware for fetching data, logging, and throttling. + +- **Redux: Drawing the Lines between Actions and Middleware** + https://michaelwashburnjr.com/redux-actions-middleware/ + Compares examples of behavior between thunks and middleware, and discusses when you might want to implement behavior in a middleware. + +- **Redux Middleware and Enhancers** + https://chariotsolutions.com/blog/post/redux-middleware-and-enhancers-getting-redux-to-log-debug-and-process-async-work/ + Describes some common Redux middleware and their uses, as well as how to set up the Redux DevTools enhancer for debugging. \ No newline at end of file diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index f8f8e79..1f1cc26 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -75,6 +75,11 @@ https://medium.com/@kyleshevlin/state-snapshots-with-redux-209884cca170 Describes a useful technique for saving known state values and using those to reset or restore an earlier state. +- **Code splitting Redux reducers** + https://medium.com/front-end-hacking/code-splitting-redux-reducers-4073db30c72e + Comprehensive instructions on how to properly code-split reducers for dynamic loading at runtime. + + #### Selectors and Normalization @@ -200,4 +205,12 @@ - **Redux: Up your game with selectors** https://medium.com/@emilycoco/redux-up-your-game-with-selectors-9aee3a6928ae - A quick look at the benefits of using selector functions to encapsulate looking up data from the store. \ No newline at end of file + A quick look at the benefits of using selector functions to encapsulate looking up data from the store. + +- **Redux Patterns: Rethinking `byId` and `byHash` Structures** + https://hackernoon.com/redux-patterns-rethinking-byid-and-byhash-structures-854e8a0fa32d + Thoughts on dropping the common list of "all IDs" in a normalized state structure, and just iterating over all items using `Object.keys()` to grab the IDs. + +- **Selectors: Slice your concerns like butter!** + https://bmbarker90.github.io/selectors-presentation/#/ + A slideshow that discusses what selector functions are and why you would want to use them. diff --git a/redux-side-effects.md b/redux-side-effects.md index 9be46a0..4a3aa7c 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -134,6 +134,14 @@ https://bigbitecreative.com/polling-with-redux/ Compares implementations of a polling loop between redux-saga and redux-observable +- **Redux-Saga vs Redux-Observable** + https://hackmd.io/s/H1xLHUQ8e + Some notes comparing sagas and observables, including "mental models", side-by-side comparison implementations of tasks like fetching / sequencing / cancelation, and more. + +- **Redux Sagas, Observables, oh my** + https://spectrum.chat/thread/2e738f7a-b385-4120-aff1-5fca9d1a6f34 + An extensive discussion thread that compares the relative uses cases and merits of redux-saga and redux-observable + #### Sagas @@ -285,22 +293,41 @@ https://objectpartners.com/2017/11/20/taming-redux-with-sagas/ A good overview of Redux-Saga, including info on generator functions, use cases for sagas, using sagas to deal with promises, and testing sagas. - - -#### Other Side Effect Approaches + +#### Observables - **Epic Middleware in Redux** https://medium.com/@kevinsalter/epic-middleware-in-redux-e4385b6ff7c6 Discussion and examples of using Redux-Observable and RxJS to create "epics" which can transform actions. + +- **Action Streams and Redux** + https://medium.com/@markusctz/action-streams-and-redux-77f8ac99c2e9 + Examples of how Redux-Observable can simplify complex async logic + +- **Using redux-observable to handle asynchronous logic in Redux** + https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522 + An extended post that compares a thunk-based implementation of handling a line-drawing example vs an observable-based implementation. + +- **Redux Observable to the rescue** + https://medium.com/@daslusan/redux-observable-to-the-rescue-b27f07406cf2 + A quick comparison of writing some complex AJAX-related logic as a thunk and with redux-observable, and some of the benefits of writing the code using observables. + +- **Using redux-observable for asynchronous actions** + https://medium.com/imersotechblog/using-redux-observable-for-asynchronous-actions-1afb31cbc01c Looks at possible complexities in handling async requests, and how redux-observable can be used to help handle complex async behavior. +- **Reactive Redux State with RxJS** + https://ivanjov.com/reactive-redux-state-with-rxjs/ + Describes the concept of "Reactive PRogramming" and the RxJS library, and shows how to use redux-observable to fetch data, along with examples of testing. + + + + +#### Other Side Effect Approaches + - **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 -- **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. @@ -316,11 +343,15 @@ - **How to make your React app fully functional, fully reactive, and able to handle all those crazy side effects** https://medium.freecodecamp.org/how-to-make-your-react-app-fully-functional-fully-reactive-and-able-to-handle-all-those-crazy-e5da8e7dac10 A lengthy look at Cycle.js and the redux-cycles library, with plenty of diagrams to illustrate how it handles data flow. - -- **Using redux-observable to handle asynchronous logic in Redux** - https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522 - An extended post that compares a thunk-based implementation of handling a line-drawing example vs an observable-based implementation. - -- **Redux Observable to the rescue** - https://medium.com/@daslusan/redux-observable-to-the-rescue-b27f07406cf2 - A quick comparison of writing some complex AJAX-related logic as a thunk and with redux-observable, and some of the benefits of writing the code using observables. \ No newline at end of file + +- **Testing for Race Conditions with Redux** + https://paulgray.net/race-conditions-in-redux/ + Examples of how to write reducer logic to handle multiple async responses that could return out of order. + +- **Building a React/Redux/Elm Bridge** + https://medium.com/javascript-inside/building-a-react-redux-elm-bridge-8f5b875a9b76 + Discusses various way to integrate React, Redux, and Elm together, including a Redux middleware that talks to Elm. + +- **Reacting to ProgressEvents with Redux** + https://medium.com/@andersonmcook/reacting-to-progressevents-with-redux-355ba021d336 + Demonstrates using the Redux-Logic library and RxJS to handle browser ProgressEvents \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index 3f4c300..3e034eb 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -53,8 +53,12 @@ Discusses how the FSA structure expects actions to have an optional `error` field, and how to write code that deals with that. - **Redux in Action: Using the Redux DevTools** - https://www.slideshare.net/ManningBooks/redux-in-action-learn-to-manage-and-consolidate-state Some slides from the authors of the book "Redux in Action", explaining what the Redux DevTools are, how to set them up, and how to use them to view dispatched actions and debug state changes + https://www.slideshare.net/ManningBooks/redux-in-action-learn-to-manage-and-consolidate-state + Some slides from the authors of the book "Redux in Action", explaining what the Redux DevTools are, how to set them up, and how to use them to view dispatched actions and debug state changes +- **A user encounters a JavaScript error. You'll never guess what happens next!** + https://hackernoon.com/a-user-encounters-a-javascript-error-youll-never-guess-what-happens-next-dc1a6f725490 + A walkthrough for how to capture user page interactions and dispatched Redux actions into a "journey" object that can be sent to the server if an error is detected, allowing a developer to play back the user's behavior for debugging. #### Other @@ -191,6 +195,7 @@ - **Stop writing mapStateToProps, start using declarative models** https://medium.com/@kyleramirez/part-1-stop-writing-mapstatetoprops-start-using-declarative-models-ce72716db9fc https://medium.com/@kyleramirez/part-2-stop-writing-mapstatetoprops-start-using-declarative-models-403734a5f9ee + https://medium.com/@kyleramirez/part-3-stop-writing-mapstatetoprops-start-using-declarative-models-3eb752d811b7 Discusses a library called ReactiveRecord, which encapsulates the process of defining client-side models for REST APIs, fetching data, and reading it from the store. - **"Comments on 'reducing boilerplate'"** @@ -201,6 +206,11 @@ https://medium.com/@ianduvall/how-to-delete-hundreds-or-thousands-of-lines-of-reduxjs-code-4736b34f7345 Short examples of reusable action creator and reducer logic for handling "loading" state for multiple features in an app. +- **Keducer - Automate writing Redux reducers with 5 lines of Javascript** + https://hackernoon.com/automate-writing-redux-reducers-with-5-lines-of-javascript-cecb79fb9a35 + https://www.reddit.com/r/javascript/comments/7i4t14/keducer_automate_writing_redux_reducers_with_5/ + Describes a small lib to generate reducers that handle merging in updated state. Some good discussion in both the article comments and Reddit comments about the tradeoffs between having reducers "own" state, vs state being defined by action creators. + #### Network Management diff --git a/redux-tutorials.md b/redux-tutorials.md index 5cfc5b8..35f5cdb 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -175,6 +175,22 @@ https://dev.to/aurelkurtula/a-beginners-introduction-to-working-with-redux-in-react-13k A pair of tutorials that explain the basics of working with a Redux store and how to use the React-Redux library. +- **Immutable Updates in React and Redux** + https://daveceddia.com/immutable-updates-react-redux/ + Good examples of how to properly update nested state immutably + +- **The most common Redux mistake and how to avoid it** + http://blog.jakoblind.no/most-common-redux-mistake/ + Quick tips on understanding how to update data immutability, and avoid mutations. + +- **Replacing state in Redux reducers: a few approaches** + https://chariotsolutions.com/blog/post/replacing-state-in-redux-reducers-a-few-approaches/ + Examples of different ways to safely update state in reducers. + +- **React application state management with Redux** + https://chariotsolutions.com/blog/post/react-application-state-management-with-redux/ + A tutorial that discusses why a state management library is useful in React apps, introduces Redux usage, and shows how to subscribe to Redux store updates both by hand and using React-Redux. + #### Project-Based Tutorials @@ -303,6 +319,15 @@ - **React + Redux: User Registration and Login Tutorial** http://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example A tutorial that shows how to build a React+Redux app that uses JWT authentication, with the example based on a real-world application. + +- **Build a Bookshop with React & Redux** + https://scotch.io/tutorials/build-a-bookshop-with-react-redux-i-react-redux-flow + https://scotch.io/tutorials/bookshop-with-react-redux-ii-async-requests-with-thunks + Introduces React and Redux concepts by building a small bookshop app. + +- **How to build a Chat Application using React, Redux, Redux-Saga, and Web Sockets** + https://medium.freecodecamp.org/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a + A tutorial that demonstrates building a small real-time client-server chat application. #### Redux Implementation Walkthroughs @@ -374,6 +399,10 @@ - **"Help getting @connect command to work with my Create-React-App project"** https://www.reddit.com/r/reactjs/comments/6l9roo/question_help_getting_connect_command_to_work/djskwqi/ A comment I wrote describing why the Redux team discourages use of `connect` as a decorator. + +- **tiny-redux** + https://github.com/jamischarles/tiny-redux + A small reimplementation of Redux, with comments explaining how the code works. #### Paid Courses and Books diff --git a/redux-without-react.md b/redux-without-react.md index 93293fb..7d795ba 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -65,6 +65,14 @@ https://damienbod.com/2017/09/07/getting-started-with-angular-and-redux/ A tutorial that covers setting up an Angular app that uses NgRx for state management. Recently updated to work with Angular 5. +- **Learn Redux in Angular with NgRx Store** + https://malcoded.com/posts/angular-ngrx-guide + An extensive tutorial that introduces the concept of Redux and its Angular equivalent NgRx/store, and walks through building a small Angular currency conversion app. + +- **Ultimate Angular: NGRX Store + Effects** + https://ultimateangular.com/ngrx-store-effects + A free video course from Angular expert Todd Motto. Covers core Redux concepts, writing a Redux store, the NgRx version of Redux, and how to use the ngrx/effects library for handling side effects. + #### Ember @@ -86,13 +94,26 @@ https://emberway.io/using-ember-changeset-with-ember-redux-200a7e46c59a Examples of using a tool called ember-changeset to handle in-progress form edits in conjunction with the ember-redux bindings. - -#### Other + +#### Aurelia - **Managing State in Aurelia: How to Use Aurelia with Redux** https://www.sitepoint.com/managing-state-aurelia-with-redux/ A tutorial that builds a small Markdown editor three ways: pure Aurelia with data binding, Aurelia with Redux to manage state, and then implementation of undo/redo on top. +- **Managing State in Aurelia: How to Use Aurelia with Redux** + https://www.sitepoint.com/managing-state-aurelia-with-redux/ + Covers setting up a standard Aurelia app, adding Redux, and use of redux-undo with the example. + +- **Why Aurelia and Redux is a natural and powerful combination** + https://www.softvision.com/blog/aurelia-redux/ + Thoughts on the benefits of Aurelia compared to other frameworks, and examples of how to use Redux in an Aurelia app. + + +#### Other + + + - **Explorations in Adapting Redux to C#** https://spin.atomicobject.com/2017/03/13/adapting-redux-c-sharp-xamarin/ An informative look at how AtomicObject has a Redux variant in C# @@ -112,10 +133,6 @@ https://blog.shazam.com/android-apply-redux-2ad0f7355e0 Discusses a Redux-inspired pattern for use with Android as an alternative to the MVP approach. -- **Managing State in Aurelia: How to Use Aurelia with Redux** - https://www.sitepoint.com/managing-state-aurelia-with-redux/ - Covers setting up a standard Aurelia app, adding Redux, and use of redux-undo with the example. - - **Coupling a Stencil TODO app with Redux** https://www.javascripttuts.com/coupling-a-stencil-todo-app-with-redux/ A tutorial that updates an existing Stencil Todo app to use Redux @@ -123,3 +140,7 @@ - **Getting started with Redux in Swift** https://medium.com/mackmobile/getting-started-with-redux-in-swift-54e00f323e2b An overview of how to use the ReSwift library as part of an iOS app. + +- **Cedux: Experimenting with the Redux Model in C for Managing State** + https://spin.atomicobject.com/2017/11/27/redux-model-in-c-cedux/ + Examples of an experimental implementation of Redux in C \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 67b887c..530fc47 100644 --- a/static-typing.md +++ b/static-typing.md @@ -124,6 +124,10 @@ - **Flow Fundamentals for JavaScript Developers** https://gist.github.com/busypeoples/61e83a1becc9ee9d498e0db324fc641b A JS file in a gist that provides a commented walkthrough of Flow concepts and syntax. + +- **Flow type checking tips** + https://medium.com/@_kamerontanseli/flow-type-checking-tips-393e5323c040 + Useful lessons learned from adding Flow to an existing codebase, including handling type declarations, using Flow's utility types, and ensuring immutability. #### React, Redux, and Static Types diff --git a/using-react-with-es6.md b/using-react-with-es6.md index 0355b05..c5b1afa 100644 --- a/using-react-with-es6.md +++ b/using-react-with-es6.md @@ -58,16 +58,16 @@ https://swizec.com/blog/do-you-even-need-that-bind/swizec/7247 A dive through React's implementation of event handling, and why callback binding is needed -- **React without `this`** - https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160 - Examples of how to write components in a style that does not require the `this` keyword. Not the common approach, but an interesting idea. - - **Use Property Initializers for Cleaner React Components** 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. + 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. + + + diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 81f7996..d07d0c4 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -62,8 +62,6 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac A slideshow from Webpack's original author. Describes the basics of Webpack, how it can be used to build Progressive Web Apps, and improve speed and reliability through bundling. - - #### Basic Tutorials - **SurviveJS - Webpack** @@ -191,6 +189,14 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **A Webpack Setup that Makes Sense** https://medium.com/@Idan_Co/a-webpack-setup-that-makes-sense-35b4b6b8ef5f Looks at ways to define Webpack setup and tasks in a more modular, reusable manner. + +- **Webpack: A Gentle Introduction to the Module Bundler** + https://auth0.com/blog/webpack-a-gentle-introduction/ + A well-written tutorial that explains core Webpack concepts like entries, output, loaders, and plugins, and shows how to set up a basic build config for an application. + +- **Starting with Webpack from scratch** + https://www.netlify.com/blog/2017/11/30/starting-with-webpack-from-scratch/ + Walks through setting up a Webpack config from the ground up, with explanations and examples of how to configure Webpack and what the resulting output looks like. #### Configuration Terms and Concepts