From 31dc6570d61a6ab1f05c57ece69ab35da344aca9 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 16 Jul 2017 14:37:29 -0400 Subject: [PATCH] Updates, 2017-07-16 --- README.md | 1 + basic-concepts.md | 4 ++++ es6-features.md | 4 ++++ pros-cons-discussion.md | 6 ++++++ react-component-patterns.md | 12 ++++++++++++ react-implementation.md | 5 +++-- react-native.md | 6 +++++- react-redux-testing.md | 7 +++++++ react-routing.md | 4 ++++ react-styling.md | 4 ++++ react-techniques.md | 10 ++++++++++ redux-architecture.md | 6 +++++- redux-side-effects.md | 4 ++++ redux-techniques.md | 12 ++++++++++++ redux-tutorials.md | 14 ++++++++++++++ webpack-advanced-techniques.md | 8 ++++++++ webpack-tutorials.md | 8 ++++++++ 17 files changed, 111 insertions(+), 4 deletions(-) create mode 100644 react-techniques.md diff --git a/README.md b/README.md index ec6b41a..dce8c71 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ You might also want to check out my categorized list of Redux-related addons, li - [Immutable Data](./immutable-data.md) - [React/Redux Testing](./react-redux-testing.md) - [React Native](./react-native.md) +- [React Tips and Techniques](./react-techniques.md) #### Advanced Topics diff --git a/basic-concepts.md b/basic-concepts.md index acff781..eff4a25 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -99,6 +99,10 @@ - **Top Javascript Frameworks and Topics to Learn in 2017** https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711 Eric Elliott gives some solid advice on what concepts, tools, and technologies are most valuable to learn today, as well as what related technologies are useful but optional. + +- **How to Learn React: A Five-Step Plan** + https://www.lullabot.com/articles/how-to-learn-react + A good set of suggested steps to follow and tools to use for learning React and Redux. #### General Suggestions for Learning diff --git a/es6-features.md b/es6-features.md index 6d115ee..a36d7b1 100644 --- a/es6-features.md +++ b/es6-features.md @@ -208,6 +208,10 @@ http://trycatchfail.com/blog/?tag=/promises An excellent series of articles describing the basics of promises, and listing a variety of useful techniques for using promises to solve problems. +- **Escape from Callback Mountain: the "Functional River" pattern** + https://github.com/justsml/escape-from-callback-mountain/ + An opinionated suggested approach for writing promise callbacks to form a pipeline + #### Techniques diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index eed4ad2..36f580c 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -102,6 +102,12 @@ https://diessi.ca/blog/dont-blame-it-on-react-or-redux/ Some short but well-written thoughts that argue in favor of React and Redux's "do it yourself" / "don't prescribe how to solve everything" approach, and that blaming them for bad app design or boilerplate is wrong. +- **What's So Great About Redux?** + https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b + https://storify.com/acemarke/redux-pros-cons-and-limitations + 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. + #### Comment Threads and Discussions diff --git a/react-component-patterns.md b/react-component-patterns.md index 2b28fdd..e7d64d3 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -192,6 +192,10 @@ https://medium.com/@thejasonfile/callback-functions-in-react-e822ebede766 Some basic explanations of how a React app uses callback functions to communicate from children to parents +- **How to use React's Provider pattern** + https://www.robinwieruch.de/react-provider-pattern-context/ + Walks through the concepts and implementation of a "Provider" component that makes data available to deeply nested children, similar to the ones that come with Redux and MobX + #### Component Categories @@ -335,6 +339,14 @@ https://www.robinwieruch.de/gentle-introduction-higher-order-components/ An excellent article demonstrating several ways to use HOCs to manage conditional rendering logic in a reusable way. +- **Why Higher Order Components Make Sense** + https://medium.com/javascript-inside/why-higher-order-components-make-sense-fe4145b4e305 + Several examples and some discussion of how HOCs can be used to compose and transform behavior. + +- **Simple explanation of Higher-Order Components** + http://blog.jakoblind.no/simple-explanation-of-higher-order-components-hoc/ + A short, easy-to-read explanation of the basic concepts and examples of HOCs. + #### Wrapping Non-React Code diff --git a/react-implementation.md b/react-implementation.md index 0b2ed0d..0e6d3db 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -197,5 +197,6 @@ https://www.youtube.com/watch?v=crM1iRVGpGQ Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase. - - +- **A look inside React Fiber** + 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. \ No newline at end of file diff --git a/react-native.md b/react-native.md index 6ed7cbc..344c4a2 100644 --- a/react-native.md +++ b/react-native.md @@ -83,4 +83,8 @@ - **6 Tips You Want to Know about React Native Performance** https://www.simplytechnologies.net/blog/2017/6/6/6-tips-you-want-to-know-about-react-native-performance - Several useful suggestions for improving RN performance, including RN-specific suggestions like using FlatList instead of ListView, and pushing animations into native code. \ No newline at end of file + Several useful suggestions for improving RN performance, including RN-specific suggestions like using FlatList instead of ListView, and pushing animations into native code. + +- **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 diff --git a/react-redux-testing.md b/react-redux-testing.md index 14691ac..1a2e946 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -214,6 +214,13 @@ - **Testing Redux: Async Action Creators** http://joeellis.la/testing-redux-actions/ Describes approaches for testing async action creators, particularly thunks that make AJAX calls. + +- **A guide to TDD a React/Redux TodoList App** + https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-1-b8a200bb7091 + https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-2-8d4cb2dc154c + https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-3-f25c2289c54 + https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-4-edb62e113c9b + A 4-part series that demonstrates a Test-Driven Development approach to writing a React/Redux app, with detailed explanations of what each test example does. diff --git a/react-routing.md b/react-routing.md index ee6a5d9..6040ba3 100644 --- a/react-routing.md +++ b/react-routing.md @@ -35,6 +35,10 @@ https://tylermcginnis.com/build-your-own-react-router-v4/ Tyler McGinnis, a React Training partner, walks through the process of building a miniature version of React Router v4 to help explain its concepts and implementation. +- **A little bit of history** + https://medium.com/@pshrmn/a-little-bit-of-history-f245306f48dd + A deep look at the "history" library, which is the core of React Router and used by other routing libraries as well. + #### Routing with Redux diff --git a/react-styling.md b/react-styling.md index c52c1ce..1033e20 100644 --- a/react-styling.md +++ b/react-styling.md @@ -138,6 +138,10 @@ https://medium.com/@lvarayut/styled-components-in-action-723852f2a93d A tutorial that walks through the main goals and concepts of Styled-Components, with examples +- **Emotion: The Next Generation of CSS-in-JS** + https://medium.com/@tkh44/emotion-ad1c45c6d28b + The author of the Emotion library gives an overview of its principles, benchmarks, and uses. + #### Techniques and Examples diff --git a/react-techniques.md b/react-techniques.md new file mode 100644 index 0000000..67815be --- /dev/null +++ b/react-techniques.md @@ -0,0 +1,10 @@ +### React Tips and Techniques + + +- **Intro to Debugging React Applications** + https://medium.com/@baphemot/intro-to-debugging-reactjs-applications-67cf7a50b3dd + An excellent introduction to the basic tools, concepts, and approaches for debugging React apps, including the browser's DevTools console, network tab, and source debugger, as well as the React DevTools. + +- **Get your React.js application translated with style** + https://medium.com/@jamuhl/get-your-react-js-application-translated-with-style-4ad090aefc2c + A short opinionated intro to several aspects of handling translation in a React app, by the author of a React internationalization library. \ No newline at end of file diff --git a/redux-architecture.md b/redux-architecture.md index 0a940a3..f664a12 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -406,4 +406,8 @@ - **Agile Front End Enterprise Architecture with React, Redux, and Vanilla JS** https://medium.com/shiftgig-blog/agile-front-end-architectures-with-react-redux-and-vanilla-js-23f4e5626e01 - A description of how ShiftGig organizes their architecture, including a combination of Redux usage with sagas, and traditional OOP approaches like Model classes and Services. \ No newline at end of file + A description of how ShiftGig organizes their architecture, including a combination of Redux usage with sagas, and traditional OOP approaches like Model classes and Services. + +- **NgRx: Patterns and Techniques** + https://blog.nrwl.io/ngrx-patterns-and-techniques-f46126e2b1e5 + Describes a variety of patterns and approaches for using the NgRx library (a clone of Redux built with RxJS and commonly used with Angular). The labels and categories given for side effects approaches, like "content-based decider", "content enricher", etc, can be applied to existing Redux middlewares as well. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index 4f9ab8d..f8b2efc 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -213,6 +213,10 @@ https://medium.com/@jamiedixon/handling-errors-in-redux-saga-using-either-12671bc6cf90 Demonstrates an approach to handling error cases in Flux Standard Actions using the functional programming "Either" concept. +- **Writing more testable code with Redux-Saga** + https://medium.com/grey-frogs/writing-more-testable-code-with-redux-saga-c1561f995225 + Gives examples of some sagas for managing complex async query handling logic, and how to use the redux-saga-test-plan library to help test their behavior. + #### Other Side Effect Approaches diff --git a/redux-techniques.md b/redux-techniques.md index 063796f..82b4fa1 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -95,6 +95,10 @@ http://www.guyzissman.com/posts/pipe-reducers/ Some short but helpful examples of how currying functions can be used to reuse reducer logic for similar use cases. +- **Higher Order Reducers - It just sounds scary** + https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705 + Explains how reducers can be composed like Lego bricks to create reusable and testable reducer logic. + @@ -243,6 +247,14 @@ https://www.andrewfong.com/blog/2017/07/03/react-redux-set-local/ Discussion of the rationale and implementation of a library for connecting isolated portions of a Redux store state to a component while maintaining separation between presentation and state management. +- **Making Toast from Scratch in React-Redux** + https://spin.atomicobject.com/2017/07/12/react-redux-toast/ + A short tutorial that shows how to build your own "toast" notifications in React+Redux, with a link to the resulting implementation. + +- **Toast notification system in a React/Redux application** + https://atech.blog/natterly/toast-notification-system-in-a-react-redux-application + The Natterly team walks through how they built a Redux-connected toast notification implementation. + #### Redux and Forms diff --git a/redux-tutorials.md b/redux-tutorials.md index 981c3b8..28806de 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -297,6 +297,20 @@ - **Reading Redux: `createStore`** https://engineering.universe.com/reading-redux-ca160163867e A guided walkthrough of the code for Redux's `createStore` function + +- **Implement React Redux from Scratch** + https://medium.com/@kj_huang/implementation-of-react-redux-part-1-411b971a9b5b + https://medium.com/@kj_huang/implementation-of-react-redux-part-2-633441bd3306 + https://medium.com/@kj_huang/implementation-of-react-redux-part-3-dc54fce9746a + A 3-part series that builds a slightly simplified version of the React-Redux v5 `connect` function to explain how it works. A good follow-up from Dan's "connect.js explained" gist, which shows the basic conceptual behavior of `connect`, while this one traces through the internals. + +- **"I use React and Redux but never React-Redux, what am I missing out on?"** + https://www.reddit.com/r/javascript/comments/6hperk/i_use_react_and_redux_but_never_reactredux_what/dj0fywb/ + A response I wrote to someone who asked why they should use the React-Redux `connect` function instead of subscribing to the store manually, where I described the benefits of using `connect` instead of writing manual subscription code. + +- **"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. #### Paid Courses and Books diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 60ac387..44912f1 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -86,6 +86,10 @@ https://iamakulov.com/notes/webpack-front-end-size-caching/ Covers a variety of ways to improve bundle sizes, including minification with Uglify, tree shaking imports, referencing external libraries, and more. +- **Webpack 3 + React - Production Build Tips** + https://medium.com/netscape/webpack-3-react-production-build-tips-d20507dba99a + General advice for improving Webpack builds, including code splitting, minification, and several more. Includes a complete Webpack config file at the end with the proper settings. + #### Code Splitting and Chunking @@ -372,3 +376,7 @@ - **source-map-explorer** https://github.com/danvk/source-map-explorer Analyze and debug JavaScript (or Sass or LESS) code bloat through source maps. Help determine which file each byte in your minified code came from. + +- **bundle-buddy** + https://github.com/samccone/bundle-buddy + Bundle Buddy is a tool to help you find source code duplication across your javascript chunks/splits. This enables you to fine tune code splitting parameters to reduce bundle invalidation rates as well as improve repeat page load performance. diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 2cc89be..446b8a7 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -57,6 +57,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac http://sokra.github.io/slides/webpack2/#3 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. +- **Webpack Academy** + https://webpack.academy/ + Courses on Webpack concepts and usage, from the Webpack team. + #### Basic Tutorials @@ -246,6 +250,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://dev.to/nitishdayal/stages-of-learning-webpack-pt-3---sourcemaps-loaders--plugins Shows how to configure sourcemaps for debugging, use a loader to add TypeScript support, and add a plugin to generate an HTML index page for the bundle. +- **Let's talk about our Webpack config files** + https://engineering.tripping.com/lets-talk-about-our-webpack-config-files-89a6ac0e0cf9 + The Tripping.com team shows off the contents of their Webpack production config file, explains the capabilities they want to have, and how each piece of the config file implements those capabilities. + #### Webpack Configuration Utilities