From aa5e602861ee4c5ebb13ca680afa875262d632c0 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 1 Jan 2018 20:12:46 -0500 Subject: [PATCH] Updates, 2018-01-01 --- basic-concepts.md | 16 +++- boilerplates-and-starter-kits.md | 6 +- community-resources.md | 4 + es6-features.md | 3 + framework-comparisons.md | 14 +++- functional-programming.md | 6 +- git-resources.md | 3 + immutable-data.md | 3 + javascript-resources.md | 9 ++- pros-cons-discussion.md | 4 + react-component-composition.md | 18 ++++- react-component-patterns.md | 22 +++++- react-forms.md | 24 +++++- react-implementation.md | 12 ++- react-native.md | 11 ++- react-performance.md | 6 +- react-redux-testing.md | 27 +++++++ react-routing.md | 8 ++ react-server-rendering.md | 11 +++ react-styling.md | 12 +++ react-techniques.md | 4 + react-tutorials.md | 10 ++- redux-architecture.md | 12 +++ redux-middleware.md | 10 ++- redux-reducers-selectors.md | 131 +++++++++++++++++-------------- redux-side-effects.md | 4 + redux-techniques.md | 34 ++++++-- redux-tutorials.md | 8 ++ redux-ui-management.md | 4 + redux-without-react.md | 26 +++++- static-typing.md | 18 ++++- webpack-advanced-techniques.md | 26 ++++++ webpack-tutorials.md | 4 + 33 files changed, 420 insertions(+), 90 deletions(-) diff --git a/basic-concepts.md b/basic-concepts.md index 6f84be9..d27d69c 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -31,9 +31,9 @@ https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b An approach to understanding the variety of build tools by categorizing them as "installing" vs "doing" -- **The State of Javascript in 2016: Survey Results** - http://stateofjs.com/ - Results from a survey of over 9000 developers, covering use of Javascript tools, technologies, and concepts. +- **The State of Javascript in 2017: Survey Results** + https://stateofjs.com/ + Results from a survey of over 23000 developers, covering use of Javascript tools, technologies, and concepts. - **The (R)Evolution of Web Development** http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/ @@ -80,6 +80,10 @@ https://closebrace.com/articles/2017-09-11/a-brief-incomplete-history-of-javascript An excellent history lesson that recaps the four major eras of web development and JS usage: the Early Era, the jQuery Era, the Single Page App Era, and the Modern Era. +- **Frontend in 2017: The important parts** + https://blog.logrocket.com/frontend-in-2017-the-important-parts-4548d085977f + An overview of major trends, tools, and concepts in the front-end web dev world in 2017. Very good look at what's popular, what's changing, and how these pieces fit together. + #### Suggested Learning Approaches @@ -123,7 +127,11 @@ - **So you completed the official React tutorial. Now what?** https://goshakkk.name/next-steps-official-react-tutorial/ General advice on how to approach learning new things in general without getting overloaded, as well as specific advice for concepts and ideas to learn about after grasping the basics of React. - + +- **Spellbook of Modern Web Dev** + https://github.com/dexteryy/spellbook-of-modern-webdev#gui-framework + A large list of categorized resources for dozens of web development-related topics. + #### General Suggestions for Learning diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md index c5207d1..d75eccb 100644 --- a/boilerplates-and-starter-kits.md +++ b/boilerplates-and-starter-kits.md @@ -3,7 +3,7 @@ #### Suggested Starter Kits for Learners -**NOTE**: It's easy for someone new to the React/Redux ecosystem to get confused by some of these boilerplates and starter kits. Many of them include dozens of specifically-configured libraries, and it can be hard for a learner to understand how all the pieces fit together. If you're trying to learn React or Redux for the first time, it's suggested that you start with reading tutorials and articles first, until you have a reasonable understanding of how things work. However, if you _do_ want to use a starter kit as a learning tool, I specifically suggest the ones in this section. They are simpler, easier to understand, and well documented. In particular, Create-React-App is highly recommended. +**NOTE**: It's easy for someone new to the React/Redux ecosystem to get confused by some of these boilerplates and starter kits. Many of them include dozens of specifically-configured libraries, and it can be hard for a learner to understand how all the pieces fit together. If you're trying to learn React or Redux for the first time, it's suggested that you start with reading tutorials and articles first, until you have a reasonable understanding of how things work. However, if you _do_ want to use a starter kit as a learning tool, I specifically suggest the ones in this section. They are simpler, easier to understand, and well documented. In particular, Create-React-App is highly recommended. Also see [Should I use a boilerplate with React?](http://blog.jakoblind.no/should-i-use-a-boilerplate-for-react/) for similar thoughts. - **Create-React-App** https://github.com/facebookincubator/create-react-app @@ -83,6 +83,10 @@ http://habd.as/awesome-react-boilerplates/ Another good curated list of boilerplates for both React and React Native +- **React Community: Starter Kit** + https://reactjs.org/community/starter-kits.html + A list of starter kits that are officially recommended by the React team, as well as other kits from the community. + #### React Project Setup diff --git a/community-resources.md b/community-resources.md index 4040e29..9e00273 100644 --- a/community-resources.md +++ b/community-resources.md @@ -71,6 +71,10 @@ http://madewithreact.com/ A collection of websites and applications using the React or React Native JavaScript library. +- **Awesome React** + https://react.libhunt.com/ + A categorized collection of awesome React libraries, resources and shiny things, based on the awesome-react list. + #### Online IDEs and Editors diff --git a/es6-features.md b/es6-features.md index d53d241..51ce247 100644 --- a/es6-features.md +++ b/es6-features.md @@ -103,6 +103,9 @@ http://appendto.com/2016/06/why-do-es6-classes-exist-and-why-now/ Digs into some of the intricacies of ES6 classes, and some of the pros and cons around using them +- **How ES6 classes really work, and how to build your own** + https://medium.com/@robertgrosse/how-es6-classes-really-work-and-how-to-build-your-own-fd6085eb326a + A deep dive into Javascript's object model, prototypal inheritance, and how ES6 classes are implemented in relation to prototypes. diff --git a/framework-comparisons.md b/framework-comparisons.md index c4f0965..84db72d 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -26,6 +26,14 @@ - **React vs Angular 2+: Developer Ergonomics** https://medium.com/@stelly_ryan/react-vs-angular-2-developer-ergonomics-b6d5103e8699 Specific opinion-based comparisons on the developer experience for React and Angular in areas like components, testing, and framework-specific syntax, based on writing equivalent example apps using both frameworks. + +- **How is React different from Vue?** + https://javascriptreport.com/how-is-react-different-from-vue/ + A higher-level overview of some of the similarities and differences between React and Vue, including quotes from Dan Abramov and Evan You. + +- **Unopinionated comparison of Glimmer and React** + https://wyeworks.com/blog/2017/12/20/unopinionated-comparison-of-glimmer-and-react + A well-written comparison of small React and Glimmer components that implement the same functionality. #### React and Flux vs Backbone @@ -59,4 +67,8 @@ - **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 + 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. + +- **Migrating complex Javascript applications** + https://javascriptplayground.com/blog/2017/08/migrating-complex-javascript-angular-react/ + Jack Franklin describes the lessons learned when his team migrated from Angular to React, including why they migrated, how they approached the architecture changes, how they prioritized what to change, and more. Includes some examples of the Angular->React change, but also good advice in general. \ No newline at end of file diff --git a/functional-programming.md b/functional-programming.md index 433f199..c67053f 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -173,4 +173,8 @@ - **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 + A great explanation of the difference between "currying" functions and "partially applying" them + +- **Lodash is not (only) for list manipulation!** + https://blog.pragmatists.com/lodash-is-not-only-for-list-manipulation-791c2e3b9de1 + Examples of how to compose the `lodash/fp` functions to create functional data transformation pipelines. \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index 6599832..2f2ffad 100644 --- a/git-resources.md +++ b/git-resources.md @@ -116,6 +116,9 @@ 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. +- **Advanced Git Commands You Will Actually Use** + https://stosb.com/blog/advanced-git-commands-you-will-actually-use/ + Describes a wide variety of useful commands, such as ways to refer to commits, searching commit logs, manipulating history, and much more. ## Specific Techniques diff --git a/immutable-data.md b/immutable-data.md index d47c413..54f4f18 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -81,6 +81,9 @@ https://medium.com/@housecor/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5 A summary of four different ways to update state immutably +- **Immutability in React and Redux** + https://medium.com/@nitishkr88/immutability-in-react-and-redux-7137f7b3197 + A good introduction to immutability concepts and practical usage. Covers how equality comparisons work in Javascript, reference comparisons vs deep quality checks, ways to avoid mutations, use of Immutable.js, and how to handle nested updates. #### Immutable Data Libraries diff --git a/javascript-resources.md b/javascript-resources.md index 42ff68f..c4fb2e9 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -178,7 +178,14 @@ While this list is primarily focused on learning React and Redux, and generally - **What is This in Javascript?** https://developer.telerik.com/topics/web-development/what-is-this-in-javascript/ An easy-to-read explanation of the different ways `this` can be defined in a function. - + +- **Everything you wanted to know about JavaScript scope** + https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ + A detailed look at the concept of "scopes" in JS, including global, local, function, and lexical scopes, and how `this` behaves in relation to scopes. + +- **On `this` in Javascript** + http://georgemauer.net/2017/08/03/on-this-in-javascript.html + Describes how `this` is just a function parameter you don't get to name, and shows how it works with normal functions, arrow functions, and classes #### Paid Courses and Books diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 1cebac1..b868625 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -67,6 +67,10 @@ 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. +- **Advocating for software quality at METRO** + https://www.thoughtworks.com/insights/blog/advocating-software-quality-metro + The METRO Cash & Carry team discusses how they've handled migrating parts of their app from Reflux to Redux, including motivation, business issues, the case for quality, and their strategy for migrating. + #### Redux/Flux Comparisons diff --git a/react-component-composition.md b/react-component-composition.md index 86bc833..625c0ff 100644 --- a/react-component-composition.md +++ b/react-component-composition.md @@ -99,7 +99,13 @@ https://codeburst.io/save-the-zombies-how-to-add-state-and-lifecycle-methods-to-stateless-react-components-1a996513866d A humorously-written look at how to extract state management logic into HOCs. - +- **HOC in a nutshell** + http://coding4real.com/2017/12/23/hoc-nutshell-bonus-example/ + Describes how HOCs can be used to encapsulate reusable code, and demonstrates HOcs that help with route authentication and work with Redux. + +- **Composing Higher-Order Components** + https://medium.com/@caseymorrisus/react-composing-higher-order-components-hocs-3a5288e78f55 + Gives examples of common use cases for HOCs, shows some example implementations, and demonstrates how to compose HOcs together. #### Render Props/Function As Child @@ -230,4 +236,12 @@ - **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 + 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. + +- **Seven patterns by example: the many ways to `type="radio"` in React** + https://techblog.commercetools.com/seven-patterns-by-example-the-many-ways-to-type-radio-in-react-bfe14322bb6f + Compares multiple approaches for rendering and controlling a group of radio inputs, including passing a list of options as an array, creating a RadioOption component, compound components, context, function as a child, prop getters, and dynamic RadioOption creation. + +- **How "Controllable" React components maximize reusability** + https://medium.com/myheritage-engineering/how-controllable-react-components-maximize-reusability-86e3d233fa8e + Gives examples of uncontrolled, controlled, and controllable components, looks at pros and cons of those approaches, and describes how controllable components improve reusability. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index 27968ee..7ea3f31 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -55,6 +55,10 @@ 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. +- **The Common Patterns of React** + https://blog.pixelingene.com/2017/09/the-common-patterns-of-react/ + A friendly visual overview of common React patterns like higher-order components, function-as-child, context, callbacks, container/presentational components, and compound components. + #### Component Definition Approach Comparisons @@ -163,6 +167,14 @@ https://www.kirupa.com/react/component_lifecycle.htm Another useful description of the order and purpose of the lifecycle methods. +- **Understanding React - Component life-cycle** + https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d + An extensive description of the various React lifecycle methods, and how you should and shouldn't use them. + +- **Lifecycle Simulators** + https://reactarmory.com/guides/lifecycle-simulators + An interactive set of simulators for React components that let you step through a component's lifecycle and watch how state and props respond to actions over time. + - **React In-Depth: The React Life Cycle** https://developmentarc.gitbooks.io/react-indepth/content/ A deep dive into the lifecycle methods, and various techniques for using them. @@ -404,9 +416,13 @@ https://www.sitepen.com/blog/2017/08/08/wrapping-web-components-with-react/ A detailed walkthrough of how to create React components that wrap up existing web components, including managing props, handling events, and keeping the DOM in sync. -- **Migrating complex Javascript applications** - https://javascriptplayground.com/blog/2017/08/migrating-complex-javascript-angular-react/ - Jack Franklin describes the lessons learned when his team migrated from Angular to React, including why they migrated, how they approached the architecture changes, how they prioritized what to change, and more. Includes some examples of the Angular->React change, but also good advice in general. +- **How to integrate React into an existing app?** + https://reactarmory.com/answers/how-to-integrate-react-into-existing-app + Looks at ways to add React to an existing page, even if there's no build step. + +- **Integrating Imperative APIs into a React application** + https://medium.com/netflix-techblog/integrating-imperative-apis-into-a-react-application-1257e1b45ac6 + A higher-level discussion of how to design declarative React components that encapsulate imperative APIs. #### Modal Dialogs diff --git a/react-forms.md b/react-forms.md index bdbe7f2..1aa79e3 100644 --- a/react-forms.md +++ b/react-forms.md @@ -178,6 +178,10 @@ https://goshakkk.name/y-no-field-level-validations/ Thoughts on why it's better to handle validation at the "whole form" level, rather than strictly per-field. +- **Validating React forms upon submit** + https://goshakkk.name/submit-time-validation-react/ + Discusses core concepts of validating form inputs, and demonstrates how to handle validations on submit for both uncontrolled and controlled components. + #### Other @@ -191,4 +195,22 @@ - **Comparison of form libraries in React** https://codebrahma.com/form-libraries-in-react/ - A good comparison of several different React/Redux-based form libraries, with code snippets demonstrating usage. \ No newline at end of file + A good comparison of several different React/Redux-based form libraries, with code snippets demonstrating usage. + +- **The Joy of Forms with React and Formik** + https://keyholesoftware.com/2017/10/23/the-joy-of-forms-with-react-and-formik/ + Looks at some of the complexities with handling forms in React, and how the Formik library can help simplify that logic. + +- **Painless React Forms with Formik** + https://hackernoon.com/painless-react-forms-with-formik-e61b70473c60 + Describes how the Formik library can help solve transforming props to form state, validation and error messages, and handling form submission. + +- **Formik - Handling files and reCaptch** + https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc + Demonstrates how to use the Formik library to accept uploaded files and work with reCaptcha validation. + +- **Final Form / React Final Form** + https://codeburst.io/final-form-the-road-to-the-checkered-flag-cd9b75c25fe + https://medium.com/@erikras/final-form-arrays-and-mutators-13159cb7d285 + https://blog.cloudboost.io/final-form-decorators-calculated-fields-and-warnings-bf9cccd21b7e + Erik Rasmussen, author of the popular Redux-Form library, introduces his new framework-agnostic Final Form library and its bindings for React. \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index a40af1a..016f314 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -175,6 +175,14 @@ - **How exactly does React handle events?** https://levelup.gitconnected.com/how-exactly-does-react-handles-events-71e8b5e359f2 A detailed look at how React's internal event handling works, including normalization of events, SyntheticEvent objects, and more. + +- **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. + +- **Understanding the React Source Code** + https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-i-80263fe46cf1 + Walks through the critical path of React's source code, tracing how a simple component gets rendered. #### React Fiber @@ -226,10 +234,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. - - **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 7ac3a39..c49caf8 100644 --- a/react-native.md +++ b/react-native.md @@ -15,6 +15,10 @@ https://rangle-io.gitbooks.io/react-native-workshop/content/ An introduction to React Native's concepts, in conjunction with Flexbox and Redux +- **React Native Made Easy** + https://www.reactnative.guide/ + An extensive tutorial that teaches many aspects of React Native project setup and tooling while building an example notes app. + - **Building the F8 App** http://makeitopen.com/ A dive into how the Facebook F8 conference mobile app was built, including planning, design, testing, and data management. @@ -43,6 +47,7 @@ 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 - **Using iOS Image Picker with React Native** @@ -111,4 +116,8 @@ - **React Native at Grofers: Using React Native components inside native views** https://lambda.grofers.com/starting-with-react-native-at-grofers-a-guide-to-using-react-native-components-inside-native-bbdd6a3470d4 - Looks at the pros and cons of using RN components in native views, including turnaround shipping speed, approach for bridging views, and performance. \ No newline at end of file + Looks at the pros and cons of using RN components in native views, including turnaround shipping speed, approach for bridging views, and performance. + +- **React Native Events in Gory Details: What Happens on the Way to Listeners** + https://levelup.gitconnected.com/react-native-events-in-gory-details-what-happens-on-the-way-to-listeners-2cee6c55940c + A deep dive into the internnal behavior and implementation of React Native's event system. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 4d73d1a..0a1f2bc 100644 --- a/react-performance.md +++ b/react-performance.md @@ -377,4 +377,8 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - **React + Redux Performance and the Benchmarks to Prove It** https://tech.smartling.com/react-redux-performance-and-the-benchmarks-to-prove-it-79b0bc9f25a4 - Describes an approach for benchmarking a React+Redux app to understand how much impact performance optimizations actually give. \ No newline at end of file + Describes an approach for benchmarking a React+Redux app to understand how much impact performance optimizations actually give. + +- **Redux's Connect function and areStatesEqual Option** + https://medium.com/@ryansperzel/reduxs-connect-function-and-arestatesequal-option-adc97e00ee0 + Looks at one of `connect`'s options that can be used to customize comparisons and skip unnecessary `mapState` calls. \ No newline at end of file diff --git a/react-redux-testing.md b/react-redux-testing.md index e8e16ab..f61b324 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -153,6 +153,14 @@ 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. +- **Testing React Components** + https://medium.com/@skidding/testing-react-components-30516bc6a1b3 + Thoughts on good practices for testing React components, based on writing thousands of tests. Describes complexities in testing real-world components that make use of multiple HOCs or that glue different units together, and how the Cosmos tool can help simplify those tests using mocking. + +- **An introduction to testing React components with Enzyme 3** + https://javascriptplayground.com/blog/2017/12/introduction-to-react-tests-enzyme/ + Introduces the Enzyme library for testing components, and shows a short TDD approach for writing a component + #### Redux @@ -292,6 +300,25 @@ 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. +- **How to Test Your Redux App** + https://www.wix.engineering/single-post/2017/12/27/How-to-Test-Your-Redux-App + Discusses tradeoffs and examples of writing tests for "simple" functions, and how to approach writing integration tests for connected components. + +- **Interview: redux-saga-test-plan** + https://survivejs.com/blog/redux-saga-test-plan-interview/ + An interview with the author of the redux-saga-test-plan library, discussing how it works and how it can simplify the process of testing sagas. + +- **Subcutaneous Testing against React + .NET Applications** + https://jeremydmiller.com/2017/12/19/subcutaneous-testing-against-react-net-applications/ + Discusses a possible approach for using the Storyteller .NET integration testing tool to help drive a client-side Redux app for integration testing. + +- **Creating unit tests for redux-observable with marble diagrams** + https://medium.com/@dmitrymartynov_84736/creating-unit-tests-for-redux-observable-with-marble-diagrams-b1e1b34e5f44 + Describes how to set up tests for redux-observable epics, and define expectations for behavior using marble diagrams + +- **How I test redux-saga** + https://codeburst.io/how-i-test-redux-saga-fcc425cda018 + Short examples of a typical saga and a test for that saga, with some thoughts on a couple tricks for testing sagas. #### General Testing, Tools, and Setup diff --git a/react-routing.md b/react-routing.md index 54aa95b..31fab74 100644 --- a/react-routing.md +++ b/react-routing.md @@ -63,6 +63,14 @@ 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. +- **Introduction to React Router** + https://dev.to/aurelkurtula/introduction-to-react-router-ha + A quick look at the basics of React-Router v4. + +- **React Router DOM, plain and simple** + http://coding4real.com/2017/12/19/using-react-router-dom/ + An introduction that shows how to add React-Router to a basic React app, and describes the basic API. + #### Routing with Redux diff --git a/react-server-rendering.md b/react-server-rendering.md index 2b268c8..322484d 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -93,3 +93,14 @@ 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. +- **Server-side rendering React apps** + https://hph.is/coding/server-side-rendering-react + A friendly introduction to setting up a basic SSR React 16 app from scratch, including simple rendering of HTML, addition of Webpack and Babel, and use of React-Router. + +- **Using React and Next.js to build a PWA** + https://aerolab.co/blog/react-nextjs-pwa/ + Shows how to build a Hacker News app using the Next.js SSR platform + +- **The simple guide to server-side rendering React with styled-components** + https://medium.com/styled-components/the-simple-guide-to-server-side-rendering-react-with-styled-components-d31c6b2b8fbf + A short walkthrough that sets up a basic React SSR app, and adds the styled-components library for styling \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index 959dfc5..47ae7d5 100644 --- a/react-styling.md +++ b/react-styling.md @@ -48,6 +48,14 @@ https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945 A comparison of how to style an application using inline styles, the styled-components library, and CSS modules. Has some good explanations of how each approach works. +- **CSS-in-JS 101: All you need to know** + https://github.com/stereobooster/css-in-js-101 + An extensive look at different ways to handle CSS in React, with pros and cons, techniques for optimizing CSS, and comparisons of different CSS-in-JS libraries. + +- **Styling React** + https://survivejs.com/react/advanced-techniques/styling-react/ + An overview of the various approaches for styling React applications and components, and some of the problems each approach tries to solve. + #### Components and Styling @@ -192,6 +200,10 @@ https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28 Discusses applying the Block-Element-Modifier styling structure approach to use of the styled-components library, with examples. +- **Styled-Components Nitty-Gritty** + https://blog.elpassion.com/styled-components-nitty-gritty-2d74b8690ef8 + An introduction to how to use the styled-components library, the problems that it solves, and how it works internally + #### Techniques and Examples diff --git a/react-techniques.md b/react-techniques.md index 7d75f9f..bc7e5ab 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -109,6 +109,10 @@ https://www.youtube.com/watch?v=dRo_egw7tBc A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React +- **Using React Fragments for the first time** + https://javascriptplayground.com/blog/2017/12/react-fragments/ + Describes the Fragment "component" and syntax introduced in React 16.2, the problems Fragments solve, and how to use them. + #### Debugging and Error Handling diff --git a/react-tutorials.md b/react-tutorials.md index 2562ca0..2522e77 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -152,6 +152,10 @@ https://react.holiday/ A series of short lessons that teach core React concepts, each with an interactive sandbox example to play with. +- **The Beginner's Guide to React** + https://egghead.io/courses/the-beginner-s-guide-to-reactjs + A free video series from Kent C Dodds that teaches React fundamentals. Each lesson's sample code is a simple index.html file so you can focus on learning React, without distractions from other tools. + #### React Concept Overviews @@ -386,7 +390,7 @@ https://www.writesoftware.org/tutorial/react-spreadsheet An excellent tutorial that shows how to build a miniature spreadsheet app using React -- **Developig modern offline apps with ReactJS, Redux, and Electron** +- **Developing modern offline apps with ReactJS, Redux, and Electron** https://blog.codecentric.de/en/2017/10/developing-modern-offline-apps-reactjs-redux-electron-part-1/ An ongoing multi-part series that covers using React to build an Electron app, including discussion of architectural decisions. @@ -398,6 +402,10 @@ https://blog.pusher.com/build-a-realtime-pwa-with-react/ Covers building a Progressive Web App that shows crypto-currency pricess, using Create-React-App and the Pusher service. +- **Getting Started with React: Build a Cryptocurrency Ticker** + https://sabe.io/tutorials/getting-started-with-react + A tutorial that demonstrates how to build a simple real-time display of cryptocurrency prices. + #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index e61a930..ba387cc 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -111,6 +111,10 @@ https://www.reddit.com/r/reactjs/comments/6ec4dz/i_made_a_diagram_of_the_design_of_my_first_react/ A Reddit thread with some excellent discussion about how Apollo and GraphQL fit into the architecture of a Redux application. +- **Turning Requirements into React/Redux Code** + https://decembersoft.com/posts/turning-requirements-into-react-redux-code/ + Looks at a typical description of desired behavior for a loading/container component, then walks through breaking the description into requirements and shows how to implement those in React and Redux. + #### Redux Best Practices @@ -317,6 +321,10 @@ - **"So much to learn about organizing Redux state by looking at popular apps"** https://mobile.twitter.com/tharakawj/status/937285802287124480 A tweet with screenshots of the Redux DevTools, showing the contents of Redux stores from Twitter and Pinterest. + +- **5 Strategies to Prevent Bugs in a Large Redux Codebase** + https://decembersoft.com/posts/5-strategies-to-prevent-bugs-in-a-large-redux-codebase/ + Short but useful thoughts on using testing, static typing, immutability, parameter validation, and code reviews with Redux apps. #### Encapsulation and Reusability @@ -413,6 +421,10 @@ - **Selector Pattern: Painless Redux Store Destructuring** https://hackernoon.com/selector-pattern-painless-redux-store-destructuring-bfc26b72b9ae Good examples of creating encapsulated selectors that are given just their slice of state as arguments, with a centralized definition of how the state slices map to those selectors. + +- **Fractal Architecture** + http://antontelesh.github.io/architecture/2016/03/16/fractal-architecture.html + Discesses some rules of fractal architecture, looks at how those apply to React, Elm, and Cycle, and then describes ways to apply those rules to Redux code to enforce modularity. #### Variations on Redux Architectures diff --git a/redux-middleware.md b/redux-middleware.md index 7a4bce7..dac2d50 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -54,6 +54,10 @@ https://blog.campvanilla.com/redux-middleware-basics-getting-started-17dc31c6435c A good explanation of how middleware fit into the Redux data flow, how middleware are defined, and how to write a simple logging middleware. +- **Learning Redux Middlewares by Reading Their Source** + https://www.ynonperek.com/2017/08/21/learning-redux-middlewares-by-reading-their-source/ + Explores the source code for redux-thunk, redux-promise, and redux-batch-middleware to help understand how middleware work. + #### Middleware Techniques @@ -96,4 +100,8 @@ - **Redux Middleware and Enhancers** https://chariotsolutions.com/blog/post/redux-middleware-and-enhancers-getting-redux-to-log-debug-and-process-async-work/ - Describes some common Redux middleware and their uses, as well as how to set up the Redux DevTools enhancer for debugging. \ No newline at end of file + Describes some common Redux middleware and their uses, as well as how to set up the Redux DevTools enhancer for debugging. + +- **Redux analytics, without middleware** + http://web.archive.org/web/20170617100422/http://blog.reactandbethankful.com/posts/2016/09/27/redux-analytics-without-middleware/ + Discusses pros and cons of using middleware for analytics, and shows how to create a store enhancer that wraps `subscribe` to allow providing selectors and callbacks. \ No newline at end of file diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index 1f1cc26..1ec31f5 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -79,15 +79,68 @@ https://medium.com/front-end-hacking/code-splitting-redux-reducers-4073db30c72e Comprehensive instructions on how to properly code-split reducers for dynamic loading at runtime. + +#### Selectors + +- **Idiomatic Redux: Using Reselect Selectors for Performance and Encapsulation** + http://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/ + Introduces the core concepts of using selector functions to derive data from a Redux store, memoizing functions for performance, how to use the Reselect library to create memoized selector functions, and advanced techniques for working with selectors when writing `mapState` functions for `connect`. + +- **ReactCasts #8: Selectors in Redux** + https://www.youtube.com/watch?v=frT3to2ACCw + A great overview of why and how to use selector functions to retrieve data from the store, and derive additional data from store values + +- **React, Reselect, and Redux** + https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c + An explanation of how Reselect's memoized selector functions are useful in Redux apps, and how to create unique selector instances for each component instance. + +- **Use Selectors in Redux for Great Good** + https://medium.com/@TomasEhrlich/use-selectors-in-redux-for-great-good-59286ce2e2a1 + A short article explaining the importance of selectors, with a few examples of how they benefit applications and how to use them. + +- **Reselect with Redux and React** + https://www.youtube.com/watch?v=6Xwo5mVxDqI + A screencast that introduces the Reselect library and discusses why it's useful in Redux apps + +- **Optimizing React Redux Application Development with Reselect** + https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/ + A good tutorial on Reselect. Covers the concept of "selector functions", how to use Reselect's API, and how to use memoized selectors to improve performance. + +- **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. + +- **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. + +- **Better Redux Selectors with Ramda** + https://medium.com/@grrttn/better-redux-selectors-with-ramda-c1ab7af3f16 + A long article that describes how to use the Ramda FP utility library to create selectors, including use of functional composition. + +- **Selectors: Slice your concerns like butter!** + https://bmbarker90.github.io/selectors-presentation/#/ + A slideshow that discusses what selector functions are and why you would want to use them. + +- **Reselect's Memoization in 3 Functions** + https://hackernoon.com/reselect-style-memoization-in-3-functions-aff30f8cba11 + A dive into the Reselect source code, with explanations of memoization concepts and how Reselect implements memoization. + +- **Memoize-Immutable: efficient memoizer for Redux** + https://blog.prototypo.io/memoize-immutable-efficient-memoizer-for-redux-and-other-immutable-environments-59277fefa45f + Discusses principles of immutability and memoization, and a library they built to help memoize Redux data lookups + +- **"Any deep-dive/advanced tutorials on reselect?"** + https://www.reddit.com/r/reactjs/comments/5dxasp/any_deepdiveadvanced_tutorials_on_reselect/ + Discussion on passing arguments to Reselect selectors, and how to use "factory functions" to define per-component selectors for Redux `mapState` functions -#### Selectors and Normalization +#### Normalization **Related topics**: - [Redux Architecture - Encapsulation](./redux-architecture.md#encapsulation-and-reusability) - [Redux Performance](./react-performance.md#redux-performance) - - **Querying a Redux Store** https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions. @@ -96,6 +149,15 @@ https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95 Thoughts on how normalized Redux stores enable some useful data handling approaches, with examples of using selector functions to denormalize hierarchical data. +- **Practical Redux: Using Redux-ORM** + http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/ + http://blog.isquaredsoftware.com/2016/10/practical-redux-part-2-redux-orm-concepts-and-techniques/ + A look at how Redux-ORM can help manage normalized data in a Redux store, including use cases, basic usage, key concepts, and advanced techniques. + +- **Advanced Redux Entity Normalization** + https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5 + Describes a "keyWindow" concept for tracking subsets of entities in state, similar to an SQL "view". A useful extension to the idea of normalized data. + - **Redux Normalizr: Improve your State Management** http://www.robinwieruch.de/the-soundcloud-client-in-react-redux-normalizr/ A tutorial describing how to use Normalizr for improved data management of nested data in Redux @@ -104,31 +166,14 @@ https://medium.com/@mcowpercoles/using-normalizr-js-in-a-redux-store-96ab33991369 Some examples of using Normalizr and selectors to manage normalized data -- **Memoize-Immutable: efficient memoizer for Redux** - https://blog.prototypo.io/memoize-immutable-efficient-memoizer-for-redux-and-other-immutable-environments-59277fefa45f - Discusses principles of immutability and memoization, and a library they built to help memoize Redux data lookups - - **Two mistakes I made working with Redux** http://www.mattzeunert.com/2016/06/01/redux-mistakes.html Some suggestions on how to handle denormalizing data and defining actions. - -- **Practical Redux: Using Redux-ORM** - http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/ - http://blog.isquaredsoftware.com/2016/10/practical-redux-part-2-redux-orm-concepts-and-techniques/ - A look at how Redux-ORM can help manage normalized data in a Redux store, including use cases, basic usage, key concepts, and advanced techniques. - **"How do you add/remove to a redux store generated with normalizr?** http://stackoverflow.com/questions/34954726/how-do-you-add-remove-to-a-redux-store-generated-with-normalizr Stack Overflow discussion of how to handle updates to normalized data -- **"Any deep-dive/advanced tutorials on reselect?"** - https://www.reddit.com/r/reactjs/comments/5dxasp/any_deepdiveadvanced_tutorials_on_reselect/ - Discussion on passing arguments to Reselect selectors, and how to use "factory functions" to define per-component selectors for Redux `mapState` functions - -- **ReactCasts #8: Selectors in Redux** - https://www.youtube.com/watch?v=frT3to2ACCw - A great overview of why and how to use selector functions to retrieve data from the store, and derive additional data from store values - - **GraphQL is not only for Backend** https://riad.blog/2017/01/07/graphql-is-not-only-for-backend-react-redux/ A look at how to use GraphQL to query into a Redux store @@ -138,10 +183,6 @@ https://medium.com/@nuncamind/diving-deeper-into-twitters-redux-store-adventures-in-minified-vendor-javascript-67fbac5dc219 An informative look at the contents of the Redux store for Twitter's new mobile site. The second article shows how to dig through the minified JS to enable use of the Redux DevTools against a production site. -- **Advanced Redux Entity Normalization** - https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5 - Describes a "keyWindow" concept for tracking subsets of entities in state, similar to an SQL "view". A useful extension to the idea of normalized data. - - **"Why are you supposed to normalize data in Redux?"** https://twitter.com/AdamRackis/status/847883670950219776 A Twitter thread with some excellent discussion, explaining why use of normalized data is encouraged with Redux. @@ -157,19 +198,7 @@ - **How I Stumbled Upon Normalizing Redux State** http://kyleshevlin.com/how-i-stumbled-upon-normalizing-redux-state/ A short summary of the benefits and concept behind normalizing state - -- **React, Reselect, and Redux** - https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c - An explanation of how Reselect's memoized selector functions are useful in Redux apps, and how to create unique selector instances for each component instance. - -- **Use Selectors in Redux for Great Good** - https://medium.com/@TomasEhrlich/use-selectors-in-redux-for-great-good-59286ce2e2a1 - A short article explaining the importance of selectors, with a few examples of how they benefit applications and how to use them. - -- **Reselect with Redux and React** - https://www.youtube.com/watch?v=6Xwo5mVxDqI - A screencast that introduces the Reselect library and discusses why it's useful in Redux apps - + - **The only reducer you will ever need** https://medium.com/riipen-engineering/the-only-reducer-you-will-ever-need-4dd41206f980 Demonstrates using Normalizr and seamless-immutable to write a generic entity merging reducer @@ -179,38 +208,22 @@ 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. -- **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. -- **Better Redux Selectors with Ramda** - https://medium.com/@grrttn/better-redux-selectors-with-ramda-c1ab7af3f16 - A long article that describes how to use the Ramda FP utility library to create selectors, including use of functional composition. - - **Shape your Redux store like your database** https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5 Discusses the merits of storing data in arrays vs lookup tables for access speed, and adding additional indices to allow easily lookup up items based on other values besides IDs. -- **Optimizing React Redux Application Development with Reselect** - https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/ - A good tutorial on Reselect. Covers the concept of "selector functions", how to use Reselect's API, and how to use memoized selectors to improve performance. - -- **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. - -- **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. - - **Redux Patterns: Rethinking `byId` and `byHash` Structures** https://hackernoon.com/redux-patterns-rethinking-byid-and-byhash-structures-854e8a0fa32d Thoughts on dropping the common list of "all IDs" in a normalized state structure, and just iterating over all items using `Object.keys()` to grab the IDs. + +- **Organising Redux State** + https://medium.com/@onoufriosm/organising-redux-state-4b4c2b99eece + Short examples of how Labstep defines state structure for their normalized entities -- **Selectors: Slice your concerns like butter!** - https://bmbarker90.github.io/selectors-presentation/#/ - A slideshow that discusses what selector functions are and why you would want to use them. +- **Normalizing Data into Relational Redux State with Normalizr** + https://medium.com/@onoufriosm/organising-redux-state-4b4c2b99eece + Tips on using Normalizr to normalize data, including defining schemas and overriding Normalizr's default processing and merging strategies. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index 06f5ec3..3ba291a 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -62,6 +62,10 @@ 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` +- **Softly, Softly, Catch-ee Thunk-y** + https://reergymerej.github.io/blog/redux/2017/12/16/thunk-promises.html + Thoughts on how to handle errors inside of thunks, and why you shouldn't end a thunk by catching thrown errors. + #### Side Effect Approach Comparisons diff --git a/redux-techniques.md b/redux-techniques.md index 3e034eb..ff7d750 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -130,12 +130,6 @@ https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de Discusses using Redux middleware and redux-observable to manage analytics behavior in isolation from the rest of the application. -- **VR Redux / ReactVR Redux Revisited** - http://jimpurbrick.com/2017/01/04/vr-redux/ - http://jimpurbrick.com/2017/07/04/react-vr-redux-revisited/ - 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 Some quick examples and discussion of how Checkr uses the react-redux-i18 package to set up localization for their app. @@ -152,6 +146,10 @@ https://spin.atomicobject.com/2017/11/20/timers-timeouts-redux/ A quick example of storing a "current time" value and timers as "expire times". +- **Redux Dead Drop** + https://medium.com/@erikras/redux-dead-drop-1b9573705bec + Describes a possible technique for passing messages between widely separated components, such as triggering focus on a particular DOM node + #### Reducing Boilerplate @@ -211,9 +209,27 @@ https://www.reddit.com/r/javascript/comments/7i4t14/keducer_automate_writing_redux_reducers_with_5/ Describes a small lib to generate reducers that handle merging in updated state. Some good discussion in both the article comments and Reddit comments about the tradeoffs between having reducers "own" state, vs state being defined by action creators. +- **API Requests in Redux** + https://tech.decisiv.com/api-requests-in-redux-part-1-9ce587628a90 + A series looking at a pattern for simplifying boilerplate around request pending/success/failure status. + +- **Introducing redux-recompose** + https://medium.com/wolox-driving-innovation/932e746b0198 + Introduces a reducer utility library to help simplify handling of async actions + +- **The elegance of decorated Redux** + https://blog.cloudboost.io/the-elegance-of-decorated-redux-b0bd7e2de16a + Looks at using `connect` as a decorator, extracting `connect` definitions for reuse with multiple components, and combining multiple connections together to apply to a single component. + #### Network Management +- **VR Redux / ReactVR Redux Revisited** + http://jimpurbrick.com/2017/01/04/vr-redux/ + http://jimpurbrick.com/2017/07/04/react-vr-redux-revisited/ + 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. + - **Ajax Polling in React with Redux and Sagas** http://notjoshmiller.com/ajax-polling-in-react-with-redux/ http://notjoshmiller.com/ajax-polling-part-2-sagas/ @@ -241,4 +257,8 @@ - **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 + Discusses pros and cons of storing auth tokens in app state vs localStorage, and what code should be responsible for handling the tokens.* + +- **Remote Reducers and Predictive Reduction** + https://medium.com/@seveibar/remote-reducers-and-predictive-reduction-572ab5054211 + Discusses potential techniques for synchronizing server-side state via Redux actions, and how to reconcile actions that are dispatched out of order. \ No newline at end of file diff --git a/redux-tutorials.md b/redux-tutorials.md index eea4b33..c955f84 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -341,6 +341,10 @@ - **How to build a Chat Application using React, Redux, Redux-Saga, and Web Sockets** https://medium.freecodecamp.org/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a A tutorial that demonstrates building a small real-time client-server chat application. + +- **CRUD with Redux** + https://www.youtube.com/playlist?list=PLuNEz8XtB51KfnHc99GwscPy1UbLJyXHW + A video screencast tutorial series that demonstrates how to build a CRUD app with React, Redux, React-Router, and MongoDB. #### Redux Implementation Walkthroughs @@ -416,6 +420,10 @@ - **tiny-redux** https://github.com/jamischarles/tiny-redux A small reimplementation of Redux, with comments explaining how the code works. + +- **Finally understand Redux by building your own Store** + https://toddmotto.com/redux-typescript-store + Teaches Redux concepts by going under the hood and building a Redux-equivalent Store class from scratch #### Paid Courses and Books diff --git a/redux-ui-management.md b/redux-ui-management.md index a386cc5..4723dde 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -73,6 +73,10 @@ https://medium.com/@mcculloughrt/react-redux-with-mapbox-78fa3767211e Useful techniques for driving the appearance and behavior of a Mapbox-based geospatial app from React and Redux. +- **React/Redux: Modals and Dialogs** + https://medium.com/front-end-hacking/react-redux-no-need-to-component-state-for-modals-73871157b52e + Discussion of the pros and cons of powering modals via Redux, with examples of how to show them using React 16's Portals. + #### Redux and Forms diff --git a/redux-without-react.md b/redux-without-react.md index 7d795ba..b65d064 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -73,6 +73,22 @@ https://ultimateangular.com/ngrx-store-effects A free video course from Angular expert Todd Motto. Covers core Redux concepts, writing a Redux store, the NgRx version of Redux, and how to use the ngrx/effects library for handling side effects. +- **NGRX Store: Understanding State Selectors** + https://toddmotto.com/ngrx-store-understanding-state-selectors + A deep look at how selectors can be used to extract data from a store and transform it as needed by components. + +- **NGRX Store: Actions vs Action Creators** + https://toddmotto.com/ngrx-store-actions-versus-action-creators + Describes the reasons for defining actions as constants, namespacing actions, using action creator functions, and defining actions as TypeScript classes + +- **"ngrx/store vs angular/store"** + https://www.reddit.com/r/Angular2/comments/67coeo/ngrxstore_vs_angularreduxstore/ + Discussion of the differences between ngrx/store and angular/store, with a comparison from an angular/store contributor + +- **A Beginner's Guide to Ngrx/store** + https://medium.com/stratajet-tech/a-beginners-guide-to-ngrx-store-bc2184d6d7f0 + Describes how ngrx/store implements the Redux pattern using RxJS, and walks through a todo app tutorial + #### Ember @@ -143,4 +159,12 @@ - **Cedux: Experimenting with the Redux Model in C for Managing State** https://spin.atomicobject.com/2017/11/27/redux-model-in-c-cedux/ - Examples of an experimental implementation of Redux in C \ No newline at end of file + Examples of an experimental implementation of Redux in C + +- **Lessons learned implementing Redux on Android** + https://blog.pusher.com/lessons-learned-implementing-redux-on-android/ + Recaps experiences from using a Redux-based approach in Android apps using Kotlin + +- **A blockchain-backed Redux clone in 105 lines of code** + https://swizec.com/blog/blockchain-backed-redux-clone-105-lines-code/swizec/7980 + An interesting experiment that plays with the idea of implementing Redux's store API around a simple blockchain. \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 530fc47..2c2eb9e 100644 --- a/static-typing.md +++ b/static-typing.md @@ -240,6 +240,14 @@ 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. +- **Todo app with Typescript/Redux** + https://medium.com/@nem121/todo-app-with-typescript-redux-e6a4c2f02079 + An introduction to the principles of using Typescript with Redux, as applied to a simple todo app. + +- **Error TS2532 and Optional React Component Props in TypeScript** + https://decembersoft.com/posts/error-ts2532-optional-react-component-props-in-typescript/ + Describes a specific TS error message that can result from trying to use default props, and and shows how to solve it. + #### Advancing Typing Techniques @@ -264,6 +272,10 @@ https://medium.com/@raxwunter/secret-flow-types-86b2ebb30951 A list of "advanced" Flow type declarations, such as Keys, Diff, and Shape. +- **Stronger JavaScript with Opaque Types** + https://codemix.com/opaque-types-in-javascript/ + Describes how to use Flow's "opaque types" feature to make otherwise compatible types separate, such as an account number and a balance. + #### Tool Comparisons @@ -317,4 +329,8 @@ - **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 + The Tumblr engineering team discusses their experience comparing Flow and TS, and why they opted to use TS. + +- **Strict Types :Typescript, Flow, Javascript** + https://codeburst.io/strict-types-typescript-flow-javascript-to-be-or-not-to-be-959d2d20c007 + Looks at the rise of static typing in dynamic languages, gives some thoughts on the tradeoffs and benefits of TS and Flow, and tradeoffs for static typing usage as a whole. \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index b1cb667..b1d0b95 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -194,6 +194,10 @@ 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. +- **Webpack 3, Dynamic Imports, Code Splitting, and Long Term Caching Made Easy** + https://blog.cloudboost.io/webpack-3-dynamic-imports-code-splitting-and-long-term-caching-made-easy-1892981e0ae7 + Describes how to configure Webpack and use React-Loadable to set up code-splitting, as well as set up consistent module hash IDs. + #### Bundle Sizes and Visualization @@ -267,6 +271,10 @@ 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. +- **What Lurks Within: Reducing Bundle Sizes with Webpack Bundle Analyzer** + http://engineering.teacherspayteachers.com/2017/12/20/reducing-bundle-sizes-with-webpack-bundle-analyzer.html + Tips for using the Webpack Bundle Analyzer tool to track down large dependencies. + #### Hot Module Replacement @@ -289,6 +297,10 @@ http://andrewhfarmer.com/webpack-hmr-tutorial/ A very readable and informative series of articles on using HMR. +- **Blogged Answers: Webpack HMR vs React-Hot-Loader** + http://blog.isquaredsoftware.com/2017/08/blogged-answers-webpack-hmr-vs-rhl/ + A description of the differences between the HMR API offered by Webpack and how the React-Hot-Loader tool works, and advice on using "plain HMR". + - **SurviveJS: Hot Module Replacement** https://survivejs.com/webpack/appendices/hmr/ A guide to HMR concepts and usage, written by a Webpack core team member @@ -333,6 +345,10 @@ https://medium.com/@antonkorzunov/how-to-hot-load-react-component-in-7-days-part-1-webpack-d8b77eea61eb https://codeburst.io/how-to-hot-load-react-component-in-7-days-part-2-react-28ce2b61d0c7 A 2-part article that discusses how to set up plain HMR and add React-Hot-Loader, as well as many of the complexities of using RHL. + +- **Hot reloading in React apps with code splitting** + https://medium.com/zoover-engineering/hot-reloading-in-react-apps-with-code-splitting-17e6793fc80d + Looks at complexities in using RHL and React-Loadable together, and shows a Babel plugin that can help turn off code-splitting in development mode. #### Other Tips and Examples @@ -436,6 +452,16 @@ - **Deploying ES2015+ Code in Production Today** https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ Discusses a way to use `script type="module"` loading as a way to determine if a browser supports most modern syntax, and how to configure Babel to target modern browsers. Not Webpack specific, but useful. + +- **Long term caching using Webpack records** + https://medium.com/@songawee/long-term-caching-using-webpack-records-9ed9737d96f2 + Looks at how to use the RecordsPlugin to ensure consistent filenames between builds, allowing for more predictable bundle output for long-term caching of files. + +- **The Contributor's Guide to Webpack** + https://medium.com/webpack/the-contributors-guide-to-webpack-part-1-a0410cc82ca4 + https://medium.com/webpack/the-contributors-guide-to-webpack-part-2-9fd5e658e08c + https://medium.com/webpack/the-contributors-guide-to-webpack-part-3-44cc149af02c + A series by Webpack maintainer Sean Larkin that dives into the internals of Webpack. Topics include packages that are maintained by the Webpack core team, the Tapable plugin base class, and how Webpack builds its dependency graph. #### Webpack Tools diff --git a/webpack-tutorials.md b/webpack-tutorials.md index d07d0c4..5226c38 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -197,6 +197,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Starting with Webpack from scratch** https://www.netlify.com/blog/2017/11/30/starting-with-webpack-from-scratch/ Walks through setting up a Webpack config from the ground up, with explanations and examples of how to configure Webpack and what the resulting output looks like. + +- **Webpack 3 quickstarter: Configure Webpack from scratch** + https://medium.com/@nirjhor123/webpack-3-quickstarter-configure-webpack-from-scratch-30a6c394038a + A walkthrough for Webpack setup that covers basic entry and output definition, webpack-dev-server setup, and adding loaders and plugins. #### Configuration Terms and Concepts