From 42e24acd2dfd21a8e1f22496fce40cf166d78b8b Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 5 Nov 2017 15:21:56 -0500 Subject: [PATCH] Updates, 2017-11-05 --- es6-features.md | 6 +++++- git-resources.md | 9 +++++++++ project-structure.md | 9 ++++++++- pros-cons-discussion.md | 4 ++++ react-ajax.md | 1 + react-architecture.md | 4 ++++ react-component-composition.md | 24 +++++++++++++++++++++++- react-component-patterns.md | 18 +++++++++++++++++- react-deployment.md | 6 +++++- react-implementation.md | 7 ++++++- react-performance.md | 3 ++- react-redux-testing.md | 26 +++++++++++++++++++++++++- react-server-rendering.md | 11 ++++++++++- react-styling.md | 4 ++++ react-techniques.md | 4 ++++ redux-architecture.md | 18 +++++++++++++++++- redux-reducers-selectors.md | 14 +++++++++++++- redux-side-effects.md | 29 ++++++++++++++++++++--------- redux-techniques.md | 4 ++++ redux-tutorials.md | 12 ++++++++++++ redux-without-react.md | 5 +++++ static-typing.md | 19 +++++++++++++++++-- using-react-with-es6.md | 4 ++++ webpack-advanced-techniques.md | 9 +++++++++ webpack-tutorials.md | 17 +++++++++++------ 25 files changed, 239 insertions(+), 28 deletions(-) diff --git a/es6-features.md b/es6-features.md index e4852df..3db87f8 100644 --- a/es6-features.md +++ b/es6-features.md @@ -307,4 +307,8 @@ - **ES6 Modules in Node Today** https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b - John-David Dalton, author of Lodash, announces his new ES6 module loader, which enables ES module usage in Node right now. \ No newline at end of file + John-David Dalton, author of Lodash, announces his new ES6 module loader, which enables ES module usage in Node right now. + +- **State of Modules in JavaScript** + https://www.sitepen.com/blog/2017/10/26/state-of-modules-in-javascript/ + Covers the key features of ES modules, including basic syntax, syntax for importing/exporting/re-exporting, dynamic imports, debugging, bundling, and more. \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index b6fa4f5..a35bba1 100644 --- a/git-resources.md +++ b/git-resources.md @@ -56,6 +56,11 @@ - **Learn Enough Git to Be Dangerous** https://www.learnenough.com/git-tutorial A tutorial that teaches practical use of Git basics, Github, and Git workflows. + +- **Git Magic** + https://crypto.stanford.edu/~blynn/gitmagic/ + An extensive Git tutorial that teaches usage instructions first, and works its way up to advanced Git techniques and concepts. + #### Tips and Useful Info @@ -103,6 +108,10 @@ https://sentheon.com/blog/git-cheat-sheet.html A large cheat sheet / reference for a variety of Git usage topics, including workflow, configuration, .gitignore syntax, different categories of commands, and more. +- **Git Flight Rules** + https://github.com/k88hudson/git-flight-rules + A guide for Git users about what to do when things go wrong. Covers topics like editing commits, staging and unstaging files, fixing branches, rebasing/merging, and much more. + ## Specific Techniques diff --git a/project-structure.md b/project-structure.md index ac9a15b..cb01355 100644 --- a/project-structure.md +++ b/project-structure.md @@ -95,4 +95,11 @@ - **Fractal: A React app structure for infinite scale** https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af - \ No newline at end of file + +- **Domain directory structure for React apps - why it's worth trying** + https://tech.offgrid-electric.com/domain-directory-structure-for-react-apps-why-its-worth-trying-b3855ee77a1e + Discusses experience with the "A Better File Structure" approach, and gives advice on best practices for import paths, creating sub-domains, and more. + +- **The 100% correct way to structure a React app (or why there's no such thing** + https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed + An extensive set of pragmatic thoughts on good practices for React project structure. Tries to quantify time spent on activities like creating new files and switching editor tabs, and gives some opinions on which patterns are more useful. \ No newline at end of file diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 0f7d9a1..cd8a574 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -59,6 +59,10 @@ https://rangle.io/resources/why-redux-future-of-angular-react/ A webinar video from Rangle.io, discussing the benefits of functional components and Redux for state management, and how Redux can be used with both React and Angular. +- **Justifying React to the Business** + 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. + #### Redux/Flux Comparisons diff --git a/react-ajax.md b/react-ajax.md index 24b6aa2..40c6968 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -79,6 +79,7 @@ https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a https://medium.com/@gcanti/slaying-a-ui-antipattern-with-flow-5eed0cfb627b https://medium.com/@marsbergen/nice-pattern-for-redux-state-b8641b6ff9d1 + https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-react-64a3b98242c Articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles. - **Better data fetching with RemoteDataJS** diff --git a/react-architecture.md b/react-architecture.md index e3b6173..08f43cd 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -260,6 +260,10 @@ https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594 A list of important design decisions to consider when starting a React project, including use of a starter kit, preferred component definition approach, state management, styling, and more. +- **Is React SOLID?** + https://dev.to/kayis/is-react-solid-630 + Looks at the SOLID architectural principles, and discusses how those apply to React components. + #### React Architecture diff --git a/react-component-composition.md b/react-component-composition.md index c1fa619..73a9608 100644 --- a/react-component-composition.md +++ b/react-component-composition.md @@ -87,6 +87,16 @@ http://blog.jakoblind.no/real-world-higher-order-components-hocs/ Several useful examples of actual HOCs, such as adding a hidden prop, providing toggle functionality, and only showing a component if a feature flag is turned on. +- **Composing React components through props transference** + https://blog.echobind.com/composing-react-components-through-property-transference-d8bc2dbecef5 + Quick examples of how to use `React.children.map()` and `React.cloneElement()` to pass props onto arbitrary child elements. + +- **Higher Order Components in React** + https://www.sitepen.com/blog/2017/08/15/higher-order-components-in-react/ + Shows an example of a React app that needs to authenticate routes, and how a HOC can help handle that in a reusable way. Also includes example HOCs for A/B-testing features, collecting metrics, and injecting props. + + + #### Render Props/Function As Child @@ -106,6 +116,14 @@ https://trevordmiller.com/blog/react-render-callback-components Examples of how to use the "render callback" / "function as a child" pattern to extract common logic for reuse. +- **Declarative Components in React** + https://blog.echobind.com/declarative-components-in-react-b21ced9895b5 + Demonstrates ways to make reusable flexible components using the "function as a child" pattern. + +- **Upgrade your React.js HOC with renderProps** + 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. + #### Functional Composition @@ -172,4 +190,8 @@ - **Solving the problems of Higher Order Components without throwing the baby out with the bathwater** https://hackernoon.com/solving-the-problems-of-higher-order-components-without-throwing-the-baby-out-with-the-bathwater-40ddc72df5aa - A response to some criticisms of HOCs, such as indirection and naming collisions, showing some ways to compose HOCs to avoid the issues. \ No newline at end of file + A response to some criticisms of HOCs, such as indirection and naming collisions, showing some ways to compose HOCs to avoid the issues. + +- **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 diff --git a/react-component-patterns.md b/react-component-patterns.md index 22d1fe8..2614e7d 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -43,6 +43,10 @@ http://lucasmreis.github.io/blog/simple-react-patterns/ A clearly written set of examples that showcase common React component patterns like "container/presentational", "Higher-Order Components", "Function-as-Child" / "render props", and "providers". +- **React Component Patterns** + https://medium.com/gitconnected/react-component-patterns-ab1f09be2c82 + A summary of common React component patterns with short examples. + #### Component Definition Approach Comparisons @@ -216,6 +220,14 @@ https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17 Some short examples of how to pass data between parents, children, and siblings. +- **How to structure components in React?** + https://reallifeprogramming.com/how-to-structure-components-in-react-54fc43e71546 + Compares multiple ways to pass data from a parent to a child, including no props, passing a value object, passing required props, passing a map of props, and using `children`. + +- **Context 101** + http://reactboston.surge.sh/#/ + Slides from Ken Wheeler's ReactBoston talk on React's `context` feature. Covers what context is, why you might want to use it, and when/ how to use it/ + #### Component Categories @@ -279,6 +291,10 @@ https://reactarmory.com/answers/how-should-i-separate-components Describes four categories of React components ("view", "control", "controllers", and "containers"), and gives suggestions on when and how to factor out new components. +- **Refactoring: Moving API calls to a higher-order component** + 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. + @@ -402,7 +418,7 @@ - **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. - + #### Other Component Patterns diff --git a/react-deployment.md b/react-deployment.md index 5a9d713..2824d3f 100644 --- a/react-deployment.md +++ b/react-deployment.md @@ -43,4 +43,8 @@ - **Deploy a React app with SASS using Nginx** http://zabana.me/notes/build-deploy-react-app-with-nginx.html - Covers several important notes for adding SASS to an ejected CRA app, creating a deploy step using rsync, and setting up the Nginx web server to serve the app. \ No newline at end of file + Covers several important notes for adding SASS to an ejected CRA app, creating a deploy step using rsync, and setting up the Nginx web server to serve the app. + +- **How to deploy a React application: an in depth overview of various options to deploy** + https://codebrahma.com/deploy-react-application-depth-overview-various-options-deploy/ + A detailed look at what deployment for production means, what files are involved, how to properly build an app for production, and places to host a react app. \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index 30cc44e..7f55338 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -200,6 +200,10 @@ http://www.benmvp.com/slides/2017/reactboston/fiber.html#/ Slides from Ben Ilegbodu's ReactBoston presentation, which summarize the changes in React 16. +- **What's new in React 16?** + https://www.robinwieruch.de/what-is-new-in-react-16/ + A very useful look at the new user-facing features in React 16, with code examples. + - **React Fiber Architecture** https://github.com/acdlite/react-fiber-architecture A description of React's new core algorithm, React Fiber @@ -218,4 +222,5 @@ - **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 + Traces through the source code for React 16 / React Fiber, starting with the main `render()` function and diving down from there through the system. + diff --git a/react-performance.md b/react-performance.md index 175115d..82be592 100644 --- a/react-performance.md +++ b/react-performance.md @@ -147,7 +147,8 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) - **Optimizing React Rendering** https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02 https://flexport.engineering/optimizing-react-rendering-part-2-7b2e9a9ea21f - Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`. Has a link to further discussion on HN. Part 2 describes how they built a library called `mutation-sentinel` to detect accidental mutations. + https://flexport.engineering/ending-the-debate-on-inline-functions-in-react-8c03fabd144 + Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`. Has a link to further discussion on HN. Part 2 describes how they built a library called `mutation-sentinel` to detect accidental mutations, and Part 3 covers a Babel plugin for optimizing inline functions in render methods. - **Introducing react-wastage-monitor** https://blog.listium.com/introducing-react-wastage-monitor-404565d679b2 diff --git a/react-redux-testing.md b/react-redux-testing.md index 3ecc4d7..6756cb9 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -133,6 +133,13 @@ http://acco.io/a-practical-guide-to-testing-react-apps/ An excellent, comprehensive guide to React testing, covering some of the major tools, types of tests, how to write good React tests, and more. +- **Testing React Components** + https://nerdblog.pl/post/166842840969/testing-react-components + An extensive look at different ways to test React components using the Enzyme library. Discusses Enzyme's shallow and full rendering methods, methods to inspect the contents of a component, and different forms of tests like snapshots, rendering tests, and behavior tests. + +- **Creating a React Component using TDD** + http://www.alayor.com/2017/Creating-a-React-Component-using-TDD + Demonstrates writing a simple React component using the TDD "red-green" testing approach. #### Redux @@ -240,6 +247,7 @@ - **Test-Driven Development with React and Redux, using Redux TDD** https://medium.freecodecamp.org/test-driven-development-with-react-and-redux-using-redux-tdd-3fd3be299918 + https://hackernoon.com/redux-tdd-a-deep-dive-344cd7682a54 Describes using a specific set of helper functions to drive testing the behavior and data flow of a React+Redux application. - **Writing tests for redux-observable** @@ -249,6 +257,14 @@ - **End-to-end testing on a React-Redux app** https://medium.com/@darioghilardi/end-to-end-testing-on-a-react-redux-app-10f5a26f2f61 Some high-level thoughts of how to best implement end-to-end testing in a way that works with React-Redux apps. Discusses use of Cypress, real APIs vs mock APIs, and some Rails-specific setup. + +- **How to Snapshot Test Everything in Your Redux App with Jest** + https://hackernoon.com/how-to-snapshot-test-everything-in-your-redux-app-with-jest-fde305ebedea + Detailed examples of how to test React components, Redux reducers, connected components, and selectors using Jest snapshot tests. + +- **Unit Testing React, Redux, Selectors, and Epics** + https://codeburst.io/unit-testing-react-redux-selectors-and-epics-664e7b4798a8 + Quick examples of ways to different parts of a React+Redux app. @@ -328,4 +344,12 @@ - **Javascript unit testing frameworks: Comparing Jasmine, Mocha, AVA, Tape, and Jest** https://raygun.com/blog/javascript-unit-testing-frameworks/ - A useful comparison and summary of the major unit testing frameworks available \ No newline at end of file + A useful comparison and summary of the major unit testing frameworks available + +- **Effective Snapshot Testing** + https://blog.kentcdodds.com/effective-snapshot-testing-e0d1a2c28eca + Kent C Dodds looks at the pros and cons of using snapshot testing, and how to make snapshot tests more useful. + +- **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 diff --git a/react-server-rendering.md b/react-server-rendering.md index c835fcf..7680755 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -73,4 +73,13 @@ - **Case study of SSR with React in a large e-commerce app** http://blog.jakoblind.no/case-study-of-ssr-with-react-in-a-large-e-commerce-app/ - A set of tips and lessons learned from implementing SSR in an existing React app over the course of several years, including some concrete implementation details. \ No newline at end of file + A set of tips and lessons learned from implementing SSR in an existing React app over the course of several years, including some concrete implementation details. + +- **Scaling React Server-Side Rendering** + http://arkwright.github.io/scaling-react-server-side-rendering.html + A long, detailed look at how a team implemented React+Redux SSR on top of an existing monolithic application. Includes discussion of many real-world issues experienced, such as load balancing and component caching. + +- **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 diff --git a/react-styling.md b/react-styling.md index 9655992..0591ecd 100644 --- a/react-styling.md +++ b/react-styling.md @@ -162,6 +162,10 @@ https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c A talk transcript that discusses the history and future direction of the Styled-Components library, including how it works, improvements in v2, and plans for interoperability between CSS-in-JS libraries. +- **The performance of styled React components** + 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. + #### Techniques and Examples diff --git a/react-techniques.md b/react-techniques.md index baea6c9..b5dc849 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -23,6 +23,10 @@ https://tech.gadventures.com/translating-react-apps-99dede52d924 Discusses how to use the React-Intl library to add translations to a React app +- **Lessons from migrating a large codebase to React 16** + 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. + #### Security diff --git a/redux-architecture.md b/redux-architecture.md index f144073..1beef04 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -272,6 +272,18 @@ - **Chart the Stock Market with React, Redux, React-Vis, and Socket.io** https://medium.com/@ddcreationstudi/chart-the-stock-market-with-react-redux-react-vis-and-socket-io-18caf312693c An overview of approaches used and lessons learned in writing a real-time stock market charting example app. Not a tutorial specifically, but some useful ideas for structuring things. + +- **Growing Pains: Migrating Slack's Desktop App to BrowserView** + https://slack.engineering/growing-pains-migrating-slacks-desktop-app-to-browserview-2759690d9c7b + The Slack team discusses how they use Redux in an Electron app, including use of the `electron-redux` middleware for syncing actions between Redux stores in different Electron processes and use of `redux-observable` for managing side effects. + +- **Redux: Architecting and scaling a new web app at the NY Times** + https://www.youtube.com/watch?v=lI3IcjFg9Wk + A talk from an NY Times developer describing how they scaled a React+Redux app to over a million users per month. + +- **"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. #### Encapsulation and Reusability @@ -439,4 +451,8 @@ - **"Anyone using Redux with a render prop?"** 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. \ No newline at end of file + 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. + +- **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-reducers-selectors.md b/redux-reducers-selectors.md index e865cf4..43ebaf3 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -71,6 +71,10 @@ https://docs.google.com/presentation/d/1JA9hhBgx9-k0sHO9UVSTiD1WTBvsZJ13cWIudUao9vE/edit#slide=id.gcb9a0b074_1_0 A slideshow that demonstrates the basic approach for dynamically adding reducers at runtime. +- **State Snapshots with Redux** + 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. + #### Selectors and Normalization @@ -168,4 +172,12 @@ - **How to use Normalizr to organize data in a Redux store** https://dashbouquet.com/blog/frontend-development/using-normalizr-to-organize-data-in-stores-practical-guide https://dashbouquet.com/blog/frontend-development/using-normalizr-to-organize-data-in-store-part-2 - A 2-part post with examples of normalizing nested data using Normalizr, using Redux-Saga to control the fetching logic, and denormalizing the data for use in the UI. \ No newline at end of file + A 2-part post with examples of normalizing nested data using Normalizr, using Redux-Saga to control the fetching logic, and denormalizing the data for use in the UI. + +- **React + Reselect - Memoized Selectors for Efficient Rendering** + https://spin.atomicobject.com/2017/10/24/react-reselect/ + Introduces the Reselect library for memoized selector functions, and describes how it can be used apart from Redux. + +- **Introducing @ngrx/entity** + https://medium.com/ngrx/introducing-ngrx-entity-598176456e15 + Describes an NgRX-based library for generating reducer operations and selectors for normalized entities. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index 1bcc3c2..d17f083 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -1,7 +1,7 @@ ### Redux Side Effects -#### Basic Concepts and Thunks +#### Basic Concepts - **Stack Overflow: Dispatching Redux Actions with a Timeout** http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559 @@ -27,14 +27,21 @@ https://anyperk.engineering/im-lauren-and-i-m-a-frontend-apprentice-here-at-anyperk-a1a40106d231 A quick introduction to some of the libraries that can be used to manage asynchronous behavior in Redux. + +#### Thunks + +- **What the heck is a "thunk"?** + https://daveceddia.com/what-is-a-thunk/ + A quick explanation for what the word "thunk" means in general, and for Redux specifically. + +- **Thunks in Redux: The Basics** + https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60 + A detailed look at what thunks are, what they solve, and how to use them. + - **A Dummy's Guide to Redux and Thunk in React** https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3 A tutorial that shows how to take a React component that does its own data fetching, and rework it to use accept data from Redux and use a thunk action creator instead. -- **What the heck is a "thunk"?** - https://daveceddia.com/what-is-a-thunk/ - A quick explanation for what the word "thunk" means in general, and for Redux specifically.. - - **Understanding how redux-thunk works** https://medium.com/@gethylgeorge/understanding-how-redux-thunk-works-72de3bdebc50 An attempt to explain both redux-thunk and Redux's applyMiddleware enhancer, by rewriting the original implementations to add logging and rework names for ease of understanding. @@ -51,6 +58,10 @@ https://medium.com/collaborne-engineering/returning-promises-from-redux-action-creators-3035f34fa74b Shows how returning a promise from a thunk action creator allows the caller to chain off the promise and execute code after the action creator is complete. +- **ReactCasts #10: Redux Thunk Tricks** + https://www.youtube.com/watch?v=xihoZZU0gao + An excellent screencast that covers three useful tips for use of redux-thunk: thunk return values, multi-dispatch, and when to use `getState` + #### Side Effect Approach Comparisons @@ -99,10 +110,6 @@ http://blog.jakegardner.me/redux-thunk-vs-saga/ A couple quick examples showing how to use thunks and sagas for the same task -- **ReactCasts #10: Redux Thunk Tricks** - https://www.youtube.com/watch?v=xihoZZU0gao - An excellent screencast that covers three useful tips for use of redux-thunk: thunk return values, multi-dispatch, and when to use `getState` - - **Redux Thunks Dispatching Other Thunks - Discussion and Best Practices** https://medium.com/@talkol/redux-thunks-dispatching-other-thunks-discussion-and-best-practices-dd6c2b695ecf Some excellent thoughts on when it's okay to have a thunk dispatch another thunk, and other possible approaches. @@ -262,6 +269,10 @@ https://goshakkk.name/detect-state-change-redux-saga/ Shows a simple but useful technique for running saga behavior based on state changes rather than just dispatched actions. +- **Common patterns with Redux-Saga** + 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. + #### Other Side Effect Approaches diff --git a/redux-techniques.md b/redux-techniques.md index 88b96d1..d681a4c 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -140,6 +140,10 @@ https://hackernoon.com/evil-things-you-do-with-redux-dispatch-in-updating-lifecycle-methods-ad116de882d4 Thoughts on the pros and cons of dispatching Redux actions in React lifecycle methods, such as causing cascades of re-renders and updates in other components. +- **Reducing Redux Boilerplate with redux-actions** + 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. + #### Network Management diff --git a/redux-tutorials.md b/redux-tutorials.md index 4074ffb..6a84298 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -138,6 +138,18 @@ https://www.sitepoint.com/redux-not-art-structuring-state-react-apps/ A pair of very readable tutorials for getting started with Redux. The first introduces Redux's core concepts while building out a small shopping cart example, and the second describes how to transition from storing data using React's `setState` over to putting it in Redux instead, and gives examples of managing real-world form state with Redux. +- **When do I know I'm ready for Redux?** + https://medium.com/dailyjs/when-do-i-know-im-ready-for-redux-f34da253c85f + Walks through a typical process of scaling up a React application, and how Redux can help solve common pain points with data flow. Has some really neat animated diagrams that illustrate how state updates interact with the React component tree. + +- **What Does Redux Do? (and when should you use it?)** + https://daveceddia.com/what-does-redux-do/ + An excellent summary of how Redux helps solve data flow problems in a React app. + +- **4 ways to dispatch actions with Redux** + 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. + #### Project-Based Tutorials diff --git a/redux-without-react.md b/redux-without-react.md index 1cbb6f0..9ab6907 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -52,6 +52,11 @@ https://dzone.com/articles/angular-form-validations-with-redux-for-multiple-r Examples of setting up Redux-based form validation in an Angular app. +- **Web app architecture based on Redux** + http://devblog.ztp.pt/web-app-architecture-based-on-redux/ + 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. + #### Other diff --git a/static-typing.md b/static-typing.md index a9c1778..f5e76c8 100644 --- a/static-typing.md +++ b/static-typing.md @@ -189,7 +189,7 @@ https://www.silviogutierrez.com/blog/react-redux-and-typescript-typed-connect/ Discusses a simpler set of typings for the `connect` function and how to use them with React. -- **A New Redux Action Pattern for TypeSCript 2.4+** +- **A New Redux Action Pattern for TypeScript 2.4+** https://spin.atomicobject.com/2017/07/24/redux-action-pattern-typescript/ Describes how to use the new features in TS 2.4, such as string enums, to simplify defining types for Redux actions. @@ -200,6 +200,13 @@ https://www.triplet.fi/blog/react-higher-order-components-hoc-using-typescript/ Examples of how to properly write React HOCs in TypeScript, including adding types. +- **React and TypeScript: The Basics** + https://spin.atomicobject.com/2017/10/31/react-typescript-basics/ + Covers important questions you might have when using React and TypeScript together, including approaches for project setup, adding NPM packages, typing React components, using Redux, and more. + +- **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. #### Advancing Typing Techniques @@ -265,4 +272,12 @@ - **Flow: What's the verdict?** https://amplitude.engineering/flow-whats-the-verdict-9a458ecde27f - Thoughts on some pros and cons of using FLow, including dealing with code that doesn't have types, and several specific use cases the Amplitude team has run into. \ No newline at end of file + Thoughts on some pros and cons of using FLow, including dealing with code that doesn't have types, and several specific use cases the Amplitude team has run into. + +- **Going Statically Typed with Flow** + https://labs.contactually.com/going-statically-typed-with-flow-72626ed86cec + Some thoughts on why Contactually opted to use Flow for their React+Redux app, including ease of integrating Flow into an existing app. + +- **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 diff --git a/using-react-with-es6.md b/using-react-with-es6.md index 8ee6241..0355b05 100644 --- a/using-react-with-es6.md +++ b/using-react-with-es6.md @@ -85,3 +85,7 @@ https://github.com/Klathmon/react-class-binder https://www.reddit.com/r/reactjs/comments/4p0ytu/i_made_a_small_package_to_easily_autobind_this_in/ Automatically bind methods defined in a React component using the ES2015 class syntax (similar to how React.createClass works). The Reddit comments have discussion on some differences between the various libs that implement autobinding. + +- **Reflective Bind** + https://github.com/flexport/reflective-bind + A Babel plugin that transforms use of inline functions in render methods so you don't have to worry about rendering performance. diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 345da76..8540670 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -166,6 +166,14 @@ https://gist.github.com/jballands/accc2ff19a3702685d469c612d6f0776 A gist that demonstrates using sagas to drive the loading of React components as needed, with some discussion in the comments of the best way to handle those components once they're received by the app. +- **Impress Your Friends with Code Splitting in React** + https://hackernoon.com/impress-your-friends-with-code-splitting-in-react-9f9a3ca2ae6e + Examples of using `async/await` and dynamic `import()` to lazy-load React components and display them after they're loaded. + +- **ECMAScript Asychronicity - dynamic import** + https://blog.eleven-labs.com/en/ecmascript-asynchronicity-dynamic-import/ + Recaps ES6 module behavior and use of Webpack's CommonsChunkPlugin, and describes how to lazy load code using `require.ensure` and the new dynamic `import()` capability. + #### Bundle Sizes and Visualization @@ -236,6 +244,7 @@ - **Put Your Webpack Bundle On A Diet** https://www.contentful.com/blog/2017/10/10/put-your-webpack-on-a-diet-part-1/ https://www.contentful.com/blog/2017/10/19/put-your-webpack-bundle-on-a-diet-part-2/ + https://www.contentful.com/blog/2017/10/27/put-your-webpack-bundle-on-a-diet-part-3/ A multi-part series that covers approaches for shrinking bundle size, ranging from simply using Webpack's -p flag up to advanced optimizations. diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 446b8a7..81f7996 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -8,6 +8,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack Documentation** https://webpack.js.org/ Webpack's new documentation site, explaining concepts, configuration, and recipes + +- **Webpack Academy** + https://webpack.academy/ + Courses on Webpack concepts and usage, from the Webpack team. - **Webpack from First Principles** https://www.youtube.com/watch?v=WQue1AN93YU @@ -34,7 +38,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac An intro to what Webpack is, what it can do, and how to use it. - **What is Webpack and what can it do for you?** - http://x-team.com/2016/09/webpack-can-absolute-beginners/ + https://x-team.com/blog/webpack-can-absolute-beginners/ A plain-English explanation of what Webpack is and what problems it can help solve. - **Seamless client side Javascript with Webpack** @@ -57,9 +61,7 @@ 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 @@ -179,8 +181,11 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac A 4-part series that illustrates core Webpack concepts via a series of small example repos, with explanations of the source and concepts in the articles. - **How to setup Webpack 2.0 from scratch in 2017** - https://medium.com/@wesharehoodies/easy-guide-for-webpack-2-0-from-scratch-fe508a3ce44e - https://medium.com/@wesharehoodies/simple-beginner-guide-for-webpack-2-0-from-scratch-part-ii-66beb5dbccc2 + https://codeburst.io/easy-guide-for-webpack-2-0-from-scratch-fe508a3ce44e + https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-ii-66beb5dbccc2 + https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-iii-d374c021f9fc + https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-iv-102efc01ffad + https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-v-495dba627718 A detailed tutorial that walks through setting up a Webpack config piece-by-piece, and explains several Webpack concepts along the way. - **A Webpack Setup that Makes Sense**