From e2818395229ebd39620629c234587bf035fb7f97 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 27 Nov 2017 00:16:23 -0500 Subject: [PATCH] Updates, 2017-11-26 --- javascript-resources.md | 10 ++++------ react-ajax.md | 4 +++- react-component-composition.md | 6 +++++- react-component-patterns.md | 15 ++++++++++++++- react-implementation.md | 3 +++ react-native.md | 6 +++++- react-performance.md | 14 +++++++++++++- react-redux-testing.md | 14 ++++++++++++++ react-routing.md | 4 ++++ react-styling.md | 5 +++++ react-techniques.md | 4 ++++ react-tutorials.md | 3 +++ redux-architecture.md | 22 +++++++++++++++++++++- redux-middleware.md | 4 ++++ redux-reducers-selectors.md | 6 +++++- redux-side-effects.md | 4 ++++ redux-techniques.md | 24 ++++++++++++++++++++++++ redux-tutorials.md | 8 ++++++++ redux-without-react.md | 4 ++++ static-typing.md | 4 ++++ webpack-advanced-techniques.md | 4 ++++ 21 files changed, 155 insertions(+), 13 deletions(-) diff --git a/javascript-resources.md b/javascript-resources.md index 0d2bcfc..8057775 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -71,6 +71,10 @@ While this list is primarily focused on learning React and Redux, and generally http://exploringjs.com/ Multiple free online books from Dr. Axel Rauschmayer. "Speaking Javascript" covers all of Javascript through ES5; "Exploring ES6" covers ES6 in depth; and other books look at versions of Javascript after ES6 and how to set up an ES6+ development environment. +- **The Modern Javascript Tutorial** + http://javascript.info/ + A large tutorial series that covers all aspects of the modern Javascript language (basic syntax, data types, objects, and advanced function usage), as well as a section on using Javascript to interact with the DOM in web pages. + - **23 Free Javascript Books** https://hackerlists.com/free-javascript-books/ A list of many Javascript books available for free online. @@ -102,15 +106,9 @@ While this list is primarily focused on learning React and Redux, and generally http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/ A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`. The second edition includes more of a focus on ES6 and newer features. -- **The Modern Javascript Tutorial** - http://javascript.info/ - A large tutorial series that covers all aspects of the modern Javascript language (basic syntax, data types, objects, and advanced function usage), as well as a section on using Javascript to interact with the DOM in web pages. - - **The JavaScript Way** https://github.com/bpesquet/thejsway A modern introduction to the JavaScript language, intended to be beginner-friendly, comprehensive, standards-aligned with the latest syntax and good practices, and hands-on. - - #### Online Code Editors diff --git a/react-ajax.md b/react-ajax.md index 40c6968..353c712 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -38,7 +38,9 @@ https://appendto.com/2017/01/3-libraries-and-3-ways-to-handle-ajax-in-react-apps/ Demonstrates three approaches to structuring AJAX calls (root component, containers, and via Redux middleware), and lists three of the most popular AJAX libraries. - +- **How to make AJAX API calls in React** + https://www.techiediaries.com/react-ajax/ + Looks at common libraries that are used for making AJAX calls in React apps, discusses which lifecycle methods to use for starting AJAX calls, and gives examples of using `fetch` to make AJAX calls. #### Request Implementation Examples diff --git a/react-component-composition.md b/react-component-composition.md index 04d75d3..ae401f7 100644 --- a/react-component-composition.md +++ b/react-component-composition.md @@ -222,4 +222,8 @@ - **Simplifying life with React render callbacks** https://medium.com/@adamrackis/simplifying-life-with-react-render-callbacks-cb37d58e55 - Compares several approaches for passing data from a parent component directly to a child, including cloning children, using a HOC, and using render props. \ No newline at end of file + Compares several approaches for passing data from a parent component directly to a child, including cloning children, using a HOC, and using render props. + +- **React Developer's Everyday Struggle - Extending Big Applications** + https://blog.callstack.io/react-developers-everyday-struggle-extending-big-applications-84ec4e62e2ad + Looks at different possible solutions to handling form inputs and validation logic, including existing form libs, a validation HOC, and a function-as-children approach. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index 1c5f0b0..6e3a925 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -51,6 +51,10 @@ 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. +- **React Training: Advanced React - React Patterns** + https://reacttraining.com/patterns/ + The lecture videos from React Training's "Advanced React" course. The videos themselves are now free. Covers topics like declarative vs imperative, compound components, context, Higher Order Components, render props, and controlled components. + #### Component Definition Approach Comparisons @@ -136,6 +140,10 @@ https://medium.com/@RubenOostinga/avoiding-deeply-nested-component-trees-973edb632991 Examples of `children` to include arbitrary content inside of a component for more flexible handling of presentation and composition. +- **Tips on Creating Reusable Components** + http://dylanpaulus.com/reactjs/2017/09/08/tips-on-creating-reusable-components.1/ + Examples of using `children` and other props to make components more composable and reusable. + #### React Component Lifecycle @@ -473,4 +481,9 @@ - **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 \ No newline at end of file + 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-implementation.md b/react-implementation.md index 2e2634b..c5671a8 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -227,3 +227,6 @@ http://makersden.io/blog/look-inside-fiber/ Traces through the source code for React 16 / React Fiber, starting with the main `render()` function and diving down from there through the system. +- **What is React Fiber?** + https://giamir.com/what-is-react-fiber + An overview of the React Fiber rewrite, and how React's reconciler has been rewritten to improve performance and make rendering more flexible. \ No newline at end of file diff --git a/react-native.md b/react-native.md index 77a873e..feacc1e 100644 --- a/react-native.md +++ b/react-native.md @@ -103,4 +103,8 @@ - **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 + Looks at ways that styling in RN differs from styling on the web, and useful patterns for organizing styling logic in RN apps. + +- **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 diff --git a/react-performance.md b/react-performance.md index f730ef6..1b28396 100644 --- a/react-performance.md +++ b/react-performance.md @@ -178,6 +178,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://medium.com/riipen-engineering/the-virtual-dom-and-its-anti-patterns-aa4c523d00ed First in a 3-part series discussing causes of slow components and wasteful rendering. Later posts will cover ways to optimize Redux usage, and tools to find bottlenecks that can be optimized. +- **How to greatly improve your React app performance** + 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. + #### Code Splitting and Progressive Apps @@ -345,4 +349,12 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - **Measuring performance gains - AngularJS to React (with Redux or MobX)** https://medium.com/@guptagaruda/measuring-performance-gains-angularjs-to-react-with-redux-or-mobx-fb221517455 - A highly detailed article that investigates and benchmarks performance between an Angular 1.x app and equivalent React+Redux and React+MobX apps in a variety of real-world use cases. Excellently written and researched. \ No newline at end of file + A highly detailed article that investigates and benchmarks performance between an Angular 1.x app and equivalent React+Redux and React+MobX apps in a variety of real-world use cases. Excellently written and researched. + +- **The most unknown Redux performance trick** + https://medium.com/@jidefr/the-most-unknown-redux-performance-trick-986fdfe871fa + Examples of how `connect`'s lesser-known `areStatesEqual` option can be used to skip unnecessary re-renders. + +- **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 diff --git a/react-redux-testing.md b/react-redux-testing.md index 414bf66..e8e16ab 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -145,6 +145,16 @@ https://medium.com/bluepick-dev/testing-with-semantic-ui-react-and-enzyme-7cb39228a5ea Specific tips and advice for testing components that use the Semantic-UI-React library, including advice on focusing your tests on your own components' behavior. The tips are also applicable to React component testing in general. +- **Implementing basic Component tests using Jest and Enzyme** + https://hackernoon.com/implementing-basic-component-tests-using-jest-and-enzyme-d1d8788d627a + Describes the Jest and Enzyme tools, how they're used for testing React components, and gives examples of some simple tests. + +- **Snapshot testing React Components with Jest** + https://medium.com/@lukepierotti/snapshot-testing-react-components-with-jest-744a1e980366 + Covers the basics of snapshot testing, and how it can be used to test React components to ensure the rendering is consistent. + + + #### Redux - **Simple React/Redux Testing** @@ -277,6 +287,10 @@ - **Recipes for Testing Redux Actions and Reducers** https://densitylabs.io/blog/recipes-for-testing-redux-actions-and-reducers Useful examples of testing Redux code, using redux-thunk, chai, axios, redux-mock-store, and axios-mock-adapter. + +- **Unit Testing Redux Connected Components** + https://medium.com/@lukepierotti/unit-testing-redux-connected-components-692fa3c4441c + Discusses testing connected components with a mock store vs testing `mapState` functions and plain components separately. diff --git a/react-routing.md b/react-routing.md index 1d9646c..7230fc4 100644 --- a/react-routing.md +++ b/react-routing.md @@ -55,6 +55,10 @@ https://appdividend.com/2017/09/12/react-router-tutorial-example-scratch/ A short tutorial demonstrating use of React Router v4 +- **React Router v4 Unofficial Migration Guide** + https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a + Practical advice and specific steps needed to migrate an app from React-Router v3 to v4. + #### Routing with Redux diff --git a/react-styling.md b/react-styling.md index 79e9309..3821286 100644 --- a/react-styling.md +++ b/react-styling.md @@ -39,6 +39,11 @@ https://medium.com/gitconnected/a-brief-history-of-css-in-js-how-we-got-here-and-where-were-going-ea6261c19f04 A pair of articles that look at the history of CSS, discuss the problems it tries to solve, and describe the use of CSS-in-JS as a way to help solve certain use cases in today's apps. + +- **Four ways to style React components** + 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. + #### Components and Styling diff --git a/react-techniques.md b/react-techniques.md index 472b6d2..fb2bf96 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -39,6 +39,10 @@ https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/ An excellent article that describes the concepts of state machines, how they relate to applications, and how they can be applied to help manage React component behavior. +- **Adventures in creating a React component library with Create React App and TypeScript** + 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. + #### Security diff --git a/react-tutorials.md b/react-tutorials.md index 194e3ee..33340f4 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -144,6 +144,9 @@ https://medium.freecodecamp.org/everything-you-need-to-know-about-react-eaedf53238c4 A comprehensive tutorial that covers topics like components, rendering, JSX, state, event handling, async behavior, props, and refs. +- **Introduction to React** + 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 Concept Overviews diff --git a/redux-architecture.md b/redux-architecture.md index 2a45c82..84f23ee 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -296,6 +296,14 @@ - **How We Built Our UI** https://www.endgame.com/blog/technical-blog/how-we-built-our-ui The Endgame team discusses why they rebuilt their app's UI, why they picked React and Redux, use of REdux-Saga to manage business logic, and how the data workflow fits together. + +- **Best practices with React and Redux application development** + https://developers.redhat.com/blog/2017/11/15/best-practices-react-redux-web-application-development/ + A wide variety of suggestions, including use of TypeScript, customizing build configurations, managing dependencies, handling callbacks with params, using selectors, and more. + +- **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. #### Encapsulation and Reusability @@ -384,6 +392,10 @@ - **Building a simple Redux library** https://medium.com/@tcclevela/building-a-simple-redux-library-44ce4f004822 Looks at important steps to follow when building a Redux addon library: only use middleware if really needed, keep things simple, and encapsulate abstractions. Shows a particularly good example of using selectors in the library to encapsulate state lookups, and allowing the end user to initialize the selectors so that the data can be mounted anywhere in the state tree the user wants. + +- **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. #### Variations on Redux Architectures @@ -477,4 +489,12 @@ - **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 + Covers building a Redux-based client that receives update messages from an Elixir server. + +- **Reslice - Yet Another Way of Managing Scale in React and Redux** + https://medium.com/@mike.es6.programmer/reslice-yet-another-way-of-managing-scale-in-react-and-redux-223971139d6b + Discusses the Reslice toolkit, how it wraps up Redux+Reselect+React-Redux, and how it differs from a standard React+Redux architecture. + +- **"How to deal with dumb REdux views that import containers?"** + https://www.reddit.com/r/javascript/comments/7eavyx/how_to_deal_with_dumb_redux_views_that_import/ + Interesting discussion on ways to organize nested Redux-connected components for reusability. \ No newline at end of file diff --git a/redux-middleware.md b/redux-middleware.md index ce2201b..caf124e 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -46,6 +46,10 @@ http://www.slideshare.net/visualengin/workshop-22-reactredux-m A slideshow that explains how Redux middleware work, with several helpful visualizations +- **Understanding Redux Middleware and Writing Custom Ones** + 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. + #### Middleware Techniques diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index e26470f..f8f8e79 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -196,4 +196,8 @@ - **Usage of Reselect in a React-Redux Application** https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application - Discusses the importance of memoized selectors for performance, and good practices for using Reselect. \ No newline at end of file + Discusses the importance of memoized selectors for performance, and good practices for using Reselect. + +- **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 diff --git a/redux-side-effects.md b/redux-side-effects.md index a98e946..9be46a0 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -281,6 +281,10 @@ 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 +- **Taming Redux with Sagas** + 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 diff --git a/redux-techniques.md b/redux-techniques.md index e5ca041..3f4c300 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -144,6 +144,10 @@ 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. +- **A Simple Way to Implement Timers and Timeouts in Redux** + https://spin.atomicobject.com/2017/11/20/timers-timeouts-redux/ + A quick example of storing a "current time" value and timers as "expire times". + #### Reducing Boilerplate @@ -180,6 +184,22 @@ - **ARC - Simplifying async requests in Redux apps** https://medium.com/front-end-hacking/arc-simplifying-async-requests-in-redux-apps-e8052b874216 Describes the "async action" pattern commonly used with Redux, and how the ARC library can simplify the process of generating actions, action creators, and reducers that work with async actions. +- **Abstracting Vuex/Redux Action Patterns** + https://medium.com/coding-stones/abstracting-vuex-redux-action-patterns-8df36b0e2fcc + Examples of generating action types and action creators that use similarly-formatted actions (such as FETCH_DATA_REQUEST/SUCCESS/ERROR). + +- **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 + 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'"** + https://www.reddit.com/r/reactjs/comments/7069ct/i_love_redux_but_i_hate_the_boilerplate/dn1mj4s/ + A great comment on what "boilerplate" actually means, how people optimize too much for initial dev time, and how Redux improves long-term maintainability. + +- **How to delete hundreds (or thousands) of lines of ReduxJS code** + 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. #### Network Management @@ -208,3 +228,7 @@ - **Redux Websocket Integration** https://medium.com/@ianovenden/redux-websocket-integration-c1a0d22d3189 A summary of one possible approach for integrating Websocket functionality into a React/Redux application architecture. + +- **What's the best way to store tokens in Redux?** + https://michaelwashburnjr.com/whats-the-best-way-to-store-tokens-in-redux/ + Discusses pros and cons of storing auth tokens in app state vs localStorage, and what code should be responsible for handling the tokens. \ No newline at end of file diff --git a/redux-tutorials.md b/redux-tutorials.md index cad22f3..5cfc5b8 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -162,6 +162,10 @@ 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. +- **Using Redux with React** + https://www.kirupa.com/react/introduction_to_redux.htm + An excellent follow-up to the previous article, with explanations of why Redux is helpful in a React app, and diagrams showing the data flow. + - **TLTR; Redux** https://medium.com/@nicotsou/tltr-redux-e4fc30f87e4a A clear descriptive overview of Redux's background, core concepts, principles, and usage with React. Also describes the basics of async behavior, testing, and debugging. @@ -295,6 +299,10 @@ - **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 + +- **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. #### Redux Implementation Walkthroughs diff --git a/redux-without-react.md b/redux-without-react.md index 3af5018..93293fb 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -119,3 +119,7 @@ - **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 + +- **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. diff --git a/static-typing.md b/static-typing.md index f252559..67b887c 100644 --- a/static-typing.md +++ b/static-typing.md @@ -232,6 +232,10 @@ https://medium.com/javascript-inside/back-to-the-basics-using-react-flow-pt-2-99292993829f A series that demonstrates using Flow to add static typing for a Tic-Tac-Toe game +- **Using TypeScript with Redux** + https://dzone.com/articles/using-typescript-with-redux + Examples of basic TS usage with Redux, and setting up your own type declarations for better type safety. + #### Advancing Typing Techniques diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index a93fab4..b1cb667 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -190,6 +190,10 @@ https://medium.com/front-end-hacking/lazy-loading-with-react-redux-and-webpack-2-35ad6fc1b640 An excellent pair of posts that cover ways to structure components in terms of features, load them at runtime using Webpack's dynamic importing, and apply the same principles to loading Redux feature logic. +- **How to reduce your bundle size by automatically getting your dependencies from a CDN** + https://medium.com/comparethemarket/how-to-reduce-your-bundle-size-by-automatically-getting-your-dependencies-from-a-cdn-96b25d1e228 + A quick example of using the `dynamic-cdn-webpack-plugin` to have your bundle reference libraries from the Unpkg CDN, rather than including them in the main bundle. + #### Bundle Sizes and Visualization