diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml
new file mode 100644
index 0000000..0917829
--- /dev/null
+++ b/.github/workflows/action.yml
@@ -0,0 +1,17 @@
+name: Check URLs for dead links
+on:
+ workflow_dispatch:
+ # schedule:
+ # - cron: "0 11 * * 1" # Runs weekly at 7:00 AM EST on Monday
+ push:
+# jobs:
+ # markdown-link-check:
+ # runs-on: ubuntu-latest
+ # steps:
+ # - uses: actions/checkout@master
+ # - uses: gaurav-nelson/github-action-markdown-link-check@v1
+ # with:
+ # config-file: 'mlc_config.json'
+ # use-quiet-mode: 'yes'
+ # use-verbose-mode: 'yes'
+
diff --git a/README.md b/README.md
index 61ef95f..cf3d3de 100644
--- a/README.md
+++ b/README.md
@@ -69,254 +69,299 @@ You might also want to check out my categorized list of Redux-related addons, li
-
-## Best of the Best / Suggested Reading List
-
-All of the links in this collection are worth reading, but there's obviously a LOT of them. Here's a "best-of" list to get you started:
-
-## Basic Concepts and Learning Approaches
-
-### Overviews of Javascript Tools and Concepts
- - [State of the Javascript Landscape in 2016](http://www.infoq.com/articles/state-of-javascript-2016)
- A very high-level summary of the important terms and technologies that are used in modern Javascript development.
- - [The \(R\)Evolution of Web Development](http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/)
- A slideshow giving an overview of web dev history and modern web dev tools, technologies, and trends.
- - [Javascript Package Managers 101](https://medium.com/@shubheksha/javascript-package-managers-101-9afd926add0a)
- An overview of what packages and package managers are, some related terms, and how these tools work.
-
-### Suggested Learning Approaches
- - [A Study Plan to Cure Javascript Fatigue](https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1)
- The author of the "State of JS 2016" survey gives an excellent step-by-step study plan to use when learning the Javascript ecosystem.
- - [Grab Front-End Study Guide](https://github.com/grab/front-end-guide)
- An excellent guide to learning front-end technologies, based on "A Study Plan to Cure Javascript Fatigue". Includes descriptions of each topic, links to learning resources, and estimates for how much time to spend on each topic.
- - [React How-To](https://github.com/petehunt/react-howto)
- Pete Hunt, one of React's creators, gives a high-level suggested order to use when learning React-related technologies (React, NPM, bundlers, ES6, routing, and Flux/Redux)
- - [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/)
- [How to Learn React](https://daveceddia.com/how-to-learn-react/)
- Another high-level suggested timeline for how to approach learning React and related technologies.
- - [React Roadmap](https://github.com/ericdouglas/react-roadmap)
- A curated list of free resources to master React Development, in suggested learning order
- - [Tips to learn React + Redux](https://www.robinwieruch.de/tips-to-learn-react-redux/)
- An extensive and excellent list of suggestions to follow when learning and using React and Redux. Tips include when to use different component patterns, when to bring in a state management library, Redux state structuring, unit testing, and much more.
-
-
-## Learning Core Javascript (ES5)
-
-### General Resources
- - [Mozilla Developer Network: Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [Mozilla Developer Network: A Re-Introduction to Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
- Mozilla maintains a fantastic set of developer resources for Web technologies, including a comprehensive reference to the Javascript language and a number of associated tutorials. Their "reintroduction to Javascript" article is a great overview of what the language looks like.
- - [Eric Elliott's Javascript Resource Lists](https://medium.com/javascript-scene/10-priceless-resources-for-javascript-learners-bbf2f7d7f84e)
- [Eric Elliott's Essential Javascript Links](https://gist.github.com/ericelliott/d576f72441fc1b27dace/0cee592f8f8b7eae39c4b3851ae92b00463b67b9)
- Eric Elliott is a strong proponent of Javascript, has written numerous articles about learning and understanding Javascript, and assembled some very useful lists of numerous Javascript resources. (Strong opinions, but has useful info.)
- - [Wes Bos's Javascript Resource List](http://wesbos.com/learn-javascript)
- Speaker and teacher Wes Bos gives links to a number of resources for learning Javascript
-
-### Books
- - [Eloquent Javascript](http://eloquentjavascript.net/)
- A full online book teaching Javascript from the ground up. Very recommended.
- - [You Don't Know Javascript](https://github.com/getify/You-Dont-Know-JS)
- An online book series intended to teach all aspects of Javascript, including the "tougher" parts.
- - [Exploring Javascript](http://exploringjs.com/)
- Multiple free online books from Dr. Axel Rauschmayer. "Speaking Javascript" covers all of Javascript through ES5; "Exploring ES6" covers ES6 in depth; and other books look at versions of Javascript after ES6 and how to set up an ES6+ development environment.
-
-
-## Learning Current Javascript (ES6+)
-
-### ES6 Feature Overviews
- - [ES6 Overview in 350 Bullet Points](https://ponyfoo.com/articles/es6)
- Quick samples and descriptions of all the various ES6 capabilities
- - [ES6 Features Comparison](http://es6-features.org/)
- Code snippets comparing ES6 features with their ES5 equivalents
- - [ES6 - The Bits You'll Actually Use](http://jamesknelson.com/es6-the-bits-youll-actually-use/)
- A quick tour through some of the more useful features in ES6
- - [A Rundown of Javascript 2015 Features](https://auth0.com/blog/a-rundown-of-es6-features/)
- An overview of the features in ES6 and how they can be used.
-
-### In-Depth Details
- - [ES6 In Depth](https://ponyfoo.com/articles/tagged/es6-in-depth)
- Many articles covering each feature in greater detail
- - [Exploring ES6](http://exploringjs.com/es6/index.html)
- A full online book covering every aspect of ES6 in fine detail
-
-
-## React Walkthrough
-
-If you are new to React, try reading these articles in order.
-
-### Getting Started
- - [React Documentation: Hello World](https://facebook.github.io/react/docs/hello-world.html)
- [React Documentation: Tutorial](https://facebook.github.io/react/tutorial/tutorial.html)
- The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information.
- - [Create-React-App](https://github.com/facebookincubator/create-react-app)
- The official project creation tool from the React team. Allows you to set up a new React project, with no configuration work required.
- - [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f)
- An excellent set of instructions for setting up a React project with minimal fuss and effort needed. Includes links to some useful resources, and info on deploying the app to production.
- - [Modern Web Development with React and Redux](http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/)
- An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples.
- - [Learn Raw React](http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/)
- A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms.
- - [30 Days of React](https://www.fullstackreact.com/30-days-of-react/)
- A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment.
-
-### Data Flow: “State” and “Props”
- - [A Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/)
- Describes what "state" is, what kinds of data should be included into React state, and how state flow relates to component updates.
- - [ReactJS: Props vs State](http://lucybain.com/blog/2016/react-state-vs-pros/)
- Explains that "props" are data passed in to a component, while "state" is data managed inside a component.
- - [Best Practices for Component State in React](http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html)
- Some excellent suggestions and approaches for state handling and component structure.
-
-### Component Patterns
- - [React Patterns](http://reactpatterns.com/)
- An excellent list of common patterns for structuring React components, with examples
- - [The React Component Lifecycle](https://www.kirupa.com/react/component_lifecycle.htm)
- A useful description of the order and purpose of React’s component lifecycle methods.
- - [8 no-Flux strategies for React component communication](http://andrewhfarmer.com/component-communication/)
- Very helpful list of ways to have React components communicate back and forth
- - [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
- Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React.
- - [Mixins Considered Harmful](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html)
- Dan Abramov explains why the React team discourages use of mixins, and prefers a pattern called “Higher Order Components” instead
- - [Components, React, and Flux](http://slides.com/danabramov/components-react-flux-wip#/)
- A fantastic HTML slideshow that discusses how to organize code as reusable components, and the basic concepts and benefits of a Flux unidirectional architecture
- - [Reactive, Component-Based UIs](http://banderson.github.io/reactive-component-ui-presentation/#/)
- Another fantastic HTML slideshow describing the three principles of React: "functional over OOP", "stateless over stateful", "clarity over brevity" (use arrow keys to advance slides)
-
-### Function Binding and `this`
- - [Gentle Explanation of `this` keyword in Javascript](http://rainsoft.io/gentle-explanation-of-this-in-javascript/)
- A long and in-depth explanation of the various ways that the `this` keyword can be defined
- - [The Inner Workings of Javascript's `this` keyword](https://www.sitepoint.com/inner-workings-javascripts-this-keyword/)
- [Mastering Javascript's `this` keyword](https://www.sitepoint.com/mastering-javascripts-this-keyword/)
- A two-part article on the ins and outs of `this`.
- - [Why and How to Bind Methods in your React Component Classes](http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/)
- A good look at function binding in JS, and how it works with React
- - [React Binding Patterns: 5 Approaches for Handling `this`](https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56)
- Describes five different ways you can handle binding methods to handle the `this` keyword correctly
- - ["Fat arrow vs autobind vs bindbindbind?”](https://www.reddit.com/r/reactjs/comments/54xnao/fat_arrow_vs_autobind_vs_bindbindbindbindbind/d85wj0l)
- Dan Abramov from the React team gives his thoughts on how to handle method binding.
-
-### AJAX requests and Data Fetching
- - [React AJAX Best Practices](http://andrewhfarmer.com/react-ajax-best-practices/)
- Covers four ways to approach managing queries and data fetching.
- - [AJAX Requests in React: How and Where to Fetch Data](https://daveceddia.com/ajax-requests-in-react/)
- An overview of where AJAX requests fit into React usage.
-
-### Immutable Data
- - [Pros and Cons of Using Immutability With React](http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/)
- Excellent description of what immutability is, how to use use these concepts with React, and pros and cons of managing data immutably. While the title refers to React, most of the writing just deals with plain Javascript concepts.
- - [Javascript and Immutability](http://t4d.io/javascript-and-immutability/)
- A description of how to properly immutably update objects and arrays using functions like assign and slice
- - [Redux Docs: Structuring Reducers - Immutable Update Patterns](http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html)
- Useful examples for doing proper immutable updates, including common mistakes, proper updates of nested data, updates for arrays, and more. (Helpful for Redux, but not Redux-specific.)
-
-### Functional Programming
- - [The Little Idea of Functional Programming](http://jaysoo.ca/2016/01/13/functional-programming-little-ideas/)
- Describes the three basic principles of FP: "data in/data out", "code as data", and "function composition" all the way down, and demonstrates transforming some data. Has some very helpful graphics and illustrations.
- - [What Is Functional Programming?](http://blog.jenkster.com/2015/12/what-is-functional-programming.html)
- Describes how side effects and "hidden inputs" add complexity to code, in very clear terms.
-
-### Forms and Inputs
- - [Controlled and uncontrolled form inputs in React don't have to be complicated](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/)
- A great summary of what controlled and uncontrolled inputs are, what each approach looks like, and how to handle values from different types of inputs.
- - [React.js Forms: Controlled Components](http://lorenstewart.me/2016/10/31/react-js-forms-controlled-components/)
- An excellent article that describes the concept of controlled components, and demonstrates examples of how to interact with different types of form inputs
- - [Learn Raw React: Ridiculously Simple Forms](http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms/)
- Covers the basics of implementing form rendering, updates, and validation, in plain JS
-
-### Styles
- - [Styling in React](https://www.kirupa.com/react/styling_in_react.htm)
- An introduction to using React's built-in inline styling abilities
- - [How To Style React](http://andrewhfarmer.com/how-to-style-react/)
- An excellent overview of the four major ways to deal with styles in React, and what the various tools are. Includes a decision tree to help you decide what to use.
-
-
-## Redux
-
-### Getting Started
- - [Redux Docs](http://redux.js.org/index.html)
- The official Redux documentation. Contains an excellent tutorial that walks you through “here’s what you want to do, and how we came up with this”, as well as recipes for more advanced topics. Be sure to read through the FAQ for answers to common questions and links to further information.
- - [Getting Started with Redux - Video Series](https://egghead.io/series/getting-started-with-redux)
- [Getting Started with Redux - Course Notes](https://github.com/tayiorbeii/egghead.io_redux_course_notes)
- Dan Abramov, the creator of Redux demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos.
- - [Building React Applications with Idiomatic Redux - Video Series](https://egghead.io/series/building-react-applications-with-idiomatic-redux)
- [Building React Applications with Idiomatic Redux - Course Notes](https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes)
- Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos.
- - [A Cartoon Guide to Redux](https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6)
- A nifty introduction to Redux’s concepts using cartoon explanations
- - [Redux: From Twitter Hype to Production](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/)
- An extremely well-produced slideshow that visually steps through core Redux concepts, usage with React, project organization, and side effects with thunks and sagas. Has some absolutely fantastic animated diagrams demonstrating how data flows through a React+Redux architecture.
- - [Leveling Up with React: Redux](https://css-tricks.com/learning-react-redux/)
- A very well-written introduction to Redux and its related concepts, with some useful cartoon-ish diagrams.
- - [Connect.js explained](https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e)
- A very simplified version of React Redux's `connect()` function that illustrates the basic implementation
-
-### AJAX, Timeouts, and other “Side Effects”
- - [Dispatching Redux Actions with a Timeout / ](http://stackoverflow.com/a/35415559/62937)
- [Why do we need middleware for async flow in Redux?](http://stackoverflow.com/a/34599594/62937)
- A pair of answers from Dan Abramov, explaining how “side effects” like AJAX calls and asynchronous behavior fit into Redux
- - [What the heck is a "thunk"?](https://daveceddia.com/what-is-a-thunk/)
- An explanation of the word “thunk”, and how thunks can be used to do things like AJAX calls.
-
-### Middleware
- - [Redux Middleware](http://jonnyreeves.co.uk/2016/redux-middleware/)
- A tutorial describing how Redux compares to typical "MVC", what a "middleware" is, what they can do, and how you can test them.
- - [Exploring Redux Middlewares](http://blog.krawaller.se/posts/exploring-redux-middleware/)
- Understanding middlewares through a series of small experiments
-
-### Debugging
- - [Hot reloading and time travel debugging: what are they?](https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35)
- A short but informative article describing these concepts and why they're useful, with cartoon illustrations
- - [Time Travel in React Redux apps using the Redux DevTools](https://onsen.io/blog/react-redux-devtools-with-time-travel/)
- Examples of configuring a Redux store to use the DevTools enhancers, and using both the DevTools components and the browser extension for debugging.
-
-### Writing Reducers
- - [Redux Docs: Structuring Reducers](http://redux.js.org/docs/recipes/StructuringReducers.html)
- Comprehensive information on writing reducers and structuring data, covering reducer composition, use of `combineReducers`, normalizing data, proper immutable updating, and more.
- - [Taking Advantage of `combineReducers`](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.
-
-### Selectors and Normalization
- - [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.
- - [Normalizing Redux Stores for Maximum Code Reuse](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: Redux-ORM Basics](http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/)
- [Practical Redux: Redux-ORM Concepts and Techniques](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.
-
-
-## Webpack
-
-### Getting Started
- - [Webpack Documentation](https://webpack.js.org/)
- Webpack's new documentation site, explaining concepts, configuration, and recipes
- - [Webpack from First Principles](https://youtu.be/WQue1AN93YU)
- A screencast video explaining what Webpack is and why you would want to use it
- - [What is Webpack and what can it do for you?](http://x-team.com/2016/09/webpack-can-absolute-beginners/)
- A plain-English explanation of what Webpack is and what problems it can help solve.
- - [SurviveJS - Webpack](http://survivejs.com/webpack/introduction)
- A full book online book that covers setting up Webpack for both development and production. Also touches topics such as ESLint and npm.
-
-### Configuration and Concepts
- - [Webpack: The Confusing Parts](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9)
- A great simplification and breakdown of the different pieces that make up a Webpack configuration: dev vs prod, CLI vs dev-server, the "entry" option, the "output" option / "path" vs "publicPath", loaders and configuration, Babel, plugins, and path resolving.
- - [Angular + Webpack < 3](https://docs.google.com/presentation/d/10mIapWjv1pyUQaMv6G8MCdoe9OK2Ey8zz-CLkHuFdRI)
- A long presentation that describes Webpack and its core concepts in depth. A few parts are Angular-centric, but still an extremely clear and informative set of slides. Covers topics like the "entry" and "output" options, "loaders", and "plugins".
- - [Advanced Webpack](http://presentations.survivejs.com/advanced-webpack/)
- An in-depth presentation that walks through Webpack concepts, terms, configuration, and usage. Covers a number of advanced topics, and very worth reading.
-
-### Build Optimization
- - [Advanced Frontend Optimization with Webpack](http://sokra.github.io/slides/frontend-optimize)
- Slides by Webpack’s original author, describing ways to improve Webpack builds.
- - [Formidable Playbook](https://formidable.com/open-source/playbook/)
- Formidable Labs describes their preferred approaches for configuring Webpack, including optimization approaches.
-
-### Hot Module Reloading
- - [HMR Tutorial: Why Use HMR?](http://andrewhfarmer.com/why-use-hmr/)
- [HMR Tutorial: Understanding HMR](http://andrewhfarmer.com/understanding-hmr/)
- [HMR Tutorial: 3 Ways to use HMR with Webpack](http://andrewhfarmer.com/3-ways-webpack-hmr/)
- [HMR Tutorial: HMR Ideas and Setup](http://andrewhfarmer.com/webpack-hmr-tutorial/)
- A very readable and informative series of articles that explains what HMR is, what benefits it gives, and how to use it.
- - [Webpack Hot Reloading and React](https://ctheu.com/2015/12/29/webpack-hot-reloading-and-react-how/)
- An explanation of how Hot Reloading works, and how the various pieces fit together.
+## Recommended Learning Path
+
+**You should usually learn these technologies in the following order:**
+
+1. **"How Web Apps Work":** a series of posts that lays out the big picture of the core technologies, terms, and concepts used in client/server web apps
+2. **JavaScript:** If you don't know JavaScript, nothing else will make sense
+3. **React:** You can use React by itself, or with Redux and/or TypeScript. Learning it separately will minimize the number of new concepts and syntax you have to learn at once.
+4. **Redux:** Redux can be used separately, but it's most commonly used with React.
+5. **TypeScript:** Because it adds static types on top of JS, you need to understand JS first. Also, it's easiest to understand React and Redux first, _then_ learn how to use them with static types.
+
+The resources in this page are listed in that order.
+
+**You are not required to read every single link and article listed in this page.** However, you should try to read through as many of the articles linked in the "Recommended Primary Resources" sections as possible, especially for topics you are not already familiar with. Many of the recommended tutorials do cover the same topics, so feel free to skip past concepts you've already learned.
+
+Links in the "Additional Resources" sections are available as references and reading as needed.
+
+### How Web Apps Work
+
+Mark's post series that describes the key terms, concepts, technologies, syntax, and data flow used in web apps.
+
+#### Recommended Primary Resources (should read)
+
+- [How Web Apps Work: HTTP and Servers](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-http-server/)
+- [How Web Apps Work: Client Development and Deployment](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-client-dev-deployment/)
+- [How Web Apps Work: Browsers, HTML, and CSS](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-html-css/)
+- [How Web Apps Work: JavaScript and the DOM](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-javascript-dom/)
+- [How Web Apps Work: AJAX, APIs, and Data Transfer](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-ajax-apis-data/)
+
+### Javascript
+
+#### Recommended Primary Resources (should read)
+
+##### General JS
+
+- **Slides:** [Mark's "JavaScript for Java Developers" slides](https://blog.isquaredsoftware.com/2019/05/presentation-js-for-java-devs/)
+- **Read:** [MDN: A re-introduction to JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
+- **Read:** [The Modern JavaScript Tutorial](https://javascript.info/)
+- **Read:** [Javascript Cheatsheet](https://javascript.pythoncheatsheet.org/)
+- **Exercises:** [CodeCademy - Introduction to JavaScript Tutorial](https://www.codecademy.com/learn/introduction-to-javascript)
+
+##### Specific Topics
+
+- Array methods:
+ - [Modern JS Tutorial - Array Methods](https://javascript.info/array-methods)
+ - [Which Array Function When?](https://dev.to/andrew565/which-array-function-when)
+- Equality and Comparisons
+ - [MDN - Equality comparisons and sameness](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness)
+ - [JS Equality Comparison Table](https://dorey.github.io/JavaScript-Equality-Table/)
+- Closures
+ - [MDN - Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
+ - [Modern JS Tutorial - Closures](https://javascript.info/closure)
+- `this` keyword and scopes
+ - [A gentle explanation of `this` keyword in JavaScript](https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/)
+ - [`this` in JavaScript](https://zellwk.com/blog/this/)
+ - [Everything you wanted to know about JavaScript scope](https://ultimatecourses.com/blog/everything-you-wanted-to-know-about-javascript-scope)
+- The JS event loop
+ - [Watch: What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ&vl=en)
+ - [The JavaScript Event Loop](https://flaviocopes.com/javascript-event-loop/)
+- CSS and layout
+ - [CSS: From Zero to Hero](https://dev.to/aspittel/css-from-zero-to-hero-3o16)
+ - [MDN - Visual Formatting Model](https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model)
+ - [MDN - Introduction to the CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+ - [HTML and CSS is Hard (but it doesn't have to be)](https://internetingishard.com/html-and-css/)
+ - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+ - [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
+- Node / NPM
+ - [How to install Node.js](https://nodejs.dev/learn/how-to-install-nodejs)
+ - [An introduction to the npm package manager](https://nodejs.dev/learn/an-introduction-to-the-npm-package-manager)
+- Build Tools
+ - [The Many Jobs of JS Build Tools](https://www.swyx.io/jobs-of-js-build-tools/)
+- Debugging
+ - [The definitive guide to debugging JavaScript](https://flaviocopes.com/javascript-debugging/)
+ - [Intro to debugging React Applications](https://medium.com/@baphemot/intro-to-debugging-reactjs-applications-67cf7a50b3dd)
+
+#### Additional Resources (read as needed)
+
+##### General JS
+
+- **Core References:**
+ - [MDN: JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)
+ - [The Modern JavaScript Tutorial](https://javascript.info/)
+ - [Online book: JavaScript for Impatient Programmers](http://exploringjs.com/impatient-js/toc.html)
+- **Syntax Overviews:**
+ - [Javascript Cheatsheet](https://javascript.pythoncheatsheet.org/)
+ - [ES6 Overview in 350 Bullet Points](https://ponyfoo.com/articles/es6)
+ - [ES6 Feature Examples](http://es6-features.org)
+- **Additional Books / References:**
+ - [The Complete JavaScript Handbook](https://medium.freecodecamp.org/the-complete-javascript-handbook-f26b2c71719c)
+ - [Eloquent JavaScript](https://eloquentjavascript.net/)
+ - [Exploring JS books](http://exploringjs.com/) (cover what's new in each yearly revision of the language)
+ - [Links: ES6+ Features and Syntax](https://github.com/markerikson/react-redux-links/blob/master/es6-features.md) (links to additional articles on new features in ES6+)
+ - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) (advanced concepts and understanding of JS behavior)
+
+##### Specific Topics
+
+- Array/object methods / immutability
+ - [Does It Mutate?](https://doesitmutate.xyz/)
+ - [Array Explorer](https://sdras.github.io/array-explorer/) and [Object Explorer](https://sdras.github.io/object-explorer/)
+- JS Event Loop
+ - [The JavaScript Event Loop](https://flaviocopes.com/javascript-event-loop/)
+- Regular Expressions
+ - [A Guide to JavaScript Regular Expressions](https://flaviocopes.com/javascript-regular-expressions/)
+ - [A Beginner's Guide to Regular Expressions in JavaScript](https://blog.bitsrc.io/a-beginners-guide-to-regular-expressions-regex-in-javascript-9c58feb27eb4)
+- CSS
+ - [Online Interactive CSS Cheat Sheet](https://htmlcheatsheet.com/css/)
+ - [A Practical CSS Cheat Sheet](https://www.toptal.com/css/css-cheat-sheet)
+ - [GRID: A simple visual cheatsheet for CSS Grid Layout](http://grid.malven.co/)
+- Node / NPM
+ - [Introduction to Node.js](https://nodejs.dev/learn)
+ - [The package.json guide](https://nodejs.dev/learn/the-package-json-guide)
+- Lodash
+ - [Lodash documentation](https://lodash.com/docs/)
+- Build Tools
+ - Babel
+ - [Babel Docs](https://babeljs.io/)
+ - [Babel Tutorial (TutorialsPoint)](https://www.tutorialspoint.com/babeljs/index.htm)
+ - [A Beginner's Guide to Babel](https://www.sitepoint.com/babel-beginners-guide/)
+ - [A Short and Simple Guide to Babel](https://flaviocopes.com/babel/)
+ - Webpack
+ - [Webpack docs](https://webpack.js.org/)
+ - [Webpack Academy](https://webpack.academy/)
+ - [Webpack from First Principles](https://www.youtube.com/watch?v=WQue1AN93YU)
+
+### React
+
+#### Recommended Primary Resources (should read)
+
+##### General React
+
+Start with reading the official docs first. The React team is in the process of starting a major rewrite of the React docs site to focus on teaching function components and hooks first, which is now available in beta. We've linked to that rather than the existing "main" documentation.
+
+These other listed tutorials are also excellent and may explain things in a different way.
+
+- **Read: [official React docs](https://beta.reactjs.org/)**
+ - [Getting Started](https://reactjs.org/docs/getting-started.html) (docs overview and related resources)
+ - [Main Concepts](https://reactjs.org/docs/hello-world.html) (read the whole series, but especially these two):
+ - [Lifting State Up](https://reactjs.org/docs/lifting-state-up.html)
+ - [Thinking In React](https://reactjs.org/docs/thinking-in-react.html)
+ - [React Hooks guide](https://reactjs.org/docs/hooks-intro.html) (lays out the motivation, teaches hooks, API reference, in-depth FAQ)
+- **Read: [React docs (converted to show hooks)](https://reactwithhooks.netlify.app/)**
+
+ - [Tutorial](https://reactwithhooks.netlify.app/tutorial/tutorial.html)
+
+- **Watch:** [React Tutorial for Beginners](https://egghead.io/courses/the-beginner-s-guide-to-react)
+- **Read:** [Intro to React, Redux, and TypeScript for 2020](https://blog.isquaredsoftware.com/2020/12/presentations-react-redux-ts-intro/) (Mark's presentation slides)
+- **Read:** [Build a CRUD App in React with Hooks](https://www.taniarascia.com/crud-app-in-react-with-hooks/)
+- **Read:** [A Comprehensive Guide to React in 2020](https://medium.freecodecamp.org/a-comprehensive-guide-to-react-js-in-2018-ba8bb6975597)
+- **Exercises:** [Learn React - Interactive Tutorials](https://scrimba.com/g/glearnreact)
+
+##### Project Setup
+
+- **Read: [Simple React Development in 2019](https://hackernoon.com/simple-react-development-in-2017-113bd563691f)** (a guide to setting up an app, development environment, and deployment)
+- **Use: [CodeSandbox.io](https://codesandbox.io)** (an online IDE that uses VS Code's editor, and can let you develop and run your apps completely in the browser)
+- **Use: [Create-React-App](https://facebook.github.io/create-react-app/)** (the official CLI tool for creating a React app with one command. Sets up a project with good default build settings out of the box.)
+
+##### Specific Topics
+
+- Understanding how React works conceptually / internally
+ - [React as a UI Runtime](https://overreacted.io/react-as-a-ui-runtime/) (deep dive - not _required_ reading, but will definitely help you understand React better)
+ - [Mark Erikson: A (Mostly) Complete Guide to React Rendering Behavior](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/)
+ - [Build your own React](https://pomb.us/build-your-own-react/)
+- State and props
+ - [A Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/)
+- Component lifecycles
+ - [React component lifecycle interactive diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
+- AJAX requests
+ - [AJAX Request in React - How and Where to Fetch Data](https://daveceddia.com/ajax-requests-in-react/)
+- Immutability
+ - [Immutability in React and Redux: The Complete Guide](https://daveceddia.com/react-redux-immutability-guide/)
+ - [Redux docs: Immutable Update Patterns](https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns)
+- Functional Programming basics
+ - [The Little Idea of Functional Programming](https://jaysoo.ca/2016/01/13/functional-programming-little-ideas/)
+ - [What is Functional Programming?](http://blog.jenkster.com/2015/12/what-is-functional-programming.html)
+- Forms and "controlled inputs"
+ - [React docs - Forms](https://reactjs.org/docs/forms.html)
+ - [Controlled and uncontrolled form inputs in React don't have to be complicated](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/)
+ - [Transitioning from uncontrolled inputs to controlled](https://goshakkk.name/turn-uncontrolled-into-controlled/)
+- React's new "hooks" API
+ - [React docs - Hooks](https://reactjs.org/docs/hooks-intro.html) (lays out the motivation, teaches hooks, API reference, in-depth FAQ)
+ - [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/) (very long article, but a must-read. Teaches how hooks use closures, defining when effects run, and much more.)
+ - [What are React Hooks?](https://www.robinwieruch.de/react-hooks/)
+ - [React Hooks: Not Magic, Just Arrays](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) (looks under the hood to explain how hooks are implemented)
+
+#### Additional Resources (read as needed)
+
+##### General React
+
+- **Resource Collections**
+ - [Mark Erikson's React-Redux links collection (many categories of links to articles)](https://github.com/markerikson/react-redux-links)
+ - [Mark's suggested resources for learning React](https://blog.isquaredsoftware.com/2017/12/blogged-answers-learn-react/)
+ - [Dave Ceddia's blog](https://daveceddia.com/archives/) (everything he's written)
+ - [Robin Wieruch's blog](https://www.robinwieruch.de/categories/react/) (also everything he's written)
+- **Additional Books / References**
+ - [The Road to React](https://roadtoreact.com/)
+ - [Learn Pure React](https://daveceddia.com/pure-react/)
+
+### Redux
+
+#### Recommended Primary Resources (should read)
+
+##### General Redux
+
+Start with reading the official docs first.
+
+The other tutorials are also excellent and may explain things in a different way.
+
+- **Read: [Redux core docs](https://redux.js.org/)**
+ - **["Redux Essentials" tutorial](https://redux.js.org/tutorials/essentials/part-1-overview-concepts):** explains "how to use Redux, the right way", using the latest recommended techniques and practices like Redux Toolkit and the React-Redux API, while building a real-world-ish example app.
+ - **["Redux Fundamentals" tutorial](https://redux.js.org/tutorials/fundamentals/part-1-overview):** teaches "how Redux works, from the ground up". including core Redux data flow and why standard Redux patterns exist.
+ - ["Typescript quick start"](https://redux-toolkit.js.org/tutorials/typescript): explains how to configure Redux Toolkit with type safety from action creators through to selectors.
+- **Use: [Redux Toolkit](https://redux-toolkit.js.org/)** (an official Redux package to simplify common tasks, including store setup and writing reducers)
+ - Example project: [https://github.com/reduxjs/redux-essentials-example-app/tree/tutorial-steps](https://github.com/reduxjs/redux-essentials-example-app/tree/tutorial-steps)
+- **Read: [React-Redux docs](https://react-redux.js.org/)**
+ - **[React-Redux hooks API reference](https://react-redux.js.org/api/hooks)**
+ - These APIs are now considered outdated, but are widely used in existing Redux codebases
+ - [`connect()`: Extracting Data with `mapStateToProps`](https://react-redux.js.org/using-react-redux/connect-mapstate)
+ - [`connect()`: Dispatching Actions with `mapDispatchToProps`](https://react-redux.js.org/using-react-redux/connect-mapdispatch)
+- **Watch:** Dan Abramov's tutorial videos on Egghead
+ - [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux)
+ - [Building React Apps with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)
+- **Read:** [A Complete React-Redux Tutorial](https://daveceddia.com/redux-tutorial/)
+- **Read:** [React Redux Tutorial for Beginners: The Definitive Guide](https://www.valentinog.com/blog/redux/)
+- **Read:** [Leveling Up with React: Redux](https://css-tricks.com/learning-react-redux/)
+
+##### Mark Erikson's Redux Resources
+
+- **Read: ["Idiomatic Redux" concepts and opinion series](https://blog.isquaredsoftware.com/series/idiomatic-redux/)**. A series of blog posts that describes standard Redux development best practices, why they exist, and how Redux is meant to be used. (These are not required reading to get started, but highly recommended once you understand the basics.)
+- Legacy resources (do not cover "Modern Redux", but still informative)
+ - **Read: [Redux Fundamentals Workshop slices](https://blog.isquaredsoftware.com/2018/06/redux-fundamentals-workshop-slides/)**: a 2-day internal workshop that covers Redux from the ground up. Includes complete recordings of each section, slides, and an exercises repo. (Does not cover "Modern Redux", but
+ - **Read: ["Practical Redux" blog tutorial series](https://blog.isquaredsoftware.com/series/practical-redux/)**. Covers multiple React and Redux concepts through building a larger example application
+
+##### Specific Topics
+
+- Tradeoffs of using Redux:
+ - [Mark Erikson: When (and when not) to Reach for Redux](https://changelog.com/posts/when-and-when-not-to-reach-for-redux)
+ - [Dan Abramov: the Case for Flux](https://medium.com/swlh/the-case-for-flux-379b7d1982c6)
+ - [Dan Abramov: You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)
+- Reducer functions
+ - [Redux docs - Structuring Reducers](https://redux.js.org/recipes/structuring-reducers/structuring-reducers)
+- Selector functions
+ - [Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance](https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/)
+- Side effects
+ - [Stack Overflow: How do we dispatch an action with a timeout?](https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559)
+ - [Stack Overflow: Why do we need middleware for async flow?](https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594)
+ - [What the heck is a "thunk"?](https://daveceddia.com/what-is-a-thunk/)
+ - [What is the right way to do asynchronous operations in Redux?](https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/) (side-by-side comparison of multiple side effects approaches)
+ - [Redux Power Tools: Redux-Saga](https://formidable.com/blog/category/redux-saga/)
+- Normalizing data
+ - [Redux docs - Normalizing State Shape](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape)
+ - [Normalizing Redux Stores for Maximum Code Reuse](https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95)
+
+#### Additional Resources (read as needed)
+
+- **Resource Collections**
+ - [**Redux Style Guide**](https://redux.js.org/style-guide/style-guide): best practices and recommendations for using Redux the right way
+ - [**Redux FAQ**](https://redux.js.org/faq) (answers to many common questions about Redux)
+ - [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) (a curated list of Redux-related addons and utilities)
+- **Books and Courses**
+ - [Pure Redux course](https://daveceddia.com/pure-redux/) by Dave Ceddia
+ - [Redux course](https://tylermcginnis.com/courses/redux/) by Tyler McGinnis
+ - [Learn Redux course](https://learnredux.com/) by Wes Bos (free)
+ - [Redux in Action](https://www.manning.com/books/redux-in-action)
+ - [The Complete Redux Book](https://leanpub.com/redux-book) (free)
+ - [Taming the State in React](https://www.robinwieruch.de/learn-react-redux-mobx-state-management/)
+
+##### Specific Topics
+
+- How does Redux work?
+ - [Build Yourself a Redux](https://zapier.com/engineering/how-to-build-redux/)
+ - [Idiomatic Redux: The History and Implementation of React-Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/)
+
+### TypeScript
+
+#### Recommended Primary Resources (should read)
+
+- **Read: [official TypeScript docs](https://www.typescriptlang.org/docs/home.html)**
+- [Typescript Playground](https://www.typescriptlang.org/play) - an interactive playground for testing typescript behavior and reproducing issues - includes some built-in examples
+- **Read: [Get Started with TypeScript in 2019](https://www.robertcooper.me/get-started-with-typescript-in-2019)**
+- **Read: [The Definitive TypeScript Guide](https://www.sitepen.com/blog/update-the-definitive-typescript-guide/)**
+ - [TypeScript Cheat Sheet](https://www.sitepen.com/blog/typescript-cheat-sheet)
+- **Read: [The TypeScript Guide](https://flaviocopes.com/typescript/)**
+
+##### Specific Topics
+
+- `interface` vs `type`
+ - [TypeScript Interface vs Type](https://pawelgrzybek.com/typescript-interface-vs-type/)
+ - [Interface vs Type sandbox example](https://www.typescriptlang.org/play?q=287#example/types-vs-interfaces)
+- ["Typescript quick start"](https://redux-toolkit.js.org/tutorials/typescript): explains how to configure Redux Toolkit with type safety from action creators through to selectors.
+
+#### Additional Resources (read as needed)
+
+- **Resource Collections**
+ - **[React+TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet)** (a definitive set of information on how to use TypeScript with React)
+ - [React + Redux in TypeScript - Static Typing Guide](https://github.com/piotrwitek/react-redux-typescript-guide) (a comprehensive set of info on using React, Redux, and TS together, with a focus on getting complete / "correct" type coverage of an app)
+- **Techniques**
+ - [Redux with Code-Splitting and Type Checking](https://www.matthewgerstman.com/tech/redux-code-split-typecheck/)
diff --git a/basic-concepts.md b/basic-concepts.md
index d27d69c..7a816f0 100644
--- a/basic-concepts.md
+++ b/basic-concepts.md
@@ -100,10 +100,6 @@
https://daveceddia.com/how-to-learn-react/
Another high-level suggested timeline for how to approach learning React and related technologies.
-- **React Roadmap**
- https://github.com/ericdouglas/react-roadmap
- A curated list of free resources to master React Development, in suggested learning order
-
- **React FAQ**
https://github.com/timarney/react-faq
A collection of links to help answer your questions about React, including how to get started
@@ -128,15 +124,23 @@
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.
+- **5 practical tips to finally learn React in 2018**
+ https://goshakkk.name/tips-finally-learn-react/
+ Common-sense suggestions for simplifying the React learning process, including skipping buzzwords and hardcoding data.
+
- **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.
+- **Developer Productivity Tips from the React Experts**
+ https://www.telerik.com/kendo-react-ui/react-best-practices-and-productivity-tips/
+ The KendoReact team curated the top productivity tips of 20+ React experts, ranging from smart ways to get started to advanced productivity hacks. Includes ideas from Emma Wedekind, Kent C. Dodds, vjeux and many more.
+
#### General Suggestions for Learning
- **Learn the Javascript Ecosystem one package at a time**
- http://andrewhfarmer.com/npm-sandboxing/
+ https://www.javascriptstuff.com/npm-sandboxing
Some tips for how to approach learning the JS ecosystem without being overwhelmed.
- **On being overwhelmed with our fast paced industry**
@@ -164,10 +168,6 @@
http://goshakkk.name/redux-vs-mobx-vs-flux-etoomanychoices/
Advice on avoiding choice overload when learning a toolset like React, by simplifying and just focusing on one new thing at a time.
-- **How to avoid Javascript fatigue and sleep well at night**
- https://www.javascriptfatigue.club/blog/2016/11/29/how-to-avoid-javascript-fatigue-and-sleep-well-at-night
- A talk giving suggestions for dealing with learning tools and techologies, including knowing when to stop reading, following specific experts, learning patterns, and focusing on what the real problem is you're trying to solve
-
- **How to Manage Javascript Fatigue**
https://auth0.com/blog/how-to-manage-javascript-fatigue/
A description of what "JS fatigue" means in practice, and advice for managing it, including "picking battles", "make something interesting", and "be aware of common concepts".
@@ -182,4 +182,31 @@
- **Keeping Up With the JavaScript World**
https://daveceddia.com/keeping-up-with-javascript/
- Dave Ceddia offers some great advice on how to manage learning about what's new and changing in the JS community, including sources to follow for keeping up with what's new, choosing what to learn, and how to tackle actually learning things.
\ No newline at end of file
+ Dave Ceddia offers some great advice on how to manage learning about what's new and changing in the JS community, including sources to follow for keeping up with what's new, choosing what to learn, and how to tackle actually learning things.
+
+
+#### Learning Project Ideas
+
+- **5 Projects to Help You Learn React**
+ https://daveceddia.com/react-practice-projects/
+ A list of 5 sample project ideas that aren't todo lists, ranging from basic card components to a Github issues page.
+
+- **The secret to being a top developer is building things! Here's a list of fun apps to build**
+ https://medium.freecodecamp.org/the-secret-to-being-a-top-developer-is-building-things-heres-a-list-of-fun-apps-to-build-aac61ac0736c
+ A list of 8 good-sized project ideas, including a Trello clone, cryptocurrency tracker, and a native messenger clone
+
+- **10 React Start Project Ideas to Get You Coding**
+ https://medium.com/@dtkatz/10-react-starter-project-ideas-to-get-you-coding-5b35782e1831
+ A list of 10 options besides todo lists, including a quiz builder, a music player, and a forum app.
+
+- **Every time you build a todo list, a puppy dies**
+ https://medium.freecodecamp.org/every-time-you-build-a-to-do-list-app-a-puppy-dies-505b54637a5d
+ A list of 28 app ideas that aren't todo lists. Suggests using a Ruby on Rails backend, but the ideas are sufficiently generic. Ideas include a calendar, a book reading club, a Twitter client, and more.
+
+- **What to do after the React/Redux tutorials**
+ http://blog.jakoblind.no/react-redux-tutorials/
+ Suggests 8 APIs you could use to help build an application after working your way through basic tutorials.
+
+- **7 GUIs**
+ http://eugenkiss.github.io/7guis/tasks/
+ A list of 7 generic example apps that can be built in any language or UI framework. Intended as a basic usability benchmark for different UI frameworks, but also a decent list of ideas for learning projects. Includes a counter, a temperature converter, a flight booker, a timer, a CRUD app, and more.
diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md
index d75eccb..f6cb3b2 100644
--- a/boilerplates-and-starter-kits.md
+++ b/boilerplates-and-starter-kits.md
@@ -76,22 +76,16 @@
#### Other
- **React Starter Project Search Tool**
- http://andrewhfarmer.com/starter-project/
+ https://www.javascriptstuff.com/react-starter-projects/
Search for starter kits with/without specific libraries and sort by GitHub stars, number of dependencies, or recently updated.
- **Awesome React Boilerplates**
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
-- **Simple React Development in 2017**
+- **Simple React Development in 2018**
https://hackernoon.com/simple-react-development-in-2017-113bd563691f
An excellent set of instructions for setting up a React project with minimal fuss and effort needed. Includes links to some useful resources, and info on deploying the app to production.
@@ -130,18 +124,7 @@
- **Setup a React Environment using Webpack and Babel**
https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel
A tutorial that teaches how to set up a basic Webpack 2 + Babel config from scratch.
-
-- **Setting up a Front-End Project**
- https://medium.com/@Torwori/setting-up-a-front-end-project-part-1-d7fbaaaa5e14
- https://medium.com/@Torwori/setting-up-a-front-end-project-part-2-cbbae56ffd15
- https://medium.com/@Torwori/setting-up-a-front-end-project-part-3-38f1681d310b
- https://medium.com/@Torwori/setting-up-a-front-end-project-part-4-b6fe32e58e5
- An in-depth tutorial series covering setup and configuration of many tools, including Git, Webpack, Babel, ESLint, and Typescript.
-
+
- **Setting up Webpack, Babel, and React from scratch in 2017**
https://stanko.github.io/webpack-babel-react-revisited/
A step-by-step tutorial that demonstrates each piece of the process needed to set up a build system from scratch.
-
-- **How to set up React, Webpack 3, and Babel, in 2017**
- https://www.valentinog.com/blog/react-webpack-babel/
- A clear explanation of how to create a basic Webpack+Babel setup for a React app, with descriptions of why each step is necessary.
\ No newline at end of file
diff --git a/community-resources.md b/community-resources.md
index 9e00273..6cde911 100644
--- a/community-resources.md
+++ b/community-resources.md
@@ -23,10 +23,6 @@
https://github.com/d3viant0ne/awesome-webpack
A curated list of awesome Webpack resources, libraries and tools
-- **React Roadmap**
- https://github.com/ericdouglas/react-roadmap
- A curated list of free resources to master React Development
-
- **React FAQ**
https://github.com/timarney/react-faq
A collection of links to help answer your questions about React.js
@@ -51,10 +47,6 @@
https://github.com/tuchk4/awesome-create-react-app
A collection of articles, links, issues, and information on how to use and customize the Create-React-App tool.
-- **Planet React**
- https://www.planet-react.org/
- A blog aggregator that collects posts from dozens of blogs written by members of the React community. An excellent resource.
-
- **Awesome CSS-in-JS**
https://github.com/tuchk4/awesome-css-in-js
A collection of awesome things regarding CSS in JS approaches
@@ -120,10 +112,6 @@
#### Newsletters
-- **Full Stack React**
- http://newsletter.fullstackreact.com/
- Fullstack React is a weekly newsletter about the React ecosystem with an emphasis on useful libraries, tutorials and code. Subscribe to read the best articles each week on React, Flux, GraphQL, Relay, and friends.
-
- **React.js Newsletter**
http://reactjsnewsletter.com/
The free, weekly newsletter of the best React.js news, articles, projects, and more - brought to you by React.js Program
@@ -131,11 +119,7 @@
- **React Digest**
http://reactdigest.net/
A free, weekly newsletter about the latest news in React Javascript community. The only news source you need targeted on (but not limited to) React, Javascript, Flux and functional programming.
-
-- **Curated React**
- http://curatedreact.com/
- Curated React is a weekly curated publication full of interesting, relevant links geared towards ReactJS and React Native.
-
+
- **React Statuscode**
http://react.statuscode.com/
A free, once-weekly e-mail newsletter on React from the authors of JavaScript Weekly.
@@ -148,10 +132,6 @@
https://ponyfoo.com/weekly
A single email every thursday, discussing front-end web development and related technologies.
-- **Deterministic**
- https://deterministic.curated.co
- A weekly digest of interesting news and articles covering functional programming for the web, especially on the front end.
-
- **ES.next News**
http://esnextnews.com/
5 ECMAScript.next links every week, in your inbox. Curated by Dr. Axel Rauschmayer and Johannes Weber.
diff --git a/es6-features.md b/es6-features.md
index 51ce247..b0a7fff 100644
--- a/es6-features.md
+++ b/es6-features.md
@@ -1,7 +1,5 @@
-
### Javascript ES6 Features and Examples
-
#### Overviews
- **ES6 Features Overview**
@@ -10,11 +8,11 @@
- **ES6 Features Comparison**
http://es6-features.org/
- Code snippets comparing ES6 features with their ES5 equivalents
+ Code snippets comparing ES6 features with their ES5 equivalents
- **ES6 Overview in 350 Bullet Points**
https://ponyfoo.com/articles/es6
- Quick samples and descriptions of all the various ES6 capabilities
+ Quick samples and descriptions of all the various ES6 capabilities
- **Javascript Features**
http://jsfeatures.in/#ES6
@@ -22,146 +20,134 @@
- **ES6 - The Bits You'll Actually Use**
http://jamesknelson.com/es6-the-bits-youll-actually-use/
- A quick tour through some of the more useful features in ES6
-
+ A quick tour through some of the more useful features in ES6
+
- **ES6 Succinctly**
http://kamranahmed.info/blog/2016/04/04/es6-in-depth/
A very readable overview of the features in ES6, why you would want to use them, and examples showing what they look like.
-
+
- **How to Learn ES6**
https://medium.com/javascript-scene/how-to-learn-es6-47d9a1ac2620
A set of resources for learning ES6
-
+
- **ES6 for Humans**
https://github.com/metagrover/ES6-for-humans
A kickstarter guide to writing ES6.
-
+
- **Start Using ES6 Today**
http://wesbos.github.io/ES6-Talk/
A set of slides describing the features in ES6
-
+
- **Learn Harmony (ES2015) Now**
http://learnharmony.org/
An interactive tool for learning and experimenting with ES6/ES2015 features
-
+
- **ES6 New Features Tutorials**
https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBhgcpA8eTYYWg7im72LgLt
A set of video tutorials explaining the new features in ES6
-
+
- **ES6 Cheatsheet**
https://es6cheatsheet.com/
- An interactive cheatsheet with editable and runnable examples to help explain the new syntax and features in ES6. Offered as a "Pay What You Want" model, so $0 is a valid choice, but payments are requested.
-
+ An interactive cheatsheet with editable and runnable examples to help explain the new syntax and features in ES6. Offered as a "Pay What You Want" model, so $0 is a valid choice, but payments are requested.
+
- **A Rundown of Javascript 2015 Features**
https://auth0.com/blog/a-rundown-of-es6-features/
An overview of the features in ES6 and how they can be used.
-
+
- **ES6 Summary**
https://github.com/zsolt-nagy/es6-summary
A list of ES6 features and their ES5 equivalents
-
+
- **Introduction to commonly used ES6 features**
https://zellwk.com/blog/es6/
A great look at how several of the most useful ES6 features work, such as block scoping, arrow functions, and destructuring.
-
+
- **ES6 Katas: Learn ES6 by doing it**
http://es6katas.org/
Sets of exercises to help you learn ES6 features and syntax.
-
+
- **Tiny ES6 Notebook**
https://github.com/mattharrison/Tiny-ES6-Notebook
A large list of notes, examples, and discussion on how to use the features in ES6
-
-- **ECMASyntax**
- 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
- **ES6 In Depth**
https://ponyfoo.com/articles/tagged/es6-in-depth
Many articles covering each feature in greater detail
-
+
- **Exploring ES6**
http://exploringjs.com/es6/index.html
- A full online book covering every aspect of ES6 in fine detail
-
+ A full online book covering every aspect of ES6 in fine detail
+
- **Understanding ES6**
https://leanpub.com/understandinges6/read
An online book that covers all the changes and features involved in ES6
-
+
- **Javascript Alonge: The "Six" Edition**
https://leanpub.com/javascriptallongesix/read
A book that teaches Javascript and ES6 from a functional programming perspective
-
-- **Why Do ES6 Classes Exist, and Why Now?**
- 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.
-
-
#### Specific Features
-
+
- **Metaprogramming in ES6: Symbols, Reflection, and Proxies**
https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/
https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-2-reflect/
https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-3-proxies/
A deep dive into three new features of ES6 that enable different ways of metaprogramming.
-
-- **Detailed overview of well-known Symbols**
- https://rainsoft.io/detailed-overview-of-well-known-symbols/
- An in-depth look at the predefined Symbols in ES6 and what they are used for.
-
+
- **Learning ES6: New Collections**
https://www.eventbrite.com/engineering/learning-es6-new-collections/
Details the new Map, Set, WeakMap & WeakSet collection types in ES6.
-
+
- **Learning ES6: Iterators and Iterables**
https://www.eventbrite.com/engineering/learning-es6-iterators-iterables/
Covers the new iteration-related features in ES6
-
+
- **The Most In-Depth Yet Understandable ES6 Destructuring Tutorial**
http://untangled.io/in-depth-es6-destructuring-with-assembled-avengers/
A thorough set of examples for ES6's destructuring feature
-
+
- **My New Favorite ES6 Toy: Destructured Objects as Parameters**
https://css-tricks.com/new-favorite-es6-toy-destructured-objects-parameters/
An example of using objects and destructuring to act like named parameters
-
+
- **Extract Nested Data from Arrays and Objects with Destructuring Assignment**
https://angulartoreact.com/es6-destructuring/
Examples of how destructuring can make it easy to create new variables from other data.
-
+
- **The Reflect API of ES6**
http://www.zsoltnagy.eu/the-reflect-api-of-es6/
An overview of the Reflect API, which allows some complex metaprogramming capabilities.
-
+
- **Advanced ES6 Destructuring Techniques**
http://untangled.io/advanced-es6-destructuring-techniques/
Examples of advanced ways to use ES6's destructuring capabilities
-
+
- **ES6 Proxies in Practice**
http://www.zsoltnagy.eu/es6-proxies-in-practice/
An overview of how to use ES6 proxies for advanced use cases, with examples
-
+
- **ES6 Features - 10 Use Cases for Proxy**
http://dealwithjs.io/es6-features-10-use-cases-for-proxy/
Lists a variety of ways that ES6 proxies can be used, with links to examples
-
+
- **Stop JavaScripting Like It's 1999**
https://www.slideshare.net/HunterLoftis1/connecttech-2017-stop-javascripting-like-its-1999
A slideshow that illustrates how to use async/await and Promises to write cleaner-looking file handling code in a Node environment.
-
-
+
+- **Spreading the Spread and Rest Love: Javascript's Spread Syntax**
+ https://spin.atomicobject.com/2018/01/09/javascript-spread-syntax/
+ Examples of the new array spread and object rest/spread syntaxes, and how to use them
+
#### Generators
- **Javascript Generators**
@@ -175,20 +161,18 @@
- **Using ES6 Generators and Yield to Implement Async Workflows**
https://www.bennadel.com/blog/3123-using-es6-generators-and-yield-to-implement-asynchronous-workflows-in-javascript.htm
A dive into how generators work, and how they can be used to handle async behavior
-
+
- **A Practical Introduction to ES6 Generator Functions**
http://thejsguy.com/2016/10/15/a-practical-introduction-to-es6-generator-functions.html
Some practical examples discussing what generator functions are, how they work, and what they can be used for.
-
+
- **3 cases where JavaScript generators rock (+ understanding them)**
http://goshakkk.name/javascript-generators-understanding-sample-use-cases/
A simple thinking pattern for easily understanding generators, plus 3 practical applications.
-
+
- **ES6 Generators and asynchronous Javascript**
http://web.archive.org/web/20160304215133/https://alexperry.io/javascript/2015/09/17/es6-generators-and-asynchronous-javascript.html
A clear description of how generator functions can be paused and continued, and how that capability enables writing asynchronous code in a synchronous-looking way.
-
-
#### Promises
@@ -199,19 +183,19 @@
- **Javascript Promises... in Wicked Detail**
http://www.mattgreer.org/articles/promises-in-wicked-detail/
Explains what promises are and how they work by building a promise implementation from scratch
-
+
- **Javascript Promises: an Introduction**
https://developers.google.com/web/fundamentals/getting-started/primers/promises
An explanation of what promises are, what they're useful for, terms, and related APIs
-
+
- **ES6 Promises in Depth**
https://ponyfoo.com/articles/es6-promises-in-depth
A detailed description of promises, what they are, and how to use them
-
+
- **Awesome Promises**
https://github.com/wbinnssmith/awesome-promises
Links to tutorials, articles, and other resources on promises
-
+
- **We have a problem with promises**
https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
Describes some common mistakes while using promises, and how to avoid them
@@ -223,46 +207,40 @@
- **Broken Promises**
https://mockbrian.com/blog/2016/12/29/broken-promises/
Some useful tips for dealing with promises.
-
+
- **JS: Promises/A+, jQuery Deferreds, and errors**
http://lucybain.com/blog/2017/js-promises-errors-a-plus-vs-deferreds/
A comparison of the two most common Promise definitions, and how they differ in behavior
-
-- **Practical Promises**
- http://trycatchfail.com/blog/?tag=/promises
- An excellent series of articles describing the basics of promises, and listing a variety of useful techniques for using promises to solve problems.
-
+
- **Escape from Callback Mountain: the "Functional River" pattern**
https://github.com/justsml/escape-from-callback-mountain/
An opinionated suggested approach for writing promise callbacks to form a pipeline
-
+
- **ES6 Promises: Patterns and Anti-Patterns**
https://medium.com/datafire-io/es6-promises-patterns-and-anti-patterns-bbb21a5d0918
Several useful techniques for using Promises, such as "promisifying" callback-based functions and running promises in parallel or sequence, and some common mistakes to avoid like not actually returning anything in a promise callback.
-
+
- **Gotchas about async/await and Promises**
https://dev.to/maxart2501/gotchas-about-asyncawait-and-promises-9di
Several valuable tips about how to safely use async/await and Promise behavior, especially around error-handling.
-
+
- **await vs return vs return await**
https://jakearchibald.com/2017/await-vs-return-vs-return-await/
An informative look at the differences in behavior between various uses of the async/await syntax in relation to promises
-
-
+
#### Techniques
- **"Real" Mixins with Javascript Classes"**
http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/
An explanation of what mixins are, and how to implement them using ES6 classes
-
+
- **Functional Mixins in ECMAScript 2015**
http://raganwald.com/2015/06/17/functional-mixins.html
Another approach at combining mixins and classes
-
+
- **Selective transpilation for modern Javascript environments**
https://medium.com/@adamrackis/selective-transpilation-for-modern-javascript-environments-15bde6b75cfd
An investigation into ways to offer up differently-compiled bundles for different platforms with various levels of JS feature support.
-
#### Javascript Module Formats
@@ -270,60 +248,51 @@
https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc
https://medium.freecodecamp.com/javascript-modules-part-2-module-bundling-5020383cf306
A two-part article discussing the various ways to define a module in Javascript, and common tools used to bundle modules together
-
+
- **Understanding ES6 Modules via Their History**
https://www.sitepoint.com/understanding-es6-modules-via-their-history/
A recap of how the various Javascript module formats evolved over time, and how that's lead to ES6 modules
-
+
- **Javascript Module Systems Showndown: CommonJS vs AMD vs ES2015**
https://auth0.com/blog/javascript-module-systems-showdown/
A look at the history and reasons for each module format's creation
-
+
- **History and Background of Javascript Module Loaders**
https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/
An overview of the various tools that have been used to load different module formats over time
-
+
- **Understanding Javascript Modules: Bundling and Transpiling**
https://www.sitepoint.com/javascript-modules-bundling-transpiling/
An overview of tools commonly used to bundle and transpile various module formats
-
+
- **How Javascript Modules Work - from Past to Present**
http://www.penta-code.com/how-javascript-modules-work-from-past-to-present/
An overview of the different approaches that have been used to load Javascript modules over time.
-
+
- **Understanding the State of Javascript Modules**
http://georgemauer.net/2016/11/25/how-js-modules-work.html
A look at the major differences in module loading approaches, and why tools like Webpack or Browserify are needed to help, as well as recommendations on which tools to use adn why.
-
-- **Native ECMAScript Modules: Overview and New Features**
- https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview
- https://blog.hospodarets.com/native-ecmascript-modules-new-features
- An in-depth look at existing module formats, how ES modules work, and how ES modules relate to bundlers like Webpack
-
-- **Native ECMAScript Modules: dynamic import()**
- https://blog.hospodarets.com/native-ecmascript-modules-dynamic-import
- Details on how the in-progress `import()` operator will allow dynamic loading of modules.
-
+
- **A 10-Minute Primer to JS Module Formats, Loaders, and Bundlers**
http://jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/
A useful introduction to the various module formats and module tools
-
+
- **History of Javascript: Evolution of JS Modularity**
https://github.com/myshov/history_of_javascript/tree/master/4_evolution_of_js_modularity
A well-researched article that recounts the history and development of Javascript module definition approaches
-
+
- **The State of Javascript Modules**
https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358
An extended article summarizing the state of ES module implementations, how the transition to modules relates to the Node ecosystem, and what the changes will mean for Webpack users and module authors.
-
+
- **Reify: Meteor's evolving Javascript module compiler**
https://blog.meteor.com/reify-meteors-evolving-javascript-module-compiler-70425fa45d81
A detailed look at the subtleties of ES6 module syntax, and how Meteor's Reify compiler and Babel's module transform plugin deal with those restrictions in different ways.
-
+
- **ES6 Modules in Node Today**
https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b
- John-David Dalton, author of Lodash, announces his new ES6 module loader, which enables ES module usage in Node right now.
-
+ John-David Dalton, author of Lodash, announces his new ES6 module loader, which enables ES module usage in Node right now.
+
- **State of Modules in JavaScript**
https://www.sitepen.com/blog/2017/10/26/state-of-modules-in-javascript/
- Covers the key features of ES modules, including basic syntax, syntax for importing/exporting/re-exporting, dynamic imports, debugging, bundling, and more.
\ No newline at end of file
+ Covers the key features of ES modules, including basic syntax, syntax for importing/exporting/re-exporting, dynamic imports, debugging, bundling, and more.
diff --git a/flux-tutorials.md b/flux-tutorials.md
index de3e931..0991497 100644
--- a/flux-tutorials.md
+++ b/flux-tutorials.md
@@ -21,14 +21,6 @@
https://github.com/MIJOTHY/FOR_FLUX_SAKE
A Flux tutorial and description, with a sample project
-- **Thinking in Flux**
- http://www.actioniq.co/blog/thinking-in-flux/
- An example of writing a component that works in a Flux data flow
-
-- **A Cartoon Guide to Flux**
- https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207
- A high-level description of Flux concepts, with cartoons
-
- **React/Flux Tutorial Part 2: Flux**
http://spapas.github.io/2015/07/02/comprehensive-react-flux-tutorial-2/
Reworks the app from part 1 to use Flux
diff --git a/framework-comparisons.md b/framework-comparisons.md
index 84db72d..1ddf933 100644
--- a/framework-comparisons.md
+++ b/framework-comparisons.md
@@ -26,15 +26,15 @@
- **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.
+- **Why I'm switching from Angular to React and Redux**
+ https://hackernoon.com/why-im-switching-from-angular-to-react-and-redux-in-2018-cb48be00fda7
+ One person's opinions on why they decided to work with React and Redux instead of Angular, including flexibility of libraries over the "one way" of a framework, simpler state management with Redux vs services and injected event emitters, and more.
+
#### React and Flux vs Backbone
@@ -68,7 +68,19 @@
- **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.
-
+
- **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
+ https://www.jackfranklin.co.uk/blog/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.
+
+- **A Chip off the Monolith**
+ https://medium.com/onfido-tech/a-chip-off-the-monolith-ec71e06a3015
+ The Onfido team describes how they extracted a portion of their monolithic Rails+Ember app into a separate React+Redux app.
+
+- **7 Tips for migration from Backbone to React & Redux**
+ https://medium.com/@denisraslov/7-tips-for-migration-from-backbone-to-react-redux-a006a927c39e
+ Excellent practical advice for adding React and Redux into a Backbone app, including rendering React components inside Backbone views, syncing Backbone and Redux, and planning the migration timing.
+
+- **Transitioning Your Marionette App to React**
+ https://medium.com/@michaelsholty/transitioning-your-marionette-app-to-react-4b94ddefafd1
+ Examples of interop between React components and Marionette views
\ No newline at end of file
diff --git a/functional-programming.md b/functional-programming.md
index c67053f..84a4090 100644
--- a/functional-programming.md
+++ b/functional-programming.md
@@ -25,15 +25,6 @@
- **Functors, Applicatives, and Monads in Pictures**
http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html
A long article that tries to describe several FP terms using lots of cartoons.
-
-- **Introduction to Immutable.js and Functional Programming Concepts**
- https://auth0.com/blog/2016/03/23/intro-to-immutable-js/
- Covers the benefits of using immutable data, pure functions, and other FP concepts, and how those related to Immutable.js.
-
-- **Practical Intro to Monads in Javascript**
- http://tech.evojam.com/2016/02/22/practical-intro-to-monads-in-javascript/
- http://tech.evojam.com/2016/03/21/practical-intro-to-monads-in-javascript-either/
- An attempt to describe monads aimed at developers and engineers.
- **A Gentle Introduction to Functional Javascript**
http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-intro/
@@ -42,10 +33,6 @@
http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-style/
Goes through a number of FP-related aspects in Javascript.
-- **Professor Frisby's Mostly Adequate Guide to Functional Programming**
- https://drboolean.gitbooks.io/mostly-adequate-guide/content/
- A long (and still growing) online book covering functional topics. Starts fairly simple, definitely gets more complex in later chapters.
-
- **Functional Thinking**
http://nealford.com/functionalthinking.html
An extended series of articles collected together. Aimed at Java/JVM programmers, and makes a number of comparisons of OOP vs FP.
@@ -58,10 +45,6 @@
http://fsharpforfunandprofit.com/series/thinking-functionally.html
A series of lessons teaching functional concepts using F#. Very well written, clear and easy to understand. Examples use F#, but concepts are widely applicable.
-- **Imperative to Functional Programming Succinctly**
- https://www.syncfusion.com/resources/techportal/details/ebooks/imperative
- A short ebook covering many functional concepts.
-
- **Functional Programming in Javascript**
https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84
A web series by a quirky programmer showing you high level functional concepts in Javascript
@@ -95,11 +78,7 @@
https://medium.com/@collardeau/intro-to-functional-programming-concepts-in-javascript-part-2-f45228c49eed
https://medium.com/@collardeau/part-3-an-intro-to-functional-programming-concepts-in-javascript-febf9368ffe6
A multi-part series covering a number of FP concepts, how to use them in Javascript, and use of the Ramda FP utility library
-
-- **JavaScript and Functional Programming**
- https://bethallchurch.github.io/JavaScript-and-Functional-Programming/
- An overview of the basic principles of functional programming, and how they can be applied in Javascript. Also includes links to a variety of other articles and resources.
-
+
- **Functional-Light JS**
https://github.com/getify/Functional-Light-JS
This book explores the core principles of functional programming (FP) that can be applied to JavaScript. But what makes this book different is that we approach these principles without drowning in all the heavy terminology. We look at a subset of FP foundational concepts that I call "Functional-Light Programming" (FLP) and apply it to JavaScript.
@@ -116,16 +95,10 @@
https://www.smashingmagazine.com/2014/07/dont-be-scared-of-functional-programming/
Several examples of functional programming principles, both in plain JS and with Underscore.js
-
- **Functional Programming Basics in ES6**
https://www.youtube.com/watch?v=HvMemAgOw6I
Talk on functional programming with JavaScript and ES6 syntax. Covers basics such as purity, referential transparency, closures, immutability, currying, composition, and recursion.
-
-- **Using Composition and Array Functions**
- http://ignaciochavez.com/using-composition-and-array-functions/
- Some useful examples of composing together different functions to accomplish a task. Has some very nice diagrams illustrating the process.
-
- **Dipping a toe into functional JS with lodash/fp**
https://simonsmith.io/dipping-a-toe-into-functional-js-with-lodash-fp/
Examples of using Lodash's functional API for logic and React component composition
@@ -134,15 +107,10 @@
https://medium.com/@homam/composability-from-callbacks-to-categories-in-es6-f3d91e62451e
Explores different solutions to "callback hell", based on various FP concepts
-
- **So You Want To Be a Functional Programmer**
https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-6-db502830403
A multi-part series on functional programming concepts and learning approaches (links to previous parts in the article).
-- **Imperative vs Declarative Programming**
- https://medium.freecodecamp.com/imperative-vs-declarative-programming-283e96bf8aea
- Metaphors, examples, and explanations for the terms "declarative" and "imperative", and how those relate to Functional Programming
-
- **Higher-order functions in Lodash**
http://pragmatists.pl/blog/2017/05/higher-order-functions-in-lodash/
An explanation of several FP concepts like partial application and currying, and how Lodash offers utility functions to help make use of those concepts.
@@ -150,11 +118,7 @@
- **How to Draw an Owl**
https://glebbahmutov.com/blog/how-to-draw-an-owl/
Demonstrates refactoring some complex imperative code into a functional approach that uses concepts like pure functions, lenses, immutable data, and the Maybe monad
-
-- **Classes, Complexity, and Functional Programming**
- 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 2f2ffad..155d8ea 100644
--- a/git-resources.md
+++ b/git-resources.md
@@ -40,11 +40,7 @@
- **Git from the Inside Out**
https://codewords.recurse.com/issues/two/git-from-the-inside-out
An explanation of how Git works, by describing the internal data structures and the graph that they form.
-
-- **Ry's Git Tutorial**
- http://rypress.com/tutorials/git/index
- An excellent introduction to Git's key concepts and command. Very well written and explained.
-
+
- **Git for Humans**
https://speakerdeck.com/alicebartlett/git-for-humans
A slideshow introducing Git concepts without complex terminology
@@ -75,11 +71,7 @@
- **Advance Git**
https://medium.com/@jstats/advance-git-dfe557bdbe59
Gives advice for good commit messages, and describes the options and usage for several advanced Git commands (`add --patch`, `rebase`, `reflog`, and more).
-
-- **Git Useful Tips**
- http://ericdouglas.github.io/2016/04/01/Git-Useful-Tips/
- A useful reference to commands and concepts.
-
+
- **19 Tips for Everyday Git Use**
http://www.alexkras.com/19-git-tips-for-everyday-use
A variety of practical commands for different scenarios.
@@ -107,11 +99,7 @@
- **Life-Saving Git Tips**
https://www.cuttlesoft.com/life-saving-git-tips/
A variety of useful tips, including use of cherry-picking, local pulling and testing, and use of aliases to simplify tasks
-
-- **Git Cheat Sheet: Useful Commands, Tips and Tricks**
- https://sentheon.com/blog/git-cheat-sheet.html
- A large cheat sheet / reference for a variety of Git usage topics, including workflow, configuration, .gitignore syntax, different categories of commands, and more.
-
+
- **Git Flight Rules**
https://github.com/k88hudson/git-flight-rules
A guide for Git users about what to do when things go wrong. Covers topics like editing commits, staging and unstaging files, fixing branches, rebasing/merging, and much more.
@@ -150,6 +138,14 @@
https://github.com/blog/2019-how-to-undo-almost-anything-with-git
Instructions for undoing and redoing changes in various scenarios.
+- **Undoing in Git**
+ https://blog.tratif.com/2018/01/04/undoing-in-git/
+ A summary of the most common ways for undoing things in Git, including bringing back removed commits.
+
+- **Beginner's Guide to Interactive Rebasing**
+ https://hackernoon.com/beginners-guide-to-interactive-rebasing-346a3f9c3a6d
+ An excellent walkthrough of how to use interactive rebasing for rewriting commit history by editing, deleting, and combining commits
+
#### E-Books
@@ -157,10 +153,6 @@
https://git-scm.com/book/en/v2
An in-depth online reference to all aspects of Git
-- **Git Succinctly**
- https://www.syncfusion.com/resources/techportal/details/ebooks/git
- A free PDF that covers Git concepts and usage
-
- **Git Internals**
https://github.com/pluralsight/git-internals-pdf
A free PDF that digs deep into Git's data structures and behavior
@@ -183,10 +175,6 @@
#### Cheat Sheets
-- **Git CLI Cheat Sheet**
- http://cheat.errtheblog.com/s/git
- A list of many useful Git commands, with explanations
-
- **A Visual Git Reference**
http://marklodato.github.io/visual-git-guide/index-en.html
Describes several common Git commands, with diagrams to explain what each one does
diff --git a/immutable-data.md b/immutable-data.md
index 54f4f18..2c1aee2 100644
--- a/immutable-data.md
+++ b/immutable-data.md
@@ -1,15 +1,10 @@
### Immutable Data
-
#### Basic Concepts
- **Pros and Cons of Using Immutability With React**
http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/
- Excellent description of what immutability is, how to use use these concepts with React, and pros and cons of managing data immutably. While the title refers to React, most of the writing just deals with plain Javascript concepts.
-
-- **Javascript and Immutability**
- http://t4d.io/javascript-and-immutability/
- A description of how to properly immutably update objects and arrays using functions like assign and slice
+ Excellent description of what immutability is, how to use use these concepts with React, and pros and cons of managing data immutably. While the title refers to React, most of the writing just deals with plain Javascript concepts.
- **Immutable Javascript using ES6 and Beyond**
http://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/
@@ -38,33 +33,31 @@
- **Immutable Data Structures and Javascript**
http://jlongster.com/Using-Immutable-Data-Structures-in-JavaScript
In-depth article covering the value of immutable data, and two common JS libraries
-
- **Immutability is Not Enough**
https://codewords.recurse.com/issues/six/immutability-is-not-enough
A look at how using an immutable data approach doesn't magically prevent all bugs.
-
- **Javascript Array Methods: Mutating vs Non-Mutating**
http://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/
An overview of how to accomplish add/remove/replace operations on JS arrays, comparing mutable vs immutable approaches to each.
-
- **Redux Docs: Immutable Update Patterns**
- http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html
- Some useful examples for correctly updating data immutably, including nested objects, inserting and removing items in arrays, and updating items in arrays, as well as some common mistakes that occur. Important to know when using Redux, but the info is not Redux-specific.
+ https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns
+ Some useful examples for correctly updating data immutably, including nested objects, inserting and removing items in arrays, and updating items in arrays, as well as some common mistakes that occur. Important to know when using Redux, but the info is not Redux-specific.
- **Immutably setting a value in a JS array (or how an array is also an object)**
https://medium.com/@giltayar/immutably-setting-a-value-in-a-js-array-or-how-an-array-is-also-an-object-55337f4d6702
An example of how `Object.assign` can be used to immutably update an array
-
- **ReactCasts #9: Immutability in Javascript**
https://www.youtube.com/watch?v=4LzcQyZ9JOU
- A screencast discussing why immutability is important and its benefits. Compares Javascript's lack of built-in immutability with other languages, and shows how to do immutable operations in plain Javascript.
+ A screencast discussing why immutability is important and its benefits. Compares Javascript's lack of built-in immutability with other languages, and shows how to do immutable operations in plain Javascript.
+- **Why Mutation Can Be Scary**
+ http://alistapart.com/article/why-mutation-can-be-scary
+ A detailed look at how JS objects and primitives behave in relation to mutability, how `Object.assign` works, and some alternative functions for merging objects.
#### Immutability and React
- **Immutability in React**
http://www.sitepoint.com/immutability-react/
Covers the reasons and basic concepts of using immutable data with React
-
- **Why Should I Care About Immutable Data In React?**
http://www.bennadel.com/blog/2903-why-should-i-care-about-immutable-data-in-reactjs.htm
Describes the major benefits of using immutable data in React, with a demo
@@ -76,65 +69,55 @@
- **Comparing and Modifying Objects in React**
https://blog.komand.com/object-comparison-in-react-js-components
Some examples of comparing objects inside of React's lifecycle methods, and how to update them properly.
-
- **Handling State in React: Four Immutable Approaches to Consider**
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.
+ 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
+- **Introducing Immer: Immutability the easy way**
+ https://hackernoon.com/introducing-immer-immutability-the-easy-way-9d73d8f71cb3
+ Michel Weststrate, author of MobX, introduces his new Immer library, which uses ES6 proxies to allow writing normal mutative code while the updates are applied immutably.
+
- **List of immutable libraries**
https://gist.github.com/jlongster/bce43d9be633da55053f
A follow-up to James Longster's article, with pointers to numerous immutable data libraries
-
- **Redux Ecosystem Links: Immutable Data**
https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md
- A large list of libraries for managing immutable data in Javascript. Some of them are Redux-specific, but also includes many general-purpose immutable data libraries as well.
-
+ A large list of libraries for managing immutable data in Javascript. Some of them are Redux-specific, but also includes many general-purpose immutable data libraries as well.
- **Painless Immutability**
https://guigrpa.github.io/2016/06/16/painless-immutability/
A somewhat opinionated article from the author of a new immutable data library comparing different options, but still well-written and informative about the pros and cons of each.
-
- **Immutable.js**
http://seanamarasinghe.com/developer/immutable-js/
An introduction to the API and use cases for Immutable.js
-
- **How to use Immutable.js Records with React and Redux**
https://medium.com/azendoo-team/immutable-record-react-redux-99f389ed676
Examples for using Immutable.js records for clarity and consistency of data management
-
- **Immutable.js: An Introduction with examples written for humans**
http://untangled.io/immutable-js-an-introduction-with-examples-written-for-humans/
A detailed series of tutorials explaining how to use Immutable.js's API
-
- **Seamless-Immutable: An Alternative to Immutable.js**
https://medium.com/@ckoster22/seamless-immutable-an-alternative-to-immutablejs-12795d6bf577
Examples of how to use the Seamless-Immutable library, and how it compares to Immutable.js
-
- **Using Ramda's `evolve` in Redux reducers to create new state**
https://www.jernejsila.com/2017/02/25/using-ramda-evolve-redux-reducers-creating-new-state/
Some quick examples of how Ramda's API can be used for applying immutable data updates
-
- **How to Use Immutable.js in a React Redux Application**
https://codebrahma.com/how-to-use-immutable-js-in-a-react-redux-application/
Answers to six common questions about why and how to use Immutable.js in a React/Redux app, including whether to keep everything as Immutable.js objects, whether to use it inside of components, and potential benefits of using Immutable.js
-
- **Immutable Deep State Updates in React with Ramda.js**
https://vanslaars.io/post/setstate-lenses/
Some excellent examples of how to use Ramda's "lens" functions to define immutable state update logic
-
- **Why I Don't Use Immutable.js with Redux**
https://medium.com/front-end-hacking/why-i-dont-use-immutable-js-with-redux-db05004f436
Thoughts on the pros and cons of using Immutable.js in a Redux app
-
- **Using Immutable.js with Redux**
https://medium.com/front-end-hacking/using-immutable-js-with-redux-ba89025e45e2
- A follow-up to the previous article, with several examples of how to properly use Immutable.js with Redux
-
+ A follow-up to the previous article, with several examples of how to properly use Immutable.js with Redux
- **Should I use Immutable.js with Redux?**
https://medium.com/@fastphrase/should-i-use-immutablejs-with-redux-58f88d6fd81e
A detailed list of pros and cons for using Immutable.js in a Redux app
@@ -142,15 +125,15 @@
- **Practical Guide to using Immutable.js with Redux and React**
https://medium.com/@fastphrase/practical-guide-to-using-immutablejs-with-redux-and-react-c5fd9c99c6b2
A follow-up to the previous article, showing how to correctly set up and use Immutable.js with Redux
-
- **Qim: Select from your Immutable JavaScript Cake and Update It Symmetrically Too**
https://zapier.com/engineering/qim-immutable-javascript/
An in-depth look at a new lens-style immutable update utility called Qim, including what problems it helps solve and how to use it.
-
- **Lenses with Immutable.js**
https://medium.com/@drboolean/lenses-with-immutable-js-9bda85674780
Discusses how "lenses" can be used to dig into data structures and update them in an immutable way, and how to define lenses that work on Immutable.js objects.
-
- **You're missing out on ImmutableJS Records**
https://medium.com/@ahmadbamieh/immutablejs-records-bd369137da06
- An introduction to the Immutable.js Record type, and how it can be used to define data types
\ No newline at end of file
+ An introduction to the Immutable.js Record type, and how it can be used to define data types
+- **Immutability through Mutability - Immer & Redux**
+ https://medium.com/@Tetheta/immutability-through-mutability-immer-redux-3e14246c6506
+ A look at Michel Weststrate's Immer library, which uses ES6 proxies to produce immutable updates using normal mutative code. Shows how this can simplify nested state updates in Redux reducers.
diff --git a/javascript-resources.md b/javascript-resources.md
index c4fb2e9..f1c5061 100644
--- a/javascript-resources.md
+++ b/javascript-resources.md
@@ -16,7 +16,7 @@ While this list is primarily focused on learning React and Redux, and generally
- **Eric Elliott's Javascript Resource Lists**
https://medium.com/javascript-scene/10-priceless-resources-for-javascript-learners-bbf2f7d7f84e
- https://gist.github.com/ericelliott/d576f72441fc1b27dace/0cee592f8f8b7eae39c4b3851ae92b00463b67b9
+ https://gist.github.com/ericelliott/d576f72441fc1b27dace/0cee592f8f8b7eae39c4b3851ae92b00463b67b9
Eric Elliott is a strong proponent of Javascript, has written numerous articles about learning and understanding Javascript, and assembled some very useful lists of numerous Javascript resources. (Note that he is very strongly opinionated in his own articles, particularly about certain code patterns that he feels everyone should follow, but overall his advice and information is pretty solid.)
- **Wes Bos's Javascript Resource List**
@@ -35,11 +35,7 @@ While this list is primarily focused on learning React and Redux, and generally
- **Roadmap for Learning the Javascript Language**
http://bytearcher.com/articles/roadmap-for-learning-javascript-language/
A suggested approach for how to learn Javascript.
-
-- **What Do I Need to Know to Ace a JavaScript Interview?**
- https://github.com/adam-s/js-interview-review
- Collected resources for studying Javascript and preparing for an interview
-
+
- **Zero to One: How I Mastered Javascript and You Can Too**
https://hashnode.com/post/zero-to-one-how-i-mastered-javascript-and-how-you-can-too-ciuwmrw9j00r50q539clhhdj7
An article describing how one person approached learning Javascript, with suggestions and advice to follow.
@@ -54,12 +50,7 @@ While this list is primarily focused on learning React and Redux, and generally
- **Array iteration methods summarized**
https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff
- An explanation of all the different Array methods that loop over the array, what they do, and when they should be used
-
-- **Front End Interview Preparation Guide**
- https://github.com/Jobeir/front-end-interview-preparation-guide
- A list of useful books, courses, and resources for learning JS, and links to interview questions and quizzes that would be beneficial in helping test out knowledge.
-
+ An explanation of all the different Array methods that loop over the array, what they do, and when they should be used
#### Tutorials, Books, and Courses
@@ -78,11 +69,7 @@ While this list is primarily focused on learning React and Redux, and generally
- **The Modern Javascript Tutorial**
http://javascript.info/
A large tutorial series that covers all aspects of the modern Javascript language (basic syntax, data types, objects, and advanced function usage), as well as a section on using Javascript to interact with the DOM in web pages.
-
-- **23 Free Javascript Books**
- https://hackerlists.com/free-javascript-books/
- A list of many Javascript books available for free online.
-
+
- **Rithm School Free Javascript Course**
https://www.rithmschool.com/courses
@@ -93,11 +80,7 @@ While this list is primarily focused on learning React and Redux, and generally
- **Javascript Path**
https://github.com/javascript-society/javascript-path
A list of books to master JavaScript Development
-
-- **DevFreeBooks: Javascript**
- https://devfreebooks.org/javascript/
- A list of free online books for Javascript
-
+
- **DOM Enlightenment**
http://domenlightenment.com/
A deep look at how to interact with the DOM from Javascript, without using a library or a framework.
@@ -133,7 +116,7 @@ While this list is primarily focused on learning React and Redux, and generally
MDN's usual excellent documentation, explaining how `this` works in Javascript
- **Gentle Explanation of `this` keyword in Javascript**
- http://rainsoft.io/gentle-explanation-of-this-in-javascript/
+ https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/
https://www.reddit.com/r/javascript/comments/4o1546/gentle_explanation_of_this_keyword_in_javascript/
Another long and in-depth explanation, plus some good discussion in the Reddit comments.
@@ -151,7 +134,7 @@ While this list is primarily focused on learning React and Redux, and generally
An excellent explanation of how function calls and the `this` keyword work
- **When 'not' to use arrow functions**
- http://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/
+ https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/
An in-depth look at when you should stick with standard JS functions instead of arrow functions
- **Do ES6 Arrow Functions Really Solve "this" in Javascript?**
@@ -193,4 +176,4 @@ While this list is primarily focused on learning React and Redux, and generally
https://www.udemy.com/understand-javascript/?couponCode=YOUTUBE19
https://www.youtube.com/watch?v=Bv_5Zv5c-Ts
http://joanmira.com/javascript-understanding-the-weird-parts/
- A widely recommended course on Javascript by Tony Alicea. The first 3.5-hour video is free on Youtube, with a discount link for the course. The last link is notes from the course.
\ No newline at end of file
+ A widely recommended course on Javascript by Tony Alicea. The first 3.5-hour video is free on Youtube, with a discount link for the course. The last link is notes from the course.
diff --git a/mlc_config.json b/mlc_config.json
new file mode 100644
index 0000000..d91f60c
--- /dev/null
+++ b/mlc_config.json
@@ -0,0 +1,10 @@
+{
+ "aliveStatusCodes": [
+ 0,
+ 200,
+ 429
+ ],
+ "fallbackRetryDelay": "30s",
+ "retryCount": 2,
+ "timeout": "5s"
+}
\ No newline at end of file
diff --git a/mobx-tutorials.md b/mobx-tutorials.md
index 48458a5..424e017 100644
--- a/mobx-tutorials.md
+++ b/mobx-tutorials.md
@@ -28,10 +28,6 @@
https://www.youtube.com/watch?v=Aws40KOx90U
A talk by MobX creator Michel Weststrate, describing MobX's concepts and usage
-- **A MobX introduction and case study**
- https://blog.wearewizards.io/a-mobx-introduction-and-case-study
- An introduction to MobX, with examples showing how it works in a real app with Typescript
-
- **MobX First Impressions**
https://benmccormick.org/2017/01/09/mobx-first-impressions/
A quick introduction to MobX's basic concepts and how it works
@@ -53,9 +49,8 @@
#### Other
-
- **One awkward thing about MobX: Complex Models**
- https://swizec.com/blog/awkward-thing-mobx-complex-models/swizec/7260
+ https://swizec.com/blog/one-awkward-thing-about-mobx-complex-models/
Discussion of potential issues when handling complex models, and some possible workarounds.
- **MobX - Like React, but for Data**
@@ -74,18 +69,18 @@
https://engineering.huiseoul.com/7-tips-of-using-mobx-6ca8c35071dc
Some helpful tips for using MobX, including using the right reactions, using reactions with names, using strict mode, and more.
-- **Mobx React - Best Practices**
- https://medium.com/@daniel.bischoff/mobx-react-best-practices-17e01cec4140
- Several tips for good use of MobX with React, including separating API calls from stores, injecting stores into components, using @computed, and more.
-
- **The Curious Case of Mobx State Tree**
https://medium.com/@mweststrate/the-curious-case-of-mobx-state-tree-7b4e22d461f
Michel Weststrate, author of MobX, introduces the MobX-State-Tree library, which builds on MobX to add additional useful capabilities.
-
+
- **MobX (with Decorators) in create-react-app**
https://www.robinwieruch.de/create-react-app-mobx-decorators/
Covers how to use MobX in a CRA project, with and without decorators.
+- **React Performance and MobX**
+ https://medium.com/workday-engineering/react-performance-and-mobx-b038085ecb72
+ An informative look at how React's rendering process normally occurs, and how use of MobX-React affects React performance.
+
#### MobX and Redux Comparisons
@@ -105,19 +100,19 @@
https://hashnode.com/post/redux-vs-mobx-by-example-part-i-intro-and-exploring-redux-cito5m0nn0sssxi53c7zq7jpr
https://hashnode.com/post/redux-vs-mobx-by-example-part-ii-the-simplicity-of-mobx-and-conclusion-citpp2tbu003za853ua1tx228
Implementation of the same app using both Redux and MobX, and a final comparison of the approaches
-
+
- **"How does MobX compare with Redux, and which is better for React app development?"**
https://hashnode.com/post/how-does-mobx-compare-with-redux-and-which-one-is-better-for-react-app-development-cisrch8eh0030g5532qeds1ja/answer/citq8rptk010cus530wdzdg69
An excellent answer comparing the two libraries and their philosophies
-
+
- **Comparing MobX and Redux - Video**
https://www.youtube.com/watch?v=83v8cdvGfeA
-A great video to understand the differences between MobX and Redux.
-
+ A great video to understand the differences between MobX and Redux.
+
- **Redux vs MobX**
https://medium.com/@himrc/redux-vs-mobx-a42c8950f3
Some quick pros and cons of each, links to other discussions, and thoughts on when to use them.
-
+
- **Redux or MobX: What I learned after refactoring a medium-sized React app**
https://dannyherran.com/2017/03/react-redux-mobx-takeaways/
A useful list of takeaways, pros and cons of each library and the impact on an existing React application.
diff --git a/node-js-and-npm.md b/node-js-and-npm.md
index 06e1c1f..1c6d338 100644
--- a/node-js-and-npm.md
+++ b/node-js-and-npm.md
@@ -28,10 +28,6 @@ NPM 3.7 or later, as that fixes a bug with the progress bar that drastically slo
http://www.bossable.com/1710/nodejs-package-path-for-windows/
Tips for dealing with various path problems
-- **Pragmatic Modularity with Node**
- http://mafintosh.com/pragmatic-modularity.html
- Includes a description of Node's resolution algorithm for `require`
-
- **Node Hero: The Complete Node.js Tutorial**
https://risingstack.com/resources/node-hero
An ebook covering a variety of topics about using Node, including basic usage, NPM, Express, and building server applications. The ebook is free, but requires email registration to download.
diff --git a/project-structure.md b/project-structure.md
index d8fe2d8..673511f 100644
--- a/project-structure.md
+++ b/project-structure.md
@@ -22,10 +22,6 @@
https://twitter.com/dan_abramov/status/773912160896421889
Max Stoiber, creator of the popular "React-Boilerplate" starter kit, describes the approaches they use to lay out projects based on features. The Twitter thread has discussion on some tradeoffs, including understand that Redux actions are "global", not scoped.
-- **Organizing Large React Applications**
- http://engineering.kapost.com/2016/01/organizing-large-react-applications/
- Describes "File-Type First", "Feature First / Pods" approaches, as well as other related structure issues.
-
- **Four Strategies for Organizing Code**
https://medium.com/@msandin/strategies-for-organizing-code-2c9d690b6f33
Describes "by component", "by toolbox", "by layer", and "by kind" approaches.
@@ -76,11 +72,6 @@
http://noah-prince-tech-blog.ghost.io/structuring-and-organizing-the-react-components-directory/
Some useful suggestions for folder layout, folder naming, and import handling.
-- **How OkCupid organizes its multi-page React App**
- https://tech.okcupid.com/how-okcupid-organizes-its-multi-page-react-app/
- https://www.reddit.com/r/reactjs/comments/5widfg/how_okcupid_organizes_its_multipage_react_app/
- The OkCupid team discusses their approach for a multi-page app, including bundles, use of the Ducks pattern, and folder structures. Some good follow-up discussion in the Reddit comments.
-
- **React Project Structure**
https://daveceddia.com/react-project-structure/
An excellent article that gives practical advice for structuring the source of a React app, especially if you're a beginner or using `create-react-app`.
diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md
index b868625..446044d 100644
--- a/pros-cons-discussion.md
+++ b/pros-cons-discussion.md
@@ -8,17 +8,13 @@
#### High-Level Comparisons and Business Cases
- **Using React is a Business Decision, Not a Technology Choice**
- https://blog.formidable.com/using-react-is-a-business-decision-not-a-technology-choice-63c4641c5f7#.jsqybujyx
+ https://formidable.com/blog/2015/12/04/using-react-is-a-business-decision-not-a-technology-choice/
A higher-level, more business-case look at the pros of React
-
+
- **React: A Competitive Edge and a Business Decision**
- https://reactjs-tampabay-b63e2.firebaseapp.com/#/
+ https://reactjs-tampabay-b63e2.firebaseapp.com/#/
A slideshow laying out a number of arguments for using React
-- **React.js: The Good and the Bad**
- http://techblog.trunkclub.com/javascript/2015/09/14/reactjs-the-good-and-the-bad.html
- Some very good pros and cons based on experiences
-
- **One Year of React.js at Arkency**
http://blog.arkency.com/2015/05/one-year-of-react-dot-js-in-arkency/
Thoughts on experience with using React
@@ -55,10 +51,6 @@
http://engineering.teacherspayteachers.com/2017/08/02/why-we-chose-react-to-help-serve-millions-of-educators.html
The Teachers Pay Teachers team describes why they chose React to rebuild their UI, including the small API size, size of the community, battle-tested capabilities, and more.
-- **Why Redux is the Future of Angular 2 and React**
- https://rangle.io/resources/why-redux-future-of-angular-react/
- A webinar video from Rangle.io, discussing the benefits of functional components and Redux for state management, and how Redux can be used with both React and Angular.
-
- **Justifying React to the Business**
https://daveceddia.com/react-business-value/
Covers several reasons why using React is a good business decision, including ease of maintenance, long-term usefulness, and risk, with a summary of justifications.
@@ -105,11 +97,7 @@
- **Use Redux before it's too late**
https://medium.com/@ian.mundy/use-redux-before-its-too-late-a73d837a06aa
A response to the "you may not need Redux" discussions, suggesting that it's worth using Redux because it changes how you think about your data.
-
-- **The Post-MVC Age**
- https://news.realm.io/news/the-post-mvc-age/
- A conference talk (video and transcription) that discusses how building apps with components works, how to communicate between them, and how Flux/Redux and Reactive Programming differ from traditional MVC,
-
+
- **Redux is the Pivotal Frontend Innovation**
https://medium.com/@maxlynch/redux-is-the-pivotal-frontend-innovation-a406736552cb
An opinionated article that says state management is even more important than components.
@@ -128,7 +116,6 @@
- **What's So Great About Redux?**
https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b
- https://storify.com/acemarke/redux-pros-cons-and-limitations
https://twitter.com/modernserf/status/886426115874717697
Deep and fascinating analysis of how Redux compares to OOP and message-passing, how typical Redux usage can devolve towards Java-like "setter" functions with more boilerplate, and something of a plea for a higher-level "blessed" abstraction on top of Redux to make it easier to work with and learn for newbies. Very worth reading. The author originally wrote a tweetstorm, which I captured in the Storify link, and wrote the blog post to expand on those thoughts. Finally, he followed up with a few more thoughts on abstract vs concrete examples in another shorter tweet thread.
@@ -139,9 +126,13 @@
- **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
+ 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.
+- **Me on React: an old dog with new tricks**
+ https://remysharp.com/2017/08/14/me-on-react-an-old-dog
+ Remy Sharp, creator of JSBin, gives his thoughts and experiences learning React. Discusses tooling support, styled-components, server-side rendering, hot reloading, tradeoffs and abstractions, and more.
+
#### Comment Threads and Discussions
@@ -276,12 +267,13 @@ similar structures in ClojureScript.
- **"Redux app size, boilerplate, and abstraction"**
https://news.ycombinator.com/item?id=15341562
https://news.ycombinator.com/item?id=15344600
- https://news.ycombinator.com/item?id=15344447
+ https://news.ycombinator.com/item?id=15344447
A long subthread of the "React 16" announcement post that discusses several aspects of Redux "boilerplate" and abstraction. I answered a lot of questions about how Redux can and should be used, and there were actually some excellent comments about how Redux usage pays off for long-term app maintainability.
- **How Redux can make you a better developer**
https://medium.cobeisfresh.com/how-redux-can-make-you-a-better-developer-30a094d5e3ec
- https://www.reddit.com/r/javascript/comments/7buksy/how_redux_can_make_you_a_better_developer/ A blog post recapping aspects of functional programming and immutability in JS and Redux. The Reddit thread has some excellent discussion on pros and cons of using Redux and how it has benefited people.
+ https://www.reddit.com/r/javascript/comments/7buksy/how_redux_can_make_you_a_better_developer/
+ A blog post recapping aspects of functional programming and immutability in JS and Redux. The Reddit thread has some excellent discussion on pros and cons of using Redux and how it has benefited people.
- **"React is focused on making your code understandable, not on making simple examples as short as possible"**
https://twitter.com/dan_abramov/status/930380316463726593
@@ -311,10 +303,6 @@ similar structures in ClojureScript.
##### Prior Patents Discussion
-- **Facebook Open Source License FAQ**
- https://code.facebook.com/pages/850928938376556
- Official answers to questions about the meanings of license phrasing
-
- **Dan Abramov Twitter threads addressing patent concerns**
https://twitter.com/dan_abramov/status/754992075087745024
https://twitter.com/dan_abramov/status/766210972776337408
diff --git a/react-ajax.md b/react-ajax.md
index 353c712..32108f5 100644
--- a/react-ajax.md
+++ b/react-ajax.md
@@ -23,17 +23,13 @@
An excellent look at several key aspects of fetching in data in React apps, including what components should containg the fetching and display logic, what lifecycle methods to use for API calls, and how to abstract out the fetching process into its own component.
- **React AJAX Best Practices**
- http://andrewhfarmer.com/react-ajax-best-practices/
+ https://www.javascriptstuff.com/react-ajax-best-practices
Covers four ways to approach managing queries and data fetching.
- **AJAX/HTTP Library Comparison**
- http://andrewhfarmer.com/ajax-libraries/
+ https://www.javascriptstuff.com/ajax-libraries
A useful overview of the most popular AJAX libraries, including platform support and feature comparisons.
-
-- **Loading data from APIs in React**
- http://javascriptplayground.com/blog/2017/01/http-requests-reactjs/
- A 10-minute screencast that demonstrates how to create a component that fetches data from an API and renders it in a page. Covers how to use the React lifecycle to make requests, using the `fetch` API, and dealing with response successes and failures.
-
+
- **3 Libraries and 3 Ways to handle AJAX in React Apps**
https://appendto.com/2017/01/3-libraries-and-3-ways-to-handle-ajax-in-react-apps/
Demonstrates three approaches to structuring AJAX calls (root component, containers, and via Redux middleware), and lists three of the most popular AJAX libraries.
@@ -44,11 +40,11 @@
#### Request Implementation Examples
-
+
- **Implementing React Redux with GraphQL**
- https://marufsarker.github.io/blog/2016/05/09/react-redux-with-graphql/
+ https://marufsarker.github.io/blog/posts/react-redux-with-graphql/
Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions.
-
+
- **Rendering Backend Requests with React**
https://blog.boldlisting.com/rendering-backend-requests-with-react-7e493103c2b6
Describes a pattern for dealing with components that depend on loading data from a backend
@@ -58,9 +54,9 @@
Builds a React app that calls a remote API and authenticates users. Uses a specific auth provider and basic Flux implementation, but the concepts are widely applicable.
- **Building Realtime Collaborative Offline-First Apps with React, Redux, PouchDB, and Websockets**
- http://blog.yld.io/2015/11/30/building-realtime-collaborative-offline-first-apps-with-react-redux-pouchdb-and-web-sockets/
+ https://www.yld.io/blog/building-realtime-collaborative-offline-first-apps/
A blog post and sample project demonstrating various layers of client-server syncing, eventually driving a Redux store and React UI.
-
+
- **Handling AJAX In Your React Application with Agility**
https://hackernoon.com/handling-ajax-in-your-react-application-with-agility-413f1f21fc70
Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware
@@ -85,13 +81,9 @@
Articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles.
- **Better data fetching with RemoteDataJS**
- http://javascriptplayground.com/blog/2016/06/remote-data-js/
+ https://www.jackfranklin.co.uk/blog/remote-data-js/
Examples of how to use the author's RemoteDataJS library to manage request state. Helpful to see the list of states it tracks, even if you don't use the library.
-
-- **Dealing with APIs in React with ReactRemoteData**
- http://javascriptplayground.com/blog/2017/03/remote-data-react-components/
- The author of the RemoteDataJS libraries shows a small React wrapper he created and how to use it
-
+
- **A Better Way To Handle Loading State In Redux**
http://nikolay.rocks/2017-06-18-better-redux-loading
Discusses several ways to store "loading/success/failure" state, and tradeoffs of the approaches. Talks about Redux, but applies to React as well.
\ No newline at end of file
diff --git a/react-architecture.md b/react-architecture.md
index 47ca587..d2b2c37 100644
--- a/react-architecture.md
+++ b/react-architecture.md
@@ -40,7 +40,7 @@
Examples of how to think about and model data and UI state
- **Understanding the Functional Revolution in Front-End Applications**
- http://blog.reactandbethankful.com/posts/2015/09/15/understanding-the-functional-revolution/
+ https://web.archive.org/web/20171020192305/http://blog.reactandbethankful.com/posts/2015/09/15/understanding-the-functional-revolution/
Higher-level tutorial describing functional programming and how it relates to Javascript, UI, and client-side applications
- **Functional UI and Components as Higher Order Functions**
@@ -118,6 +118,10 @@
- **Making website building fun**
https://www.gatsbyjs.org/blog/2017-10-16-making-website-building-fun/
The author of the Gatsby static site generator discusses how creating the right building blocks can make development simpler and more fun, and gives examples of how specific React components can be those kinds of building blocks.
+
+- **React, Redux, and JavaScript Architecture**
+ https://jrsinclair.com/articles/2018/react-redux-javascript-architecture/
+ An excellent article that walks you through a progression of refactors for implementing a slide toggle component from jQuery to React + Redux, and explains along the way why you would want to use them and how to "think in React and Redux" in the process.
#### React Best Practices
@@ -166,11 +170,7 @@
- **You're Missing the Point of JSX**
http://blog.andrewray.me/youre-missing-the-point-of-jsx/
Some arguments in favor of using JSX to define React UIs
-
-- **Helpful principles when starting with React**
- http://ignaciochavez.com/helpful-principles-starting-react/
- Several useful tips for structuring components, managing data flow, and updating data. Has some excellent diagrams illustrating the concepts described.
-
+
- **React/Redux - Best Practices and Gotchas**
http://blog.getstream.io/react-redux-best-practices-gotchas
Several useful tips for avoiding common pitfalls, structuring an application, and using various React-related tools
@@ -178,11 +178,7 @@
- **React Best Practices**
https://medium.com/@nesbtesh/react-best-practices-a76fd0fbef21
Suggestions and tips for effectively writing React and Redux
-
-- **5 Simple Tips for Your First React + Redux Project**
- https://blog.preen.ly/5-simple-tips-for-your-first-react-redux-project-10cbb2727b9a
- Good suggestions for managing state and structure, including using local component state when necessary, use of selector functions, and more.
-
+
- **Writing a good React Component**
https://medium.com/thoughts-from-travelperk/writing-a-good-react-component-59624ed40b8e
Some very good best practices for writing components.
@@ -268,19 +264,21 @@
http://americanexpress.io/clean-code-dirty-code/
Some very opinionated thoughts on what qualifes as "clean" React code. Your experience may vary, but some interesting food for thought.
+- **React Architecture Confessions**
+ https://benmccormick.org/2018/02/07/react-confessions/
+ A great article by Ben McCormick, looking back at mistakes he's made in structuring React applications, why he made those choices, and what he should have done instead.
+
#### React Architecture
- **State Architecture Patterns in React**
https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6
- https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89
- https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391
- https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-4-purity-flux-duality-and-dataflow-d06016b3379a
+ https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89
+ https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391
A multi-part series that discusses several variations on component and state architecture in detail, with thoughts on the pros and cons of each.
-
-
+
- **Three Example React Stacks**
- http://andrewhfarmer.com/three-example-react-stacks/
+ https://www.javascriptstuff.com/three-example-react-stacks
Descriptions of three different application/deployment scenarios, and example React library+tool stacks that would be appropriate for each.
- **Reusable Web Application Strategies: three patterns for running the same app in multiple spots**
@@ -293,4 +291,8 @@
- **Characteristics of an Ideal React Architecture**
https://medium.com/@robftw/characteristics-of-an-ideal-react-architecture-883b9b92be0b
- Some opinionated thoughts on what constitutes good React architecture, including avoiding use of components as controllers, keeping prop passing to just a few levels, and ensuring that diff calculations are cheap.
\ No newline at end of file
+ Some opinionated thoughts on what constitutes good React architecture, including avoiding use of components as controllers, keeping prop passing to just a few levels, and ensuring that diff calculations are cheap.
+
+- **In the Mouth of the Beast**
+ https://charlespeters.net/writing/in-the-mouth-of-the-beast/
+ Thoughts on how to approach state management in relation to React, including a focus on the actual needs of your application and what state truly needs to be global.
\ No newline at end of file
diff --git a/react-component-composition.md b/react-component-composition.md
index 625c0ff..e86cd99 100644
--- a/react-component-composition.md
+++ b/react-component-composition.md
@@ -44,17 +44,13 @@
Explanations and examples of HOCs and their uses
- **ReactCasts: Higher Order Components**
- https://youtu.be/LTunyI2Oyzw
+ https://youtu.be/LTunyI2Oyzw
A screencast that walks through the idea and usage of Higher Order Components
- **Annotations about React Higher-Order Components**
https://blog.codeminer42.com/annotations-about-react-higher-order-components-e3561bc7c27a
An explanation of what HOCs are, what they can be used for, and when to use them.
-
-- **Single-Prop HOCs - Better Composition in React**
- https://www.okgrow.com/posts/compose-react-sphoc
- Thoughts and examples of composing multiple small focused HOCs together into a final combined HOC
-
+
- **What are Higher Order Components?**
https://benmccormick.org/2016/12/14/what-are-higher-order-components/
A short, simple explanation of what an HOC is, and how they can be used
@@ -99,14 +95,20 @@
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.
+- **Use Default HOcs for Component Logic**
+ http://arianv.com/post/use-default-hocs-for-component-logic/
+ Demonstrates how default behavior and logic can be put into a HOC to simplify code and enable reuse.
+
+- **Higher-Order Components: The Ultimate Guide**
+ https://medium.freecodecamp.org/higher-order-components-the-ultimate-guide-b453a68bb851
+ An extensive look at how HOCs can be used to create composable single-purpose components that encapsulate logic like filtering and sorting.
+
+
+
#### Render Props/Function As Child
@@ -122,10 +124,6 @@
http://leoasis.github.io/posts/2017/03/27/react-patterns-render-callback
An explanation of the "render callback" or "function as child" pattern, including concepts and example uses
-- **Sharing stateful UI logic in React apps using Render Callback components**
- https://trevordmiller.com/blog/react-render-callback-components
- Examples of how to use the "render callback" / "function as a child" pattern to extract common logic for reuse.
-
- **Declarative Components in React**
https://blog.echobind.com/declarative-components-in-react-b21ced9895b5
Demonstrates ways to make reusable flexible components using the "function as a child" pattern.
@@ -147,6 +145,10 @@
https://blog.kentcdodds.com/rendering-a-function-with-react-ca3eaf0751e2
Kent C Dodds looks at some unusual use cases for reusing React components, and a possible solution that uses a somewhat hacky approach of marking a function as an iterable.
+- **Achieving modifiability with your React Components**
+ https://medium.com/@josclovisramrezdelarosa/achieving-modifiability-with-your-react-components-2d99373fae74
+ Looks at a use case for a customizable reporting component, and how render props can be used to enable disabling or overriding parts of the standard report UI.
+
@@ -198,6 +200,15 @@
https://hackernoon.com/curry-away-in-react-7c4ed110c65a
Examples of using currying to create reusable callback functions that can be passed to child components.
+- **Killing Switch Statements in React with the Strategy Pattern**
+ https://glcheetham.name/2016/05/20/killing-switch-statements-in-react-with-the-strategy-pattern/
+ Describes why the author dislikes switch statements for determining which component to render, and gives an alternative using functions that return the right component type.
+
+- **Functional Approach to Higher Order Components and Recompose**
+ https://codebrahma.com/functional-approach-higher-order-components-recompose/
+ Discusses approaches for composing components using functions
+
+
#### Comparing Composition Approaches
@@ -244,4 +255,8 @@
- **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
+ Gives examples of uncontrolled, controlled, and controllable components, looks at pros and cons of those approaches, and describes how controllable components improve reusability.
+
+- **Composing Reusable Components in React**
+ https://medium.com/@adamrackis/composing-reusable-components-in-react-de44d862fe5a
+ Walks through the implementation of a reusable accordion component that supports several modes of operation, and demonstrates several useful techniques for composition.
\ No newline at end of file
diff --git a/react-component-patterns.md b/react-component-patterns.md
index 7ea3f31..44a8c7f 100644
--- a/react-component-patterns.md
+++ b/react-component-patterns.md
@@ -1,436 +1,435 @@
### React Component Patterns
**Related topics**:
+
- [Thinking in React](./thinking-in-react-and-flux.md): Articles discussing ways to think about React applications and component structure
- **[React Implementation and Concepts](./react-implementation.md)**: Includes articles that explain the differences between "components", "elements", and "instances"
-
-
+
+
- **[React Component Composition](./react-component-composition.md)**: Articles explaining ways to compose components, including Higher-Order Components, Function-as-Child / "render props", and other functional composition approaches
-
#### Component Terms, Concepts, and Types
- **React Patterns**
http://reactpatterns.com/
An excellent list of common patterns for structuring React components, with examples
-
+
- **React Component Jargon as of August 2016**
https://medium.com/@arcomito/react-component-jargon-as-of-august-2016-28451d8ceb1d
A very useful glossary of widely-used terms describing React components
-
+
- **React in Patterns**
https://github.com/krasimir/react-in-patterns
http://krasimirtsonev.com/blog/article/react-js-presentational-container-components
List of design patterns/techniques used while developing with React
-
-- **Functional Components vs. Stateless Functional Components vs. Stateless Components**
- https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components-630fdfd90c9c
- Clarifies the meaning of the terms, which are often used in overlapping ways.
-
+
- **Embracing Functions in React**
https://medium.com/javascript-inside/embracing-functions-in-react-d7d558d8bd30
- A look at stateless functional components in React, and why they might be useful or should be considered in the first placee.
-
+ A look at stateless functional components in React, and why they might be useful or should be considered in the first place.
+
- **Building User Interfaces with Pure Functions and Function Composition in React**
https://tylermcginnis.com/building-user-interfaces-with-pure-functions-and-function-composition-in-react-js/
A look at the idea of composing together UIs with simple components, with comparisons to the idea of combining functions together.
-
+
- **React Bits: React patterns, techniques, tips, and tricks**
https://github.com/vasanthk/react-bits
- An extensive list of terms, concepts, patterns, and techniques for writing React components, with explanations and examples. A few of the descriptions are overly opinionated and some items are not things the React team would recommend, but overall an excellent resource.
-
+ An extensive list of terms, concepts, patterns, and techniques for writing React components, with explanations and examples. A few of the descriptions are overly opinionated and some items are not things the React team would recommend, but overall an excellent resource.
+
- **Simple React Patterns**
http://lucasmreis.github.io/blog/simple-react-patterns/
A clearly written set of examples that showcase common React component patterns like "container/presentational", "Higher-Order Components", "Function-as-Child" / "render props", and "providers".
-
+
- **React Component Patterns**
https://medium.com/gitconnected/react-component-patterns-ab1f09be2c82
A summary of common React component patterns with short examples.
-
+
- **10 React mini-patterns**
https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
Ten useful patterns for working with React components, including data flow, techniques for working with inputs, controlling CSS usage, switching between components, and more.
-
-- **React Training: Advanced React - React Patterns**
- https://reacttraining.com/patterns/
- The lecture videos from React Training's "Advanced React" course. The videos themselves are now free. Covers topics like declarative vs imperative, compound components, context, Higher Order Components, render props, and controlled components.
-
+
- **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
-
+
- **How to use Classes and Sleep at Night**
https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4
Some pragmatic opinions on when and how to use the ES6 "class" keyword, particularly in relation to React components.
-
+
- **React Stateless Functional Components: Nine Wins You Might Have Overlooked**
https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
Thoughts on reasons why you might want to write more components using the functional syntax.
-
+
- **7 Reasons to Outlaw React's Functional Components**
- https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c
- The author of the "Nine Wins" post gives some counter-arguments on why you might want to prefer writing class components instead of functional components. Some good discussion in the comments.
-
+ https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c
+ The author of the "Nine Wins" post gives some counter-arguments on why you might want to prefer writing class components instead of functional components. Some good discussion in the comments.
+
- **How to declare React Components in 2017**
https://medium.com/@npverni/how-to-declare-react-components-in-2017-2a90d9f7984c
A quick overview of the three ways to declare React components, and which ones should be preferred.
-
+
- **We Jumped the Gun Moving React Components to ES2015 Class Syntax**
https://medium.com/dailyjs/we-jumped-the-gun-moving-react-components-to-es2015-class-syntax-2b2bb6f35cb3
- A Netflix engineer raises concerns about React deprecating `createClass` and pushing users to use ES6 classes. I personally think his concerns are overstated, but there's some interesting points, plus good discussion in the comments.
-
+ A Netflix engineer raises concerns about React deprecating `createClass` and pushing users to use ES6 classes. I personally think his concerns are overstated, but there's some interesting points, plus good discussion in the comments.
#### Component Rendering Logic
- **Dynamically Rendering React Components**
https://wail.es/dynamically-rendering-react-components/
Examples of how to dynamically determine which React component to render
-
+
- **Loading State Trick for Stateless Functional Components in React**
http://kyleshevlin.com/loading-state-trick-for-stateless-functional-components-in-react/
An example of conditionally rendering a spinner component if a list of items is empty
-
+
- **How to Dynamically Render React Components**
http://kyleshevlin.com/how-to-dynamically-render-react-components/
A quick example of how to dynamically decide which component type to render
-
+
- **All the Conditional Renderings in React**
https://www.robinwieruch.de/conditional-rendering-react/
Examples of all the possible ways to conditionally render components
-
+
- **"React render function organization"**
https://gist.github.com/markerikson/47fff93c92286db72b22bab5b02e2da3
My suggested approach for organizing render function logic for clarity and readability
-
+
- **Simplify complex React components with generators**
https://nvbn.github.io/2017/03/14/react-generators/
An interesting alternative to the usual if/else-type logic for conditionally rendering components, by using ES6 generators to yield the right pieces to render.
-
#### React Component Children
- **Ownership and Children in React**
http://ctheu.com/2015/02/10/ownership-and-children-in-reactjs/
Discusses the difference between "parent" and "owner" relationships, and what the `children` prop can look like.
-
+
- **ReactCasts #3: React's Children API**
https://www.youtube.com/watch?v=DJ53-G8EbxE
A screencast demonstrating how the `children` prop to compose components together
-
+
- **React.Children and the React Top-Level API**
http://callahan.io/blog/2016/09/16/react-dot-children-and-the-react-top-level-api/
Overviews and examples of the `React.Children` APIs, and how they can be used to manipulate component children
-
+
- **Send Props to Children in React**
http://jaketrent.com/post/send-props-to-children-react/
Examples of how to pass new props to child components using `React.Children`
-
+
- **A deep dive into children in React**
http://mxstbr.blog/2017/02/react-children-deepdive/
- An in-depth look at the power and capabilities of React's `children` prop, and how children can be reused and modified. Includes several examples and demos.
-
+ An in-depth look at the power and capabilities of React's `children` prop, and how children can be reused and modified. Includes several examples and demos.
+
- **The "Forwarded Refs" pattern**
https://github.com/reactjs/react-redux/pull/270#issuecomment-175217424
An example of the "forwarded refs" pattern, where a parent component passes a callback through one or more layers of children, it's used as a `ref` callback, and the parent receives the nested DOM element reference directly.
-
+
- **React component composition cheatsheet**
https://github.com/xat/react-component-composition-cheatsheet
A useful list of ways to combine components together
-
+
- **Avoiding deeply nested component trees**
https://medium.com/@RubenOostinga/avoiding-deeply-nested-component-trees-973edb632991
Examples of `children` to include arbitrary content inside of a component for more flexible handling of presentation and composition.
-
+
- **Tips on Creating Reusable Components**
http://dylanpaulus.com/reactjs/2017/09/08/tips-on-creating-reusable-components.1/
Examples of using `children` and other props to make components more composable and reusable.
-
+
+- **How to auto bind props using React elements**
+ http://www.albertgao.xyz/2017/10/28/how-to-auto-bind-props-by-using-react-element/
+ Examples of using the `React.Children` API to add additional props to child components
+
+- **React sub-components**
+ https://itnext.io/react-sub-components-513f6679abed
+ Demonstrates defining "sub-components" like `Article.Title`, and using `React.Children` to ensure they're composed correctly.
#### React Component Lifecycle
- **React Docs: Component Specs and Lifecycle**
- https://facebook.github.io/react/docs/component-specs.html
+ https://reactjs.org/docs/react-component.html
The official React docs page on component lifecycle
-
+
+- **React 16.3+ Interactive Lifecycle Methods Diagram**
+ http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
+ https://twitter.com/dan_abramov/status/981712092611989509
+ An excellent interactive diagram that shows the sequence of lifecycle methods in React 16.3+, and how they relate to React's "render" and "commit" update phases. Based on a diagram by Dan Abramov.
+
- **Understanding the React Component Lifecycle**
http://busypeoples.github.io/post/react-component-lifecycle/
A good look at which lifecycle methods run in which situations, as well as the signatures of each method.
-
+
- **Dissecting React Lifecycle Methods**
https://medium.com/@fay_jai/dissecting-reactjs-lifecycle-methods-be4fdea11c6d
Breaks the lifecycle methods down into "mount/unmount" and "update" categories, and describes the purpose and use of each.
-
+
- **The React Component Lifecycle**
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.
-
+
- **React Lifecycle Cheatsheet**
https://gist.github.com/bvaughn/923dffb2cd9504ee440791fade8db5f9
A table listing the lifecycle methods, when they're called, whether each method allows side effects or state updates, and examples uses for each method
-
+
- **React Lifecycle Methods - how and when to use them**
https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
A helpful description of the major component lifecycle methods, including descriptions of common use cases for each one, and whether you can call `setState` inside.
-
+
- **Revisiting use of React's Component Lifecycles in Anticipation of Async Rendering**
https://medium.com/@awebofbrown/how-to-safely-use-reacts-life-cycles-with-fiber-s-async-rendering-fd4469ebbd8f
An informative look at how async rendering in React 16+ might impact current use of lifecycle methods for behavior.
-
#### Component Communication
- **8 no-Flux strategies for React component communication**
- http://andrewhfarmer.com/component-communication/
+ https://www.javascriptstuff.com/component-communication
Very helpful list of ways to have React components communicate back and forth
- **How to communicate between React components**
http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/
Another good list of component communication strategies
-
+
- **How React Components Communicate**
http://react.tips/how-reactjs-components-communicate/
A careful tutorial-based explanation of how to communicate between parent and child components.
-
+
- **How to handle React context in a reliable way**
https://medium.com/react-ecosystem/how-to-handle-react-context-a7592dfdcbc
Covers what the `context` feature is, how to use it, and some concerns to be aware of.
-
+
- **How to safely use React context**
https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076
Guidelines for when and how to actually use React's `context` feature
-
+
- **Context All the Things with React**
https://www.youtube.com/watch?v=k9AhBMwj1w4
A talk on what `context` is, and how to use it safely
-
+
- **ReactCasts #4-5: Context (Parts 1 and 2)**
https://www.youtube.com/watch?v=lxq938kqIss
- https://www.youtube.com/watch?v=mwYHDXS6uSc
- A two-part series explaining what React's `context` feature can be used for, and some potential concerns to be aware of when using it.
-
+ https://www.youtube.com/watch?v=mwYHDXS6uSc
+ A two-part series explaining what React's `context` feature can be used for, and some potential concerns to be aware of when using it.
+
- **React Context and Component Coupling**
https://medium.com/differential/react-context-and-component-coupling-86e535e2d599
Discussion on the pros and cons of using `context` to pass data between components, and some examples of how to do so
-
+
- **Higher Order With Context**
https://dev.to/kayis/higher-order-with-context
- https://dev.to/kayis/higher-order-components-and-context-example
+ https://dev.to/kayis/higher-order-components-and-context-example
Examples of using Higher Order Components to pass data to nested components using `context`
-
-- **Context in React Applications**
- http://javascriptplayground.com/blog/2017/02/context-in-reactjs-applications/
- An overview of what `context` is, how it works, and when you should use it for passing data
-
+
- **Callback functions in React**
https://medium.com/@thejasonfile/callback-functions-in-react-e822ebede766
Some basic explanations of how a React app uses callback functions to communicate from children to parents
-
+
- **How to use React's Provider pattern**
https://www.robinwieruch.de/react-provider-pattern-context/
Walks through the concepts and implementation of a "Provider" component that makes data available to deeply nested children, similar to the ones that come with Redux and MobX
-
+
- **Passing Data Between React Components**
https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17
Some short examples of how to pass data between parents, children, and siblings.
-
+
- **How to structure components in React?**
https://reallifeprogramming.com/how-to-structure-components-in-react-54fc43e71546
Compares multiple ways to pass data from a parent to a child, including no props, passing a value object, passing required props, passing a map of props, and using `children`.
-
+
- **Context 101**
http://reactboston.surge.sh/#/
Slides from Ken Wheeler's ReactBoston talk on React's `context` feature. Covers what context is, why you might want to use it, and when/ how to use it/
-
+
+- **Bitmasks and the new React Context API**
+ https://hph.is/coding/bitmasks-react-context
+ An explanation of how the new version of context works, and how change updates can be optimized using a bitmasking approach.
+
+- **Exploring the React Context API with Provider and Consumer**
+ https://www.robinwieruch.de/react-context-api/
+ Explains the use cases for the new context API, and demonstrates how to use it both by itself and wrapped in a higher-order component.
+
+- **React's new Context API and Actions**
+ https://dev.to/washingtonsteven/reacts-new-context-api-and-actions-446o
+ Shows how to update values being passed through context, and particularly how to pass down functions that can be used to update the values.
+
+- **Understanding the React Context API**
+ http://joecortopassi.com/articles/react-context-api/
+ Simple breakdown of how to use the React Context API, with code samples and diagrams.
#### Component Categories
- **Presentational and Container Components**
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
- Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React.
-
+ Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React.
+
- **"People are reading way too much into 'presentational' vs 'container'"**
https://twitter.com/dan_abramov/status/802569801906475008
Dan Abramov follows up his article by emphasizing that "presentational" and "container" was just a pattern he had noticed, rather than an approach that _must_ be followed
-
+
- **Leveling Up with React: Container Components**
https://css-tricks.com/learning-react-container-components/
Describes the container component pattern and how to use it to split up responsibilities between fetching and displaying data.
-
+
- **Smart and Dumb Components in React**
http://jaketrent.com/post/smart-dumb-components-react/
Another look at ways to conceptually categorize components based on responsibilities, and some ways you can organize your code based on those concepts.
-
+
- **Ramblings About React and Redux Architecture**
https://medium.com/@kurtiskemple/ramblings-about-react-and-redux-architecture-c27dfff79ddf
Thoughts on structuring components as "Providers", "Behavior", and "Presentational"
-
+
- **The Anatomy of a React Redux App**
https://medium.com/@rajaraodv/the-anatomy-of-a-react-redux-app-759282368c5a
Breaks down the component structure of a typical React/Redux app, and classifies the different types of components that usually show up
-
+
- **React and Flux in Production Best Practices**
https://medium.com/@delveeng/react-and-flux-in-production-best-practices-c87766c57cb6
Delve's practice of describing components as "containers", "smart", and "dumb"
-
+
- **Content vs Container**
https://hackernoon.com/content-vs-container-e0a1ada681c1
General advice for determining component responsibilities in terms of content, layout, and logic
-
+
- **The React + Redux Container Pattern**
http://www.thegreatcodeadventure.com/the-react-plus-redux-container-pattern/
- Explanation and examples of "container" and "presentational" components and their responsibilities. Uses Redux for the examples, but the principles apply to "just" React as well.
-
+ Explanation and examples of "container" and "presentational" components and their responsibilities. Uses Redux for the examples, but the principles apply to "just" React as well.
+
- **Refactoring React - Extracting Layout Components**
http://erikaybar.name/refactoring-react-extracting-layout-components/
Demonstrates creating reusable components that manage some aspects of styling and layout, such as a button with multiple sizes and colors.
-
+
- **Share Code between React and React Apps**
https://hackernoon.com/code-reuse-using-higher-order-hoc-and-stateless-functional-components-in-react-and-react-native-6eeb503c665
- An exploration of how to refactor code to extract functional components and higher-order components for improved code reuse, including reusing the same components in both React and React Native apps.
-
+ An exploration of how to refactor code to extract functional components and higher-order components for improved code reuse, including reusing the same components in both React and React Native apps.
+
- **Reusable state for React UI components**
https://medium.com/@efreyreg/reusable-state-for-react-ui-components-e38c5af40be4
- An example of taking a component that has both state, logic, and presentation, and extracting the logic and presentation into separate components. Also demonstrates using a Redux-like approach to update logic without actually using Redux.
-
-- **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.
+ An example of taking a component that has both state, logic, and presentation, and extracting the logic and presentation into separate components. Also demonstrates using a Redux-like approach to update logic without actually using Redux.
- **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.
-
+
- **Refactoring: Moving API calls to a higher-order component**
https://medium.com/@guigonc/refactoring-moving-api-calls-to-a-higher-order-component-53062c086cb
Shows how to progressively refactor fetching logic out of a component and move it into a parent component, then make that parent component reusable.
-
+
- **The React + Redux Container Pattern**
https://dev.to/sophiedebenedetto/the-react--redux-container-pattern-bmk
An excellent explanation of what "container components" and "presentational components" are, with discussion of how they fit together and a good sample project implementing the ideas.
-
-
-
#### Wrapping Non-React Code
- **React and third-party libraries**
http://krasimirtsonev.com/blog/article/react-third-party-library-integration
Demonstrates how to build a React component that wraps up non-React code like a jQuery UI plugin
-
+
- **Declaratively Rendering Earth in 3D, Part 2: Controlling Cesium with React**
http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-2-cesium-react/
A detailed description of how to create React components that wrap up a 3D globe library, including use of lifecycle methods for controlling imperative non-React APIs.
-
+
- **When to use Ref on a DOM Node in React**
https://www.robinwieruch.de/react-ref-attribute-dom-node/
An explanation of the `ref` property, how to use it to access real DOM nodes, and when you should use it.
-
+
- **Using React and jQuery Together**
http://tech.oyster.com/using-react-and-jquery-together/
Examples of how to use jQuery inside a React component, and React inside jQuery-controlled elements
-
-- **Using React and PixiJS**
- http://www.rinconstrategies.io/using-react-and-pixijs.html
- Demonstrates how to use React's component lifecycle methods to control the imperative PixiJS API
-
+
- **Mapping declarative React components to imperative external APIs**
http://reactkungfu.com/2016/02/mapping-declarative-react-components-to-imperative-external-api/
A quick example of using `componentWillReceiveProps` to pass updates to an imperative API
-
+
- **How to Write a Google Maps React Component**
https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/
Demonstrates how to wrap a third-party component that has an imperative API, lazy-loading the dependencies, and more.
-
+
- **Building SVG Maps with React**
https://blog.komand.com/building-svg-maps-with-react
Demonstrates building a component that zooms and pans SVG graphics based on user input.
-
+
- **How to Sprinkle ReactJS into an Existing Web Application**
https://scotch.io/tutorials/how-to-sprinkle-reactjs-into-an-existing-web-application
Looks at how to incrementally add some React-based functionality into an existing app, including interaction with jQuery.
-
+
- **How to Use jQuery Libraries in the React Ecosystem**
https://medium.com/@superKalo/how-to-use-jquery-libraries-in-the-react-ecosystem-7dfeb1aafde0
Some excellent examples of using React components to wrap up jQuery plugins: creating the plugin instance, updating the plugin from React props, and destroying the plugin on unmount.
-
+
- **Introducing React into an Existing Application**
https://medium.com/nthrive-analytics/introducing-react-into-an-existing-application-17490841796e
Some examples of how to progressively add React components into an existing jQuery-based application and keep them in sync with the rest of the app.
-
+
- **How to use D3.js in React**
http://cmichel.io/how-to-use-d3js-in-react/
An overview of three ways to integrate D3 into a React app: using React to render, using D3 to render, and a hybrid approach.
-
+
- **Renderless Components, or How Logic Doesn't Always Need a UI**
http://kyleshevlin.com/renderless-components/
Shows how you can create components that return null from `render`, and use React's lifecycle methods to drive imperative logic rather than rendering UI.
-
+
- **Getting Started with React and Leaflet**
https://www.azavea.com/blog/2016/12/05/getting-started-with-react-and-leaflet/
Examples of how to create React components that interact with the Leaflet maps library.
-
+
- **How (and why) to use D3 with React**
https://hackernoon.com/how-and-why-to-use-d3-with-react-d239eb1ea274
A good overview of some of the libraries and approaches you can make use of to use D3 in a React app
-
+
- **Integrating React with an Existing jQuery Web Application**
http://www.primaryobjects.com/2017/05/08/integrating-react-with-an-existing-jquery-web-application/
Covers 3 methods for methods for integrating React and jQuery: referencing jQuery from within React, using a helper class passed to React, and using a pub-sub model passed to React.
-
+
- **Building D3 Components with React**
https://hackernoon.com/building-d3-components-with-react-7510e4743288
A detailed walk through custom integration of D3 and React without use of an additional library.
-
+
- **PixiJS Application in a React Component**
https://www.protectator.ch/post/pixijs-v4-in-a-react-component
A quick example of loading PixiJS and wrapping it in a React component, showing the basics for integration.
-
-- **React components as jQuery plugins**
- https://swizec.com/blog/using-react-in-the-real-world/swizec/6710
- Demonstrates how to wrap up a React component as a jQuery plugin for integration with non-React apps.
-
+
- **Using D3 and React Together to Make Visualizations with TypeScript**
https://spin.atomicobject.com/2017/07/20/d3-react-typescript/
Examples of some possible approaches to using D3 inside of React, including use of refs and components.
-
+
- **Wrapping Web Components With React**
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.
-
+
- **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.
-
+
+- **Bringing Together React, D3, and Their Ecosystem**
+ https://www.smashingmagazine.com/2018/02/react-d3-ecosystem/
+ An extensive article that looks at common D3 wrapper patterns and libraries, approaches for using D3 inside of React, and React-specific D3 libraries, and gives some suggestions for how to decide which approach and library to use for your project.
#### Modal Dialogs
- **How to Render Components Outside the Main React App**
https://blog.komand.com/how-to-render-components-outside-the-main-react-app
- An example of a technique that's also know as the "portal" approach, commonly used for rendering modals on top of the rest of an application.
-
+ An example of a technique that's also know as the "portal" approach, commonly used for rendering modals on top of the rest of an application.
+
- **Modals in React**
https://medium.com/@david.gilbertson/modals-in-react-f6c3ff9f4701
A demonstration of building a reusable modal component using the "portals" technique
@@ -438,83 +437,80 @@
- **Modal Dialogs in React**
https://daveceddia.com/open-modal-in-react/
An excellent example of how to approach rendering modals in React, by controlling them with props
-
+
- **Modal window in React from scratch**
https://peteris.rocks/blog/modal-window-in-react-from-scratch/
Walks through creating a Modal component with styling and display logic
-
+
- **React Modals**
https://medium.com/@danparkk/react-modals-scalable-customizable-neat-components-f2088d60f3d3
An extended discussion of what concepts are involved in creating modals in web pages, why this can become complex, and how to implement them in a scalable way using React and Redux.
-
+
- **Tasks and Portals in React**
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.
-
+
- **Using a React 16 Portal to do something cool**
https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202
Demonstrates using React 16's `createPortal` API to control a separate browser window from the original React component tree.
-
-
+
#### Alternate Component Creation Approaches
- **React without `this`**
https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160
- Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword. Not the common approach, but an interesting idea.
-
+ Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword. Not the common approach, but an interesting idea.
+
- **my-react**
https://github.com/mjackson/my-react
A small library from Michael Jackson (co-creator of React Router) that allows defining components using a Python-style approach where functions receive the component instance as the first argument.
-
+
- **lively**
https://github.com/jlongster/lively
An experimental library from James Long that tries to improve React's component API to avoid using classes
-
#### Other Component Patterns
- **The React Controller View Pattern**
http://blog.andrewray.me/the-reactjs-controller-view-pattern/
Describes using top-level components to hold state and pass it to children as props
-
+
- **Make Your React Components Pretty**
https://medium.com/walmartlabs/make-your-react-components-pretty-a1ae4ec0f56e
Techniques for making your components easier to read, including using functional components, using JSX spread for props, and use of destructuring.
-
+
- **Component Factories in React.js**
https://github.com/szabototo89/create-it/blob/master/docs/article-full.md
A variation on Dependency Injection for React components
-
+
- **"What is the ideal way to pass data to a callback prop?**
https://gist.github.com/jazlalli/fdee443405680f96d19211daa15d1d38
Discussion and examples of various ways to pass data to callbacks between children and parents
-
+
- **On Privacy with React Context**
https://medium.com/@amireh/on-privacy-with-react-context-aa77ffd08509
Thoughts on some potential issues with various component/state patterns (globals, Redux, Flux, Ember), and a sketch of a notional approach that might help solve some of those issues.
-
+
- **Internationalizing React Apps**
https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/
An extended investigation of server and client aspects needed for internationalization.
-
+
- **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.
-
+
- **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.
-
+
- **3 React Gripes**
https://gist.github.com/jlongster/febd2a397aff9501abec0c2d66075ec8
https://twitter.com/jlongster/status/921016877408837632
- James Long describes three things about React that bother him: inability to easily have parents get refs to nested elements, PureComponents comparing both props and state, and a general tendency to do lots of processing in `componentWillReceiveProps`. Some good discussion in both the gist comments and Twitter.
-
+ James Long describes three things about React that bother him: inability to easily have parents get refs to nested elements, PureComponents comparing both props and state, and a general tendency to do lots of processing in `componentWillReceiveProps`. Some good discussion in both the gist comments and Twitter.
+
- **You don't need to know "Dependency Injection"**
https://hackernoon.com/you-dont-need-to-know-dependency-injection-2e9d2ba1978a
Looks at the concept of dependency injection, and three ways that that relates to React components and props.
-
diff --git a/react-deployment.md b/react-deployment.md
index 2824d3f..35a131a 100644
--- a/react-deployment.md
+++ b/react-deployment.md
@@ -1,5 +1,7 @@
### React Deployment
+#### Applications
+
- **Understanding React deployment**
https://medium.com/@baphemot/understanding-react-deployment-5a717d4378fd
An excellent overview of the basic steps needed to deploy a React app, including solutions for common problems such as routing producing 404s and changes not showing up properly.
@@ -30,7 +32,7 @@
Walks through the basics of configuring a Create-React-App-based Electron app and building it for production.
- **React with Any Backend**
- http://andrewhfarmer.com/react-with-any-backend/
+ https://www.javascriptstuff.com/react-with-any-backend
Some short discussion and suggestions for project structure and deployment steps when building a React app that talks to a non-Javascript backend server.
- **Building a Full-Stack App with Serverless and React**
@@ -41,10 +43,25 @@
https://daveceddia.com/multiple-environments-with-react/
Discusses strategies for handling deployments to dev/staging/prod-type environments, including configuration of API endpoints and feature flags.
-- **Deploy a React app with SASS using Nginx**
- http://zabana.me/notes/build-deploy-react-app-with-nginx.html
- Covers several important notes for adding SASS to an ejected CRA app, creating a deploy step using rsync, and setting up the Nginx web server to serve the app.
-
- **How to deploy a React application: an in depth overview of various options to deploy**
https://codebrahma.com/deploy-react-application-depth-overview-various-options-deploy/
- A detailed look at what deployment for production means, what files are involved, how to properly build an app for production, and places to host a react app.
\ No newline at end of file
+ A detailed look at what deployment for production means, what files are involved, how to properly build an app for production, and places to host a react app.
+
+- **So you want to host your Single Page React App on Github Pages?**
+ https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48
+ Solutions for common problems encountered when trying to deploy a React app on Github Pages, especially around routing.
+
+
+#### Libraries
+
+- **Creating react-editables: How to build a set of reusable React components**
+ https://medium.com/@niwaa/creating-react-editables-how-to-build-a-set-of-reusable-react-components-with-an-hoc-and-write-7a685947a992
+ Looks at the steps needed to create a set of reusable React components and publish them to NPM. Includes extended thoughts on component design for reusability.
+
+- **Adventures in creating a React component library with Create React App and TypeScript**
+ https://medium.com/@stokedbits/adventures-in-creating-a-react-component-library-with-create-react-app-and-typescript-26d1116a7d87
+ Walks through the process of using the TS+CRA starter kit as a baseline for building and publishing a component library.
+
+- **A guide to building a React component for NPM**
+ https://medium.com/@markus.s.englund/a-guide-to-building-a-react-component-for-npm-68f03b314753
+ A high-level overview of things to consider when publishing a React-based component library, including accessibility, documentation, naming, and marketing
\ No newline at end of file
diff --git a/react-forms.md b/react-forms.md
index 1aa79e3..ca53a1f 100644
--- a/react-forms.md
+++ b/react-forms.md
@@ -8,7 +8,7 @@
- [Redux Techniques: Redux and Forms](redux-techniques.md#redux-and-forms)
-#### "Controlled" and "Uncontrolled Inputs
+#### "Controlled" and "Uncontrolled" Inputs
- **React Docs: Forms**
https://facebook.github.io/react/docs/forms.html
@@ -82,13 +82,9 @@
Covers the basics of implementing form rendering, updates, and validation, in plain JS
- **Forms in React and Redux**
- http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/
+ https://x-team.com/blog/tutorial-forms-in-react-and-redux/
Demonstrates building a simple set of wrapper components to manage forms using React and Redux
-
-- **Not-so-simple Forms with React**
- http://www.randseay.com/articles/forms-with-react
- Explains how to set up more advanced form scenarios such as optional or repeatable sections.
-
+
- **Using React's state to manage data entry**
https://medium.com/@adamrackis/using-reacts-state-to-manage-data-entry-ed92e4fd1a42
Describes how to manage data for forms using React component state and some wrapper components.
@@ -97,10 +93,6 @@
https://blog.risingstack.com/handling-react-forms-with-mobx-observables/
Some examples of working with forms in React, using MobX for the data management.
-- **Forms in React and Redux**
- http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/
- A good example of how to set up form handling in conjunction with a Redux store.
-
- **Radio Buttons and Checkboxes in React**
http://react.tips/radio-buttons-in-reactjs/
http://react.tips/checkboxes-in-react/
@@ -142,6 +134,10 @@
https://medium.com/capital-one-developers/how-to-work-with-forms-inputs-and-events-in-react-c337171b923b
An excerpt from the book "React Quickly", which gives an overview of the recommended way to use forms in a React app.
+- **An imperative guide to forms in React**
+ https://blog.logrocket.com/an-imperative-guide-to-forms-in-react-927d9670170a
+ A useful overview of how to work with forms. Includes several runnable examples, and also looks at how the Formik library can simplify form handling.
+
#### Form Validation
@@ -152,11 +148,11 @@
- **Elegant Form Validation in React**
https://spin.atomicobject.com/2016/10/05/form-validation-react/
Examples of adding validation to a form
-
+
- **Two-Way Data Binding and Form Validation in React**
https://medium.com/@thejenniekim/two-way-data-binding-and-form-validation-in-react-9d0b15123176
Another demonstration of building a form with some logic and validation.
-
+
- **Form Validation as a Higher Order Component**
https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-1-83ac8fd6c1f0
https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-2-1edb7881870d
@@ -185,10 +181,6 @@
#### Other
-- **Creating new fields and widgets for Mozilla's react-jsonschema-form**
- https://jeffersonheard.github.io/2016/11/creating-new-fields-and-widgets-for-mozillas-react-jsonschema-form/
- Examples of working with the react-jsonschema-form library, including defining form schemas, gotchas, and customization with specific widgets and types
-
- **List or Form, why not both? Making a list with a built in editor in React**
http://web.archive.org/web/20161214145219/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.
diff --git a/react-hooks.md b/react-hooks.md
new file mode 100644
index 0000000..ecbd245
--- /dev/null
+++ b/react-hooks.md
@@ -0,0 +1,76 @@
+### React Hooks
+
+
+#### Official Resources
+
+- **React Docs: Hooks**
+ https://reactjs.org/docs/hooks-intro.html
+ The main resource for learning hooks. Includes an intro with motivation, tutorials on `useState` and `useEffect`, discussion of custom hooks, the full hooks API reference, and an in-depth FAQ. **Read the hooks docs first before looking at anything else!**
+
+- **ReactConf 2018: React Today and Tomorrow**
+ https://www.youtube.com/watch?v=dpw9EHDh2bM
+ Sophie Alpert and Dan Abramov's talk unveiling hooks, live at ReactConf 2018.
+
+- **A Complete Guide to `useEffect`**
+ https://overreacted.io/a-complete-guide-to-useeffect/
+ An incredibly detailed deep dive by Dan Abramov into the mindset of using hooks correctly. Covers the relationship between class lifecycles and hooks, how to work with the dependencies array, dealing with closures and stale data, and much much more. This is required reading for anyone using hooks.
+
+- **Making Sense of React Hooks**
+ https://dev.to/dan_abramov/making-sense-of-react-hooks-2eib
+ Dan Abramov provides a lot of additional context around the hooks proposal, including potential benefits like co-locating related logic, examples of how to use hooks, whether they are "magic", and more. **Also a must-read.**
+
+
+#### Hooks Tutorials
+
+- **Why React Hooks?**
+ https://tylermcginnis.com/why-react-hooks/
+ A great introduction to hooks by Tyler McGinnis, with a focus on "why do these exist, and what problems do they solve?".
+
+- **A Simple Intro to React Hooks**
+ https://daveceddia.com/intro-to-hooks/
+ https://daveceddia.com/usestate-hook-examples/
+ https://daveceddia.com/usereducer-hook-examples/
+ https://daveceddia.com/useeffect-hook-examples/
+ https://daveceddia.com/usecontext-hook/
+ Dave Ceddia continues his excellent easy-to-read React tutorials with a friendly intro to the basics of several hooks.
+
+- **What are React Hooks?**
+ https://www.robinwieruch.de/react-hooks/
+ https://www.robinwieruch.de/react-hooks-fetch-data/
+ An excellent article by Robin Wieruch. Includes examples of problems that hooks can help solve, discussion of how the changes affect React overall, and multiple examples for the `useState` and `useEffect` hooks. A follow-up post discusses how to handle data fetching.
+
+- **Everything you need to know about React Hooks**
+ https://dev.to/vcarl/everything-you-need-to-know-about-react-hooks-doh
+ A thorough post from Carl Vitullo that digs into the potential use cases of all of the built-in hooks. Definitely worth reading once you've gotten your head around the basic ideas.
+
+- **An Introduction to Hooks in React**
+ https://www.fullstackreact.com/articles/an-introduction-to-hooks-in-react/#community-reaction-to-hooks
+ An extensive article with numerous examples of `useState`, `useEffect`, and `useContext`. Also covers `useRef`, custom hooks, writing tests for hooks, and some community reactions.
+
+
+#### Understanding Hooks Concepts
+
+- **React Hooks Demystified**
+ https://dev.to/kayis/react-hooks-demystified-2af6
+ Implements a tiny fake version of React, then illustrates how hooks are "just" implemented with some global variables, like an array to track which hooks were used in the current function component.
+
+- **React hooks: not magic, just arrays**
+ https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e
+ Describes how the "rules of hooks" are all about React's use of arrays (or linked lists) internally, with diagrams to illustrate how the behavior is implemented.
+
+- **Getting Closure on Hooks**
+ https://www.youtube.com/watch?v=KJP1E-Y-xyo
+ https://www.swyx.io/getting-closure-on-hooks/
+ Shawn Wang's excellent talk and post that shows how hooks work by building a mini-React with hooks in just a few lines of code
+
+- **Why React Hooks, and how did we even get here?**
+ https://medium.freecodecamp.org/why-react-hooks-and-how-did-we-even-get-here-aa5ed5dc96af
+ A look back at earlier common patterns for reusing React logic (mixins, higher-order components, and render props), some of their strengths and weaknesses, and how hooks improve on those patterns.
+
+- **Under the Hood of React's hooks system**
+ https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba
+ A well-written explanation of how hooks work internally, with some useful diagrams and snippets of the relevant React implementation code.
+
+- **React RFC #68: React Hooks**
+ https://github.com/reactjs/rfcs/pull/68
+ The official RFC announcing hooks. There's hundreds of comments from the community debating various pros and cons of the API design. Probably not worth reading the entire thread, but some interesting thoughts in there.
diff --git a/react-implementation.md b/react-implementation.md
index 016f314..ea1664d 100644
--- a/react-implementation.md
+++ b/react-implementation.md
@@ -86,25 +86,25 @@
https://github.com/nitin42/Making-a-custom-React-renderer
A 4-part that teaches how to build a React reconciler for React 16 that renders to a Word document
+- **Extending React**
+ https://www.javascriptjanuary.com/blog/extending-react
+ Walks through building a very simplified mini React clone, including `createElement`, rendering to the DOM, and `setState` updates
+
#### Implementation and Internals
+- **React as a UI Runtime by Dan Abramov**
+ https://overreacted.io/react-as-a-ui-runtime
+ A deep dive into the React programming model from first principles
+
- **React.js Reconciliation**
https://www.infoq.com/presentations/react-reconciliation
A video presentation digging into how React's reconciliation algorithm determines how to properly update nodes based on render output.
-
-- **React Source Code Annotations**
- https://annot.io/github.com/facebook/react
- Crowdsourced annotations and descriptions for files in the React codebase
- **ReactJS: Under the Hood**
https://www.youtube.com/watch?v=xsKYAa1ZXpQ
A talk digging into React's internal concepts and implementation, including the split between the core library and the renderers.
-
-- **React Implementation Notes**
- https://facebook.github.io/react/contributing/implementation-notes.html
- An in-depth explanation of how React's current internal algorithms work
-
+
- **Dive Into React Codebase: Transactions**
http://reactkungfu.com/2015/12/dive-into-react-codebase-transactions/
A deep dive into the implementation of React's internal "transactions" concept
@@ -181,8 +181,9 @@
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.
+ https://holmeshe.me/categories/Understanding-The-React-Source-Code/
+ A multi-part series of posts that walks through the critical path of React 15's source code, tracing how a simple component gets rendered.
+
#### React Fiber
@@ -218,6 +219,10 @@
https://www.robinwieruch.de/what-is-new-in-react-16/
A very useful look at the new user-facing features in React 16, with code examples.
+- **Rethinking with React 16**
+ https://www.javascriptjanuary.com/blog/rethinking-with-react-16
+ An informative overview of the major changes in React 16, including the goals of the "React Fiber" rewrite, Fragments, Error Boundaries, server-side rendering improvements, and more.
+
- **React Fiber Architecture**
https://github.com/acdlite/react-fiber-architecture
A description of React's new core algorithm, React Fiber
@@ -236,4 +241,4 @@
- **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
+ An overview of the React Fiber rewrite, and how React's reconciler has been rewritten to improve performance and make rendering more flexible.
diff --git a/react-native.md b/react-native.md
index c49caf8..6fd1264 100644
--- a/react-native.md
+++ b/react-native.md
@@ -26,11 +26,7 @@
- **Build a Coffee Finder App with React Native and the Yelp API**
https://appendto.com/2016/11/build-a-coffee-finder-app-with-react-native-and-the-yelp-api/
A tutorial that covers building an IOS app that fetches data, organizes views, and displays the data on a map.
-
-- **How to distribute React Native components backed by native code**
- https://www.benwixen.com/articles/distributing-react-native-components-with-native-code/
- A project layout for redistributable components with native code, that includes unit tests and supports automatic linking.
-
+
- **Build an Imgur Client with React Native and MobX**
https://medium.com/react-native-development/build-an-imgur-client-with-react-native-and-mobx-react-native-school-53146d648250
A tutorial that demonstrates build an RN app with MobX for state management, use of RESTful APIs, full-screen images in a ListView, and detection of device orientation
@@ -71,7 +67,8 @@
A number of informative lessons learned building an app using RN and Redux, including components, performance, workflow, and use of Redux.
- **Understanding React Native flexbox layout**
- https://medium.com/the-react-native-log/understanding-react-native-flexbox-layout-7a528200afd4 A helpful visual guide to how Flexbox works, both in general and specific to React Native
+ https://medium.com/the-react-native-log/understanding-react-native-flexbox-layout-7a528200afd4
+ A helpful visual guide to how Flexbox works, both in general and specific to React Native
- **How to Create An Authentication System and a Persistent User Session with React Native**
http://www.theodo.fr/blog/2017/03/how-to-create-an-authentication-system-and-a-persistent-user-session-with-react-native/
@@ -120,4 +117,8 @@
- **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
+ A deep dive into the internnal behavior and implementation of React Native's event system.
+
+- **Simplifying react-native navigation with a Redux router**
+ https://medium.com/@ericacooksey/simplifying-react-native-navigation-with-a-redux-wrapper-8d5d530af8fc
+ Examples of how to implement a Redux-based approach for handling navigation in conjunction with react-native-navigation
\ No newline at end of file
diff --git a/react-performance.md b/react-performance.md
index 0a1f2bc..9cc8cd2 100644
--- a/react-performance.md
+++ b/react-performance.md
@@ -6,7 +6,6 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
#### React Components
- **React Docs: Performance**
- https://facebook.github.io/react/docs/advanced-performance.html
https://facebook.github.io/react/docs/perf.html
The React doc pages on performance. Describes the core concepts, including shouldComponentUpdate, using immutable data, and the Performance API for benchmarking.
@@ -14,21 +13,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578
An excellent article Ryan Florence that pushes back against the "creating functions in render is slow" conventional wisdom in the React community. This article is a must-read discussion on React performance.
-- **Performance Engineering with React**
- http://benchling.engineering/performance-engineering-with-react/
- http://benchling.engineering/deep-dive-react-perf-debugging/
- https://news.ycombinator.com/item?id=11036007
- A 2-part series on React performance. Excellent information. Goes in-depth on use of the Perf API, shouldComponentUpdate, shallow equality, and how to properly profile components. Highly recommended. Further useful discussion in the HN comment thread.
-
- **Respectable React Components**
http://kelle.co/react-perf-slides/
A slideshow that walks through the core concepts of managing good React performance.
-- **Optimizing React Performance using keys, component lifecycle, and performance tools**
- http://jaero.space/blog/react-performance-1
- http://jaero.space/blog/react-performance-2
- Another pretty good in-depth look at performance, with a number of useful illustrations. Only downside is that some of the examples follow bad practice by directly mutating state, but the performance information is solid.
-
- **shouldComponentUpdate Will Short-Circuit an Entire Subtree of Components in React**
http://www.bennadel.com/blog/2904-shouldcomponentupdate-will-short-circuit-an-entire-subtree-of-components-in-reactjs.htm
A reminder that SCU skips a component's children as well as that component, with a demo.
@@ -100,13 +88,14 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
https://bvaughn.github.io/forward-js-2017/#/
https://youtu.be/t4tuhg7b50I
An excellent talk on performance topics from Brian Vaughn, a React core team member and author of the React-Virtualized library. Covers sources of slowness, ways to avoid re-renders, and a deep look at "windowing/virtualization" for high-performance lists.
-
+
- **React Component Profiling**
- https://blog.yld.io/2016/11/25/react-component-profiling/
+ https://www.yld.io/blog/react-component-profiling/
Tips on using the new browser devtools integration capability in React 15.4 to track component performance.
-
+
- **React Snippets: Debug Component performance with ES7 Annotations**
- https://www.neos.io/blog/react-snippets-debug-component-performance-with-es7-annotations.html Demonstrates using a custom decorator to wrap components and log information on when and why components re-rendered
+ https://www.neos.io/blog/react-snippets-debug-component-performance-with-es7-annotations.html
+ Demonstrates using a custom decorator to wrap components and log information on when and why components re-rendered
- **How to Benchmark React Components: The Quick and Dirty Guide**
https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c
@@ -120,10 +109,6 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
https://hackernoon.com/react-at-60fps-4e36b8189a4c
A look at several useful techniques for benchmarking and improving React application performance
-- **React is Slow, React is Fast: Optimizing React Apps in Practice**
- https://medium.com/@francoisz/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba
- Some excellent advice on improving React performance. Covers using React's new Component Profiling capabilities, ways to optimize re-renders, use of Recompose and Reselect, gotchas with JSX and object literals, and more.
-
- **Optimizing the Performance of Your React Application**
https://auth0.com/blog/optimizing-react/
Covers several ways to improve perf, including profiling with the React Perf Addons, using correct keys for lists, and use of `shouldComponentUpdate` and `PureComponent`.
@@ -150,22 +135,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
https://flexport.engineering/ending-the-debate-on-inline-functions-in-react-8c03fabd144
Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`. Has a link to further discussion on HN. Part 2 describes how they built a library called `mutation-sentinel` to detect accidental mutations, and Part 3 covers a Babel plugin for optimizing inline functions in render methods.
-- **Introducing react-wastage-monitor**
- https://blog.listium.com/introducing-react-wastage-monitor-404565d679b2
- Describes a number of common perf issues in React apps, and how the react-wastage-monitor library can be used to detect them
-
- **Infinite List and React**
http://itsze.ro/blog/2017/04/09/infinite-list-and-react.html
- A Twitter developer describes some of the challenges they faced in building a performant infinite scrolling list component
-
-- **React at Light Speed**
- https://blog.vixlet.com/react-at-light-speed-78cd172a6411
- The Vixlet team discusses perf optimizations they've applied to their app. Includes a lot of the common advice like use of `shouldComponentUpdate`, but also has advice on use of literal values and issues with performance traps with JS timer functions.
-
-- **React Performance Anti-Pattern: Creating Functions in `render()`**
- 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.
-
+ A Twitter developer describes some of the challenges they faced in building a performant infinite scrolling list component
+
- **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).
@@ -194,6 +167,14 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links)
https://medium.com/@donavon/demystifying-memory-usage-using-es6-react-classes-d9d904bc4557
A quick look at the memory usage differences between calling `Function.bind` and using the Class Properties syntax, and the readability tradeoffs involved.
+- **How does React decide to re-render a component?**
+ http://lucybain.com/blog/2017/react-js-when-to-rerender/
+ An easy-to-read overview of when and why a component will re-render.
+
+- **Dragging React performance forward**
+ https://medium.com/@alexandereardon/dragging-react-performance-forward-688b30d40a33
+ A detailed look at how the react-beautiful-dnd library implemented performance improvements with drastically better results, including avoiding unnecessary renders and DOM reads, applying style updates, virtualizing movement, and using lookup tables.
+
#### Code Splitting and Progressive Apps
@@ -264,7 +245,7 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
Good comments from an HN thread discussing a React vs Vue benchmark. A Discord developer talks about several lessons learned, including pros and cons of using Immutable.js, and only rendering elements that are visible.
- **Immutable.js: worth the cost?**
- https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4
+ https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4
Looks at several pros and cons of using Immutable.js, such as enforced immutability (pro), and major performance problems from calling `toJS()` frequently (con).
- **React + Redux performance optimization with shouldComponentUpdate**
@@ -381,4 +362,4 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md)
- **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
+ Looks at one of `connect`'s options that can be used to customize comparisons and skip unnecessary `mapState` calls.
diff --git a/react-redux-testing.md b/react-redux-testing.md
index f61b324..61ac0b6 100644
--- a/react-redux-testing.md
+++ b/react-redux-testing.md
@@ -39,11 +39,7 @@
- **Testing React components with Jest and Enzyme**
https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f
Examples of how to use Jest's snapshot testing and Enzyme's component API to write component tests
-
-- **Best practices for testing React components using Mocha, Chai, and Enzyme**
- https://reflect.io/blog/js-testing-mocha-chai-enzyme/
- A number of useful tips for improving component tests, including use of shallow rendering, avoiding errors while testing, and making test code consistent
-
+
- **The Right Way to Test React Components**
https://medium.com/@suchipi/the-right-way-to-test-react-components-548a4736ab22
Excellent advice on how to determine a component's "contract", what aspects of that are worth testing, and how to approach testing that contract.
@@ -90,7 +86,7 @@
An in-depth look at how to set up and use Jest for testing
- **React UI Testing with Storybook**
- https://storybooks.js.org/docs/react-storybook/testing/react-ui-testing
+ https://storybooks.js.org/docs/react-storybook/testing/react-ui-testing
Looks at using the React Storybook component editor to do UI testing
- **Testing React Components with mocha-webpack**
@@ -128,40 +124,54 @@
- **React and Redux Testing with Jest: How Some Jokers Learned to Take Snapshots**
https://dev.bleacherreport.com/react-and-redux-testing-with-jest-how-some-jokers-learned-to-take-snapshots-c186c7e419e6
Discussion of how Jest snapshot tests can be used to replace some manually-written tests for both React components and Redux logic.
-
-- **A Practical Guide to Testing React Apps**
- http://acco.io/a-practical-guide-to-testing-react-apps/
- An excellent, comprehensive guide to React testing, covering some of the major tools, types of tests, how to write good React tests, and more.
-
+
+- **Snapshot testing React Components with Jest**
+ https://medium.com/hackernoon/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://nerdblog.pl/post/166842840969/testing-react-components
An extensive look at different ways to test React components using the Enzyme library. Discusses Enzyme's shallow and full rendering methods, methods to inspect the contents of a component, and different forms of tests like snapshots, rendering tests, and behavior tests.
-
+
+- **An introduction to testing React components with Enzyme 3**
+ https://www.jackfranklin.co.uk/blog/introduction-to-react-tests-enzyme/
+ Introduces the Enzyme library for testing components, and shows a short TDD approach for writing a component
+
- **Creating a React Component using TDD**
http://www.alayor.com/2017/Creating-a-React-Component-using-TDD
Demonstrates writing a simple React component using the TDD "red-green" testing approach.
-
-- **Unit Testing with Semantic-UI-React and Enzyme**
- https://medium.com/bluepick-dev/testing-with-semantic-ui-react-and-enzyme-7cb39228a5ea
- Specific tips and advice for testing components that use the Semantic-UI-React library, including advice on focusing your tests on your own components' behavior. The tips are also applicable to React component testing in general.
-
+
- **Implementing basic Component tests using Jest and Enzyme**
https://hackernoon.com/implementing-basic-component-tests-using-jest-and-enzyme-d1d8788d627a
Describes the Jest and Enzyme tools, how they're used for testing React components, and gives examples of some simple tests.
-
-- **Snapshot testing React Components with Jest**
- https://medium.com/@lukepierotti/snapshot-testing-react-components-with-jest-744a1e980366
- Covers the basics of snapshot testing, and how it can be used to test React components to ensure the rendering is consistent.
-
+
- **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.
+
+- **Unit test code that uses CSS Modules**
+ https://medium.com/@a_eife/unit-test-code-that-uses-css-modules-ef5b49efc707
+ Provides several solutions for handling imports of CSS Modules when running unit tests
+
+- **Testing React components using render props**
+ https://kentcdodds.com/blog/testing-components-using-render-props
+ Kent C Dodds gives several examples and suggestions of approaches for testing components that make use of render props.
+
+- **Lessons learned testing React & Redux apps with Jest and Enzyme**
+ https://medium.com/@Tetheta/lessons-learned-testing-react-redux-apps-with-jest-and-enzyme-eb581d6d167b
+ Thoughts on best practices based on experience, including complexities of setting up a testing environment, optimal setup for snapshot tests, simplifying test setup, and what aspects of Redux code should be tested.
-- **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
+- **Integration Testing React and Redux with Mocha and Enzyme**
+ https://engineering.classdojo.com/blog/2017/01/12/integration-testing-react-redux/
+ Tips on dealing with larger-scale integration tests of React apps under Mocha. Discusses handling async API calls, using `mocha-steps` for multi-step tests, and working with React-Router.
-
+- **How to write clean React unit tests with Enzyme**
+ http://www.bradleycbuchanan.com/b/clean-react-enzyme/
+ Several tips for writing simpler React component tests with Enzyme, including focusing on the logic, testing as shallow as possible, and writing assertions using JSX.
+
+- **Acceptance Test Driven Development with React/Redux**
+ https://itnext.io/acceptance-test-driven-test-with-react-redux-part-1-7ae8cb4fab00
+ A multi-part tutorial series that walks through creating and refactoring a React/Redux application using an Acceptance Test Driven Development approach.
#### Redux
@@ -186,11 +196,7 @@
- **Unit Testing Redux Container Components**
https://web.archive.org/web/20161105110913/http://pebblecode.com/blog/testing-redux-containers/
Demonstrates techniques for properly testing Redux-connected React components using a mock store
-
-- **Testing React and Redux**
- http://silvenon.com/testing-react-and-redux/
- A three-part article that shows how to set up Ava and Babel, then walks through testing Redux code (action creators, reducers, selectors, thunks, and sagas), and React components.
-
+
- **Unit Testing React Components that use Redux**
http://www.thereformedprogrammer.net/unit-testing-react-components-that-use-redux/
Tips on unit testing components that render more Redux-connected components
@@ -227,15 +233,11 @@
https://medium.com/@kilkelly/simplify-your-redux-unit-tests-using-tape-ad391aecf446
https://github.com/kilkelly/tape-redux-unit-testing
Some quick examples of using the Tape library to test Redux reducers, with an accompanying example repo
-
+
- **Unit Testing Redux Container Components, Part 1**
- http://www.wsbrunson.com/react/redux/test/2016/05/08/testing-redux-containers.html
+ https://www.wsbrunson.com/testing-redux-containers/
Some useful tips for setting up tests for Redux-connected components
-
-- **Code Review: SPA testing with React and Redux**
- https://b3ntly.github.io/blog/code-review-spa-testing-with-react-and-redux-long/
- A variety of useful observations and suggestions for testing React+Redux code, including good practices for structuring test setup
-
+
- **Test Your Redux Container with Enzyme**
https://medium.com/@visualskyrim/test-your-redux-container-with-enzyme-a0e10c0574ec
Examples for using Enzyme to test Redux-connected components, including passing in a mock store, use of shallow rendering, and testing `mapDispatch`.
@@ -284,10 +286,6 @@
https://hackernoon.com/how-to-snapshot-test-everything-in-your-redux-app-with-jest-fde305ebedea
Detailed examples of how to test React components, Redux reducers, connected components, and selectors using Jest snapshot tests.
-- **Unit Testing React, Redux, Selectors, and Epics**
- https://codeburst.io/unit-testing-react-redux-selectors-and-epics-664e7b4798a8
- Quick examples of ways to different parts of a React+Redux app.
-
- **Jest Testing Patterns for React-Redux Applications**
https://ranjithnair.github.io/2017/11/17/Jest-Testing-basics.html
Includes info on basic Jest test setup, as well as examples of using Jest to test React components, Redux-connected components, actions and reducers, API calls, and React event behavior.
@@ -300,10 +298,6 @@
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.
@@ -320,12 +314,30 @@
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.
+- **Testing strategies for Redux apps**
+ https://www.codesai.com/2017/04/test-driving-react-redux
+ https://www.codesai.com/2017/04/testing-strategies
+ https://www.codesai.com/2017/06/testing-hacks-react-redux
+ A series of posts describing several strategies for testing Redux apps, including larger integration tests with mock APIs, handling of async logic, routing, and scroll events.
+
+- **Evaluating Redux Saga Test Libraries**
+ http://blog.scottlogic.com/2018/01/16/evaluating-redux-saga-test-libraries.html
+ Looks at several ways to approach testing sagas, and how specific saga test helper libraries use those approaches. Includes a helpful table listing which approaches each helper library supports.
+
+- **Testing mapState, mapDispatch, and connected components**
+ http://jsramblings.com/2018/01/15/3-ways-to-test-mapStateToProps-and-mapDispatchToProps.html
+ http://jsramblings.com/2018/01/21/stuck-testing-your-connected-component.html
+ A pair of articles that discuss ways to handle testing the various pieces of connected components.
+
+
+
+
#### General Testing, Tools, and Setup
-- **An Overview of JavaScript Testing in 2017**
- https://medium.com/powtoon-engineering/a-complete-guide-to-testing-javascript-in-2017-a217b4cd5a2a
+- **An Overview of JavaScript Testing in 2018**
+ https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3
A detailed guide to the terms, tools, and concepts used in testing Javascript.
- **Javascript Testing: Unit vs Functional vs Integration**
@@ -348,11 +360,7 @@
http://randycoulman.com/blog/2016/03/22/testing-with-mocha-and-webpack/
http://randycoulman.com/blog/2016/04/05/more-on-testing-with-mocha-and-webpack/
Some excellent information on setting up a good test environment, including use of the mocha-webpack tool.
-
-- **Testing with Webpack 2, inject-loader, Karma, Mocha, Chai, and More**
- https://cafedev.org/article/2016/12/testing-with-wepack-2-inject-loader-karma-mocha-chai-and-sinon/
- Examples of using these tools to test some complex code, including mocking out dependencies
-
+
- **ESLint Part 1: Exploration**
https://blog.scottnonnenberg.com/eslint-part-1-exploration/
A solid look at what ESLint is, how you can use it to help keep your code clean, and a number of useful linting plugins that are available.
@@ -365,11 +373,7 @@
- **UI Testing at Urban Airship**
https://github.com/urbanairship/technical-blog/blob/master/AirshipUITesting.md
In-depth discussion of complexities and approaches for testing real-world UI code, including test runners, mocking, and more.
-
-- **Migrating to Jest**
- https://medium.com/@kentcdodds/migrating-to-jest-881f75366e7e
- Kent C. Dodds describes why and how his team at Paypal switched their test setup to use Jest instead of Ava.
-
+
- **Testing with Jest Snapshots: First Impressions**
http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/
Description of the pros and cons of using Jest's new Snapshot Testing feature
@@ -413,4 +417,8 @@
- **What makes a good test?**
https://medium.com/@alexkrolick/what-makes-a-good-test-dff3df6058a2
- A variety of short thoughts on why we write unit tests, how to write good tests, and some specific suggestions for working with snapshot tests and tests for async behavior.
\ No newline at end of file
+ A variety of short thoughts on why we write unit tests, how to write good tests, and some specific suggestions for working with snapshot tests and tests for async behavior.
+
+- **Testing UI**
+ https://charlespeters.net/writing/testing-ui/
+ Thoughts on the benefits of different types of testing, including code coverage, unit tests for React components, snapshot tests, and integration tests.
\ No newline at end of file
diff --git a/react-routing.md b/react-routing.md
index 31fab74..8bb3c50 100644
--- a/react-routing.md
+++ b/react-routing.md
@@ -66,10 +66,22 @@
- **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 v4: The Complete Guide**
+ https://www.sitepoint.com/react-router-v4-complete-guide/
+ A detailed tutorial that covers the React Router v4 API and concepts, with many examples
-- **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.
+- **Server Rendering, Code Splitting, and Lazy Loading with React Router v4**
+ https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70
+ Technical discussion of the problems involved in code-splitting server rendered apps, and how Airbnb has implemented solutions using React-Router v4 and Babel.
+
+- **URL Parameters with React Router**
+ https://tylermcginnis.com/react-router-url-parameters/
+ Tyler McGinnis gives a short example of how to use parameters from the current URL in a component with React-Router v4
+
+- **Using React Router v4 with create-react-app**
+ https://codingblast.com/react-router-create-react-app/
+ Explains key concepts of React-Router v4, and gives examples of using it in a CRA project
#### Routing with Redux
@@ -118,6 +130,10 @@
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.
+- **React Router to Redux First Router**
+ https://medium.com/@jonsamp/react-router-to-redux-first-router-2fea05c4c2b7
+ Describes some of the problems the Codecademy team had using React-Router in conjunction with Redux, and why they switched to Redux-First-Router instead.
+
#### Authentication
@@ -129,10 +145,6 @@
http://www.thegreatcodeadventure.com/jwt-authentication-with-react-redux/
Demonstrates handling sign-in flow, including a dynamic login/logout link, and implementing routes that can only be seen by logged-in users.
-- **Role-based authorization using React-Router**
- http://frontendinsights.com/role-based-authorization-using-react-router/
- A look at some ways to control component routes based on user roles
-
- **Role based authorization in React**
https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4
Some alternative approaches to the previous post, using React component patterns like Higher Order Components to control authorization and rendering
@@ -141,10 +153,6 @@
https://medium.com/@nesbtesh/dealing-with-authentication-in-react-cadb679fbc0f
Some short examples of saving an authentication token, writing queries to use and update that token, and checking the token when rendering components.
-- **Role based routing with React and Redux**
- http://crazysigma.com/blogs/2017/04/16/role-based-routing-react-redux/
- A description of a fairly simple approach for defining role-based handling of routes, with sample code.
-
- **Preact Authentication Tutorial**
https://auth0.com/blog/preact-authentication-tutorial/
A tutorial that demonstrates how to build an app with Preact, including authentication, and makes some comparisons to doing so in React.
@@ -160,4 +168,8 @@
- **Securing a React Web App with Authorization Rules**
https://medium.appbase.io/securing-a-react-web-app-with-authorization-rules-2e43bf5592ca
- A tutorial that shows how to add authorization and authentication to a Todo app
\ No newline at end of file
+ A tutorial that shows how to add authorization and authentication to a Todo app
+
+- **Composing authorizing into React apps**
+ https://medium.com/@sarat1669/composing-authorization-into-react-apps-180fa3c18d1
+ Examples of generic auth management at the component level, using a package called react-identity.
diff --git a/react-server-rendering.md b/react-server-rendering.md
index 322484d..9f89452 100644
--- a/react-server-rendering.md
+++ b/react-server-rendering.md
@@ -62,11 +62,6 @@
https://wildlyinaccurate.com/introducing-second-a-framework-for-mostly-static-react-applications/
Describes a new library for rendering static sites with React, with the ability to opt-in to "dehydrating" certain components on the client to make them interactive.
-
-- **Simple declarative Redux state with React Router 4 server side rendering**
- https://medium.com/@AlexFaunt/satisfying-your-apps-state-343118b0730d
- Demonstrates using a combination of React-Router 4 and a custom promise middleware to manage async data handling in an SSR React+Redux application.
-
- **Server-side rendering with create-react-app**
https://medium.com/@cereallarceny/server-side-rendering-with-create-react-app-fiber-react-router-v4-helmet-redux-and-thunk-275cb25ca972
Demonstrates how to set up server-side-rendering with a standard CRA project to allow proper meta tags to be added without having to eject. Includes sample code for creating an Express app that does the work.
@@ -82,13 +77,7 @@
- **Scaling React Server-Side Rendering**
http://arkwright.github.io/scaling-react-server-side-rendering.html
A long, detailed look at how a team implemented React+Redux SSR on top of an existing monolithic application. Includes discussion of many real-world issues experienced, such as load balancing and component caching.
-
-- **Making CRA apps work with SSR**
- https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-1-8f5f813d510b
- https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-2-fb871868216e
- https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-3-199d70b4cbe5
- A series of posts that shows how to add SSR to an ejected CRA app, including use of Redux and React-Router.
-
+
- **You might (not) need a Server Side Rendering Framework**
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.
@@ -103,4 +92,16 @@
- **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
+ A short walkthrough that sets up a basic React SSR app, and adds the styled-components library for styling
+
+- **How I spent my Christmas enabling SSR**
+ https://medium.com/@tabu_craig/how-i-spent-my-christmas-enabling-ssr-5bacfc686032
+ A recap of how a team set up SSR for their existing React+Redux+Redux-Saga application, with the major changes they implemented
+
+- **"Server-Side Rendering - Not Worth It?"**
+ https://www.reddit.com/r/reactjs/comments/7o6oj6/serverside_rendering_not_worth_it/
+ An extended Reddit discussion on the pros, cons, and techniques for SSR with React
+
+- **Upgrading a create-react-app project to a SSR + code splitting setup**
+ https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a
+ Walks through the process of setting up server-side rendering with Express, adding code splitting with the react-loadable library, and naming chunks with Webpack.
\ No newline at end of file
diff --git a/react-state-management.md b/react-state-management.md
index 225edac..fcaad50 100644
--- a/react-state-management.md
+++ b/react-state-management.md
@@ -19,7 +19,7 @@
Describes different categories of state: data, communication, control, session, and location
- **"M" and "C" in "MVC"**
- https://www.youtube.com/watch?v=fUpkYixd03k
+ https://www.youtube.com/watch?v=fUpkYixd03k
https://github.com/jamesknelson/m-and-c-in-mvc-talk
James K. Nelson's talk at ReactNext, talking about the multiple categories of state and how controller components can manage them.
@@ -74,6 +74,10 @@
- **State management in Javascript**
https://codeburst.io/state-management-in-javascript-15d0d98837e1
Not React-specific, but some excellent general principles for dealing with state overall: represent data uniquely, derive values, define dependencies, and localise state as much as possible.
+
+- **Three approaches to distribute the state across components in React**
+ https://engineering.hexacta.com/three-approaches-to-distribute-the-state-across-components-in-react-da4db5a389e0
+ Looks at three ways to handle state that needs to apply to sibling components: controlling the state in the parent, synchronizing the states, and forcing a different component instance via the `key` prop
#### Using `setState`
diff --git a/react-styling.md b/react-styling.md
index 47ae7d5..ddbc7fa 100644
--- a/react-styling.md
+++ b/react-styling.md
@@ -7,7 +7,7 @@
An introduction to using React's built-in inline styling abilities
- **How To Style React**
- http://andrewhfarmer.com/how-to-style-react/
+ https://www.javascriptstuff.com/how-to-style-react
An excellent overview of the four major ways to deal with styles in React, and what the various tools are. Includes a decision tree to help you decide what to use.
- **Understand the React Styling Paradigms**
@@ -62,11 +62,11 @@
- **Component Based Style Reuse**
https://www.youtube.com/watch?v=_70Yp8KPXH8
Pete Hunt talks about various approaches to defining styles for components in plain CSS and in React
-
+
- **Patterns for Style Composition in React**
- http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/
+ https://jxnblk.com/blog/patterns-for-style-composition-in-react/
Some great suggestions for defining reusable React components that can have variations in styling
-
+
- **Functional CSS From A Pure UI Perspective**
https://medium.com/@sharifsbeat/functional-css-from-a-pure-ui-perspective-bd04c8af4fdc
Thoughts on various ways to compose classes and styles together.
@@ -87,13 +87,9 @@
#### CSS-Based Approaches
- **CSS Modules by Example**
- http://andrewhfarmer.com/css-modules-by-example/
+ https://www.javascriptstuff.com/css-modules-by-example/
A set of 7 examples demonstrating ways to use CSS modules.
-- **Elephants, The Three Code Ilities, & Two Months With CSS Modules**
- http://chrispearce.co/elephants-the-three-code-ilities-two-months-with-css-modules/
- A look at how Lystable used CSS Modules to scale their codebase.
-
- **Functional CSS - The Good, The Bad, and Some Protips for React.js Users**
https://github.com/chibicode/react-functional-css-protips
An essay describing the "functional CSS" approach, pros and cons of using it, and tips for using that approach with React.
@@ -149,6 +145,19 @@
https://medium.com/@tkh44/writing-a-css-in-js-library-from-scratch-96cd23a017b4
The author of the Emotion library shows how to build a simple CSS-in-JS library, to help illustrate how they work.
+- **CSS-in-JS**
+ https://gist.github.com/threepointone/9f87907a91ec6cbcd376dded7811eb31
+ First in a series of posts from Sunil Pai, author of the Glamor library. Explains the basic concepts of handling CSS values as JS objects and arrays.
+
+
+- **Things to consider when choosing a React styling framework**
+ http://jsramblings.com/2017/10/17/things-to-consider-when-choosing-a-react-styling-framework.html
+ Helpful suggestions for things to compare between different styling libraries, such as how the styles are applied, syntax used, and feature support
+
+- **Substyle: Build Styling Agnostic Components for React**
+ https://survivejs.com/blog/substyle-interview/
+ An interview with the author of Substyle, a utility that allows component library authors to enable customization of components via several different style-related props.
+
#### Style Libraries
@@ -195,20 +204,29 @@
- **The performance of styled React components**
http://blog.primehammer.com/2017/09/27/the-performance-of-styled-react-components/
Benchmarks comparing size, build speed, and other aspects of different CSS-in-JS libraries.
-
-- **Structuring our Styled Components**
- 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
+ https://www.elpassion.com/blog/styled-components-nitty-gritty
An introduction to how to use the styled-components library, the problems that it solves, and how it works internally
+
+- **A Field Guide to CSS-in-JS**
+ https://medium.com/@wonderboymusic/a-field-guide-to-css-in-js-f7cbd9ed79a7
+ Looks at how to use the styled-components and emotion libraries, including syntax, theming, variables, classname generation, and more.
+
+- **CSS-in-JS Roundup: Styling React Components**
+ https://alligator.io/react/css-in-js-roundup-styling-react-components/
+ A high-level comparison of 15 different CSS-in-JS libraries
+
+- **Migrating to styled-components cheatsheet**
+ http://jsramblings.com/2017/10/29/migrating-to-styled-components-cheatsheet.html
+ Some helpful tips for moving a project from vanilla CSS to the styled-components library
#### Techniques and Examples
- **How to build animated microinteractions in React**
- https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8 Examples of various ways to create small animations to give feedback as the user interacts with components
+ https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8
+ Examples of various ways to create small animations to give feedback as the user interacts with components
- **Create That Component**
https://medium.com/taitounited/create-that-component-1-7a2267bc2833
diff --git a/react-techniques.md b/react-techniques.md
index bc7e5ab..845098f 100644
--- a/react-techniques.md
+++ b/react-techniques.md
@@ -8,12 +8,6 @@
- **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.
-
-- **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.
- **SVG Patterns in React - Build a Twitter Wall**
https://www.robinwieruch.de/react-svg-patterns/
@@ -27,22 +21,10 @@
https://blog.discordapp.com/lessons-from-migrating-a-large-codebase-to-react-16-e60e49102aa6
An excellent post from the Discord team recapping how they migrated an older React codebase to work with React 16, including use of codemods, replacing private API usage, upgrading dependencies, and other issues they ran into.
-- **React UI Frameworks, Compared**
- https://gather.engineering/react-ui-frameworks-compared-dd631eb5c982
- A list of available React UI frameworks, with reviews and comparisons on breadth of components, quality, project health, and more. Includes Ant Design, PrimeReact, Office UI Fabric, Blueprint, React UI, Semantic UI React, ExtReact, and Kendo React UI.
-
-- **Creating react-editables: How to build a set of reusable React components**
- https://medium.com/@niwaa/creating-react-editables-how-to-build-a-set-of-reusable-react-components-with-an-hoc-and-write-7a685947a992
- Looks at the steps needed to create a set of reusable React components and publish them to NPM. Includes extended thoughts on component design for reusability.
-
- **Robust React User Interfaces with Finite State Machines**
https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/
An excellent article that describes the concepts of state machines, how they relate to applications, and how they can be applied to help manage React component behavior.
-- **Adventures in creating a React component library with Create React App and TypeScript**
- https://medium.com/@stokedbits/adventures-in-creating-a-react-component-library-with-create-react-app-and-typescript-26d1116a7d87
- Walks through the process of using the TS+CRA starter kit as a baseline for building and publishing a component library.
-
- **The Complete Firebase in React Authentication Tutorial**
https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/
A comprehensive article that covers setting up a React app that uses React Router for handling routes, and Firebase for authentication and user management.
@@ -55,6 +37,10 @@
http://dylanpaulus.com/reactjs/2017/12/08/global-component-registration/
An example of extending the standard approach for looking up component types at runtime, by allowing the lookup table to be modified.
+- **Getting Started with Web Accessibility**
+ https://medium.com/@emilymears/getting-started-with-web-accessibility-in-react-9e591fdb0d52
+ An excellent look at ways to handle accessibility in React, including use of refs for focus, ARIA attributes, helpful tools, and more.
+
#### Security
@@ -78,7 +64,7 @@
Describes how to add React to an existing page with no build tools, and a couple approaches to writing render functions that don't use JSX.
- **Integrating React and Redux Into an Existing Backbone App**
- http://blog.isquaredsoftware.com/2017/07/react-redux-backbone-integration/
+ 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**
@@ -108,11 +94,11 @@
- **React events in depth**
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/
+ https://www.jackfranklin.co.uk/blog/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 2522e77..e724899 100644
--- a/react-tutorials.md
+++ b/react-tutorials.md
@@ -3,38 +3,44 @@
#### Basic Introductions
-- **React Documentation**
- https://facebook.github.io/react/docs/hello-world.html
- https://facebook.github.io/react/tutorial/tutorial.html
- The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information.
+- **React Documentation**
+ https://reactjs.org/docs/getting-started.html
+ The official React documentation, including tutorials, explanations, and API information.
+
+ https://beta.reactjs.org/
+ A full rewrite of the React documentation, with a completely redesigned set of tutorials that teach modern React with function components and hooks as the standard approach. (This will become the main docs site once it's completed.)
- **Modern Web Development with React and Redux**
http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/
An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples.
+- **The Beginner's Guide to ReactJS**
+ https://egghead.io/courses/the-beginner-s-guide-to-reactjs
+ A free video course with short lessons that explain key React concepts, including using `React.createElement` and JSX, conditional rendering, forms, styling, lists, HTTP requests, and deploying a React app.
+
+- **A Comprehensive Guide to Building Apps with React**
+ https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/
+ An excellent introduction to the core concepts, terms, syntax, and usage of React. Includes several interactive examples, and has been updated to cover React 16.3.
+
- **30 Days of React**
https://www.fullstackreact.com/30-days-of-react/
A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment.
- **Learn React From Your Browser: Introducing React**
https://reactarmory.com/guides/learn-react-by-itself
- https://reactarmory.com/examples/hello-world/jsx-hello-world
+ https://reactarmory.com/examples/hello-world/jsx-hello-world
An excellent tutorial that teaches React concepts from basic principles without buzzwords or build tools, using interactive editable examples. (This is a rewritten and improved version of the "Learn Raw React" tutorial.) Now includes an interactive editor to let you try working with React code there in the browser.
- **Learn Raw React**
http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/
A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms.
-
-- **React Fundamentals**
- https://tylermcginnis.com/courses/react-fundamentals/
- An online course from an excellent React trainer. Covers key aspects of Javascript, React concepts as of React 16, React Router v4, and building and deploying an application.
-
+
- **React Express**
http://www.react.express/
An all-in-one beginner's guide to modern React application development. Gives an opinionated walkthrough through create-react-app, npm, webpack, babel, ES2015, ES2016, JSX, React, Redux, CSS-in-JS, and more.
- **React to the Future**
- http://elijahmanor.com/talks/react-to-the-future/dist/#/
+ https://elijahmanor.com/blog/react-to-the-future
A well-written HTML slideshow describing what React is, what makes it special, and how to work with it
- **React: Getting Started and Concepts**
@@ -84,11 +90,7 @@
- **ReactJS Tutorial**
http://www.tutorialspoint.com/reactjs/index.htm
A multi-part tutorial covering numerous aspects of React. Each part is short and the writing is a bit awkward, but the topics and info are useful.
-
-- **React Tutorial**
- http://www.pshrmn.com/tutorials/react/react/
- A very readable intro to React's concepts.
-
+
- **React Workshop**
https://github.com/jesstelford/react-workshop
A self-directed set of workshop lessons that teach React basics.
@@ -115,39 +117,16 @@
- **React by Example**
https://medium.com/front-end-hacking/react-by-example-part-1-76d3e2137cf4
- https://medium.com/front-end-hacking/react-by-example-part-2-340582c6f552
- https://medium.com/@johntucker_48673/react-by-example-part-3-f825444bc1d8
- https://medium.com/@johntucker_48673/react-by-example-part-4-5d32168db362
- https://medium.com/@johntucker_48673/react-by-example-part-5-e1716e69dacc
- https://medium.com/@johntucker_48673/react-by-example-part-6-8c71dda057ac
- https://medium.com/@johntucker_48673/react-by-example-part-7-8dc97b57f668
A multi-part series that illustrates core React concepts via a series of small example repos, with explanations of the source and concepts in the articles.
- **React.js for the Visual Learner**
https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-1-what-is-this-all-about-a0d28cfd33c6
- https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-2-what-is-react-and-why-is-it-cool-d1f9bac69a63
- https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-3-building-our-houses-295c43304b18
- https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-4-our-first-village-8b44427d4762
- https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-5-additions-to-our-houses-7e67ed97b62b
- https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-6-building-our-first-project-5429f1afde98
- https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-7-building-our-first-user-interface-c61e9a22be2f
- https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-8-implementing-react-router-6109671db576
- https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-9-chat-bot-demo-using-firebase-637445703c74
- https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-10-reacting-to-what-weve-learned-633ac18469ba
A 10-part series that explains React (and many web dev concepts) from the ground up, with simple terms and lots of metaphors. Aimed at absolute beginners.
-- **Intro to React**
- https://www.writesoftware.org/topic/react
- A short tutorial series that introduces basic React concepts like JSX, components, props, state, and events.
-
- **Everything You Should Know About React: The Basics You Need To Start Building**
https://medium.freecodecamp.org/everything-you-need-to-know-about-react-eaedf53238c4
A comprehensive tutorial that covers topics like components, rendering, JSX, state, event handling, async behavior, props, and refs.
-
-- **Introduction to React**
- http://ivanjurina.com/2017/11/19/introduction-to-react/
- Useful notes and info on the basics of React, from someone who just learned React.
-
+
- **React Holiday**
https://react.holiday/
A series of short lessons that teach core React concepts, each with an interactive sandbox example to play with.
@@ -156,6 +135,10 @@
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.
+- **Learning React**
+ https://withouttheloop.com/articles/2018-01-03-react-1/
+ A multi-part series that tries to bridge the gap between a "Hello World" example and a production-ready app, by showing how a React app is built up from first principles and explaining why each new piece is necessary. Covers topics like basic components, Redux, React-Router, AJAX, and more.
+
#### React Concept Overviews
@@ -199,12 +182,21 @@
https://react.christmas/
A series of short posts that look at specific aspects of using React, including using Create-React-App, testing code, using Fragments, component composition, and much more.
+- **6 React Development Tips for Beginners**
+ https://www.codementor.io/canberkmorelli/i-wish-i-knew-these-before-diving-into-react-fvionauhk Several useful tips for understanding how React works, including behavior of `setState` and component lifecycle methods.
+
+- **React - Common Questions**
+ https://academind.com/learn/react/react-q-a/
+ An article and accompanying video that explain answers to common questions about React, including whether a complex project setup is necessary, different ways to define components, ways to style React apps, immutability, using React with various backends, and more.
+
+- **React Cheatsheet**
+ https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/react.js
+ A useful single-file summary of React's APIs and concepts
+
#### Project-Based Tutorials
-- **A Comprehensive Guide to Building Apps with React**
- http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/
- Walks through the major concepts and API functions in React
+
- **Hacking with React**
http://www.hackingwithreact.com/
@@ -268,12 +260,7 @@
- **SurviveJS - React**
http://survivejs.com/react/introduction
A full book online book that shows how to develop a Kanban application. Covers key ideas of React, Flux, and advanced concepts such as styling. The commercial version has more content, but you can complete the basic tutorial for free.
-
-- **A Primer on the React Ecosystem**
- http://patternhatch.com/2016/07/06/a-primer-on-the-react-ecosystem-part-1-of-3/
- http://patternhatch.com/2016/08/02/a-primer-on-the-react-ecosystem-part-2-of-3/
- A multi-part tutorial that demonstrates how to set up a React development environment, create React components and have them respond to data changes, and manage app state with Redux.
-
+
- **Building Your First Real-World React Application**
http://academy.plot.ly/#react
Max Stoiber's full-size tutorial on building an app using React. Includes an intro to React, project setup, using external libraries, data management with Redux, use of Immutable.js, and testing with Jest.
@@ -284,24 +271,13 @@
https://blog.tighten.co/react-101-routing-and-auth
https://blog.tighten.co/react-101-part-4-firebase
A great 4-part series that progressively builds up a Giphy search engine
-
-- **#ReactForNewbies: Building a Todo App with Create-React-App**
- https://edemkumodzi.com/reactfornewbies-building-a-todo-app-with-create-react-app-part-1-5aae4bd637ee
- https://edemkumodzi.com/reactfornewbies-building-a-todo-app-with-create-react-app-part-2-f846e2d8b820
- An ongoing series, written by someone who is writing the posts as he learns React.
-
-- **Rock and Roll React Tutorial**
- http://myappincome.co.uk/rock-and-roll-reactjs-tutorial-part-1/
- http://myappincome.co.uk/rock-and-roll-react-js-tutorial-part-2/
- http://myappincome.co.uk/rock-and-roll-react-js-tutorial-part-3/
- A tutorial that builds a React version of the Ember "Rock and Roll App" example. Covers more intermediate topics, and is aimed at new React devs trying to grow their knowledge.
-
+
- **Find Your Park with React and the DarkSky API**
https://appendto.com/2016/10/find-your-park-with-reactjs-and-the-darksky-api/
Demonstrates building a small app that displays info on a Google map
- **React Daily UI**
- http://codepen.io/collection/DoLZRm/
+ http://codepen.io/collection/DoLZRm/
https://www.fullstackreact.com/react-daily-ui/001-sign-up-form/
https://www.fullstackreact.com/react-daily-ui/002-checkout/
https://www.fullstackreact.com/react-daily-ui/003-landing-page/
@@ -328,7 +304,6 @@
https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-1-a12e1833fdc
https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-2-3ad99f38b48d
https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-3-322447d14192
- https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-4-9f843c8c1ccc
A tutorial series that introduces React's concepts, using the Create-React-App tool to handle starting the project.
- **Retrogames Library with Node, React, and Redux: Server API and React Frontend**
@@ -352,12 +327,13 @@
Demonstrates building a small app that handles payment information using the Stripe service
- **Let's Learn: Higher Order Components and Websockets**
- https://medium.com/let-s-learn/lets-learn-higher-order-components-and-websockets-83a18d36c0d1 Examples that show how to create reusable components that manage a websocket connection and subscriptions to specific events.
-
+ https://medium.com/let-s-learn/lets-learn-higher-order-components-and-websockets-83a18d36c0d1
+ Examples that show how to create reusable components that manage a websocket connection and subscriptions to specific events.
+
- **Make Your Own Charts in React Without a Charting Library**
- https://kyleshevlin.com/make-your-own-charts-in-react-without-a-charting-library-part-1/
+ https://kyleshevlin.com/make-your-own-charts-in-react-without-a-charting-library
A series that demonstrates building your own chart rendering components.
-
+
- **Intro to React Workshop**
https://github.com/ericvicenti/intro-to-react
An hour-long workshop originally developed for Facebook's F8 developer conference. Includes a workshop video and a follow-along guide to building a simple React app.
@@ -383,13 +359,9 @@
An easy-to-follow, step-by-step tutorial that demonstrates key concepts like loading data, initializing state, and handling input changes.
- **Microservices with Docker, Flask, and React**
- https://testdriven.io/part-one-intro/
+ https://testdriven.io/part-one-intro
A large multi-part tutorial covers setting up a dev environment using Docker containers, building a REST API server with the Python Flask framework, building a UI with React, and deploying it all to Amazon EC2.
-
-- **Create a Spreadsheet using React**
- https://www.writesoftware.org/tutorial/react-spreadsheet
- An excellent tutorial that shows how to build a miniature spreadsheet app using React
-
+
- **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.
@@ -406,6 +378,10 @@
https://sabe.io/tutorials/getting-started-with-react
A tutorial that demonstrates how to build a simple real-time display of cryptocurrency prices.
+- **Creating your first MERN stack application**
+ https://blog.cloudboost.io/creating-your-first-mern-stack-application-b6604d12e4d3
+ Shows how to build an expense manager application, using create-react-app as the basis for the front end.
+
#### Paid Courses and Books
@@ -418,11 +394,7 @@ Also see the course sites listed in the [Community Resources](community-resource
- **React for Beginners**
https://reactforbeginners.com/
A complete course that teaches how to build full real-world applications. Includes videos and source code.
-
-- **Pro React**
- http://www.pro-react.com/
- The book teaches you how to successfully structure increasingly complex front-end applications and interfaces. You will learn how to use React completely, and learn best practices for creating interfaces in a composable way. You will also cover additional tools and libraries in the React ecosystem (such as React Router and Flux architecture).
-
+
- **React: Up & Running**
http://shop.oreilly.com/product/0636920042266.do
http://www.phpied.com/react-up-and-running/
@@ -438,7 +410,6 @@ Also see the course sites listed in the [Community Resources](community-resource
- **Taming the State in React**
https://www.robinwieruch.de/learn-react-redux-mobx-state-management/
- https://roadtoreact.com/course-details?courseId=TAMING_THE_STATE
A book and set of course material from the author of "The Road to Learn React", covering state management with setState, Redux, and MobX.
- **Learn Pure React**
diff --git a/redux-architecture.md b/redux-architecture.md
index ba387cc..ea28029 100644
--- a/redux-architecture.md
+++ b/redux-architecture.md
@@ -34,6 +34,10 @@
https://medium.com/@fastphrase/when-to-use-redux-f0aa70b5b1e2
Some helpful thoughts on when you should use Redux: same app state needed in multiple components, global components that need to be accessed anywhere, too much prop passing, and more.
+- **When (and when not) to use Redux**
+ https://blog.logrocket.com/when-and-when-not-to-use-redux-41807f29a7fb
+ A useful summary of the problems Redux can help solve in React apps, the major benefits of using Redux, reasons why you might not need Redux, and the basic concepts of Redux.
+
#### Redux Architecture
@@ -78,11 +82,7 @@
https://medium.com/@royisch/moving-to-react-redux-in-baby-steps-aea0402624bf
https://medium.com/@royisch/6-lessons-learned-from-going-to-production-with-react-redux-19257f6724f6
A pair of articles describing one company's transition from a Backbone app to using React and Redux.
-
-- **Black Pixel Redux Handbook**
- http://bpxl-labs.github.io/redux-handbook/
- Black Pixel's guidelines for project/app structure and usage
-
+
- **Tips for a Better Redux Architecture: Lessons for Enterprise Scale**
https://hashnode.com/post/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale-civrlqhuy0keqc6539boivk2f
Thoughts on good patterns and approaches in a large Redux app, including use of action creators instead of `dispatch` in components, module/container file structure, using sagas for flow control, and more.
@@ -115,6 +115,18 @@
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.
+- **Scaling React/Redux in Yahoo Finance**
+ https://medium.com/@longho/scaling-react-redux-in-yahoo-finance-88ef9e89b55c
+ The Yahoo Finance team describes how they've structured their React+Redux architecture, including data layers, action and state structures, use of API and analytics middleware, routing, rendering, and server-side garbage collection.
+
+- **How We're Sharing Code Between React and React Native**
+ https://blog.smartive.ch/how-were-sharing-code-between-react-and-react-native-607cdd1f5247
+ A look at how Redux-based code can be shared between multiple platforms in a framework-agnostic way, with discussion on which types of code are most sharable.
+
+- **How We React at Microsoft To-Do**
+ https://www.youtube.com/watch?v=CWxc3AYja1I
+ A 10-minute presentation from a Microsoft engineer for how they approach connecting all of their components to Redux.
+
#### Redux Best Practices
@@ -170,11 +182,7 @@
- **Learning and scaling a React/Redux app with a distributed team**
https://devblog.xero.com/learning-and-scaling-a-react-redux-app-with-a-distributed-team-e4c397def187
Lessons learned from working with a large application with many features, including use of common components, sagas, project structure, and utility libraries
-
-- **Redux at Knewton**
- https://tech.knewton.com/blog/2016/11/redux-at-knewton/
- Discussion of how Redux helped Knewton improve their app, including dev middleware to catch accidental mutations, normalization to help with caching, and other tradeoffs.
-
+
- **4 Things for Efficient Redux**
https://medium.com/@iJaniashvili/4-things-for-efficient-redux-17e87b4cd6cb
Suggestions for improved Redux apps based on experience, including using Immutable.js, use of `combineReducers`, listening for actions in multiple reducers, and "aliasing" actions.
@@ -183,11 +191,7 @@
https://blog.shakacode.com/a-year-of-development-with-redux-part-i-a5791e124a7d
https://blog.shakacode.com/a-year-of-development-with-redux-part-ii-3035ff0b1781
Some quick tips for working with Redux, structuring data, and encapsulation of components
-
-- **Avoiding False Cause**
- http://duplo.tech/avoiding-false-cause/
- Some high-level general thoughts on cargo-culting, dogma, and best practices, followed by some specific examples of problematic Redux code (unclear reducer state shape, managing "editing" mode data, applying arbitrary value updates)
-
+
- **Isn't our code just the BEST**
https://medium.com/bumpers/isnt-our-code-just-the-best-f028a78f33a9
A quirkily-written look at how a dev team rewrote their project using React and Redux, including examples of project structure, component usage, and data normalization
@@ -216,11 +220,7 @@
- **Dispatch Redux actions as events, not commands!**
https://hackernoon.com/dispatch-redux-actions-as-events-not-commands-4de8a92b1ea5
Some opinionated thoughts on naming and intent for Redux actions, and why actions should be treated similar to event sourcing
-
-- **Don't Overcomplicate Javascript, #0: Redux Action Constants**
- https://bits.ristic.io/dont-overcomplicate-javascript-0
- Some thoughts on the pros and cons of defining action constants for reuse in Redux apps, and whether it's a good idea to use libraries to help define those constants.
-
+
- **Is using a mix of Redux state and React local component state ok?**
http://blog.jakoblind.no/2017/02/08/is-using-a-mix-of-redux-state-and-react-local-component-state-ok/
A short article expanding on the rules of thumb for when to use Redux state given in the Redux FAQ, with some examples for each rule of thumb.
@@ -343,10 +343,6 @@
https://medium.com/@MattiaManzati/how-to-reuse-redux-components-8acd5b4d376a
Discussion of an Elm-inspired approach to wrapping up reusable components and logic
-- **Redux and the Elm Architecture**
- http://salsita.github.io/redux-elm/
- Redux lacks built-in abstractions for real-world, maintainable, scalable applications. In particular, it is difficult to create and distributed encapsulated, reusable components. The Elm Architecture clearly addresses some important areas where Redux alone is lacking.
-
- **Scaleable FE with Redux and Elm Architecture**
https://medium.com/@hunterbmt/scaleable-fe-with-redux-and-elm-architecture-c6812ed0125e
Examples of using Elm-style approaches to writing Redux code
@@ -368,7 +364,8 @@
http://randycoulman.com/blog/2016/09/20/redux-reducer-selector-asymmetry/
http://randycoulman.com/blog/2016/09/27/modular-reducers-and-selectors/
http://randycoulman.com/blog/2016/11/29/globalizing-redux-selectors
- A blog series discussing approaches to encapsulating Redux data using selectors and other related approaches
+ http://randycoulman.com/blog/2018/06/12/solving-circular-dependencies-in-modular-redux/
+ A blog series discussing approaches to encapsulating Redux data using selectors and other related approaches. The last post is a follow-up to the earlier posts in the series, looking at a different approach that he feels works out better.
- **Redux State Keys - A predictable yet dynamic substate**
http://www.robinwieruch.de/redux-state-keys/
@@ -425,6 +422,15 @@
- **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.
+
+- **Restate - the store of Redux Tree**
+ https://medium.com/@antonkorzunov/restate-the-story-of-redux-tree-27d8c5d1040a
+ https://medium.com/@antonkorzunov/the-state-of-the-state-of-the-state-f93c8bdc6b1b
+ Describes a library that can wrap up React components so they only see a portion of a Redux store
+
+- **Dependency Injection in Redux**
+ https://www.codesai.com/2017/04/dependency-injection-react-redux
+ Examples of using component factories to generate connected components and allow easier testing
#### Variations on Redux Architectures
@@ -498,10 +504,6 @@
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.
-- **Connecting React components to a Redux store with render callbacks**
- https://medium.com/@gott/connecting-react-component-to-redux-store-with-render-callback-53fd044bb42b
- Demonstrates using the React "render props" pattern to pass down data from a Redux store, rather than using `connect`.
-
- **"Anyone using Redux with a render prop?"**
https://twitter.com/threepointone/status/913701233394900992
A Twitter thread discussing use of render props as an alternative to `connect`. Includes a reply by Dan Abramov, who points out that this is how React-Redux originally worked, but it was changed to an HOC to better deal with side effects from state changes.
@@ -524,6 +526,14 @@
https://medium.com/@mike.es6.programmer/reslice-yet-another-way-of-managing-scale-in-react-and-redux-223971139d6b
Discusses the Reslice toolkit, how it wraps up Redux+Reselect+React-Redux, and how it differs from a standard React+Redux architecture.
-- **"How to deal with dumb REdux views that import containers?"**
+- **"How to deal with dumb Redux views that import containers?"**
https://www.reddit.com/r/javascript/comments/7eavyx/how_to_deal_with_dumb_redux_views_that_import/
- Interesting discussion on ways to organize nested Redux-connected components for reusability.
\ No newline at end of file
+ Interesting discussion on ways to organize nested Redux-connected components for reusability.
+
+- **Introducing Redux Box**
+ https://medium.com/@anish000kumar/introducing-redux-box-99e3d2134ab6
+ Discussion of a library for generating Redux application modules.
+
+- **Redux for Chrome Extensions**
+ https://robots.thoughtbot.com/redux-for-chrome-extensions
+ A detailed look at how Redux can fit into the Chrome extension architecture
diff --git a/redux-middleware.md b/redux-middleware.md
index dac2d50..cd72cf7 100644
--- a/redux-middleware.md
+++ b/redux-middleware.md
@@ -23,7 +23,7 @@
A tutorial describing how Redux compares to typical "MVC", what a "middleware" is, what they can do, and how you can test them.
- **Redux Middleware Tutorial**
- http://www.pshrmn.com/tutorials/react/redux-middleware/
+ https://github.com/pshrmn/notes/blob/master/redux/redux-middleware.md
An overview of what middleware is, how `applyMiddleware` works, and how to write middleware.
- **Redux Middleware: Behind the Scenes**
@@ -53,11 +53,6 @@
- **Build your own Redux middleware**
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
@@ -65,10 +60,6 @@
http://jlongster.com/Two-Weird-Tricks-with-Redux
https://news.ycombinator.com/item?id=11488633
James Longster describes a couple useful approaches he found while writing the Firefox Developer Tools: checking for specific actions using a middleware, and managing multiple async requests. The HN comments include some useful discussion.
-
-- **Redux Hack: Custom Thunk APIs**
- http://chrispearce.co/redux-quick-hack-custom-thunk-apis/
- Demonstrates writing a custom thunk middleware that injects additional dependencies into thunks.
- **Connecting Redux to your API**
https://blog.boldlisting.com/connecting-redux-to-your-api-eac51ad9ff89
@@ -104,4 +95,12 @@
- **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
+ 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.
+
+- **How to use Redux middleware to decouple AJAX call?**
+ http://www.albertgao.xyz/2017/12/07/how-to-use-redux-middleware-to-decouple-ajax-call/
+ Demonstrates writing a middleware that accepts a plain object description of an HTTP request, and executes the request
+
+- **Custom Form Validation in React with Redux Middleware**
+ http://tech.tunecore.com/redux-form-validation-middleware
+ A detailed example of how middleware can be used to implement some complex form validation logic in a centralized way.
diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md
index 1ec31f5..24d5ef7 100644
--- a/redux-reducers-selectors.md
+++ b/redux-reducers-selectors.md
@@ -4,7 +4,7 @@
#### Reducers
- **Redux Docs: Structuring Reducers**
- http://redux.js.org/docs/recipes/StructuringReducers.html
+ https://redux.js.org/recipes/structuring-reducers/structuring-reducers
Comprehensive information on writing reducers and structuring data, covering reducer composition, use of `combineReducers`, normalizing data, proper immutable updating, and more.
- **"Reducer composition without slicing state"**
@@ -58,11 +58,7 @@
- **Functional Redux Reducers with Ramda**
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.
@@ -78,6 +74,10 @@
- **Code splitting Redux reducers**
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.
+
+- **Dynamic Redux Reducers**
+ https://tylergaw.com/articles/dynamic-redux-reducers/
+ Demonstrates setting up the "async reducers" approach described by Dan Abramov, and adding reducers based on routes using HOCs to abstract the process.
#### Selectors
@@ -134,6 +134,18 @@
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 in Redux are a MUST**
+ https://hackernoon.com/selectors-in-redux-are-a-must-d6b0637c79b7
+ Examples of how nested Redux state can be difficult to work with, how to separate and structure domain data and UI data, and how and why to write selectors that extract and reshape the data as needed for different parts of the application.
+
+- **Be Selective With Your State**
+ https://medium.com/riipen-engineering/be-selective-with-your-state-8f1be76cb9f4
+ A helpful overview of when and why to use selectors and Reselect with Redux, some issues with using selectors in multiple components, and using `re-reselect` to create "cached" selectors.
+
+- **Scaling data selection on the client**
+ https://medium.com/@skovy/scaling-data-selection-on-the-client-5e4411de6984
+ Describes several reasons to use selector functions, and gives examples of writing selectors to handle normalized state.
+
#### Normalization
@@ -219,11 +231,3 @@
- **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
-
-- **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 3ba291a..d993e2b 100644
--- a/redux-side-effects.md
+++ b/redux-side-effects.md
@@ -11,10 +11,6 @@
http://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594
Dan Abramov gives reasons for using thunks and async middleware, and some useful patterns for using thunks.
-- **Pure Functionality and Side Effects with Redux**
- https://blog.hivejs.org/building-the-ui-2/
- An overview of what side effects are, how they fit into Redux, and several approaches for managing them.
-
- **"Async Redux workflow: calling actions outside Redux?"**
https://www.reddit.com/r/reactjs/comments/4upe9t/async_redux_workflow_calling_actions_outside_redux/d5sgy5s?context=3
A comment explaining why using action creator functions is a good practice
@@ -62,11 +58,6 @@
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
- **Redux side effects and you**
@@ -89,11 +80,7 @@
- **Keeping Redux in check**
https://medium.com/@georgeleeme/keeping-redux-in-check-78534504b215
Some tips on use of the Flux Standard Actions convention, and comparison of using redux-thunk vs redux-promise.
-
-- **"Argument: We should switch from thunks to sagas"**
- http://en.arguman.org/we-should-switch-from-redux-thunk-to-redux-saga
- An debate flowchart with arguments for and against using thunks and sagas
-
+
- **The Evolution of Redux Action Creators**
https://medium.com/@northerneyes/the-evolution-of-redux-action-creators-2973018bf2ae
A comparison of ways to make action creation testable, looking at redux-thunk, a custom thunk-like middleware, and redux-saga
@@ -109,11 +96,7 @@
- **3 Common Approaches to Side-Effects in Redux**
https://goshakkk.name/redux-side-effect-approaches/
An overview of what "side effects" are, how they relate to Redux, and the most common ways to handle side effects in a Redux app
-
-- **Redux: Thunk vs Saga**
- http://blog.jakegardner.me/redux-thunk-vs-saga/
- A couple quick examples showing how to use thunks and sagas for the same task
-
+
- **Redux Thunks Dispatching Other Thunks - Discussion and Best Practices**
https://medium.com/@talkol/redux-thunks-dispatching-other-thunks-discussion-and-best-practices-dd6c2b695ecf
Some excellent thoughts on when it's okay to have a thunk dispatch another thunk, and other possible approaches.
@@ -260,10 +243,6 @@
https://medium.com/@chanakyabhardwaj/modelling-common-patterns-with-redux-saga-464a380a37ce
Examples of saga logic patterns for behaviors like "first-amongst-these", "keep-doing-until", and "step-by-step".
-- **Building an event system using Redux and Sagas**
- 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
@@ -297,6 +276,14 @@
https://objectpartners.com/2017/11/20/taming-redux-with-sagas/
A good overview of Redux-Saga, including info on generator functions, use cases for sagas, using sagas to deal with promises, and testing sagas.
+- **Learning Redux Saga: Event Channels with Web Midi**
+ https://medium.com/@joeltbond/learning-redux-saga-event-channels-29dee438fd7b
+ Demonstrates using sagas to interact with the Web MIDI API
+
+- **May Cause Side Effects: How to Implement Redux Sagas as Middlewares**
+ https://www.javascriptjanuary.com/blog/may-cause-side-effects-how-to-implement-redux-sagas-as-middleware
+ An extensive article that first implements async functionality with thunks, then walks through how sagas work and refactors the logic to use sagas instead.
+
#### Observables
@@ -324,7 +311,21 @@
https://ivanjov.com/reactive-redux-state-with-rxjs/
Describes the concept of "Reactive PRogramming" and the RxJS library, and shows how to use redux-observable to fetch data, along with examples of testing.
+- **Creating and Testing a D3/React Game with Redux-Observable**
+ https://medium.com/@eric.hulburd.af/creating-and-testing-a-d3-react-game-with-redux-observable-d97f2155421c
+ A detailed look at the concepts and usage of redux-observable. Implements an example game that's built to demonstrate usage in a more meaningful application, and shows how to test epics.
+
+- **Timing of reducing Actions with Redux-Observable**
+ https://www.bleathem.ca/blog/timing-of-reducing-actions-with-redux-observable/
+ Breaks down the sequence of behavior when actions are dispatched, how Redux-Observable interacts with that sequence, and gives examples of epics dispatching actions synchronously and asynchronously.
+
+- **Streaming Redux state as an Observable with RxJS**
+ https://dev.to/fahad19/streaming-redux-state-as-an-observable-with-rxjs-5f48
+ Examples of how to construct an Observable stream that subscribes to the Redux store state
+- **You Aren't Using Redux with Observables Enough**
+ https://medium.com/@jacobp100/you-arent-using-redux-with-observables-enough-b59329c5a3af
+ Shows how to use the Redux store as the source for an observable stream, and gives examples of RxJS observable streams that toggle music player behavior and handle async requests that need to be canceled.
#### Other Side Effect Approaches
@@ -336,15 +337,7 @@
- **A simplified approach to calling APIs with Redux**
http://www.sohamkamani.com/blog/2016/06/05/redux-apis/
A well-written example of creating a "data service" middleware that handles API requests, as well as examples of handling some request status state.
-
-- **Elm Architecture with Redux**
- https://smallbusinessforum.co/elm-architecture-with-react-redux-redux-loop-645a67070b1a
- A short look at how Elm handles side effects, and how Redux-Loop can help implement a similar approach in Redux
-
-- **Redux-cycles**
- http://nick.balestra.ch/talk/redux-cycles/#/0
- A slideshow that describes the basics of Cycle.js, and how the redux-cycles library can be used to handle side effects in Redux
-
+
- **How to make your React app fully functional, fully reactive, and able to handle all those crazy side effects**
https://medium.freecodecamp.org/how-to-make-your-react-app-fully-functional-fully-reactive-and-able-to-handle-all-those-crazy-e5da8e7dac10
A lengthy look at Cycle.js and the redux-cycles library, with plenty of diagrams to illustrate how it handles data flow.
@@ -359,4 +352,8 @@
- **Reacting to ProgressEvents with Redux**
https://medium.com/@andersonmcook/reacting-to-progressevents-with-redux-355ba021d336
- Demonstrates using the Redux-Logic library and RxJS to handle browser ProgressEvents
\ No newline at end of file
+ Demonstrates using the Redux-Logic library and RxJS to handle browser ProgressEvents
+
+- **Redux-loop: A better solution for managing asynchronous operations in Redux**
+ https://lorefnon.tech/2018/02/04/redux-loop-a-better-solution-for-managing-asynchronous-operations-in-redux/
+ Gives an overview of how Redux-Loop works for handling side effects, and argues that it provides a better approach than sagas or thunks.
\ No newline at end of file
diff --git a/redux-techniques.md b/redux-techniques.md
index ff7d750..67ba8d0 100644
--- a/redux-techniques.md
+++ b/redux-techniques.md
@@ -7,10 +7,6 @@
#### Debugging
-- **Hot reloading and time travel debugging: what are they?**
- https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35
- A short but informative article describing these concepts and why they're useful.
-
- **Debugging is in Flux**
https://vimeo.com/166342150
A fantastic talk that demonstrates use cases and examples for time-travel debugging in a Flux-style architecture, including crash reporting. The demo is built in Alt, but obviously completely applies to Redux as well.
@@ -51,23 +47,18 @@
- **How to treat Errors as first-class citizen in Flux (and Redux)**
https://medium.com/@jamiedixon/how-to-treat-errors-as-first-class-citizens-in-flux-and-redux-fca7f3d5c02d
Discusses how the FSA structure expects actions to have an optional `error` field, and how to write code that deals with that.
-
-- **Redux in Action: Using the Redux DevTools**
- https://www.slideshare.net/ManningBooks/redux-in-action-learn-to-manage-and-consolidate-state
- Some slides from the authors of the book "Redux in Action", explaining what the Redux DevTools are, how to set them up, and how to use them to view dispatched actions and debug state changes
-
+
- **A user encounters a JavaScript error. You'll never guess what happens next!**
https://hackernoon.com/a-user-encounters-a-javascript-error-youll-never-guess-what-happens-next-dc1a6f725490
A walkthrough for how to capture user page interactions and dispatched Redux actions into a "journey" object that can be sent to the server if an error is detected, allowing a developer to play back the user's behavior for debugging.
+
+- **Getting the most out of Redux + Sentry**
+ https://blog.lingoapp.com/getting-the-most-out-of-redux-sentry-ecd8c737410d
+ Describes how to use Sentry to monitor behavior of Redux apps in production
#### Other
-
-- **Connecting the Linode API to Redux with Higher-Order Functions**
- https://engineering.linode.com/2016/08/17/Using-metaprogramming-in-the-manager.html
- Linode explains how they generate customized action creators and reducers to talk to different parts of their API
-
- **A Finite State Machine Helper for Redux**
https://hackernoon.com/a-finite-state-machine-helper-for-redux-c18519643719
Describes a small but useful library for managing state machines using Redux reducers.
@@ -92,7 +83,6 @@
- **Immuto: Strongly Typed Redux Composition**
http://danielearwicker.github.io/Immuto_Strongly_Typed_Redux_Composition.html
- http://danielearwicker.github.io/Immuto_Working_with_React_An_Example_.html
http://danielearwicker.github.io/Immuto_Radical_Unification.html
http://danielearwicker.github.io/Immuto_Epilogue.html
An interesting series of experiments in adding typed cursor-like behavior to Redux. The author appears to give up on the idea in the end, but the writing and thought process are informative.
@@ -119,12 +109,7 @@
- **Things I learned about Redux: Don't Dispatch from React Lifecycle Methods**
https://github.com/carlsverre/talk-react-redux-learnings
- https://docs.google.com/presentation/d/1J82fXkgUKL6-k17ADVtozXMRfMGXnx5R6r5UnOm8z8g/edit?usp=sharing
Resources from an excellent presentation on potential timing issues that result from dispatching Redux actions in React lifecycle methods. Repo includes sample code demonstrating the issues, and a link to the video of the meetup talk.
-
-- **Let the Buyer Beware: React Redux Rerender Gotcha**
- https://www.nathanl.in/posts/let-the-buyer-beware-react-redux-rerender-gotcha
- An article describing some similar concerns regarding timing of Redux actions and React lifecycle methods, especially in regards to tracking loading state.
- **Manage analytics actions in React**
https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de
@@ -150,6 +135,10 @@
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
+- **The Definitive Guide to Redux-Persist v5**
+ https://blog.reactnativecoach.com/the-definitive-guide-to-redux-persist-84738167975
+ An informative guide that covers setting up Redux-Persist, customizing what's persisted, and merging persisted data into the store.
+
#### Reducing Boilerplate
@@ -158,14 +147,11 @@
http://blog.bloomca.me/2017/06/02/why-i-created-redux-tiles-library.html
https://news.ycombinator.com/item?id=14482215
Describes several concerns with increasing verbosity and complexity in Redux apps, and how the author's library can help simplify those.
-
-- **Reducing Redux Boilerplate with redux-actions**
- http://www.hypertext.io/redux/react/2017/10/30/redux-actions.html
- A short look at how the `redux-actions` lib can simplify the process of defining action type, action creators. and reducers.
- **Reducing Redux: avoiding boilerplate with redux-scc**
https://medium.com/onfido-tech/reducing-redux-avoiding-boilerplate-with-redux-scc-b72c80c338e5
- https://medium.com/onfido-tech/redux-scc-update-combined-actions-and-custom-types-ce346ea91e85 Looks at how the redux-scc library allows building "store chunks", which simplify the amount of work needed to define and update a Redux store.
+ https://medium.com/onfido-tech/redux-scc-update-combined-actions-and-custom-types-ce346ea91e85
+ Looks at how the redux-scc library allows building "store chunks", which simplify the amount of work needed to define and update a Redux store.
- **Redux Action Creator Creators**
https://hackernoon.com/redux-action-creator-creators-6684b051d4c6
@@ -184,7 +170,8 @@
Examples of using Elm-inspired "union types" to define Redux logic, as well as combining action creators and reducers in a single file similar to the "ducks" approach.
- **ARC - Simplifying async requests in Redux apps**
- https://medium.com/front-end-hacking/arc-simplifying-async-requests-in-redux-apps-e8052b874216 Describes the "async action" pattern commonly used with Redux, and how the ARC library can simplify the process of generating actions, action creators, and reducers that work with async actions.
+ https://medium.com/front-end-hacking/arc-simplifying-async-requests-in-redux-apps-e8052b874216
+ Describes the "async action" pattern commonly used with Redux, and how the ARC library can simplify the process of generating actions, action creators, and reducers that work with async actions.
- **Abstracting Vuex/Redux Action Patterns**
https://medium.com/coding-stones/abstracting-vuex-redux-action-patterns-8df36b0e2fcc
@@ -208,11 +195,7 @@
https://hackernoon.com/automate-writing-redux-reducers-with-5-lines-of-javascript-cecb79fb9a35
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
@@ -221,6 +204,19 @@
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.
+- **Redux: Let's Code a Higher-Order "Duck"**
+ https://medium.com/@yazeedb/redux-lets-code-a-higher-order-duck-a045415bef0f
+ https://medium.com/@yazeedb/redux-lets-refactor-our-higher-order-duck-e44b0110befc
+ A neat example of how to write reusable logic in Redux. Walks through writing generic CRUD logic for managing the contents of a list, and shows how to organize it using the "ducks" structure and make it reusable for different types of data. The second article shows how to refactor some of the logic using the `createReducer` approach from the Redux docs.
+
+- **DRY Redux at Scale: The Basics**
+ https://medium.com/@gaforres/dry-redux-at-scale-the-basics-d1dac63f5a53
+ Walks through a series of approaches for reducing boilerplate and abstracting generation of action creators and reducers, and discusses the pros and cons of adding additional abstraction layers.
+
+- **Reducing boilerplate in Redux Apps with Arc**
+ https://hackernoon.com/reducing-boilerplate-in-redux-apps-with-arc-d9550434470e
+ The author of the redux-arc library describes how it can help simplify your Redux code by generating action creators and reducers for CRUD logic.
+
#### Network Management
@@ -230,11 +226,6 @@
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/
- Covers a couple different ways to manage the logic for AJAX polling.
-
- **Firebase with Redux**
https://medium.com/@prescottprue/firebase-with-redux-82d04f8675b9
Examples for combining Firebase into a Redux application
@@ -256,9 +247,13 @@
A summary of one possible approach for integrating Websocket functionality into a React/Redux application architecture.
- **What's the best way to store tokens in Redux?**
- https://michaelwashburnjr.com/whats-the-best-way-to-store-tokens-in-redux/
+ https://michaelwashburnjr.com/blog/best-way-to-store-tokens-redux
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
+ Discusses potential techniques for synchronizing server-side state via Redux actions, and how to reconcile actions that are dispatched out of order.
+
+- **React/Redux Tips: Better Way to Handle Loading Flags in Your Reducers**
+ https://medium.com/stashaway-engineering/react-redux-tips-better-way-to-handle-loading-flags-in-your-reducers-afda42a804c6
+ A quick suggestion to store loading state in its own slice reducer, rather than spread across the app state.
\ No newline at end of file
diff --git a/redux-tutorials.md b/redux-tutorials.md
index c955f84..c7a290c 100644
--- a/redux-tutorials.md
+++ b/redux-tutorials.md
@@ -3,16 +3,20 @@
#### Basic Introductions
- **Redux Docs**
- http://redux.js.org/index.html
+ https://redux.js.org/
The official Redux documentation. FANTASTIC writing - not just "here's the API", but "here's what you want to do and how we came up with this"
+
+- **React-Redux Docs**
+ https://react-redux.js.org
+ The official React-Redux documentation. Explains how to correctly use the React-Redux API, including details on writing `mapState` functions and dispatching actions.
- **Getting Started with Redux - Video Series**
- https://egghead.io/series/getting-started-with-redux
+ https://app.egghead.io/playlists/fundamentals-of-redux-course-from-dan-abramov-bd5cc867
https://github.com/tayiorbeii/egghead.io_redux_course_notes
Dan Abramov, the creator of Redux, demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos.
- **Building React Applications with Idiomatic Redux - Video Series**
- https://egghead.io/series/building-react-applications-with-idiomatic-redux
+ https://app.egghead.io/series/building-react-applications-with-idiomatic-redux
https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes
Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos.
@@ -31,19 +35,15 @@
- **Redux and React: An Introduction**
http://jakesidsmith.com/blog/post/2017-11-18-redux-and-react-an-introduction/
A great introduction to Redux's core concepts, with explanations of how to use the React-Redux package to use Redux with React.
+
+- **React Redux Tutorial for Beginners: Learning Redux in 2018**
+ https://www.valentinog.com/blog/react-redux-tutorial-beginners/
+ An excellent tutorial that covers a variety of Redux fundamentals, including a look at the problems Redux helps solve, when you should learn and use Redux, actions and reducers, the Redux store, and how to connect React components to Redux.
- **Single State Tree + Flux**
http://merrickchristensen.com/articles/single-state-tree.html
Describes the benefits of a Flux architecture, and a single state tree like Redux has
-- **Understanding Redux**
- http://www.youhavetolearncomputers.com/blog/2015/9/15/a-conceptual-overview-of-redux-or-how-i-fell-in-love-with-a-javascript-state-container
- A higher-level description of what Redux is, the major concepts, and why you would want to use it. Also some additional article links.
-
-- **A Cartoon Guide to Redux**
- https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.3k23w6m18
- Another high-level description of Redux, with cartoons
-
- **Redux-Tutorial**
https://github.com/happypoulp/redux-tutorial
A file-based tutorial to Redux (click on each numbered .js file in the repo)
@@ -65,18 +65,13 @@
A variety of user-provided diagrams illustrating how the pieces of Redux fit together.
- **How I Learned to Stop Worrying and Love Redux**
- https://medium.com/@shopsifter/how-i-learned-to-stop-worrying-and-love-redux-9b50e505e802
+ https://medium.com/@shopsifter/how-i-learned-to-stop-worrying-and-love-redux-9b50e505e802
A new Redux user describes how she was able to overcome initial problems learning Redux.
- **Introduction to Redux and React-Redux**
http://julienrenaux.fr/2016/05/30/introduction-to-redux-and-react-redux/
A quick overview of core Redux concepts, with code examples for creating a store and hooking up React components to read the data.
-
-- **Redux and React Redux**
- http://www.pshrmn.com/tutorials/react/redux/
- http://www.pshrmn.com/tutorials/react/react-redux/
- A pair of articles covering basic Redux concepts and usage.
-
+
- **An Introduction to Redux**
https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/
An overview and intro to the basic concepts of Redux. Looks at the benefits of using Redux, how it differs from MVC or Flux, and its relation to functional programming.
@@ -84,19 +79,11 @@
- **Why Redux makes sense to me and how I conceptualize it**
https://medium.com/@fay_jai/why-redux-makes-sense-to-me-and-how-i-conceptualize-it-c8a3a9db15ca
Some useful analogies for visualizing how Redux works, how the pieces fit together, and why you'd want to use it.
-
-- **Redux10: A Visual Overview of Redux in 10 Steps**
- https://github.com/chrisscoular/Redux10
- A small repo with a standalone HTML page. Walks through 10 simple steps to help explain the basics of Redux.
-
+
- **How to Use the React-Redux package**
http://code.tutsplus.com/tutorials/how-to-use-the-react-redux-package--cms-27150
An excerpt from the "Modern Web Apps with React and Redux" course, explaining how to use React-Redux to connect components to Redux.
-
-- **Pro React beta chapter: Using Redux**
- http://www.pro-react.com/materials/
- An alternative version of Pro React's chapter on using Flux that explains Redux usage
-
+
- **React/Redux Tutorials**
https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBbSLZjvleMwldX8jGgXV6a
A set of video tutorials introducing Redux concepts
@@ -221,18 +208,10 @@
http://blog.madewithlove.be/post/redux/
Walks through a small Redux example, and talks about the benefits
-- **Getting Started with Redux**
- http://www.jchapron.com/2015/08/14/getting-started-with-redux/
- Walks through setting up a small Redux app, and builds up each layer
-
-
-
- **Build an Image Gallery using React, Redux, and redux-saga**
http://joelhooks.com/blog/2016/03/20/build-an-image-gallery-using-redux-saga
A step-by-step look at building a page with some complex async behavior.
-
-
- **Interactive Frontend Development with React and Redux**
https://courses.cs.ut.ee/2016/react/spring/Main/Lectures
An Estonian university course covering React and Redux. Lecture videos, slides, and course code are all available online (in English). Topics include React philosophy, container components, Redux basics, async actions, middleware, routing, and optimization.
@@ -240,11 +219,7 @@
- **TypeScript Redux**
https://github.com/ServiceStackApps/typescript-redux
This guide goes through setting up, running and exploring the ultimate JavaScript Stack du jour: TypeScript, JSPM, React, and Redux.
-
-- **Build a React Redux App with JSON Web Token (JWT) Authentication**
- http://blog.slatepeak.com/build-a-react-redux-app-with-json-web-token-jwt-authentication/
- Demonstrates building the client portion of a JWT-authenticated application (follow-up to previous articles that built the server-side).
-
+
- **Redux Hero: An Intro to Redux and Reselect**
https://decembersoft.com/posts/redux-hero-part-1-a-hero-is-born-a-fun-introduction-to-redux-js/
https://decembersoft.com/posts/redux-hero-part-2-actions-and-their-consequences-a-fun-introduction-to-redux-actions/
@@ -259,11 +234,7 @@
https://www.pubnub.com/blog/2016-07-20-adding-realtime-user-list-to-react-chat-app/
https://www.pubnub.com/blog/2016-08-16-add-typing-indicator-to-your-react-based-chat-app/
A four-part tutorial that walks through building a realtime chat app
-
-- **React and Redux Tutorial - Trending Github**
- http://myappincome.co.uk/react-redux-tutorial-trending-github-part-1/
- A five-part tutorial that builds a small app showing trending Github repos.
-
+
- **Mapping Colorado's 14er Mountains with React and Redux**
https://appendto.com/2016/10/mapping-colorados-14er-mountains-with-react-and-redux-mega-tutorial/
Demonstrates building an app that uses Google Maps to show markers for locations, as well as cards with info on those locations.
@@ -281,18 +252,9 @@
https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-2
A two-part tutorial that builds an image and video display and preview app
-- **Practical Redux**
- http://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/
- http://blog.isquaredsoftware.com/series/practical-redux/
- An ongoing series of posts intended to demonstrate a number of specific Redux techniques by building a sample application, based on the MekHQ application for managing Battletech campaigns. Written by Redux co-maintainer Mark Erikson.
-
- **A Practical Guide to Redux**
http://lorenstewart.me/2016/11/27/a-practical-guide-to-redux/
A tutorial that introduces the key concepts and usage of Redux through the code in a small sample app.
-
-- **Building a Simple CRUD App with React + Redux**
- http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/
- A nifty 8-part series that demonstrates building a CRUD app, including routing, AJAX calls, and the various CRUD aspects. Very well written, with some useful diagrams as well.
- **A comprehensive React-Redux tutorial**
https://spapas.github.io/2016/03/02/react-redux-tutorial/
@@ -312,19 +274,10 @@
https://www.sitepoint.com/crud-app-react-redux-feathersjs/
Walks through building a client-server application that uses FeathersJS to set up the server API.
-- **Nathan's Guide to Building a React/Redux Application**
- https://www.nathanl.in/posts/nathans-guide-to-building-kick-ass-react-applications-part-i
- https://www.nathanl.in/posts/building-kickass-react-applications-with-nathan-part-ii-adding-redux
- A tutorial intended to bridge the gap between "hello world" tutorials and "real-world" boilerplates. Covers building a server-rendered React application using Webpack 2, React Router 4, Redux, and ES6.
-
- **Building Tesla's Battery Range Calculator with React+Redux**
https://medium.freecodecamp.org/building-teslas-battery-range-calculator-with-react-part-2-redux-version-2ffe29018eec
Follows the "plain React" version in Part 1 by introducing basic Redux concepts, and modifying the original version to use Redux for managing state.
-
-- **NodeJS React-Redux Tutorial**
- http://www.darrenbeck.co.uk/nodejs/react/reacttutorial-part1/
- A multi-part tutorial that covers building a news app with React, Redux, and a Node API server using MongoDB, as well as setting up JWT-based authentication.
-
+
- **Simple Redux Create Delete Contact Application**
https://appdividend.com/2017/11/02/simple-redux-create-delete-contact-application/
Demonstrates building a simple client-side contact list app
@@ -345,6 +298,12 @@
- **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.
+
+- **Developing Games with React, Redux, and SVG**
+ https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-1/
+ https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-2/
+ https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-2/
+ A 3-part series that shows how to build a Space Invaders-style action game using React for the UI layer, SVG for the display, and Redux for the data flow, as well as socket.io for a real-time leaderboard and Auth0 for authentication.
#### Redux Implementation Walkthroughs
@@ -364,18 +323,13 @@
- **Let's Write Redux!**
http://www.jamasoftware.com/blog/lets-write-redux/
Walks through writing a miniature version of Redux step-by-step, to help explain the concepts and implementation.
-
-- **Hacking Redux**
- http://paulserraino.com/javascript/2016/02/16/hacking-redux.html
- Looks at the core concepts in Redux, and builds up a mini-Redux to demonstrate how Redux works internally.
-
+
- **Learning Redux with Reducks**
https://www.aaron-powell.com/tags/reducks/
Another "build a mini-Redux" article series.
- **AMA with the Redux Creators**
https://hashnode.com/ama/with-redux-cisteui6p005gzx53fstg8t6l
- https://blog.hashnode.com/the-story-of-redux-and-more/
Dan Abramov and Andrew Clark answer questions about Redux, and describe the history of its original development. Second link is a summary of answers in the AMA.
- **Rebuilding Redux**
@@ -424,6 +378,10 @@
- **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
+
+- **redux-class**
+ https://github.com/GKhalsa/redux-class
+ A miniature Redux and React-Redux implementation built for learning purposes
#### Paid Courses and Books
diff --git a/redux-ui-management.md b/redux-ui-management.md
index 4723dde..d6af9e6 100644
--- a/redux-ui-management.md
+++ b/redux-ui-management.md
@@ -1,6 +1,5 @@
### Redux UI Management
-
#### UI and Widget Implementations
- **"How can I display a modal dialog in Redux?"**
@@ -10,108 +9,111 @@
- **Creating Reusable Generic Modals in React and Redux**
http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-generic-redux-modals-and-building-better-bundles/
https://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3
- Describes an extension to Dan's technique that allows generic "picker" dialogs such as a ColorPicker to be reused by different parts of an application while keeping the Redux state serializable. (Blog post is based on my original comment on Reddit.)
-
+ Describes an extension to Dan's technique that allows generic "picker" dialogs such as a ColorPicker to be reused by different parts of an application while keeping the Redux state serializable. (Blog post is based on my original comment on Reddit.)
+
- **Implement a confirm modal using React & Redux**
- http://jslancer.com/2016/08/07/implement-a-confirm-modal-using-react-redux/
+ https://blog.jslancer.com/blog/2016/08/07/implement-a-confirm-modal-using-react-redux/
Demonstrates wrapping up an existing modal library to be controlled by Redux actions
-
+
- **Implementing Search/Filter on a list in React and Redux**
https://medium.com/@yaoxiao1222/implementing-search-filter-a-list-on-redux-react-bb5de8d0a3ad
Some quick examples of using Redux to supply a list of items as a prop, and using React local component state to store a filtered version based on inputs.
-
+
- **Creating Reusable Generic Modal Dialogs with React and Redux**
https://www.packtpub.com/books/content/creating-reusable-generic-modals-react-and-redux
A quick look at how to get results from generic dialogs like a ColorPicker, while keeping your Redux state serializable and component structure decoupled.
-
+
- **Animating with React, Redux, and D3**
https://medium.com/swizec-a-geek-with-a-hat/animating-with-react-redux-and-d3-80852153a25b
Explanation and examples of drawing animated particles using D3 to calculate new positions, Redux to store the state, and React to render them.
-
+
- **Open Sourcing a Redux Component**
https://medium.com/@itsBenCripps/open-sourcing-a-redux-component-bb82f260ff62
Details how the author developed a complex React+Redux grid component, including HTML structure, proper use of Immutable.js for good perf, and lib exports.
-
-- **Scalable Modals with React and Redux**
- https://codersmind.com/scalable-modals-react-redux/
- Demonstrates implementing the basic Redux modal manager technique described by Dan Abramov in his Stack Overflow answer.
-
+
- **A Redux-Saga Implementation of Modal Confirmation Dialogs in React**
https://decembersoft.com/posts/a-redux-saga-implementation-of-modal-confirmation-dialogs-in-react-redux/
Some examples of using sagas for controlling flow of async calls and dialog management
-
+
- **Practical Recursion: Implementing a File Item Tree View in React & Electron**
https://codeburst.io/practical-recursion-implementing-a-file-tree-view-in-react-electron-af62e7b46d26?gi=da3b8e9bf9ee
Demonstrates implementing a tree view component that shows folder structure read from the filesystem, and managing the visibility of tree nodes in Redux
-
+
- **How To Manage UI State with Redux**
https://codeburst.io/how-to-manage-ui-state-with-redux-24deb6cf0d57
An informative discussion of application state vs internal component state, how "UI state" fits into app state, and how to write a UI reducer that tracks UI state.
-
+
- **Introduce Redux local state to your React App**
https://medium.com/@tangbenze/introduce-redux-local-state-to-your-react-app-9f96f18d4f35
Demonstrates setup and use of a addon library to manage scoped actions, reducers, and connections for isolated component state.
-
+
- **Using react-redux-set-local**
https://www.andrewfong.com/blog/2017/07/03/react-redux-set-local/
Discussion of the rationale and implementation of a library for connecting isolated portions of a Redux store state to a component while maintaining separation between presentation and state management.
-
+
- **Making Toast from Scratch in React-Redux**
https://spin.atomicobject.com/2017/07/12/react-redux-toast/
A short tutorial that shows how to build your own "toast" notifications in React+Redux, with a link to the resulting implementation.
-
+
- **Toast notification system in a React/Redux application**
- https://atech.blog/natterly/toast-notification-system-in-a-react-redux-application
+ https://www.deployhq.com/blog/toast-notification-system-in-a-react-redux-application
The Natterly team walks through how they built a Redux-connected toast notification implementation.
-
+
- **A Functional Canvas Approach with Redux**
https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-ce59a369241b
https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-bab357d6c33c
Some simple examples of how to use Redux and vanilla JS canvas code to draw canvas-based UIs with minimal dependencies.
-
+
- **React/Redux with Mapbox**
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.
-
-
+ Discussion of the pros and cons of powering modals via Redux, with examples of how to show them using React 16's Portals.
+
+- **Handling Keyboard Commands with Redux**
+ https://medium.com/@sandropadin/handling-keyboard-commands-with-redux-67584decb3ff
+ Discussion of an approach for managing keybard interaction in a React+Redux app, with an interactive embedded example app on CodeSandbox
+
+- **Modular, fast, small: how we built a server-rendered IDE**
+ https://repl.it/site/blog/ide
+ The repl.it team describes how they built a Redux-based plugin architecture that handles window management and layout, with plugins able to interact via Redux actions.
+
#### Redux and Forms
- **Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers**
http://blog.isquaredsoftware.com/2017/01/practical-redux-part-7-forms-editing-reducers/
Demonstrates how to use a custom form wrapper component to buffer input change events
-
+
- **Practical Redux, Part 8: Form Draft Data Management**
http://blog.isquaredsoftware.com/2017/01/practical-redux-part-8-form-draft-data-management/
Discusses how to implement logic to handle "draft/work-in-progress" data while editing items
-
+
- **Abstracted Form State with Redux-Form**
https://speakerdeck.com/erikras/abstracted-form-state-with-redux-form
Slides by the author of Redux-Form, discussing how forms work in plain HTML/Javascript, in React, and how the Redux-Form library can integrate them into Redux.
-
+
- **React, Redux, and Redux-Form**
https://jokeyrhyme.github.io/2016/06/27/react-redux-redux-form.html
Thoughts on the merits of using the Redux-Form library
-
+
- **Conversational sign-up form UI with React and Redux**
- http://jsforallof.us/2016/09/08/conversational-sign-up-form-ui-with-react-and-redux/
+ https://web.archive.org/web/20190715044522/http://jsforallof.us/2016/09/08/conversational-sign-up-form-ui-with-react-and-redux/
An example of form management with Redux
-
+
- **Should you store your form state in Redux?**
http://goshakkk.name/should-i-put-form-state-into-redux/
Thoughts on the tradeoffs involved in storing form data in component state vs Redux, and different potential use cases.
-
+
- **Writing maintainable forms with Redux**
https://medium.com/@SBoudrias/writing-maintainable-forms-with-redux-2ef30b5d0e35
Some basic examples for handling validation, loading initial data, and change tracking in forms.
-
+
- **Using forms in React-Redux: Tips and Tricks**
https://medium.com/@royisch/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6
Some helpful suggestions for using Redux-Form to manage forms in a Redux app
-
+
- **Dealing with forms in React/Redux - A simple pattern**
https://medium.com/@jonasjensen/dealing-with-forms-in-react-redux-a-simple-pattern-7b94b393eb26
Helpful examples for writing some simple generic form-handling reducers and action creators
@@ -119,12 +121,7 @@
- **Here's what you can do to make migrating your forms to Redux easier in the future**
https://goshakkk.name/prep-forms-for-redux/
Simple but useful advice on extracting form logic as reducer functions inside of classes
-
-- **Forms with Redux Form v7**
- https://codeburst.io/forms-with-redux-form-v7-part-1-of-2-e636d760e9b4
- https://codeburst.io/forms-with-redux-form-v7-part-2-of-2-f44ffee4a34d
- An extensive tutorial on Redux-Form that covers a variety of topics, including basic setup, making reusable form components, styling, dynamic fields with dependencies, real-time validation, and more.
-
+
- **Redux Form Validation Tutorial Example From Scratch**
https://appdividend.com/2017/11/05/redux-form-validation-tutorial-example/
- A tutorial that demonstrates setting up a Redux app that uses Redux-Form, and adding validation logic to that form.
\ No newline at end of file
+ A tutorial that demonstrates setting up a Redux app that uses Redux-Form, and adding validation logic to that form.
diff --git a/redux-without-react.md b/redux-without-react.md
index b65d064..bb48ce1 100644
--- a/redux-without-react.md
+++ b/redux-without-react.md
@@ -6,11 +6,7 @@
- **Redux without React - State Management in Vanilla Javascript**
https://www.sitepoint.com/redux-without-react-state-management-vanilla-javascript/
A tutorial teaching Redux usage with a plain JS UI layer on top
-
-- **The Easiest Way to Start Using Redux Today**
- https://viktorfonic.com/start-using-redux/
- A useful tutorial that introduces Redux and demonstrates using it with a jQuery-based UI
-
+
#### Angular
@@ -25,11 +21,6 @@
- **Scalable Single-Page Application Architecture with Redux and Angular 2**
http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/
An in-depth article covering how to architect an application using Redux, Angular 2, and RxJS.
-
-- **Building a Redux Application with Angular 2**
- https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-1
- https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-2
- A tutorial that teaches how to use Redux and Angular 2 together, by building a small finance app
- **Build a Better Angular 2 Application with Redux and ngrx**
http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/
@@ -39,28 +30,20 @@
https://blog.realworldfullstack.io/real-world-angular-part-4-state-of-my-spa-10bf90c5a15
https://blog.realworldfullstack.io/real-world-angular-part-5-light-my-fire-34b0bcb351a8
An Angular 2 tutorial that builds an app using Redux and Firebase
-
-- **UI State management with Redux in Angular 2**
- https://www.pluralsight.com/guides/front-end-javascript/ui-state-management-with-redux-in-angular-2
- An extended article that discusses the benefits of using Redux to manage state, and build an example app that uses Redux to control modals and sidebars.
-
+
- **Managing State in Angular with ngrx/store**
https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/
A tutorial that demonstrates use of the ngrx/store variation of Redux as part of an Angular app.
-
-- **Angular Form Validations With Redux for Multiple Routes**
- https://dzone.com/articles/angular-form-validations-with-redux-for-multiple-r
- Examples of setting up Redux-based form validation in an Angular app.
-
+
- **Web app architecture based on Redux**
http://devblog.ztp.pt/web-app-architecture-based-on-redux/
https://medium.com/@akaztp/case-study-pt-2-implementing-redux-on-angular-9e79cd4faa37
A series of posts describing a modular / layered architecture built around Redux, including a data layer for managing fetching, a business layer using RxJS Epics, and folder structure for Angular components.
-
+
- **NgRx Antipatterns**
- http://brianflove.com/2017/11/01/ngrx-anti-patterns/
+ https://brianflove.com/2017-11-01/ngrx-anti-patterns/
Examples of some ways to improve poor NgRx usage patterns.
-
+
- **Getting started with Angular and Redux**
https://damienbod.com/2017/09/07/getting-started-with-angular-and-redux/
A tutorial that covers setting up an Angular app that uses NgRx for state management. Recently updated to work with Angular 5.
@@ -122,14 +105,11 @@
Covers setting up a standard Aurelia app, adding Redux, and use of redux-undo with the example.
- **Why Aurelia and Redux is a natural and powerful combination**
- https://www.softvision.com/blog/aurelia-redux/
+ https://www.cognizantsoftvision.com/blog/aurelia-redux/
Thoughts on the benefits of Aurelia compared to other frameworks, and examples of how to use Redux in an Aurelia app.
-
-
-#### Other
+#### Other
-
- **Explorations in Adapting Redux to C#**
https://spin.atomicobject.com/2017/03/13/adapting-redux-c-sharp-xamarin/
An informative look at how AtomicObject has a Redux variant in C#
@@ -144,11 +124,7 @@
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.
-
+
- **Coupling a Stencil TODO app with Redux**
https://www.javascripttuts.com/coupling-a-stencil-todo-app-with-redux/
A tutorial that updates an existing Stencil Todo app to use Redux
@@ -164,7 +140,13 @@
- **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
+
+- **How to use Redux with Polymer**
+ https://medium.com/@jalalio/step-1-how-to-use-redux-with-polymer-2-7bcfaee6fdb3
+ https://medium.com/@jalalio/step-2-how-to-structure-larger-polymer-2-apps-with-redux-reselect-f588e64a191a
+ https://medium.com/@jalalio/step-3-how-to-make-async-api-calls-in-a-polymer-2-app-using-redux-thunk-middleware-c71d596c2005
+ A 3-part series that shows how to use the polymer-redux bindings, including basic setup, use of Reselect, and async API calls.
+
+- **Building an F# Redux Store for C# Xamarin Apps**
+ https://thomasbandt.com/fsharp-redux-store-for-xamarin-apps
+ Discusses why Redux's predictability is beneficial for applications in general, desired behavior for a .NET implementation of Redux, why C# is a poor choice for an implementation, and how to implement Redux using F#.
\ No newline at end of file
diff --git a/static-typing.md b/static-typing.md
index 2c2eb9e..053890c 100644
--- a/static-typing.md
+++ b/static-typing.md
@@ -5,7 +5,8 @@
- **The Shocking Secret about Static Types / You Might Not Need Typescript (or Static Types)**
https://medium.com/javascript-scene/the-shocking-secret-about-static-types-514d39bf30a3
- https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b Eric Elliott argues against use of static types in Javascript, on the grounds that the tradeoffs aren't worth it and that TDD and code review provide more benefit in reducing bugs.
+ https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b
+ Eric Elliott argues against use of static types in Javascript, on the grounds that the tradeoffs aren't worth it and that TDD and code review provide more benefit in reducing bugs.
- **Why use static types in Javascript?**
https://dev.to/iampeekay/why-use-static-types-in-javascript-part-1
@@ -184,11 +185,7 @@
- **React & Redux in TypeScript - Static Typing Guide**
https://github.com/piotrwitek/react-redux-typescript-guide
A comprehensive guide to static typing "React & Redux" apps using TypeScript
-
-- **Porting a React and Redux Application to TypeScript**
- https://bytesized.xyz/react-redux-typescript/
- Demonstrates porting an existing React+Redux sample app to use TypeScript
-
+
- **React Higher Order Components in TypeScript made simple**
https://dev.to/danhomola/react-higher-order-components-in-typescript-made-simple
Demonstrates how to extract an HOC and properly define types for various groups of props
@@ -202,7 +199,8 @@
Describes how to use the new features in TS 2.4, such as string enums, to simplify defining types for Redux actions.
- **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.
+ 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/
@@ -223,10 +221,6 @@
- **Redux and Flow-type - getting the maximum benefit from the fewest key strokes** https://hackernoon.com/redux-flow-type-getting-the-maximum-benefit-from-the-fewest-key-strokes-5c006c54ec87
Discussion of how Flow's type inference can be used to reduce duplication of type declarations for actions.
-- **How to Reduce Action Boilerplate**
- https://blog.angularindepth.com/how-to-reduce-action-boilerplate-90dc3d389e2b
- Looks at how TypeScript is normally used with Redux, including "narrowing" actions with type guards and discriminated unions, and looks at ways different libraries use narrowing to help generate actions in a type-safe way.
-
- **Using TypeScript Generics for writing React Components**
https://blog.mojotech.com/typescript-generic-react-components/
Useful techniques for writing typed higher-order-components, with specific examples focusing on typing form field components.
@@ -239,15 +233,27 @@
- **Using TypeScript with Redux**
https://dzone.com/articles/using-typescript-with-redux
Examples of basic TS usage with Redux, and setting up your own type declarations for better type safety.
-
-- **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.
+- **3 Tricks for Using Redux and Immutable.js with TypeScript**
+ http://blog.mgechev.com/2018/01/18/react-typescript-redux-immutable/
+ Examples of statically typing Immutable.js Records, action creators, and class-based actions
+
+- **Improved Redux type safety with TypeScript 2.8**
+ https://medium.com/@martin_hotell/improved-redux-type-safety-with-typescript-2-8-2c11a8062575
+ Looks at the new "conditional types" feature in TS2.8, and how that can be used to simplify adding types to Redux logic.
+
+- **The Redux Type Flow**
+ https://medium.com/@zhirzh/the-redux-type-flow-93aada6964e5
+ Looks at some advanced approaches for automatically extracting types for Redux actions with Flow and applying them to reducers.
+
+- **Ultimate React Component Patterns with Typescript**
+ https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935
+ An extensive set of examples for using TypeScript with common React component patterns, including functional / class components, default props, render callbacks, and much more.
+
#### Advancing Typing Techniques
@@ -276,6 +282,10 @@
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.
+- **Flavoring: Flexible Nominal Typing for TypeScript**
+ https://spin.atomicobject.com/2018/01/15/typescript-flexible-nominal-typing/#.Wly5RmUfXDk.hackernews
+ Looks at an approach for "branding" similar types to make them distinct, some of the problems with branding, and a second approach called "flavoring" that works better with implicit conversions.
+
#### Tool Comparisons
@@ -333,4 +343,20 @@
- **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
+ 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.
+
+- **Inference engines: 5 examples with TypeScript, Flow, and Reason**
+ https://codeburst.io/inference-engines-5-examples-with-typescript-flow-and-reason-edef2f4cf2d3
+ Compares the behavior of three type systems with several specific examples to show how they differ.
+
+- **Type checking in JavaScript: is it worth it?**
+ https://ropig.com/blog/type-checking-javascript-worth/
+ Some short, high-level thoughts on the pros and cons of using static typing with JS, and tips for leveraging static typing in your project
+
+- **"Convert React JavaScript Code to TypeScript with Proper Typing"**
+ https://news.ycombinator.com/item?id=16159389
+ A Hacker News thread with a lot of good discussion on the current strengths and weaknesses of TypeScript and Flow
+
+- **"Why isn't Typescript used more in the React community?"**
+ https://www.reddit.com/r/reactjs/comments/7yxecm/why_isnt_typescript_used_more_in_the_react/
+ An excellent discussion thread on the history and merits of TS and Flow, and their suitability for use with React. In particular, read the comments by Francois Ward of Hubspot (/u/phoenixmatrix), who offers extensive thoughts on why they're switching to TS in the near future.
\ No newline at end of file
diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md
index b1d0b95..a3c11c2 100644
--- a/webpack-advanced-techniques.md
+++ b/webpack-advanced-techniques.md
@@ -57,10 +57,6 @@
- **A React + Webpack Optimization Case**
https://medium.com/@kudochien/a-react-webpack-optimization-case-27da392fb3ec
Several useful examples of how to profile and optimize a Webpack-based project, including checking bundle contents, specific imports from libraries, ignoring Moment locales, and more.
-
-- **Optimizing Wepback build times and improving caching with DLL bundles**
- https://robertknight.github.io/posts/webpack-dll-plugins/
- Explains the benefits of using DllPlugin for generating library bundles, shows how to configure it, and compares with other chunking methods.
- **Tree-shaking ES6 Modules in Webpack 2**
https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b
@@ -102,13 +98,18 @@
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.
-
-
-
- **How to Improve Webpack Performance in Large Projects**
https://redfin.engineering/tech-talk-recap-how-to-improve-webpack-performance-in-large-projects-5435bb18dd18
Slides, audio, and summary of a talk on various ways to improve Webpack build performance, including disabling sourcemaps for dev builds, parallelizing work, and using DllPlugin.
+- **How we improved Webpack build performance by 95%**
+ https://blog.box.com/how-we-improved-webpack-build-performance-95
+ Tips for speeding up builds by using Babel caching, not exporting arrays of configs, and doing work in parallel.
+
+- **Keep Webpack Fast: A Field Guide for Better Build Performance**
+ https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1
+ An excellent article from Slack's frontend team, listing ways to improve Webpack build speed. Gives overviews of profiling, parallelization tools, reducing workloads, and caching, with plenty of mentions for specific tools and techniques.
+
#### Code Splitting and Chunking
@@ -168,11 +169,7 @@
- **React Universal Component 2.0 & babel-plugin-universal-import**
https://medium.com/faceyspacey/announcing-react-universal-component-2-0-babel-plugin-universal-import-5702d59ec1f4
Introduces some new Webpack addons and changes that enable dynamic import expressions, including use with SSR.
-
-- **Using Redux Saga and code splitting to async load React components**
- https://gist.github.com/jballands/accc2ff19a3702685d469c612d6f0776
- A gist that demonstrates using sagas to drive the loading of React components as needed, with some discussion in the comments of the best way to handle those components once they're received by the app.
-
+
- **Impress Your Friends with Code Splitting in React**
https://hackernoon.com/impress-your-friends-with-code-splitting-in-react-9f9a3ca2ae6e
Examples of using `async/await` and dynamic `import()` to lazy-load React components and display them after they're loaded.
@@ -180,11 +177,7 @@
- **ECMAScript Asychronicity - dynamic import**
https://blog.eleven-labs.com/en/ecmascript-asynchronicity-dynamic-import/
Recaps ES6 module behavior and use of Webpack's CommonsChunkPlugin, and describes how to lazy load code using `require.ensure` and the new dynamic `import()` capability.
-
-- **Component Level Isomorphic Webpack Code-Splitting**
- https://medium.com/discovery-engineering/component-level-isomorphic-webpack-code-splitting-b98922382cc1
- Looks at the use cases for code splitting, the different ways Webpack can be used to do code splitting, problems with synchronous loading on the server vs async loading on the client, and how the React Universal Component toolkit can help solve those issues.
-
+
- **Lazy Loading with React, Redux, and Webpack 2+**
https://medium.com/front-end-hacking/lazy-loading-with-react-and-webpack-2-8e9e586cf442
https://medium.com/front-end-hacking/lazy-loading-with-react-redux-and-webpack-2-35ad6fc1b640
@@ -198,6 +191,10 @@
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.
+- **Two Tips to Improve Performance by 30% with React and Webpack**
+ http://engineering.teacherspayteachers.com/2017/08/16/two-tips-to-improve-performance-by-30-with-react-and-webpack.html
+ Looks at ways the Teachers Pay Teachers team used async bundle loading and bundle size optimization to improve their load time.
+
#### Bundle Sizes and Visualization
@@ -228,11 +225,7 @@
- **How to use source-map-explorer with Webpack**
https://www.sivadass.in/using-source-map-explorer-with-webpack/
Examples of using the source-map-explorer tool to visualize the contents of a bundle
-
-- **Analyzing and optimizing your Webpack bundle**
- https://medium.com/@ahmedelgabri/analyzing-optimizing-your-webpack-bundle-8590818af4df
- Some quick suggestions for using CLI flags to show sizes of bundled chunks, and using webpack-bundle-analyzer and IgnorePlugin to exclude unneeded files.
-
+
- **Avoid Webpack bloat: Optimize your dependencies**
https://www.zillow.com/engineering/webpack-optimize-dependencies/
Tips for tracking bundle sizes and managing dependency handling
@@ -275,15 +268,19 @@
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.
+- **Webpack Bundle Analysis - A necessary step for all React / Angular / Vue developers!**
+ https://hackernoon.com/webpack-bundle-analysis-a-necessary-step-for-all-react-angular-vue-application-developers-fe6564fa62ca
+ Walks through the process of analyzing an Angular bundle and improving build steps to cut down on bundle size.
+
#### Hot Module Replacement
- **Webpack and Hot Module Replacement**
https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07
A great in-depth walkthrough of how HMR works
-
+
- **Webpack's HMR and React Hot-Loader - The Missing Manual**
- https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96
+ https://rajaraodv.medium.com/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96
Demonstrates three ways to enable HMR, and usage with three different React application scenarios
- **Hot Reloading in React**
@@ -291,10 +288,10 @@
Dan Abramov walks through the history of his React Hot Loader and React Transform tools, describes their implementation, flaws, and weaknesses, and looks at a potential solution (later implemented in React Hot Loader 3.0).
- **HMR Tutorial Series**
- http://andrewhfarmer.com/why-use-hmr/
- http://andrewhfarmer.com/understanding-hmr/
- http://andrewhfarmer.com/3-ways-webpack-hmr/
- http://andrewhfarmer.com/webpack-hmr-tutorial/
+ https://javascriptstuff.com/why-use-hmr/
+ https://javascriptstuff.com/understanding-hmr/
+ https://javascriptstuff.com/3-ways-webpack-hmr/
+ https://www.javascriptstuff.com/webpack-hmr-tutorial/
A very readable and informative series of articles on using HMR.
- **Blogged Answers: Webpack HMR vs React-Hot-Loader**
@@ -342,7 +339,7 @@
A tutorial that shows how to use Webpack and HMR to hot-reload both front-end and back-end code for faster development.
- **How to Hot-Load React Components in 7 Days**
- https://medium.com/@antonkorzunov/how-to-hot-load-react-component-in-7-days-part-1-webpack-d8b77eea61eb
+ https://medium.com/netscape/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.
@@ -372,23 +369,15 @@
- **Long-term caching of static assets with Webpack**
https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95
Gathers documentation on proper use of asset caching into one article to act as a complete guide.
-
-- **Goodbye "../../../"**
- http://davidboyne.co.uk/2016/04/29/react-webpack-gem.html
- Tips and discussion on removing relative paths when importing
-
+
- **Using the HTML Webpack Plugin for generating HTML files**
- http://javascriptplayground.com/blog/2016/07/webpack-html-plugin/
+ https://www.jackfranklin.co.uk/blog/webpack-html-plugin/
Basic instructions for setting up the HTML Webpack plugin
-
+
- **Setting up CSS Modules with React and Webpack**
- http://javascriptplayground.com/blog/2016/07/css-modules-webpack-react/
+ https://www.jackfranklin.co.uk/blog/css-modules-webpack-react/
Covers setting up and configuring Webpack to use CSS Modules for styling
-
-- **Webpack Map Entity Loader**
- http://drhayes.io/secret-game/map-entity-loader.html
- A small example of writing a custom Webpack loader for game data
-
+
- **Webpack Tricks**
https://github.com/rstacruz/webpack-tricks
A useful list of tips for improving Webpack usage
@@ -409,14 +398,6 @@
https://dev.to/kayis/easy-offline-first-apps-with-webpacks-offline-plugin
A look at how to use the OfflinePlugin to cache Webpack-generated assets for offline use.
-- **Working with Fonts with Webpack**
- https://shellmonger.com/2016/01/22/working-with-fonts-with-webpack/
- Explains how to configure Webpack to use external font files.
-
-- **Working on OkCupid "in production" with Webpack and localhost**
- https://tech.okcupid.com/working-on-okcupid-in-production-with-webpack-and-localhost/
- Describes setting up Webpack-Dev-Server to serve local files during development in a distributed build system.
-
- **Predictable long term caching with Webpack**
https://medium.com/@schnibl/predictable-long-term-caching-with-webpack-d3eee1d3fa31
A detailed look at issues that cause caching problems, and how to configure Webpack to get consistent chunk definitions for good caching results
diff --git a/webpack-tutorials.md b/webpack-tutorials.md
index 5226c38..630bed3 100644
--- a/webpack-tutorials.md
+++ b/webpack-tutorials.md
@@ -16,6 +16,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
- **Webpack from First Principles**
https://www.youtube.com/watch?v=WQue1AN93YU
A screencast video explaining what Webpack is and why you would want to use it
+
+- **"Why use packers/bundlers?"**
+ http://tinselcity.net/whys/packers
+ A fantastic, friendly, detailed explanation of why you would want to use Webpack and what problems it solves. Written as a walkthrough from "I have a bunch of scripts in my index.html and I have to keep them all in the right order", up to "I have a lot of individual files and they need to be bundled together".
- **Egghead.io - Intro to Webpack (Playlist)**
https://egghead.io/playlists/intro-to-webpack-4ca2d994
@@ -48,11 +52,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
- **4 Key Concepts of Webpack**
https://www.netlify.com/blog/2017/01/03/4-key-concepts-of-webpack/
A recorded presentation by Webpack core team member Sean Larkin, explaining Webpack's core concepts and future goals.
-
-- **Module Bundling and Webpack in Simple Terms**
- http://arianv.com/post/Module-Bundling-and-Webpack-in-Simple-Terms/
- An informative high level overview that explains what Webpack does and how it works.
-
+
- **Webpack: It's Not Magic**
https://naomiajacobs.github.io/WebpackTalk/
An excellent HTML slideshow that explains how Webpack allows you to use code that is nice to write, and transforms it into code that the browser fully understands. Also looks at how Webpack works conceptually.
@@ -76,10 +76,6 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
http://blog.madewithlove.be/post/webpack-your-bags/
In-depth article describing what Webpack is, why you would want to use it, and how to set it up
-- **Webpack + React is Awesome**
- http://www.christianalfoni.com/articles/2014_12_13_Webpack-and-react-is-awesome
- Another tutorial explaining how to use and set up Webpack
-
- **Beginner Webpack Tutorial**
https://github.com/AriaFallah/WebpackTutorial/tree/master/part1
Very well-written tutorial that steps through the many pieces in a typical Webpack config, how to configure them, and what they're used for. (Two parts so far, more to come.)
@@ -104,11 +100,11 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
- **Webpack is not as complicated as you think**
http://jilles.me/webpack-is-not-as-complicated-as-you-think/
A simple overview of a basic Webpack config looks like.
-
+
- **Creating a React and Webpack Project (screencast)**
- http://javascriptplayground.com/blog/2016/06/react-webpack-workflow-screencast/
+ https://www.jackfranklin.co.uk/blog/react-webpack-workflow-screencast/
A video walkthrough of the basic setup for a Webpack-based project.
-
+
- **Webpack Deep Dive**
http://slides.com/kentcdodds/webpack-deep-dive#/
https://github.com/kentcdodds/es6-todomvc
@@ -117,11 +113,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
- **Webpack: When To Use and Why**
http://blog.andrewray.me/webpack-when-to-use-and-why/
TL;DR It took me a long time to understand Webpack and how it fits in the build process. This is what I wish someone had told me.
-
-- **Pro React Appendix: Webpack for React**
- http://www.pro-react.com/materials/appendixA/
- A free online chapter of the Pro React book, covering Webpack concepts and usage.
-
+
- **A Comprehensive Introduction to Webpack, the Module Bundler**
http://www.theodo.fr/blog/2016/07/a-comprehensive-introduction-to-webpack-the-module-bundler/
A solid article covering basic Webpack configuration and setup.
@@ -137,11 +129,11 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
- **Getting Started with Webpack 2**
https://medium.com/written-with-envy/getting-started-with-webpack-2-ed2b86c68783
An introduction to Webpack's concepts and configuration, and how to use the latest version to handle various build goals.
-
+
- **Migrating to Webpack 2**
- http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/
+ https://www.jackfranklin.co.uk/blog/moving-to-webpack-2/
Tips for migration an existing Webpack config to work properly with Webpack 2
-
+
- **Webpack 101**
https://github.com/brunoscopelliti/webpack-101
A tutorial that builds up a Webpack config step-by-step, explaining why and how each change is made.
@@ -155,20 +147,19 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
An extended tutorial that covers many Webpack concepts, including basic setup, loaders, plugin, code splitting, and the Webpack Dev Server
- **From zero to Webpack, one error at a time**
- http://www.jumoel.com/2017/zero-to-webpack.html
+ https://www.jumoel.com/posts/zero-to-webpack
A tutorial that builds a working Webpack config step-by-step, with explanations of how and why each piece is added.
-
+
- **A Detailed Introduction to Webpack**
https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
A solid introduction to Webpack's basic concepts and usage, including CLI usage, config file setup, use of loaders and plugins, and chunking for lazy-loading
-
- **Webpack - From Apprentice to Journeyman**
- http://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/#/
- A presentation from Juho Vepslinen of the core Webpack team, explaining the basics of Webpack.
+ http://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/#/
+ A presentation from Juho Vepsäläinen of the core Webpack team, explaining the basics of Webpack.
- **Webpack - From Journeyman to Master**
- https://presentations.survivejs.com/webpack-from-journeyman-to-master/#/
+ https://presentations.survivejs.com/webpack-from-journeyman-to-master/#/
A follow-up presentation, digging into advanced Webpack concepts, configuration, and internals
- **webpack By Example**
@@ -201,6 +192,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
- **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.
+
+- **Setting up Webpack for any project**
+ https://scotch.io/tutorials/setting-up-webpack-for-any-project
+ Walks through the setup of a basic Webpack config, and common features such as loaders for Babel and SASS, plugins for extracting CSS, inserting defined constants, and tools for different development environments.
#### Configuration Terms and Concepts
@@ -226,13 +221,9 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
A goofy but informative look at many of the concepts and pieces that make up Webpack
- **Webpack Loader Variations**
- http://andrewhfarmer.com/webpack-loader-variations/
+ https://javascriptstuff.com/webpack-loader-variations/
Examples of the different ways to define a loader in a Webpack config
-
-- **Remix's Software Stack: Webpack**
- https://blog.getremix.com/remixs-software-stack-webpack-34990de9d803
- An explanation of the configuration settings and options inside one company's Webpack config
-
+
- **Webpack devtool source map options**
http://cheng.logdown.com/posts/2016/03/25/679045
A list of the available values for the `devtool` option in a Webpack config
@@ -248,15 +239,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
- **Conditional Build with Webpack**
https://medium.com/tech-angels-publications/conditional-build-with-webpack-72c36b51abbc
Suggestions for creating shared configs that can be used across multiple apps, with certain values replaced at build time.
-
-- **The Fine Art of the Webpack 2 Config**
- https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172
- Explains some of the changes in Webpack 2 configuration, and discusses some approaches for handling dev/prod configuration environments.
-
-- **Webpack 2 Loader Variations**
- http://andrewhfarmer.com/webpack-2-loader-variations/
- A clear and informative overview of the various equivalent ways to write the loader-related parts of a Webpack 2 config file.
-
+
- **Stages of Learning Webpack, Part 2 - The Config**
https://dev.to/nitishdayal/stages-of-learning-webpack-pt-2---the-config
Explains what Webpack is by explaining some of the problems it attempts to solve, and looks at the basics of a Webpack configuration.
@@ -269,6 +252,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
https://engineering.tripping.com/lets-talk-about-our-webpack-config-files-89a6ac0e0cf9
The Tripping.com team shows off the contents of their Webpack production config file, explains the capabilities they want to have, and how each piece of the config file implements those capabilities.
+- **Upgrade to Webpack 4**
+ https://dev.to/flexdinesh/upgrade-to-webpack-4---5bc5
+ Some quick tips for upgrading a Webpack config from v3 to v4
+
#### Webpack Configuration Utilities
@@ -294,8 +281,13 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
- **webpack-blocks**
https://github.com/andywer/webpack-blocks
- Functional building blocks for the webpack config. Compose it using feature middlewares like Babel, PostCSS, HMR (Hot Module Replacement),
+ Functional building blocks for the webpack config. Compose it using feature middlewares like Babel, PostCSS, HMR (Hot Module Replacement),
- **webpack-flow**
https://github.com/webpack-flow/webpack-flow
- A set of utilities to manage sharable webpack configs and make them reusable.
\ No newline at end of file
+ A set of utilities to manage sharable webpack configs and make them reusable.
+
+- **createapp.dev**
+ https://createapp.dev/webpack
+ Online tool for creating your own webpack config by selecting the features you need. It's a visual way of learning webpack, and you can download your project as a zip file when you're done!
+