diff --git a/basic-concepts.md b/basic-concepts.md index 73ff2e9..bea820c 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -107,6 +107,10 @@ - **Ten Things a Serious JavaScript Developer Should Learn** https://benmccormick.org/2017/07/19/ten-things-javascript/ A well-written, excellent collection of advice for mid-level JS developers, listing important topics that they should be familiar with. + +- **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. #### General Suggestions for Learning diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md index 37673a0..88a4007 100644 --- a/boilerplates-and-starter-kits.md +++ b/boilerplates-and-starter-kits.md @@ -21,6 +21,10 @@ https://github.com/tstringer/react-laboratory An absolute bare-minimum project. One tiny Webpack config, one JS file, one component. Pretty much the smallest possible setup to use React and JSX with Webpack. +- **TypeScript React Starter** + https://github.com/Microsoft/TypeScript-React-Starter + A quick start guide to setting up a TypeScript project using a TS-specific variation on Create-React-app's `react-scripts` package. Includes instructions for adding TSLint, Jest, Enzyme, and Redux. + #### Full-Featured Starter Kits diff --git a/es6-features.md b/es6-features.md index b44e805..463c6ec 100644 --- a/es6-features.md +++ b/es6-features.md @@ -76,6 +76,10 @@ https://ecmasyntax.io A reference site listing the syntax of features in ES6, and comparing them with earlier ES behavior. +- **Laracasts: ES2015 Crash Course** + https://laracasts.com/series/es6-cliffsnotes + A video screencast series that covers the new features and syntax in ES6/ES2015. + #### In-Depth Details diff --git a/functional-programming.md b/functional-programming.md index 36facfc..a9df749 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -155,3 +155,6 @@ https://medium.com/@kentcdodds/classes-complexity-and-functional-programming-a8dd86903747 Kent C Dodds looks at pros and cons of using classes, issues with the `this` keyword in Javascript, and some ways to avoid using classes +- **What's Functional Programming All About?** + http://www.lihaoyi.com/post/WhatsFunctionalProgrammingAllAbout.html + A detailed explanation of how "functional" programming differs from "imperative" programming, using a food recipe as an example of the steps involved. diff --git a/git-resources.md b/git-resources.md index 3328990..21e5d14 100644 --- a/git-resources.md +++ b/git-resources.md @@ -121,6 +121,10 @@ - **A closer look at git rebase** https://dev.to/gonedark/a-closer-look-at-git-rebase An explanation of what "rebasing" is, with some helpful graphics + +- **Visualize Merge History with git log --graph, --first-parent, and --no-merges** + https://redfin.engineering/visualize-merge-history-with-git-log-graph-first-parent-and-no-merges-c6a9b5ff109c + Describes issues with using `git log` to visualize history, and some arguments that can be used to give a potentially better picture of what's actually happened. #### E-Books diff --git a/mobx-tutorials.md b/mobx-tutorials.md index a008217..e757a43 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -116,4 +116,8 @@ A great video to understand the differences between MobX and Redux. - **Comparing Redux and MobX with two CTOs** https://youtu.be/ZGVwMkrL2n0 - A recorded presentation of two CTOs comparing several major aspects of React state management with `setState`, MobX, and Redux \ No newline at end of file + A recorded presentation of two CTOs comparing several major aspects of React state management with `setState`, MobX, and Redux + +- **Introduction to Redux and MobX** + https://medium.com/@guptagaruda/introduction-to-redux-and-mobx-e6fa98b6479 + A very nice comparison of the core concepts and benefits for Redux and MobX, with some good diagrams, useful tips, and links to relevant resources. \ No newline at end of file diff --git a/project-structure.md b/project-structure.md index 8bbfd62..4849de9 100644 --- a/project-structure.md +++ b/project-structure.md @@ -87,3 +87,7 @@ - **Decoupling Hierarchies for Maintainable Code** https://medium.com/altschool-engineering/decoupling-hierarchies-for-maintainable-code-b13c24b2f047 + +- **Writing Scalable React Apps with the Component Folder Pattern** + https://medium.com/styled-components/component-folder-pattern-ee42df37ec68 + Describes a specific variation on "feature folders" that puts all files for a given component in a separate folder, as well as an approach for providing configurable component rendering with default behavior as a fallback. diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index c468b61..d7c8cad 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -116,6 +116,12 @@ https://twitter.com/modernserf/status/886426115874717697 Deep and fascinating analysis of how Redux compares to OOP and message-passing, how typical Redux usage can devolve towards Java-like "setter" functions with more boilerplate, and something of a plea for a higher-level "blessed" abstraction on top of Redux to make it easier to work with and learn for newbies. Very worth reading. The author originally wrote a tweetstorm, which I captured in the Storify link, and wrote the blog post to expand on those thoughts. Finally, he followed up with a few more thoughts on abstract vs concrete examples in another shorter tweet thread. +- **6 mistakes Reacters make that Re-framers avoid** + https://purelyfunctional.tv/article/react-vs-re-frame/ + https://news.ycombinator.com/item?id=15157527 + https://news.ycombinator.com/item?id=15158334 + Comparisons between common React/Redux patterns, and how ClojureScript developers using the Reframe toolkit might solve the problems instead. Some decent discussion in the HN comments, including one comment that directly responds to the points in the original article, and discusses how React+Redux give you the power to solve the specific problems you're dealing with. + #### Comment Threads and Discussions @@ -268,6 +274,18 @@ similar structures in ClojureScript. https://medium.com/@dwalsh.sdlr/react-facebook-and-the-revokable-patent-license-why-its-a-paper-25c40c50b562 Analysis of the React patent license from an IP lawyer, in response to the latest set of discussions and arguments online +- **3 Points to Consider before Migrating Away from React because of Facebook's 'BSD+Patent' License** + https://medium.com/progressive-web-apps/react-progressive-web-apps-part-2-d55c6bd4b316 + Several valuable thoughts from a patent attorney on what the React PATENTS license actually means, how it relates to "React alternatives" like Preact, and how it affects React users legally. + +- **Open Source Community Over-REACTS to X Rated Code** + https://heathermeeker.com/2017/08/19/open-source-community-over-reacts-to-x-rated-code/ + A patent attorney gives perspective on how React's PATENTS license is similar to already-existing licenses, and what that means for both the Apache Software Foundation and other React users. + +- **Undersatnding the Facebook vs Apache Software Foundation License Kerfluffle** + http://writing.jan.io/2017/08/19/understanding-the-facebook-vs-asf-license-kerfuffle.html + A no-nonsense, clearly-written explanation of exactly what has happened regarding the Apache Software Foundation and the Facebook BSD+Patents license, including a timeline of events, summary of stances on both sides, and an FAQ on what it means. + - **Comments from other companies on the acceptability of the license** https://wptavern.com/automattic-will-continue-to-use-react-js-in-calypso-despite-patent-clause https://twitter.com/paul_irish/status/754864479460929536 @@ -279,6 +297,9 @@ similar structures in ClojureScript. https://www.reddit.com/r/programming/comments/6nnxir/apache_foundation_bans_use_of_facebook_bsdpatents/dkb3v4p/?context=3 One of the best layman's summaries I've seen about what the patents file actually means and is intended to do. + + + - **Further discussions** https://news.ycombinator.com/item?id=12108273 https://news.ycombinator.com/item?id=12108526 diff --git a/react-ajax.md b/react-ajax.md index 9e47a2e..24b6aa2 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -10,6 +10,10 @@ https://medium.com/@baphemot/how-to-make-ajax-requests-in-react-a6a52bb5a8b1 A helpful introduction to making AJAX requests, including libraries to use, where to run requests, and a couple examples of handling "loading..." status. +- **Understanding React: data hydration / initialization** + https://medium.com/@baphemot/understanding-reactjs-data-hydration-initialization-bacbb790c7cb + Describes several possible approaches to loading data from a server at app startup, including API calls and ways to embed data into the page. + - **Where to fetch Data: componentWillMount vs componentDidMount** https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/ A quick comparison of when these two lifecycle methods are called, and why AJAX calls should generally be done in `componentDidMount` diff --git a/react-component-patterns.md b/react-component-patterns.md index 9626bf0..0e2cb7b 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -258,6 +258,14 @@ - **Extracting Logic from React Components** https://javascriptplayground.com/blog/2017/07/react-extracting-logic/ Demonstrates taking a component that includes some logic for formatting a value, and refactoring it to extract out the formatting logic into separate functions. + +- **Refactoring React** + https://8thlight.com/blog/josh-mccormick/2017/08/21/refactoring-react.html + Demonstrates extracting state and logic out of a component to separate responsibility and improve ease of testing. + +- **How do you separate React components?** + 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. @@ -373,6 +381,10 @@ https://twitter.com/acdlite/status/890727843302301700 A short but interesting Twitter thread with some comments from Michael Jackson, Andrew Clark, and others, on the mental differences between using HOCs and render callbacks. +- **Real World Higher-Order Components** + 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. + #### Wrapping Non-React Code @@ -491,6 +503,10 @@ https://medium.com/@MoneyhubEnterpr/tasks-and-portals-in-react-1df2438cdebb Describes how MoneyHub implemented modal dialogs with wizard-like workflows that tie together multiple screens, using a combination of container components and portals. +- **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. + #### Composing Components with Functional Programming @@ -558,4 +574,7 @@ - **Creating a cross-domain React component with xcomponent** https://medium.com/@bluepnume/creating-a-cross-domain-react-component-with-xcomponent-fbcccc4778fd A look at how to wrap a React component using the xcomponent library, so that it can be rendered and used across domains. - \ No newline at end of file + +- **Using React v16 to create self-destructing components** + https://medium.com/@gajus/using-react-v16-to-create-self-destructing-components-de8e4eb61d0f + Demonstrates how a tiny component that simply returns its own children can simplify the process of returning arrays of components in React 16. \ No newline at end of file diff --git a/react-forms.md b/react-forms.md index db5a401..9efc297 100644 --- a/react-forms.md +++ b/react-forms.md @@ -69,6 +69,10 @@ - **Transitioning from uncontrolled inputs to controlled** https://goshakkk.name/turn-uncontrolled-into-controlled/ Explains how to refactor React forms with uncontrolled inputs to use controlled inputs instead. + +- **Tightly Controlled Textareas - Building solid plain text editors in React** + https://hashnode.com/post/tightly-controlled-textareas-building-solid-plain-text-editors-in-react-cj6yvu6yq00cls5wtrbbkw96d + A tutorial for implementing controlled behavior for a simple Markdown text editor component, including examples. #### Form Tutorials and Usage @@ -179,4 +183,8 @@ - **List or Form, why not both? Making a list with a built in editor in React** http://thereactionary.net/list-or-form-why-not-both-making-a-list-with-a-built-in-editor-in-react/ - Builds an example of a list with the ability to do inline editing of items. \ No newline at end of file + Builds an example of a list with the ability to do inline editing of items. + +- **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 diff --git a/react-performance.md b/react-performance.md index ef27402..ff30e43 100644 --- a/react-performance.md +++ b/react-performance.md @@ -160,6 +160,14 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://medium.com/@erikras/react-performance-anti-pattern-creating-functions-in-render-ddeb5ebd2933 Describes why creating functions inside of `render()` is bad for perf, specifically in relation to optimization and prop reference comparisons, and offers several alternate patterns as solutions. +- **Memoize React components** + https://medium.com/@planttheidea/memoize-react-components-33377d7ebb6c + Discusses the basic ideas of memoization, and shows how they can be applied to wrapping React components using the `moize` library (or other memoization libraries). + +- **When to use Component or PureComponent** + https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81 + Good advice on the potential benefits of using `PureComponent`, as well as several potential downsides or gotchas (such as binding functions in `render()`). + #### Code Splitting and Progressive Apps @@ -193,6 +201,11 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) https://mackness.github.io/react/patterns/2017/03/20/simple-pattern-for-asynchronously-loading-react-components.html A quick example of using dynamic importing to lazy-load React components +- **React Progressive Web Apps** + https://medium.com/progressive-web-apps/react-progressive-web-apps-part-1-1cf381421672 + https://medium.com/progressive-web-apps/react-progressive-web-apps-part-2-d55c6bd4b316 + A pair of posts that cover how to set up an initial PWA and check its behavior against best practices, and how to add offline-first behavior to a React+Redux PWA. + #### Immutable Data @@ -302,4 +315,8 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - **Redux isn't slow, you're just doing it wrong - an optimization guide for React-Redux** http://reactrocket.com/post/react-redux-optimization/ - An excellent summary of the basic steps for good performance with React-Redux \ No newline at end of file + An excellent summary of the basic steps for good performance with React-Redux + +- **Measuring performance gains - AngularJS to React (with Redux or MobX)** + https://medium.com/@guptagaruda/measuring-performance-gains-angularjs-to-react-with-redux-or-mobx-fb221517455 + A highly detailed article that investigates and benchmarks performance between an Angular 1.x app and equivalent React+Redux and React+MobX apps in a variety of real-world use cases. Excellently written and researched. \ No newline at end of file diff --git a/react-routing.md b/react-routing.md index 667219d..a5b6afe 100644 --- a/react-routing.md +++ b/react-routing.md @@ -90,6 +90,10 @@ https://medium.com/@bryanfillmer/a-redux-first-router-saga-67c2cda9252e Examples and discussion of how to use sagas in conjunction with Redux-based routing to handle side effects that are connected to route changes. +- **Redux First Router - First Impressions** + https://www.dailydrip.com/topics/react/drips/redux-first-router-first-impressions + A short tutorial that shows how to add redux-first-router to a CRA project and configure it. + #### Authentication diff --git a/react-techniques.md b/react-techniques.md index 7d10ddf..fc3e27c 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -1,7 +1,5 @@ ### React Tips and Techniques - - - **Get your React.js application translated with style** https://medium.com/@jamuhl/get-your-react-js-application-translated-with-style-4ad090aefc2c @@ -10,18 +8,34 @@ - **Adding Drag and Drop to React** https://www.dailydrip.com/blog/adding-drag-and-drop-to-react.html An example of using react-dnd to add drag-and-drop behavior, in conjunction with Redux. - -- **Exploiting Script Injection Flaws in ReactJS Apps** - https://medium.com/dailyjs/exploiting-script-injection-flaws-in-reactjs-883fb1fe36c1 - Describes how React is safe by design as long as it's used as intended, and looks at several possible attack vectors that can result from wrong use of React. - + - **Climbing Up the React Component Tree** https://www.ynonperek.com/2017/08/05/react-parent-hirearchy/ https://www.reddit.com/r/reactjs/comments/6s4czp/traversing_react_tree_in_the_opposite_direction/ Gives examples for calculating an array describing a component's parents, including using a HOC and using context. Not a recommended thing to try, but the exploration of the idea is interesting. The Reddit comments have a bit more useful discussion. -#### Using React Without JSX +- **SVG Patterns in React - Build a Twitter Wall** + https://www.robinwieruch.de/react-svg-patterns/ + A tutorial that covers several aspects of using SVG in React, and demonstrates how to use the svg-patterns library to generate patterend backgrounds. + +- **Using React v16 to create self-destructing components** + https://medium.com/@gajus/using-react-v16-to-create-self-destructing-components-de8e4eb61d0f + Demonstrates how a tiny component that simply returns its own children can simplify the process of returning arrays of components in React 16. + + +#### Security + +- **Exploiting Script Injection Flaws in ReactJS Apps** + https://medium.com/dailyjs/exploiting-script-injection-flaws-in-reactjs-883fb1fe36c1 + Describes how React is safe by design as long as it's used as intended, and looks at several possible attack vectors that can result from wrong use of React. + +- **How can I securely use CSS-in-JS with React?** + https://reactarmory.com/answers/how-can-i-use-css-in-js-securely + Covers several potential security holes that can result from allowing user input into CSS-in-JS libraries, with examples. + + +#### JSX - **Is JSX Still Relevant? Are there other options?** https://goshakkk.name/jsx-relevancy-options/ @@ -35,6 +49,14 @@ http://blog.isquaredsoftware.com/2017/07/react-redux-backbone-integration/ A look at ways to show React components inside of Backbone views, and some discussion of how to simplify React rendering when JSX isn't available by using libraries like `react-hyperscript-helpers`. +- **How I learned to stop worrying and love the JSX** + http://jamesknelson.com/learned-stop-worrying-love-jsx/ + Discusses several aspects of JSX, including "separation of concerns", how JSX translates into function calls, that JSX is optional, when to avoid using JSX, and more. + +- **React without a build step** + https://medium.com/@alexkrolick/writing-react-components-for-3rd-party-embedding-50331c18e26 + Describes how using `React.createElement` instead of JSX eliminates the need for a compile step, compares examples of equivalent JSX and `createElement` usage, and shows how to write a small embeddable widget using React/Preact that doesn't need any build step at all. + #### Debugging and Error Handling diff --git a/react-tutorials.md b/react-tutorials.md index 9a7256f..3db06c8 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -340,6 +340,18 @@ https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/ Demonstrates building a component that listens to mouse events, saves the coordinates, and draws the resulting lines using SVG. +- **React Crash Course for Beginners** + https://code.tutsplus.com/series/react-crash-course-for-beginners--cms-1204 + A tutorial series that teaches React concepts by building a movie gallery app. + +- **Creating a Blogging App Using React** + https://code.tutsplus.com/series/creating-a-blogging-app-using-react--cms-1171 + A tutorial series that shows how to build a blogging app with a server backend that includes routing authentication, and CRUD. + +- **Build a Metronome in React** + https://daveceddia.com/build-metronome-react/ + An easy-to-follow, step-by-step tutorial that demonstrates key concepts like loading data, initializing state, and handling input changes. + #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index 729a77c..ba45211 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -422,4 +422,9 @@ - **NgRx: Patterns and Techniques** https://blog.nrwl.io/ngrx-patterns-and-techniques-f46126e2b1e5 - Describes a variety of patterns and approaches for using the NgRx library (a clone of Redux built with RxJS and commonly used with Angular). The labels and categories given for side effects approaches, like "content-based decider", "content enricher", etc, can be applied to existing Redux middlewares as well. \ No newline at end of file + Describes a variety of patterns and approaches for using the NgRx library (a clone of Redux built with RxJS and commonly used with Angular). The labels and categories given for side effects approaches, like "content-based decider", "content enricher", etc, can be applied to existing Redux middlewares as well. + +- **MVC implemented by React and Causality-Redux** + https://medium.com/dailyjs/mvc-implemented-by-react-and-causality-redux-c4125a01e95c + https://medium.com/@causality_redux/react-redux-how-to-write-significantly-less-code-c0562ff06d5a + A pair of posts discussing how to use the "causality-redux" library to implement an MVC-type architecture on top of React and Redux. \ No newline at end of file diff --git a/redux-middleware.md b/redux-middleware.md index eaf52a1..15a8892 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -72,4 +72,8 @@ - **Defining user on-boarding flows with Redux middleware** https://medium.com/@JohnRandom/defining-user-on-boarding-flows-with-redux-middlewares-217885acbafc - Demonstrates implementing an on-boarding feature by implementing a Redux middleware to track user behavior and dispatch actions in response. \ No newline at end of file + Demonstrates implementing an on-boarding feature by implementing a Redux middleware to track user behavior and dispatch actions in response. + +- **"Do I always need to return a value from a Redux middleware?"** + https://stackoverflow.com/questions/45964129/do-i-always-need-to-return-a-value-from-a-redux-middleware/45964310#45964310 + My answer to a question about whether middleware should do `return next(action)`. Short version: yes, always, unless you want to alter expected behavior. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index aa68b99..32c2754 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -47,6 +47,10 @@ https://medium.com/sensehq/sense-ible-redux-thunk-30b866ca5914 Examples of how to define reusable caching and authorization handling for thunks using decorators +- **Returning promises from Redux action creators** + 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. + #### Side Effect Approach Comparisons @@ -233,6 +237,16 @@ http://blog.servicebot.io/building-our-event-and-user-notification-system-in-express-using-redux-and-sagas/ Some quick examples of using Redux-Saga in a Node Express app to handle processing for things like sending emails. +- **Redux Saga Retry Patterns** + https://medium.com/@bryanfillmer/keep-trying-redux-saga-style-b273882b9ec + https://codeburst.io/try-again-more-redux-saga-patterns-bfbc3ffcdc + A pair of articles discussing ways to handle reconnects, retries, and error handling in sagas. + +- **Redux, Firebase, and the Saga in between** + https://medium.com/rumors/redux-firebase-and-the-saga-in-between-c2bd5adf6de1 + Discussion and examples of how to use sagas to simplify and generalize interaction with Firebase in a Redux app. + + #### Other Side Effect Approaches diff --git a/redux-techniques.md b/redux-techniques.md index d0a75e4..f7c44d6 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -63,6 +63,10 @@ http://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/ Examples of using `combineReducers` multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic. +- **The Power of Higher-Order Reducers** + http://slides.com/omnidan/hor#/ + A slideshow from the author of redux-undo and other libraries, explaining the concept of higher-order reducers and how they can be used + - **Modifying a Leaf of the Redux State Tree** http://cmichel.io/modifying-a-leaf-of-the-redux-state-tree/ Some useful observations on how to properly do deep immutable updates. @@ -103,7 +107,13 @@ https://alligator.io/react/functional-redux-reducers-with-ramda/ Shows how to write a somewhat complex Redux reducer using only composition of functions from the Ramda library - +- **Combine Redux reducers like a Tetris ninja** + https://engineering.legalstart.fr/combine-redux-reducers-like-a-tetris-ninja-6f4eb690aed5 + Discusses the intended use case and limitations of `combineReducers`, and presents a custom utility called `combineMultiKeyReducers` that will pass along specified slices of state to a reducer. + +- **A small trick to write clean reducers** + https://hackernoon.com/a-small-trick-to-write-clean-reducers-a0b1b1eff3d2 + Shows a contrived example of updating deeply nested state, and discusses use of `lodash/fp` to simplify the update logic instead. #### Selectors and Normalization diff --git a/redux-tutorials.md b/redux-tutorials.md index 01b9a25..f384b44 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -129,6 +129,10 @@ https://github.com/uanders/react-redux-cheatsheet A diagram that tries to illustrate all the various pieces of the React+Redux API and workflow +- **Beginner's guide to React/Redux - How to start learning and not be overwhelmed** + https://medium.com/netscape/beginners-guide-to-react-redux-how-to-start-learning-and-not-be-overwhelmed-af04353101e + A good writeup from a React/Redux beginner, with advice on how to get started learning React and Redux, how to approach building your first meaningful React+Redux application, and related topics such as file structure, data flow, and rendering logic. + #### Project-Based Tutorials diff --git a/redux-without-react.md b/redux-without-react.md index 55230b2..b27dd74 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -73,4 +73,12 @@ - **Advanced Redux in Xamarin** https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-1-action-creators-19cb257093d2 - Discusses how to use the concepts of action creators and thunks with some of the C# implementations of Redux. \ No newline at end of file + https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-2-persistent-actions-middleware-2c1c684328a + https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-3-database-middleware-5dac7b5ee6ba + + Discusses how to use a C# implementation of Reedux, including the concepts of action creators and thunks, implementing persistence via middleware, and interacting with a database. + +- **Android.apply(Redux)** + https://blog.shazam.com/android-apply-redux-2ad0f7355e0 + Discusses a Redux-inspired pattern for use with Android as an alternative to the MVP approach. + \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index b8ec519..5cd15ad 100644 --- a/static-typing.md +++ b/static-typing.md @@ -192,6 +192,10 @@ - **Best Practices for Flow Typing React Components** https://building.coursera.org/blog/2017/06/01/best-practices-for-flow-typing-react-components/ Several useful suggestions and examples for using Flow types with React components. +- **React Higher-Order Components using TypeScript** + 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. + #### Advancing Typing Techniques diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 68aeebb..4a50296 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -98,6 +98,10 @@ https://www.codementor.io/drewpowers/high-performance-webpack-config-for-front-end-delivery-90sqic1qa Covers 7 optimizations you can add to a Webpack setup to build bundles faster and make them smaller. +- **Unpacking the Mysteries of Webpack** + https://www.viget.com/articles/unpacking-the-mysteries-of-webpack-a-novices-journey + Recaps some high-level Webpack terms and concepts, and walks through several changes to speed up compilation and improve bundle size. + #### Code Splitting and Chunking