diff --git a/framework-comparisons.md b/framework-comparisons.md index bf4daf1..1c90707 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -38,4 +38,12 @@ - **How to migrate an application from AngularJS to React and Redux** https://hackernoon.com/how-to-migrate-an-application-from-angularjs-to-react-and-redux-de0e2d1f70aa - Recaps several useful techniques to use when migrating an Angular 1.x app to React and Redux, including moving the build to use Webpack, rendering React components inside of Angular directives, sharing dependencies, and integrating Redux into the application. \ No newline at end of file + Recaps several useful techniques to use when migrating an Angular 1.x app to React and Redux, including moving the build to use Webpack, rendering React components inside of Angular directives, sharing dependencies, and integrating Redux into the application. + +- **Octopus Deploy 4.0 - Why we chose React over Angular when rewriting the Octopus 4.0 UI** + https://octopus.com/blog/octopus-v4-angular-to-react + Thoughts on how their original Angular 1 app had become unmaintainable, why they picked React, use of TypeScript, and how they approached architecting the React version. + +- **AngularJS migration to React/Redux** + https://hashnode.com/post/angularjs-migration-to-reactredux-cj7t0m67x012ehowugcvjn1xj + Examples of how to approach migrating an Angular 1 app by first switching some components to use React, then adding state management to use Redux. \ No newline at end of file diff --git a/functional-programming.md b/functional-programming.md index 38c83d6..b5bf652 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -162,3 +162,15 @@ - **Higher Order Functions and Redux Thunk** https://medium.com/@joedski/higher-order-functions-and-redux-thunk-1e5983ae6b03 An exploration of ways to wrap behavior around thunks, including composing functions together. + +- **Functional Programming Jargon** + https://functional.works-hub.com/blog/Functional-Programming-Jargon + A large list of functional programming terms, with explanations for each and examples of those terms using JS + +- **Awesome FP JS** + https://github.com/stoeffel/awesome-fp-js + A collection of links to libraries, tools, and resources for FP usage in JS + +- **Currying vs Partial Application** + http://www.datchley.name/currying-vs-partial-application/ + A great explanation of the difference between "currying" functions and "partially applying" them \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index a35bba1..4e068f3 100644 --- a/git-resources.md +++ b/git-resources.md @@ -138,6 +138,10 @@ - **Visualize Merge History with git log --graph, --first-parent, and --no-merges** https://redfin.engineering/visualize-merge-history-with-git-log-graph-first-parent-and-no-merges-c6a9b5ff109c Describes issues with using `git log` to visualize history, and some arguments that can be used to give a potentially better picture of what's actually happened. + +- **How to undo (almost) anything with Git** + https://github.com/blog/2019-how-to-undo-almost-anything-with-git + Instructions for undoing and redoing changes in various scenarios. #### E-Books diff --git a/javascript-resources.md b/javascript-resources.md index e53cd84..ef37e2b 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -10,6 +10,9 @@ While this list is primarily focused on learning React and Redux, and generally https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript Mozilla maintains a fantastic set of developer resources for Web technologies, including a comprehensive reference to the Javascript language and a number of associated tutorials. Their "reintroduction to Javascript" article is a great overview of what the language looks like. +- **Modern JS Cheatsheet** + https://github.com/mbeaudru/modern-js-cheatsheet + An extensive list of explanations for syntax and concepts used in modern JS applications - **Eric Elliott's Javascript Resource Lists** https://medium.com/javascript-scene/10-priceless-resources-for-javascript-learners-bbf2f7d7f84e diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index cd8a574..068b4ee 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -63,6 +63,10 @@ https://daveceddia.com/react-business-value/ Covers several reasons why using React is a good business decision, including ease of maintenance, long-term usefulness, and risk, with a summary of justifications. +- **Why we built our new UI in React, from the ground up** + https://blog.cloud-elements.com/dev-discuss-why-we-built-our-new-ui-in-react-from-the-ground-up + The Cloud Elements team describes why they rewrote their UI in React, and how the React ecosystem worked well for their approach. + #### Redux/Flux Comparisons @@ -124,6 +128,10 @@ https://twitter.com/modernserf/status/886426115874717697 Deep and fascinating analysis of how Redux compares to OOP and message-passing, how typical Redux usage can devolve towards Java-like "setter" functions with more boilerplate, and something of a plea for a higher-level "blessed" abstraction on top of Redux to make it easier to work with and learn for newbies. Very worth reading. The author originally wrote a tweetstorm, which I captured in the Storify link, and wrote the blog post to expand on those thoughts. Finally, he followed up with a few more thoughts on abstract vs concrete examples in another shorter tweet thread. +- **Thoughts on Redux and its similarities with OOP** + https://medium.com/@dhruvrajvanshi/thoughts-on-redux-and-its-similarities-with-oop-6d200f34656 + Another post that's very similar to "What's So Great About Redux?". with thoughts on the overall benefits of Redux and some potential disadvantages in relation to use of TypeScript. Some good discussion in the comments, too. + - **6 mistakes Reacters make that Re-framers avoid** https://purelyfunctional.tv/article/react-vs-re-frame/ https://news.ycombinator.com/item?id=15157527 @@ -267,9 +275,28 @@ similar structures in ClojureScript. https://news.ycombinator.com/item?id=15344447 A long subthread of the "React 16" announcement post that discusses several aspects of Redux "boilerplate" and abstraction. I answered a lot of questions about how Redux can and should be used, and there were actually some excellent comments about how Redux usage pays off for long-term app maintainability. +- **How Redux can make you a better developer** + https://medium.cobeisfresh.com/how-redux-can-make-you-a-better-developer-30a094d5e3ec + https://www.reddit.com/r/javascript/comments/7buksy/how_redux_can_make_you_a_better_developer/ A blog post recapping aspects of functional programming and immutability in JS and Redux. The Reddit thread has some excellent discussion on pros and cons of using Redux and how it has benefited people. + + #### React's PATENTS License +##### License Change to MIT + +- **Relicensing React, Jest, Flow, and Immutable.js** + https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/ + Facebook's announcement that React and other projects are now using the MIT license + +- **4 Lessons from the 'React Patent License' Controversy** + https://hackernoon.com/4-lessons-from-the-react-patent-license-controversy-3da3c4baf3a4 + Some reactions to the MIT license change, and thoughts on how it affects React. + + + +##### Prior Patents Discussion + - **Facebook Open Source License FAQ** https://code.facebook.com/pages/850928938376556 Official answers to questions about the meanings of license phrasing @@ -311,9 +338,6 @@ similar structures in ClojureScript. https://www.reddit.com/r/programming/comments/6nnxir/apache_foundation_bans_use_of_facebook_bsdpatents/dkb3v4p/?context=3 One of the best layman's summaries I've seen about what the patents file actually means and is intended to do. - - - - **Further discussions** https://news.ycombinator.com/item?id=12108273 https://news.ycombinator.com/item?id=12108526 diff --git a/react-architecture.md b/react-architecture.md index 08f43cd..26a96e5 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -277,4 +277,8 @@ - **Three Example React Stacks** http://andrewhfarmer.com/three-example-react-stacks/ - Descriptions of three different application/deployment scenarios, and example React library+tool stacks that would be appropriate for each. \ No newline at end of file + Descriptions of three different application/deployment scenarios, and example React library+tool stacks that would be appropriate for each. + +- **Reusable Web Application Strategies: three patterns for running the same app in multiple spots** + https://medium.freecodecamp.org/reusable-web-application-strategies-d51517ea68c8 + Looks at how to run an app in reusable ways via iframes, reusable app components, and reusable UI components. \ No newline at end of file diff --git a/react-component-composition.md b/react-component-composition.md index 73a9608..9126fcf 100644 --- a/react-component-composition.md +++ b/react-component-composition.md @@ -124,6 +124,15 @@ https://reactrocket.com/post/turn-your-hocs-into-render-prop-components/ Gives examples of how to adapt HOCs for use with the render props pattern. +- **Use a Render Prop!** + https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce + https://news.ycombinator.com/item?id=15651808 + Michael Jackson describes why he gave his "Never Write Another HOC" talk, looks at some of the problems with both mixins and HOCs, and how render props can help solve those. There's some related discussion in the HN comments. + +- **How to give rendering control to users with prop getters** + https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf + Kent C Dodds describes how "prop getter" functions can be used with render props to provide more control over how rendering behavior is hooked together. + #### Functional Composition @@ -164,6 +173,10 @@ https://medium.com/@giuseppemaggiore/a-react-journey-from-vanilla-to-type-safe-to-monadic-41beaa386910 Demonstrates adding TypeScript to a JS React app for type-checking, then using a specialized library called Monadic-React to perform complex and type-safe composition of React components and logic. +- **Using Recompose to build higher-order components** + 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`. + #### Comparing Composition Approaches @@ -194,4 +207,5 @@ - **Randomness in React Props** https://medium.com/@joshuawcomeau/randomness-in-react-props-3929c1669f8b - Demonstrates several approaches to structuring logic for generating values and passing them to children, including initialization in a constructor, creating a wrapper component, and using a function-as-a-child. \ No newline at end of file + Demonstrates several approaches to structuring logic for generating values and passing them to children, including initialization in a constructor, creating a wrapper component, and using a function-as-a-child. + diff --git a/react-component-patterns.md b/react-component-patterns.md index 2614e7d..cfff6f9 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -47,6 +47,10 @@ https://medium.com/gitconnected/react-component-patterns-ab1f09be2c82 A summary of common React component patterns with short examples. +- **10 React mini-patterns** + https://hackernoon.com/10-react-mini-patterns-c1da92f068c5 + Ten useful patterns for working with React components, including data flow, techniques for working with inputs, controlling CSS usage, switching between components, and more. + #### Component Definition Approach Comparisons @@ -295,6 +299,10 @@ https://medium.com/@guigonc/refactoring-moving-api-calls-to-a-higher-order-component-53062c086cb Shows how to progressively refactor fetching logic out of a component and move it into a parent component, then make that parent component reusable. +- **The React + Redux Container Pattern** + https://dev.to/sophiedebenedetto/the-react--redux-container-pattern-bmk + An excellent explanation of what "container components" and "presentational components" are, with discussion of how they fit together and a good sample project implementing the ideas. + @@ -418,6 +426,10 @@ - **Good React Modals** https://medium.com/@elsdoerfer/good-react-modals-548cd9c2f7f4 Covers ways to handle issues with modal content not being rendered while doing animations, and side-loading data for a modal while maintaining a loading indicator. + +- **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. #### Other Component Patterns diff --git a/react-implementation.md b/react-implementation.md index 7f55338..d263880 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -168,6 +168,10 @@ https://medium.com/@asolove/preact-internals-2-the-component-model-36a05e32957b https://medium.com/@asolove/preact-internals-3-some-fiddly-little-bits-f353b1ad7abc A 3-part series that dives into the implementation and concepts of the Preact library codebase. + +- **An Interview with the React Team About Wordpress and Project Gutenberg** + https://wpcouple.com/interview-react-team-facebook-wordpress-gutenberg/ + A Wordpress community site interviews Dan Abramov, Andrew Clark, and Sophie Alpert about a variety of topics, including how they prioritize features, how React is tested, dealing with breaking changes, downsides of React, and aspects of Wordpress using React for its "Project Gutenberg" tool. #### React Fiber diff --git a/react-native.md b/react-native.md index 344c4a2..77a873e 100644 --- a/react-native.md +++ b/react-native.md @@ -34,6 +34,13 @@ - **Offline-First Apps with React Native and Redux** http://rationalappdev.com/offline-first-apps-with-react-native-and-redux/ A tutorial that builds out a cat GIF app using React Native, Redux, Node, and Express, and includes offline support. + +- **Let's Build: Cryptocurrency Native Mobile App with React Native + Redux** + https://medium.com/react-native-training/bitcoin-ripple-ethereum-price-checker-with-react-native-redux-e9d076037092 + https://medium.com/@wesharehoodies/tutorial-react-native-redux-native-mobile-app-for-tracking-cryptocurrency-bitcoin-litecoin-810850cf8acc + https://medium.com/@wesharehoodies/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iii-a454dda156b + https://medium.com/@wesharehoodies/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iv-b0e0c5ca2dca + A 4-part tutorial series that shows how to set up a React Native project, add Redux, fetch data with Redux, and display that data with React. #### Specific aspects @@ -87,4 +94,13 @@ - **How we restructured our app with React-Navigation** https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26 - Describes some of the history of the React-Navigation library, and shows some examples of how to use it with Redux and make a Higher-Order Component to work with it. \ No newline at end of file + Describes some of the history of the React-Navigation library, and shows some examples of how to use it with Redux and make a Higher-Order Component to work with it. + +- **A comprehensive guide for integrating React-Navigation with Redux including authentication flow** + https://medium.com/@shubhnik/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf + An extended tutorial that demonstrates connecting React-Navigation and Redux, and shows how to implement an authentication workflow. + +- **A Year of React Native: Styling** + https://madebymany.com/stories/a-year-of-react-native-styling-part-1 + https://madebymany.com/stories/a-year-of-react-native-styling-part-2 + Looks at ways that styling in RN differs from styling on the web, and useful patterns for organizing styling logic in RN apps. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 82be592..5f62b83 100644 --- a/react-performance.md +++ b/react-performance.md @@ -217,6 +217,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) https://medium.com/@darioghilardi/what-profiling-a-universal-react-redux-app-revealed-c5cc4986353c Discusses using the Chrome DevTools to debug and do CPU profiling of a Node server process that was doing server-side rendering of a React app. +- **Performance-tuning a React application** + https://medium.com/@joshuawcomeau/performance-tuning-a-react-application-f480f46dc1a2 + An excellent case study on improving load time for a small React+Redux app. Describes use of gzipping, image cropping, lazy loading, and more. + #### Immutable Data diff --git a/react-redux-testing.md b/react-redux-testing.md index 6756cb9..0090089 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -352,4 +352,8 @@ - **Write tests. Not too many. Mostly integration.** https://blog.kentcdodds.com/write-tests-not-too-many-mostly-integration-5e8c7fff591c - Some short thoughts on the value of different kinds of tests, with extensive discussion in the comments. \ No newline at end of file + Some short thoughts on the value of different kinds of tests, with extensive discussion in the comments. + +- **Stubbing HTTP Reqeusts with Sinon** + http://mherman.org/blog/2017/11/06/stubbing-http-requests-with-sinon/ + An extensive tutorial that discusses the benefits of stubbing behavior in tests, setting up Mocha+Chai+Sinon, and using Sinon's stub functions in integration and unit tests. \ No newline at end of file diff --git a/react-routing.md b/react-routing.md index a5b6afe..ae774b5 100644 --- a/react-routing.md +++ b/react-routing.md @@ -47,6 +47,14 @@ https://css-tricks.com/react-router-4/ A deep look at patterns and strategies for using React-Router v4 successfully. +- **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. + +- **React Router 4 Tutorial From Scratch** + https://appdividend.com/2017/09/12/react-router-tutorial-example-scratch/ + A short tutorial demonstrating use of React Router v4 + #### Routing with Redux @@ -123,4 +131,9 @@ - **Preact Authentication Tutorial** https://auth0.com/blog/preact-authentication-tutorial/ - A tutorial that demonstrates how to build an app with Preact, including authentication, and makes some comparisons to doing so in React. \ No newline at end of file + A tutorial that demonstrates how to build an app with Preact, including authentication, and makes some comparisons to doing so in React. + +- **How to Implement Authentication for Your React App** + https://medium.appbase.io/how-to-implement-authentication-for-your-react-app-cf09eef3bb0b + https://medium.appbase.io/securing-a-react-web-app-with-server-side-authentication-1b7c7dc55c16 + A pair of posts that demonstrate implementing both client-side and server-side authentication behavior for a React/Node app. \ No newline at end of file diff --git a/react-server-rendering.md b/react-server-rendering.md index 7680755..587fd1a 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -82,4 +82,8 @@ - **Making CRA apps work with SSR** https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-1-8f5f813d510b https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-2-fb871868216e - A 2-part post that shows how to add SSR to an ejected CRA app, including use of Redux. \ No newline at end of file + A 2-part post that shows how to add SSR to an ejected CRA app, including use of Redux. + +- **You might (not) need a Server Side Rendering Framework** + https://adrienharnay.me/you-might-not-need-a-server-side-rendering-framework/ + Discusses building a home-grown SSR setup using Webpack, rather than reusing something like Next.js. \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index 0591ecd..495b2e3 100644 --- a/react-styling.md +++ b/react-styling.md @@ -30,6 +30,10 @@ https://github.com/FarhadG/ui-react A free online book that teaches how to modular, extendable, and scalable component-based UIs. Covers best practices, and techniques like CSS preprocessors, CSS modules, inline styles, and more. Chapters available to read for free on Github, and the Leanpub book can be picked up for free as well. +- **All You Need To Know About CSS-in-JS** + https://medium.com/@wesharehoodies/all-you-need-to-know-about-css-in-js-984a72d48ebc + A clear summary of the differences between "inline styles" and "CSS-in-JS", the pros and cons of using CSS-in-JS, and quick examples of using some of the most popular CSS-in-JS libraries. + #### Components and Styling diff --git a/react-techniques.md b/react-techniques.md index b5dc849..54983e0 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -27,6 +27,14 @@ https://blog.discordapp.com/lessons-from-migrating-a-large-codebase-to-react-16-e60e49102aa6 An excellent post from the Discord team recapping how they migrated an older React codebase to work with React 16, including use of codemods, replacing private API usage, upgrading dependencies, and other issues they ran into. +- **React UI Frameworks, Compared** + https://gather.engineering/react-ui-frameworks-compared-dd631eb5c982 + A list of available React UI frameworks, with reviews and comparisons on breadth of components, quality, project health, and more. Includes Ant Design, PrimeReact, Office UI Fabric, Blueprint, React UI, Semantic UI React, ExtReact, and Kendo React UI. + +- **Creating react-editables: How to build a set of reusable React components** + https://medium.com/@niwaa/creating-react-editables-how-to-build-a-set-of-reusable-react-components-with-an-hoc-and-write-7a685947a992 + Looks at the steps needed to create a set of reusable React components and publish them to NPM. Includes extended thoughts on component design for reusability. + #### Security diff --git a/react-tutorials.md b/react-tutorials.md index a5bfb68..8284d96 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -135,6 +135,9 @@ https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-10-reacting-to-what-weve-learned-633ac18469ba A 10-part series that explains React (and many web dev concepts) from the ground up, with simple terms and lots of metaphors. Aimed at absolute beginners. +- **Intro to React** + https://www.writesoftware.org/topic/react + A short tutorial series that introduces basic React concepts like JSX, components, props, state, and events. #### React Concept Overviews @@ -352,6 +355,14 @@ https://daveceddia.com/build-metronome-react/ An easy-to-follow, step-by-step tutorial that demonstrates key concepts like loading data, initializing state, and handling input changes. +- **Microservices with Docker, Flask, and React** + https://testdriven.io/part-one-intro/ + A large multi-part tutorial covers setting up a dev environment using Docker containers, building a REST API server with the Python Flask framework, building a UI with React, and deploying it all to Amazon EC2. + +- **Create a Spreadsheet using React** + https://www.writesoftware.org/tutorial/react-spreadsheet + An excellent tutorial that shows how to build a miniature spreadsheet app using React + #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index 1beef04..8b19e72 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -284,6 +284,14 @@ - **"React and Redux as a framework"** https://www.reddit.com/r/javascript/comments/747vx1/react_and_redux_as_a_framework/ Useful discussion of where "business logic" should live in a Redux app, such as data fetching and transformation. + +- **How to approach making changes to an existing React-Redux application** + https://gautamdhameja.com/how-to-approach-making-changes-to-an-existing-react-redux-application-ae00482c0f9a + A clear suggested order of steps to follow when adding new functionality to a React+Redux app. + +- **Tips for Redux** + https://www.yihangho.com/tips-for-redux/ + Some excellent tips for working with Redux, including designing the state tree, dealing with side effects, implementing optimistic updates, and more. #### Encapsulation and Reusability @@ -453,6 +461,16 @@ https://twitter.com/threepointone/status/913701233394900992 A Twitter thread discussing use of render props as an alternative to `connect`. Includes a reply by Dan Abramov, who points out that this is how React-Redux originally worked, but it was changed to an HOC to better deal with side effects from state changes. +- **"Redux Connect as render props" discussion** + https://news.ycombinator.com/item?id=15427954 + https://twitter.com/mjackson/status/915335846324092930 + A couple of discussion threads looking at the recent popularity of of experiments with `connect` as a render prop. + +- **Kea: A High Level Abstraction between React and Redux** + https://medium.com/@mariusandra/kea-vs-setstate-redux-mobx-dva-jumpstate-apollo-etc-4aa26ea11d02 + https://survivejs.com/blog/kea-interview/ + An article by the author of the Kea library discussing how it makes it easier to use React and Redux together, and an interview with the author discussing the history and usage of the library. + - **The joy of React+Redux with Elixir/OTP** https://limenius.com/elixir-otp-react-redux/ Covers building a Redux-based client that receives update messages from an Elixir server. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index d17f083..7b05fc9 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -130,6 +130,10 @@ https://blog.logrocket.com/understanding-redux-saga-from-action-creators-to-sagas-2587298b5e71 Some short examples comparing implementations of the same fetching logic inside a component, using redux-thunk, and using redux-saga. +- **Polling with Redux** + https://bigbitecreative.com/polling-with-redux/ + Compares implementations of a polling loop between redux-saga and redux-observable + #### Sagas @@ -273,6 +277,10 @@ https://engineering.universe.com/common-patterns-with-redux-saga-ed68f89dfecf Examples of useful patterns for sagas, including running multiple requests in parallel, using the `race` keyword to time out requests, and using sagas to manage a queue of events. +- **States and React: step-by-step user interaction with state machines** + https://sandstorm.de/de/blog/post/states-and-react-step-by-step-user-interaction-with-state-machines.html + Demonstrates managing "snackbar" popup notifications using sagas to show and hide the popups + #### Other Side Effect Approaches @@ -303,4 +311,8 @@ - **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. \ No newline at end of file + 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. \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index d681a4c..7b879cf 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -51,6 +51,10 @@ - **How to treat Errors as first-class citizen in Flux (and Redux)** https://medium.com/@jamiedixon/how-to-treat-errors-as-first-class-citizens-in-flux-and-redux-fca7f3d5c02d 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 + #### Other @@ -130,7 +134,8 @@ - **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. + http://jimpurbrick.com/2017/11/10/replaying-replicated-redux/ + A set 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. - **Using dynamic localization to improve accessibility with React and Redux** https://medium.com/checkr/using-dynamic-localization-to-improve-accessibility-with-react-and-redux-7650878af6ef @@ -144,6 +149,26 @@ http://www.hypertext.io/redux/react/2017/10/30/redux-actions.html A short look at how the `redux-actions` lib can simplify the process of defining action type, action creators. and reducers. +- **Redux and JSON Schema** + https://blog.prismatik.com.au/redux-and-json-schema-c63368931143 + Short discussion of the overall benefits of using JSON Schema to define data structures, and a Redux library that helps use those for Redux. + +- **Reducing Redux: avoiding boilerplate with redux-scc** + https://medium.com/onfido-tech/reducing-redux-avoiding-boilerplate-with-redux-scc-b72c80c338e5 + https://medium.com/onfido-tech/redux-scc-update-combined-actions-and-custom-types-ce346ea91e85 Looks at how the redux-scc library allows building "store chunks", which simplify the amount of work needed to define and update a Redux store. + +- **Redux Action Creator Creators** + https://hackernoon.com/redux-action-creator-creators-6684b051d4c6 + An example of using functions that take additional arguments, and using those to generate action creators. Includes example of using this to add analytics and promises to actions. + +- **The only action you will ever need** + https://medium.com/riipen-engineering/the-only-action-you-will-ever-need-f3a42661d2dd + Looks at creating a reusable "fetch" action creator that can be customized to generate fetching logic for different REST API endpoints. + +- **Redux mapStateToProps and mapDispatchToProps Shorthand** + https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132 + A quick example of the "object shorthand" supported by `connect` for `mapDispatch`, and use of Reselect's `createStructuredSelector` for equivalent behavior of `mapState`. + #### Network Management diff --git a/redux-tutorials.md b/redux-tutorials.md index 6a84298..9e488b4 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -150,6 +150,10 @@ https://blog.bam.tech/developper-news/4-ways-to-dispatch-actions-with-redux Describes different ways to dispatch actions from React components: directly passing the store, using `connect`, using sagas, and using the `bindActionCreators` utility. +- **Introduction to Redux** + https://www.kirupa.com/react/introduction_to_redux.htm + A basic introduction to the ideas of storing data in Redux and dispatching actions to update that data. + #### Project-Based Tutorials @@ -265,6 +269,14 @@ - **Building Tesla's Battery Range Calculator with React+Redux** https://medium.freecodecamp.org/building-teslas-battery-range-calculator-with-react-part-2-redux-version-2ffe29018eec Follows the "plain React" version in Part 1 by introducing basic Redux concepts, and modifying the original version to use Redux for managing state. + +- **NodeJS React-Redux Tutorial** + http://www.darrenbeck.co.uk/nodejs/react/reacttutorial-part1/ + A multi-part tutorial that covers building a news app with React, Redux, and a Node API server using MongoDB, as well as setting up JWT-based authentication. + +- **Simple Redux Create Delete Contact Application** + https://appdividend.com/2017/11/02/simple-redux-create-delete-contact-application/ + Demonstrates building a simple client-side contact list app #### Redux Implementation Walkthroughs diff --git a/redux-ui-management.md b/redux-ui-management.md index 7ccc5bf..a386cc5 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -119,4 +119,8 @@ - **Forms with Redux Form v7** https://codeburst.io/forms-with-redux-form-v7-part-1-of-2-e636d760e9b4 https://codeburst.io/forms-with-redux-form-v7-part-2-of-2-f44ffee4a34d - An extensive tutorial on Redux-Form that covers a variety of topics, including basic setup, making reusable form components, styling, dynamic fields with dependencies, real-time validation, and more. \ No newline at end of file + An extensive tutorial on Redux-Form that covers a variety of topics, including basic setup, making reusable form components, styling, dynamic fields with dependencies, real-time validation, and more. + +- **Redux Form Validation Tutorial Example From Scratch** + https://appdividend.com/2017/11/05/redux-form-validation-tutorial-example/ + A tutorial that demonstrates setting up a Redux app that uses Redux-Form, and adding validation logic to that form. \ No newline at end of file diff --git a/redux-without-react.md b/redux-without-react.md index 9ab6907..9677121 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -57,6 +57,10 @@ https://medium.com/@akaztp/case-study-pt-2-implementing-redux-on-angular-9e79cd4faa37 A series of posts describing a modular / layered architecture built around Redux, including a data layer for managing fetching, a business layer using RxJS Epics, and folder structure for Angular components. +- **NgRx Antipatterns** + http://brianflove.com/2017/11/01/ngrx-anti-patterns/ + Examples of some ways to improve poor NgRx usage patterns. + #### Other @@ -89,4 +93,8 @@ - **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. \ No newline at end of file + 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 \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index f5e76c8..8783604 100644 --- a/static-typing.md +++ b/static-typing.md @@ -207,6 +207,18 @@ - **Typing Higher-Order Components in Recompose with Flow** https://medium.com/flow-type/flow-support-in-recompose-1b76f58f4cfc Describes some of the work needed to add Flow types for the Recompose library, and how to use Recompose, Flow, and React together. + +- **Type-safe React + Redux: Eliminating the 'any' type** + https://medium.com/@joeldalley/type-safe-react-redux-eliminating-the-any-type-dad21ebd3cd5 + Examples of declaring types for data modeling, Redux actions and reducers, Redux-Observable epics, and React components. + +- **Redux and Flow-type - getting the maximum benefit from the fewest key strokes** https://hackernoon.com/redux-flow-type-getting-the-maximum-benefit-from-the-fewest-key-strokes-5c006c54ec87 + Discussion of how Flow's type inference can be used to reduce duplication of type declarations for actions. + +- **How to Reduce Action Boilerplate** + https://blog.angularindepth.com/how-to-reduce-action-boilerplate-90dc3d389e2b + Looks at how TypeScript is normally used with Redux, including "narrowing" actions with type guards and discriminated unions, and looks at ways different libraries use narrowing to help generate actions in a type-safe way. + #### Advancing Typing Techniques @@ -280,4 +292,8 @@ - **Typed JavaScript with TypeScript, Flow, and Elm** http://djcordhose.github.io/flow-vs-typescript/elm-flow-typescript.html#/ - A slideshow that discusses the benefits of using type systems, and looks at how TS, Flow, and Elm compare in several aspects. \ No newline at end of file + A slideshow that discusses the benefits of using type systems, and looks at how TS, Flow, and Elm compare in several aspects. + +- **Flow and TypeScript** + https://engineering.tumblr.com/post/165261504692/flow-and-typescript + The Tumblr engineering team discusses their experience comparing Flow and TS, and why they opted to use TS. \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 8540670..c79434a 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -102,6 +102,10 @@ https://www.viget.com/articles/unpacking-the-mysteries-of-webpack-a-novices-journey Recaps some high-level Webpack terms and concepts, and walks through several changes to speed up compilation and improve bundle size. +- **To ship less code, write transpiler-aware Javascript** + https://medium.com/@jbartos/to-ship-less-code-write-transpiler-aware-javascript-a56250296760 + Tips for improving bundle size by using syntax supported natively by browsers, as well as other techniques for improving bundle output. + #### Code Splitting and Chunking @@ -405,6 +409,9 @@ https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf Discusses how to configure Webpack to load Semantic-UI's LESS files to allow use of a custom theme. +- **Webpack: Creating dynamically named outputs for wildcarded entry files** + https://medium.com/@sanjsanj/webpack-creating-dynamically-named-outputs-for-wildcarded-entry-files-9241f596b065 + Demonstrates a useful technique for collecting files based on globbing, and generating Webpack entry definitions from those files. #### Webpack Tools