Repository: markerikson/react-redux-links Branch: master Commit: 65d47d9099b6 Files: 50 Total size: 595.9 KB Directory structure: gitextract_uooz95t4/ ├── .github/ │ ├── PULL_REQUEST_TEMPLATE.md │ └── workflows/ │ └── action.yml ├── README.md ├── basic-concepts.md ├── boilerplates-and-starter-kits.md ├── community-resources.md ├── es6-features.md ├── flux-tutorials.md ├── framework-comparisons.md ├── functional-programming.md ├── git-resources.md ├── immutable-data.md ├── javascript-resources.md ├── mlc_config.json ├── mobx-tutorials.md ├── node-js-and-npm.md ├── project-structure.md ├── pros-cons-discussion.md ├── react-ajax.md ├── react-architecture.md ├── react-component-composition.md ├── react-component-patterns.md ├── react-deployment.md ├── react-forms.md ├── react-hooks.md ├── react-implementation.md ├── react-native.md ├── react-performance.md ├── react-redux-architecture.md ├── react-redux-testing.md ├── react-routing.md ├── react-server-rendering.md ├── react-state-management.md ├── react-styling.md ├── react-techniques.md ├── react-tutorials.md ├── redux-architecture.md ├── redux-middleware.md ├── redux-reducers-selectors.md ├── redux-side-effects.md ├── redux-techniques.md ├── redux-tutorials.md ├── redux-ui-management.md ├── redux-without-react.md ├── static-typing.md ├── thinking-in-react-and-flux.md ├── tips-and-best-practices.md ├── using-react-with-es6.md ├── webpack-advanced-techniques.md └── webpack-tutorials.md ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/PULL_REQUEST_TEMPLATE.md ================================================ # Formatting Please follow the existing formatting for each entry. In order to get newlines without paragraph breaks, each entry should have two spaces at the end of the line after both the URL and the title. Also, two-space indents before the URL and the description. Example: ```markdown - **Link Title** http://example.com Link description here ``` Result: - **Link Title** http://example.com Link description here Please do _not_ strip whitespace for existing entries! ================================================ FILE: .github/workflows/action.yml ================================================ 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' ================================================ FILE: README.md ================================================ # React/Redux Links Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem, as well as a source for quality information on advanced topics and techniques. Not quite "awesome", but hopefully useful as a starting point I can give to others. Suggestions welcome. Another important resource is the **Reactiflux community on Discord**, which has chat channels dedicated to discussion of React, Redux, and other related technologies. There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn. The invite link is at **https://www.reactiflux.com**. You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links). Also see [Community Resources](community-resources.md) for links to other links lists, podcasts, and email newsletters. Finally, I also keep a dev blog at [blog.isquaredsoftware.com](http://blog.isquaredsoftware.com), where I write about React, Redux, Webpack, and more. ## Table of Contents #### Getting Started - [Basic Concepts and Overviews](./basic-concepts.md) - [Community Resources](./community-resources.md) - [Javascript Resources](./javascript-resources.md) - [Git Resources and Tutorials](./git-resources.md) - [Node.js and NPM](./node-js-and-npm.md) - [Webpack Tutorials](./webpack-tutorials.md) - [Boilerplates and Starter Kits](./boilerplates-and-starter-kits.md) #### Basic Tutorials - [ES6 Features and Samples](./es6-features.md) - [React Tutorials](./react-tutorials.md) - [Flux Tutorials](./flux-tutorials.md) - [Redux Tutorials](./redux-tutorials.md) - [MobX Tutorials](./mobx-tutorials.md) #### Intermediate Concepts - [Using React with ES6](./using-react-with-es6.md) - [Functional Programming](./functional-programming.md) - [Immutable Data](./immutable-data.md) - [React/Redux Testing](./react-redux-testing.md) - [React Native](./react-native.md) - [React Tips and Techniques](./react-techniques.md) #### Advanced Topics - **Architecture and Structure** - [Project Structure](./project-structure.md) - [React Component Patterns](./react-component-patterns.md) - [React Component Composition](./react-component-composition.md) - [React State Management](./react-state-management.md) - [React Architecture and Best Practices](./react-architecture.md) - [Redux Architecture and Best Practices](./redux-architecture.md) - [React/Redux Performance](./react-performance.md) - [React Deployment](./react-deployment.md) - **React**: - [React Implementation and Concepts](./react-implementation.md) - [React and Forms](./react-forms.md) - [React and AJAX](./react-ajax.md) - [React Styling](./react-styling.md) - [React Server Rendering](./react-server-rendering.md) - [React and Routing](./react-routing.md) - **Redux** - [Redux Reducers and Selectors](./redux-reducers-selectors.md) - [Redux Middleware](./redux-middleware.md) - [Redux Side Effects](./redux-side-effects.md) - [Redux UI Management](./redux-ui-management.md) - [Redux Tips and Techniques](./redux-techniques.md) - [Using Redux Without React](./redux-without-react.md) - **Other** - [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - [Static Typing](./static-typing.md) #### Comparisons and Discussion - [React/Flux/Redux Pros, Cons, and Discussion](./pros-cons-discussion.md) - [Framework Comparisons](./framework-comparisons.md) ## 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/) ================================================ FILE: basic-concepts.md ================================================ ### Basic Concepts, Terms, and Overviews #### Modern Javascript Terms and Tooling Overviews - **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 Hitchiker's Guide to Modern JS Tooling** http://reactkungfu.com/2015/07/the-hitchhikers-guide-to-modern-javascript-tooling/ A great overview of many of the most common build tools, package managers, test frameworks, and code quality tools currently in use - **State of the Art Javascript in 2016** https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b An opinionated list of what tools and libraries a modern JS development stack should include, plus links to further resources. - **The Hitchhiker's Guide to the Modern Front End Development Workflow** http://marcobotto.com/the-hitchhikers-guide-to-the-modern-front-end-development-workflow/ A useful overview of the many categories and types of tools used in modern web development. - **Simplified Javascript Jargon** http://jargon.js.org/ An alphabetical list of common terms in the JS world, with very short definitions in the main list and slightly longer descriptions linked for each term. - **Modern Javascript Development** https://mgadams.com/modern-javascript-development-part-1-d271f3790c1c An overview of how browsers, Javascript, and Javascript frameworks have evolved into today's landscape of tools and technologies - **Making Sense of Front-End Build Tools** https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b An approach to understanding the variety of build tools by categorizing them as "installing" vs "doing" - **The State of Javascript in 2017: Survey Results** https://stateofjs.com/ Results from a survey of over 23000 developers, covering use of Javascript tools, technologies, and concepts. - **The (R)Evolution of Web Development** http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/ A slideshow giving an overview of web dev history and modern web dev tools, technologies, and trends. - **The State of Javascript** https://youtu.be/5NIL3Epadj0 A talk by Jack Franklin, summarizing the state of modern web development. - **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. - **2016 Javascript Rising Stars** https://risingstars2016.js.org/ A summary of which JS projects gained the most popularity in 2016, based on new Github stars. Serves as a useful overview of tool categories and popular tools - **A Brief History of Javascript** https://auth0.com/blog/a-brief-history-of-javascript/ Despite the name, it's actually an extended, in-depth history of Javascript's creation and evolution over time. - **Glossary of Modern Javascript Concepts: Part 1** https://auth0.com/blog/glossary-of-modern-javascript-concepts/ https://auth0.com/blog/glossary-of-modern-javascript-concepts-part-2/ An excellent overview and introduction to a number of concepts that are used in modern applications. Part 1 covers topics like "purity", "state", "immutability", "functional programming", and "observables". Part 2 looks at ideas like "1-way data flow vs 2-way binding", "scope", "components", "JIT/AOT compilation", and more. - **The Tools of the JS Trade** https://dev.to/kayis/the-tools-of-the-js-trade A helpful overview of commonly used JS development tools, grouped by type, with short descriptions for each. - **Choosing a frontend framework in 2017** https://medium.com/this-dot-labs/building-modern-web-applications-in-2017-791d2ef2e341 An excellent look at the history of the major client-side web frameworks, how they developed over the last few years, and some suggestions for when each framework might be appropriate. - **The melting pot of JavaScript** https://increment.com/development/the-melting-pot-of-javascript/ Dan Abramov discusses the apparent messiness of the JavaScript ecosystem, why there's a proliferation of tools and libraries, the complexity of configuring those tools, and how providing good defaults can lead to a better experience for the community. - **Modern JavaScript Explained for Dinosaurs** https://medium.com/@peterxjang/modern-javascript-explained-for-dinosaurs-f695e9747b70 Recaps the history of how JavaScript tools have evolved to what they are today in 2017, to provide historical context. Includes examples of how different tools were used and and what problems they help solve. - **A Brief, Incomplete History of JavaScript** https://closebrace.com/articles/2017-09-11/a-brief-incomplete-history-of-javascript An excellent history lesson that recaps the four major eras of web development and JS usage: the Early Era, the jQuery Era, the Single Page App Era, and the Modern Era. - **Frontend in 2017: The important parts** https://blog.logrocket.com/frontend-in-2017-the-important-parts-4548d085977f An overview of major trends, tools, and concepts in the front-end web dev world in 2017. Very good look at what's popular, what's changing, and how these pieces fit together. #### Suggested Learning Approaches - **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. - **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/ https://daveceddia.com/how-to-learn-react/ Another high-level suggested timeline for how to approach learning React and related technologies. - **React FAQ** https://github.com/timarney/react-faq A collection of links to help answer your questions about React, including how to get started - **Front-End Developer Handbook** https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/ A guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it. - **Top Javascript Frameworks and Topics to Learn in 2017** https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711 Eric Elliott gives some solid advice on what concepts, tools, and technologies are most valuable to learn today, as well as what related technologies are useful but optional. - **How to Learn React: A Five-Step Plan** https://www.lullabot.com/articles/how-to-learn-react A good set of suggested steps to follow and tools to use for learning React and Redux. - **Ten Things a Serious JavaScript Developer Should Learn** https://benmccormick.org/2017/07/19/ten-things-javascript/ A well-written, excellent collection of advice for mid-level JS developers, listing important topics that they should be familiar with. - **So you completed the official React tutorial. Now what?** https://goshakkk.name/next-steps-official-react-tutorial/ General advice on how to approach learning new things in general without getting overloaded, as well as specific advice for concepts and ideas to learn about after grasping the basics of React. - **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** 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** http://wesbos.com/overwhelmed-with-web-development/ Wes Bos gives advice on how to cut down on noise, avoid "new shiny" syndrome, and still improve your web dev skills - **How to Learn Web Frameworks** https://medium.com/shopify-ux/how-to-learn-web-frameworks-9d447cb71e68 Some great advice on how to approach learning web development and frameworks, especially if you're a junior developer. - **How to keep up: "First do it, then do it right, then do it better"** https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3 Advice from Addy Osmani on how to cope with learning new JS technologies - **"Ask HN: Overwhelmed with learning front-end, how do I proceed?"** https://news.ycombinator.com/item?id=12882816 A discussion thread with numerous suggestions for ways to learn front-end technologies. - **Deciding What to Learn / When the Latest Tech Makes You Feel Dumb** http://gedd.ski/post/what-not-to-learn/ http://gedd.ski/post/when-tech-makes-you-feel-dumb/ A pair of short but excellent posts giving advice on how to deal with tech and information overload. - **Redux vs MobX vs Flux vs... Do you even need that?** 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 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". - **Javascript is a buffet, not the enemy** https://scriptconf.org/blog/javascript-is-a-buffet-not-the-enemy-chris-heilmann/ An excellent presentation from long-time browser developer Chris Heilmann, offering suggestions for dealing with the modern Javascript world using a buffet as a metaphor. - **Are we making the web too complicated?** http://seldo.com/weblog/2017/05/21/are_we_making_the_web_too_complicated Fantastic thoughts from Laurie Voss on why modern web development appears to be complicated: expectations for web usage have changed, and developers are trying to adapt. - **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. #### 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. ================================================ FILE: boilerplates-and-starter-kits.md ================================================ ### Boilerplates and Starter Kits #### Suggested Starter Kits for Learners **NOTE**: It's easy for someone new to the React/Redux ecosystem to get confused by some of these boilerplates and starter kits. Many of them include dozens of specifically-configured libraries, and it can be hard for a learner to understand how all the pieces fit together. If you're trying to learn React or Redux for the first time, it's suggested that you start with reading tutorials and articles first, until you have a reasonable understanding of how things work. However, if you _do_ want to use a starter kit as a learning tool, I specifically suggest the ones in this section. They are simpler, easier to understand, and well documented. In particular, Create-React-App is highly recommended. Also see [Should I use a boilerplate with React?](http://blog.jakoblind.no/should-i-use-a-boilerplate-for-react/) for similar thoughts. - **Create-React-App** https://github.com/facebookincubator/create-react-app An "official", no-visible-configuration tool to instantly create a React project with bundling, minification, and basic CSS and image handling all set up and ready to go. If you outgrow the basic features, the underlying tools can be exposed and modified using a one-time "eject" command. It's a great tool to use to when learning React, or just to set up a project quickly. - **Simple Redux Boilerplate** https://github.com/tsaiDavid/simple-redux-boilerplate Excellent example. Includes enough to be useful, but not too many dependencies so it's confusing. - **Web-App** https://github.com/cesarandreu/web-app Another very good learning resource. Heavily commented Webpack config, good default settings. - **React Laboratory** https://github.com/tstringer/react-laboratory An absolute bare-minimum project. One tiny Webpack config, one JS file, one component. Pretty much the smallest possible setup to use React and JSX with Webpack. - **TypeScript React Starter** https://github.com/Microsoft/TypeScript-React-Starter A quick start guide to setting up a TypeScript project using a TS-specific variation on Create-React-app's `react-scripts` package. Includes instructions for adding TSLint, Jest, Enzyme, and Redux. #### Full-Featured Starter Kits - **React-Redux Universal Hot Example** https://github.com/erikras/react-redux-universal-hot-example Has the kitchen sink, and more. Popular, but maybe too many things stuffed into one repo. - **React-Redux Starter Kit** https://github.com/davezuko/react-redux-starter-kit Generally recommended. Well laid out, good documentation. Worth looking at. Has become significantly more complex over time as well. - **react-boilerplate** https://github.com/mxstbr/react-boilerplate A highly scalable, offline-first foundation for your next project with the best DX and a focus on performance and best practices. Excellent documentation. - **React Starter Kit** https://github.com/kriasoft/react-starter-kit A full-featured universal/isomorphic starter kit, with good documentation - **React Slingshot** https://github.com/coryhouse/react-slingshot A flexible starter kit designed to illustrate best practices. #### Specific Concept Demonstrations - **Ultimate Hot-Reloading Example** https://github.com/glenjamin/ultimate-hot-reloading-example Demonstrates hot-reloading of pretty much everything, both client-side and server-side - **Universal-JS** https://github.com/colinmeinke/universal-js A well-written universal starter with docs explaining choices, and plenty of example tests. - **React + Electron Boilerplate** https://github.com/chentsulin/electron-react-boilerplate Electron application boilerplate based on React, Redux, React Router, Webpack, React Transform HMR for rapid application development - **React-Redux-Cesium-Testing Demo** https://github.com/markerikson/react-redux-cesium-testing-demo Demonstrates a number of useful bits of project configuration, including offline tests with Mocha+JSDOM, live-reloading tests in the browser using mocha-loader, async loading of React components, use of the Cesium 3D globe library with React and Webpack, and using the Shrinkpack tool to manage dependencies inside the repo. Not intended for production use, but could serve as a useful example. - **React Static Plate** https://github.com/webyak/react-static-plate Build static sites with React to host on Amazon S3, Github Pages, Surge, etc. An interesting alternative to other static page generation tools. #### Other - **React Starter Project Search Tool** 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 Project Setup - **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. - **Taming the React Setup** http://developer.telerik.com/featured/taming-react-setup/ Describes seven different setups for writing React code, from simple (plain react.js loaded into the browser), to complex (use of Babel with Webpack or JSPM). - **Kick-Start React Projects with Create-React-App** https://www.sitepoint.com/create-react-app/ Some quick tips on how to use Create-React-App to create a new React project and tweak the setup. - **Getting Started with React the Easy Way** http://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/ Shows the simplest way to load React into a web page and start using it - **The Minimal React Webpack Babel Setup** https://www.robinwieruch.de/minimal-react-webpack-babel-setup/ A clear walkthrough for the key steps needed to set up a useful Webpack+Babel config from scratch for a productive React dev environment. Very helpful if you choose not to use Create-React-App. - **Hipster Boilerplate** https://github.com/Jordaanm/hipster-boilerplate A learning-oriented repo that builds up a small project config step-by-step. Each commit adds one new feature or capability (Babel+ES6, Webpack bundling, a small Redux app, LESS styling, routing, and hot-reloading). - **JavaScript Stack from Scratch** https://github.com/verekia/js-stack-from-scratch This is a minimalistic and straight to the point guide to assembling a JavaScript stack. It teaches you how to set up ES6, Babel, Gulp, ESLint, React, Redux, Webpack, Immutable, Mocha, Chai, Sinon, and Flow. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring all these tools together and giving you the simplest possible example for each tool. You can see this tutorial as a way to write your own boilerplate from scratch. - **React Ecosystem Setup - Step-By-Step** https://codeburst.io/react-ecosystem-setup-step-by-step-walkthrough-721ff45a7fc1 An in-depth walkthrough that shows to to set up Webpack and Babel, and explains why each bit of configuration is needed. - **Always up-to-date Guide for Modern JavaScript Development** https://mvilrokx.gitbooks.io/always-up-to-date-guide-for-modern-javascript-dev/content/ An opinionated guide for setting up a modern JS development environment. - **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 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. ================================================ FILE: community-resources.md ================================================ ### Community Resources #### Link Lists - **Awesome React** https://github.com/enaqx/awesome-react A collection of awesome things regarding the React ecosystem. - **Awesome React Native** https://github.com/jondot/awesome-react-native An "awesome" type curated list of React Native components, news, tools, and learning material - **Redux Ecosystem Links** https://github.com/markerikson/redux-ecosystem-links A categorized list of Redux-related addons, libraries, and utilities - **Awesome Redux** https://github.com/xgrommx/awesome-redux Awesome list of Redux examples, articles, and libraries. - **Awesome Webpack** https://github.com/d3viant0ne/awesome-webpack A curated list of awesome Webpack resources, libraries and tools - **React FAQ** https://github.com/timarney/react-faq A collection of links to help answer your questions about React.js - **JS Coach** https://js.coach/ An automatically-updated searchable and categorized list of JS packages related to React, Webpack, Babel, and more. - **Awesome React Components** https://github.com/brillout/awesome-react-components Catalog of React components / libraries - **Awesome React Talks** https://github.com/mightyCrow/awesome-react-talks A curated list of talks about React or topics related to React. - **230 Curated Resources and Tools for Building Apps with React** https://appendto.com/2016/12/230-resources-and-tools-for-building-apps-with-react-js/ A useful list of articles, libraries, and tools that cover the range of React development. - **Awesome Create-React-App** 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. - **Awesome CSS-in-JS** https://github.com/tuchk4/awesome-css-in-js A collection of awesome things regarding CSS in JS approaches - **"What are your top React/React Native Blogs that you frequent?"** https://www.reddit.com/r/reactjs/comments/5t8loz/what_are_your_top_reactreact_native_blogs_that/ Several comments listing good React-related blogs, including my own list of high-quality blogs that I subscribe to. - **Awesome MobX** https://github.com/mobxjs/awesome-mobx A collection of awesome things regarding MobX. - **Made with React** http://madewithreact.com/ A collection of websites and applications using the React or React Native JavaScript library. - **Awesome React** https://react.libhunt.com/ A categorized collection of awesome React libraries, resources and shiny things, based on the awesome-react list. #### Online IDEs and Editors - **CodeSandbox** https://codesandbox.io/ An online IDE focused on React applications. Includes the ability to import NPM packages, browse existing sandboxes by tags, export projects for use with Create-React-App, and much more. - **WebpackBin** https://www.webpackbin.com/ An online IDE with the ability to import NPM packages, create ES2015 and TypeScript projects, and more. - **StackBlitz** https://stackblitz.com/ An online IDE based on Visual Studio Code, including its Intellisense code completion. Can create React and Angular projects, import NPM packages, continue development while offline, and more. #### People - **Dan Abramov's React List** https://medium.com/@dan_abramov/my-react-list-862227952a8c A list of people (mostly but not entirely related to React) that Dan Abramov suggests following - **Twitter React Lists** https://twitter.com/wleong/lists/my-react-list/members https://twitter.com/oguzbilgic/lists/react-influencers/members Some Twitter lists that focus on React-related people - **"41 Javascript Experts to Follow on Twitter"** http://techbeacon.com/javascript-leaders-you-should-follow-twitter A varied list of JS-related people. Not specifically React-related, but a useful list. #### Podcasts - **Javascript Air** https://javascriptair.com/ The live broadcast podcast all about JavaScript - **React30** https://react30.com/ The weekly React podcast that promises to waste no more than 30 minutes of your time. #### Newsletters - **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 - **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. - **React Statuscode** http://react.statuscode.com/ A free, once-weekly e-mail newsletter on React from the authors of JavaScript Weekly. - **JavaScript Weekly** http://javascriptweekly.com/ A free, once-weekly e-mail round-up of JavaScript news and articles. - **PonyFoo Weekly** https://ponyfoo.com/weekly A single email every thursday, discussing front-end web development and related technologies. - **ES.next News** http://esnextnews.com/ 5 ECMAScript.next links every week, in your inbox. Curated by Dr. Axel Rauschmayer and Johannes Weber. - **Dave Ceddia's Newsletter** https://daveceddia.com/newsletter/ Weekly-ish articles in your inbox about React, JavaScript, and more. - **React Native Newsletter** http://reactnative.cc/ Occasional summary of React Native news, articles, issues & pull requests, #### Online Course Sites - **Egghead.io** https://egghead.io/ Numerous courses with short, bite-size videos on a wide variety of topics. Some courses and videos are free, others require a paid subscription to Egghead to access. - **Frontend Masters** https://frontendmasters.com/ Front-end training courses from masters who are shaping the industry. ================================================ FILE: es6-features.md ================================================ ### Javascript ES6 Features and Examples #### Overviews - **ES6 Features Overview** https://github.com/lukehoban/es6features Examples of each of the new major features - **ES6 Features Comparison** http://es6-features.org/ 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 - **Javascript Features** http://jsfeatures.in/#ES6 More samples of features in ES5, ES6, and ES7 - **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 - **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. - **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 - **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 - **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 - **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. - **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** https://blog.ragnarson.com/2016/12/15/javascript-generators.html A nice readable introduction to what generator functions are and how to use them - **Powering Javascript with Generators** http://appendto.com/2016/06/powering-javascript-with-generators A useful introduction to the generators feature in ES6. - **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 - **Javascript Promises for Dummies** https://scotch.io/tutorials/javascript-promises-for-dummies An introduction to understanding promises - **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 - **ES6 Promise Anti-Patterns and Best Practices** http://www.datchley.name/promise-patterns-anti-patterns/ Some advice for good usage of Promises - **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 - **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 - **JavaScript Modules: A Beginner's Guide** 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. - **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. - **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. ================================================ FILE: flux-tutorials.md ================================================ ### Flux Tutorials and Concepts - **The Flux Quick Start Guide** http://www.jackcallister.com/2015/02/26/the-flux-quick-start-guide.html A quick overview of the key concepts of Flux - **Getting to Know Flux** https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture A good look at what Flux is, what the pieces are, and how they fit together - **Flux in Depth - Overview and Components** http://blog.mgechev.com/2015/05/15/flux-in-depth-overview-components/ Another in-depth article on Flux concepts and structure - **Architecting React Apps with Flux** http://tylermcginnis.com/reactjs-tutorial-pt-3-architecting-react-js-apps-with-flux/ Describes how Flux organizes data flow, and how pieces fit together - **For Flux' Sake** https://github.com/MIJOTHY/FOR_FLUX_SAKE A Flux tutorial and description, with a sample project - **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 ================================================ FILE: framework-comparisons.md ================================================ ### Javascript Framework Comparisons #### React, Angular, Ember, and Vue - **Angular vs React vs Vue: A 2017 Comparison** https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176 The best framework comparison article I've seen. Covers multiple important considerations when choosing a framework, clearly describes the pros, cons, approaches, and tradeoffs of each library, and gives some suggestions for why you might want to choose one framework over the other. Also links to several additional comparison articles at the end. - **Comparing Frontend Approaches** https://medium.com/@peterxjang/comparing-frontend-frameworks-part-1-introduction-6cf3d49e42cf A series that builds the same notes app with jQuery, Vue, React, and Elm, and compares the pros and cons of the approaches. - **Web Framework Comparisons** https://www.sitepen.com/blog/2017/06/13/if-we-chose-our-javascript-framework-like-we-chose-our-music/ https://www.sitepen.com/blog/2017/11/10/web-frameworks-conclusions/ A 9-part series that compares Angular 2+, React+Redux, Vue, Ember, Dojo 2, and Aurelia. Covers topics like UI development, UX design, foundational technologies, common usage, testing, and soundness. The series is written by a company that works on Dojo, but the comparisons and descriptions are fair. Links go to the first and last articles in the series. - **How I stopped loving Angular** https://codeburst.io/how-i-stopped-loving-angular-c2935f7378c4 An extensive article detailing the author's critiques of Angular 2+, and why they ultimately chose to switch to Vue instead. - **React vs Angular: An In-depth Comparison** https://www.sitepoint.com/react-vs-angular/ A well-written post that not only offers comparisons between React and Angular, but gives suggested approaches for comparing tools and ecosystems in general. - **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. - **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 - **Relieving Backbone Pain with Flux & React** http://product.hubspot.com/blog/moving-backbone-to-flux-react A fantastic video that walks through common problems with using Backbone, and how React can help solve those - **Avoiding Event Chains in Single-Page Applications** http://www.code-experience.com/avoiding-event-chains-in-single-page-applications/ Describes potential problems with Backbone-style events triggering further events, etc - **From Backbone to React: Experience Scaling an App** http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/ Thoughts on potential complexity issues in a Backbone app - **From Backbone to React (comments)** https://news.ycombinator.com/item?id=8329837 Discussion on the previous article #### Migrating to React - **How to migrate an application from AngularJS to React and Redux** https://hackernoon.com/how-to-migrate-an-application-from-angularjs-to-react-and-redux-de0e2d1f70aa Recaps several useful techniques to use when migrating an Angular 1.x app to React and Redux, including moving the build to use Webpack, rendering React components inside of Angular directives, sharing dependencies, and integrating Redux into the application. - **Octopus Deploy 4.0 - Why we chose React over Angular when rewriting the Octopus 4.0 UI** https://octopus.com/blog/octopus-v4-angular-to-react Thoughts on how their original Angular 1 app had become unmaintainable, why they picked React, use of TypeScript, and how they approached architecting the React version. - **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://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 ================================================ FILE: functional-programming.md ================================================ ### 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. - **Understanding Programmatic Side Effects** http://c2fo.io/c2fo/programming/2016/05/11/understanding-programmatic-side-effects/ A short article that explains the concept of "side effects" - **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. - **Getting Functional with Javascript** http://www.datchley.name/getting-functional-with-javascript-part-1/ http://www.datchley.name/getting-functional-with-javascript-part-2/ http://www.datchley.name/getting-functional-with-javascript-part-3/ Demonstrates FP concepts by showing how to filter, group, and sort an array of data. Lots of good descriptions, samples, and explanations. - **Functional Programming for Javascript People** https://medium.com/@chetcorcos/functional-programming-for-javascript-people-1915d8775504 Tries to explain core FP concepts and patterns in understandable terms. - **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. - **A Gentle Introduction to Functional Javascript** http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-intro/ http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-arrays/ http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-functions/ http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-style/ Goes through a number of FP-related aspects in Javascript. - **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. - **Functional Programing in Javascript** http://reactivex.io/learnrx/ Teaches functional programming concepts through a series of interactive exercises. Intended as a precursor to learning the Reactive Extensions for Javascript library (RxJS), but uses plain JS and teaches general concepts in the process. (Later exercises are hidden until earlier ones are completed - hit "Show Answer" and "Run" on an exercise if you want to skip ahead). - **The "Thinking Functionally" series** 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. - **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 - **Functional Programming Jargon** https://github.com/hemanth/functional-programming-jargon A list of FP terms with easier-to-understand definitions and explanations. - **An Introduction to Reasonably Pure Functional Programming** https://www.sitepoint.com/an-introduction-to-reasonably-pure-functional-programming/ Explain four key concepts of functional programming: pure functions, immutable values, composition, and side effects - **Functors, Applicatives, and Monads in Plain English** http://www.russbishop.net/monoids-monads-and-functors An attempt to explain these concepts in reasonable terms. - **Learning Functional Programming with Javascript** https://youtu.be/e-5obm1G_FY A great talk by Anjana Vakil. Covers several basic concepts of functional programming, including some very nice examples of map/filter/reducer, a clear fdefinition of side effects, and an explanation of how specialized immutable data libraries work. - **Thinking in Ramda** http://randycoulman.com/blog/categories/thinking-in-ramda/ A series of articles digging into techniques to use with the Ramda FP utility library - **Functional Programming Isn't the Answer** http://degoes.net/articles/fp-is-not-the-answer A reminder that while FP has potential benefits, it's ultimately just a tool, and the end goal is useful software. - **An Intro to Functional Programming Concepts in Javascript** https://medium.com/@collardeau/intro-to-functional-programming-concepts-in-javascript-b0650773139c 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 - **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. - **The Case for Lenses in Pragmatic Business Applications** http://www.brandonkeown.com/2016/10/lenses-for-fun-and-profit.html Demonstrates the use of Ramda's "lens" concept for encapsulating data access - **Functional Lenses, How Do They Work** https://medium.com/@dtipson/functional-lenses-d1aba9e52254 A dive into the "lens" concept, and how they can be used to manipulate data structures - **Don't Be Scared of Functional Programming** 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. - **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 - **Composability: From Callbacks to Categories in ES6** 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). - **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. - **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 - **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. - **Higher Order Functions and Redux Thunk** https://medium.com/@joedski/higher-order-functions-and-redux-thunk-1e5983ae6b03 An exploration of ways to wrap behavior around thunks, including composing functions together. - **Functional Programming Jargon** https://functional.works-hub.com/blog/Functional-Programming-Jargon A large list of functional programming terms, with explanations for each and examples of those terms using JS - **Awesome FP JS** https://github.com/stoeffel/awesome-fp-js A collection of links to libraries, tools, and resources for FP usage in JS - **Currying vs Partial Application** http://www.datchley.name/currying-vs-partial-application/ A great explanation of the difference between "currying" functions and "partially applying" them - **Lodash is not (only) for list manipulation!** https://blog.pragmatists.com/lodash-is-not-only-for-list-manipulation-791c2e3b9de1 Examples of how to compose the `lodash/fp` functions to create functional data transformation pipelines. ================================================ FILE: git-resources.md ================================================ ### Git Tutorials and Resources #### Resource Pages - **Understanding Git** http://www.queness.com/post/16139/understanding-git A collection of links to articles, tutorials, cheat sheets, and clients - **7 Useful Git Tips for Beginners** http://sixrevisions.com/web-development/git-tips/ High-level directions for learning Git, including links to many tutorials #### Tutorials - **Atlassian Git Tutorials** https://www.atlassian.com/git/tutorials An excellent collection of tutorials, from basics to advanced topics. Very well written and easy to read. - **Git Concepts Simplified** http://gitolite.com/gcs.html An HTML slideshow that walks through Git's core concepts, with diagrams. - **Learn Version Control with Git** https://www.git-tower.com/learn/git/ebook/command-line/introduction A complete introduction to using Git that assumes no prior knowledge - **Git from the Bottom Up** https://jwiegley.github.io/git-from-the-bottom-up/ Explains Git by describing the internal data structures and how they work. More technical than other tutorials, but understanding the way Git handles data can really make understanding the commands easier. - **Conversational Git** http://blog.anvard.org/conversational-git/ An easy-to-read, informal approach to learning Git - **Think like a Git** http://think-like-a-git.net/ A tutorial for "advanced beginners" who know the basic commands, but want to better understand Git's concepts - **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. - **Git for Humans** https://speakerdeck.com/alicebartlett/git-for-humans A slideshow introducing Git concepts without complex terminology - **Getting Git** https://gettinggit.com/ A paid video tutorial series that covers Git commands in detail, as well as everyday scenarios you might encounter while using Git - **Learn Enough Git to Be Dangerous** https://www.learnenough.com/git-tutorial A tutorial that teaches practical use of Git basics, Github, and Git workflows. - **Git Magic** https://crypto.stanford.edu/~blynn/gitmagic/ An extensive Git tutorial that teaches usage instructions first, and works its way up to advanced Git techniques and concepts. - **Git Beyond the Basics** http://blog.bloomca.me/2017/11/17/git-beyond-the-basics.html A good tutorial that explains intermediate concepts like merging, rebasing, cherry-picking, and cleaning pull requests #### Tips and Useful Info - **How to Write a Git Commit Message** http://chris.beams.io/posts/git-commit/ Great advice for how to write a succinct, informative, and useful commit message. - **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). - **19 Tips for Everyday Git Use** http://www.alexkras.com/19-git-tips-for-everyday-use A variety of practical commands for different scenarios. - **Git Tips** https://github.com/git-tips/tips A large collection of Git tips and tricks. - **Digit** https://github.com/optionfactory/digit A tool to visualize the contents of a Git repo as an aid to learning - **Advanced Git Advice** https://medium.com/@zlobin/advanced-git-advice-27087a7fbb29 A variety of useful tips and commands. - **A Note about Git Commit Messages** http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html Some quick explanations of how to format Git commit messages, and commands where message formatting matters - **Git Commit Good Practices** https://wiki.openstack.org/wiki/GitCommitMessages A number of good practices to follow when making commits and writing commit messages - **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 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. - **Advanced Git Commands You Will Actually Use** https://stosb.com/blog/advanced-git-commands-you-will-actually-use/ Describes a wide variety of useful commands, such as ways to refer to commits, searching commit logs, manipulating history, and much more. ## Specific Techniques - **Git's Patch Mode All the Way** https://blog.petrzemek.net/2016/07/10/git-patch-mode-all-the-way/ Shows how to use Git's ability to selectively pick and choose chunks of code as part of various actions - **Git: Undoing changes and rewriting history** http://slides.com/lilianakastilio/github-4#/ A slideshow discussing various ways to change commit history - **Beginner's guide to git rebasing and squashing** https://shinglyu.github.io/web/2016/11/08/servo-rebase-and-squash-guide.html A tutorial on rebasing and squashing commits to change past history. - **Git Rebasing and Clean Pull Requests** https://www.jungledisk.com/blog/2016/11/21/git-rebasing-and-clean-prs/ Some best practices for cleaning up branches and producing readable commits. - **A closer look at git rebase** https://dev.to/gonedark/a-closer-look-at-git-rebase An explanation of what "rebasing" is, with some helpful graphics - **Visualize Merge History with git log --graph, --first-parent, and --no-merges** https://redfin.engineering/visualize-merge-history-with-git-log-graph-first-parent-and-no-merges-c6a9b5ff109c Describes issues with using `git log` to visualize history, and some arguments that can be used to give a potentially better picture of what's actually happened. - **How to undo (almost) anything with Git** 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 - **Pro Git** https://git-scm.com/book/en/v2 An in-depth online reference to all aspects of Git - **Git Internals** https://github.com/pluralsight/git-internals-pdf A free PDF that digs deep into Git's data structures and behavior #### Workflows - **Git Workflows** http://documentup.com/skwp/git-workflows-book Covers ways to increase productivity, create cleaner commit history, and improve code reviews - **Understanding the Git Workflow** https://sandofsky.com/blog/git-workflow.html Looks at how to properly handle branches and local history vs public history - **A Successful Git Branching Model** http://nvie.com/posts/a-successful-git-branching-model/ Describes a widely used multi-branch approach to managing development and release processes #### Cheat Sheets - **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 - **Tower - Git Cheat Sheet** https://www.git-tower.com/blog/git-cheat-sheet/ A quick reference PDF listing some common commands - **Interactive Git Cheat Sheet** http://ndpsoftware.com/git-cheatsheet.html A clickable page that shows how various commands move data between different parts of Git's storage (working copy, index, local repo, remote repo) - **giteveryday** https://www.kernel.org/pub/software/scm/git/docs/giteveryday.html A useful minimum set of commands for Everyday Git. Commands grouped by usefulness to different categories of users. - **Git Getting Started Cheat Sheet** https://gist.github.com/akras14/3d242d80af8388ebca60 Another useful list of commands with explanations #### Desktop GUI Clients - **SourceTree** (Win, Mac; free) https://www.sourcetreeapp.com/ A solid Git client, with a good variety of features. Includes UI for interactive rebase, which makes that task much easier to do. Note that a recent release (1.8 for Windows, 2.2 for Mac) drastically changed the UI appearance, added required accounts, has had a number of performance issues, and is generally seen as a step backwards. You may want to download the earlier versions instead ([1.6.25 for Windows](https://downloads.atlassian.com/software/sourcetree/windows/SourceTreeSetup_1.6.25.exe), [2.1 for Mac](https://downloads.atlassian.com/software/sourcetree/SourceTree_2.1.dmg) ). - **Git Extensions** (Win; free) http://gitextensions.github.io/ A Windows client with Windows Explorer and Visual Studio integration - **Git Tower** (Mac, Win; commercial) https://www.git-tower.com/ A well-designed commercial Git client for Mac and Windows - **SmartGit** (Win, Mac, Linux; commercial) http://www.syntevo.com/smartgit/ A cross-platform Git client aimed at professionals - **GitKraken** (Win, Mac, Linux; semi-commercial) http://www.gitkraken.com/ A cross-platform Git client ================================================ FILE: immutable-data.md ================================================ ### 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. - **Immutable Javascript using ES6 and Beyond** http://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/ Describes ways to handle data immutably using "just" built-in Javascript functions, particularly ES6 syntax - **Pure javascript immutable arrays** http://vincent.billey.me/pure-javascript-immutable-array A reminder to avoid the built-in Array functions that mutate the array, with snippets demonstrating alernative immutable functionality - **Javascript Array: slice vs splice** https://ariya.io/2014/02/javascript-array-slice-vs-splice A reminder that "slice" and "splice" are different functions with different behavior - **Immutable Data from Scratch** https://ryanfunduk.com/articles/immutable-data-from-scratch/ Demonstrates building up an immutable update utility library similar to React's Update Addons - **Immutable Objects with `Object.freeze`** http://adripofjavascript.com/blog/drips/immutable-objects-with-object-freeze.html A quick look at how to use `Object.freeze` to enforce immutability. - **Immutability in Javascript** http://www.sitepoint.com/immutability-javascript/ Describes a couple basic concepts of immutable data in Javascript, and how the Immutable.js library can be used for those concepts. - **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** 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. - **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 - **React: A (very brief) talk about immutability** https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c Talks about the issues with mutation, and some ways to update immutably - **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. #### 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. - **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 - **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 - **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 - **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. ================================================ FILE: javascript-resources.md ================================================ ### Javascript Resources While this list is primarily focused on learning React and Redux, and generally assumes that you understand the older Javascript ES5 standard, there's many great resources out there for learning Javascript. This page points to some similar resource lists that are focused on Javascript, as well as some additional useful articles and resources. #### General Resources - **Mozilla Developer Network: Javascript** https://developer.mozilla.org/en-US/docs/Web/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. - **Modern JS Cheatsheet** https://github.com/mbeaudru/modern-js-cheatsheet An extensive list of explanations for syntax and concepts used in modern JS applications - **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 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** http://wesbos.com/learn-javascript Speaker and teacher Wes Bos gives links to a number of resources for learning Javascript - **Learning Javascript and the Danger of Spreading Yourself Too Thin** https://medium.com/@kevininaniche/learning-javascript-and-the-danger-of-spreading-yourself-too-thin-4617384e7ea4 Tips on how to approach learning Javascript, and some additional resources. - **Reddit /r/LearnJavascript** https://www.reddit.com/r/LearnJavascript A Reddit community for learning Javascript - **Roadmap for Learning the Javascript Language** http://bytearcher.com/articles/roadmap-for-learning-javascript-language/ A suggested approach for how to learn Javascript. - **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. - **Want to Learn Javascript in 2016?** https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225 Extensive suggestions for resources to use when learning Javascript - **6 Quick & Proven Tips to Help You Learn JavaScript** https://blog.alexdevero.com/6-quick-proven-tips-learn-javascript/ Points to a couple of suggested books to help learn JS, and gives several additional suggestions for approaches and resources to use in the process. - **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 #### Tutorials, Books, and Courses - **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. - **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. - **Rithm School Free Javascript Course** https://www.rithmschool.com/courses - **Practical Javascript** http://watchandcode.com/p/practical-javascript A free online course to learn Javascript fundamentals. - **Javascript Path** https://github.com/javascript-society/javascript-path A list of books to master JavaScript Development - **DOM Enlightenment** http://domenlightenment.com/ A deep look at how to interact with the DOM from Javascript, without using a library or a framework. - **Javascript30** https://javascript30.com/ A free course from Wes Bos that teaches how to build 30 different interesting projects, using only "vanilla" Javascript. - **Javascript; The Core** http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/ A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`. The second edition includes more of a focus on ES6 and newer features. - **The JavaScript Way** https://github.com/bpesquet/thejsway A modern introduction to the JavaScript language, intended to be beginner-friendly, comprehensive, standards-aligned with the latest syntax and good practices, and hands-on. #### Online Code Editors - **CodeSandbox** https://codesandbox.io A full-fledged online IDE that lets you build entire applications using React, Vue, and other toolkits. - **A Roundup of Online Code Playgrounds** https://www.sitepoint.com/round-up-online-code-playgrounds/ An overview and comparison of various online Javascript live code editing tools. #### Articles and Gotchas - **Mozilla Javascript Reference: the `this` keyword** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this MDN's usual excellent documentation, explaining how `this` works in Javascript - **Gentle Explanation of `this` keyword 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. - **The Inner Workings of Javascript's `this` keyword** https://www.sitepoint.com/inner-workings-javascripts-this-keyword/ https://www.sitepoint.com/mastering-javascripts-this-keyword/ A two-part article on the ins and outs of `this`. - **Let's Settle `this`, Part One** https://medium.com/@nashvail/lets-settle-this-part-one-ef36471c7d97 Another look at `this`, with a number of examples and explanations - **Understanding Javascript Function Invocation and `this`** http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/ An excellent explanation of how function calls and the `this` keyword work - **When 'not' to use arrow functions** 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?** https://derickbailey.com/2015/09/28/do-es6-arrow-functions-really-solve-this-in-javascript/ A dive into how `this` works inside of arrow functions, and some places when they may not be appropriate for use. - **Grokking Scope in Javascript** https://code.tutsplus.com/tutorials/grokking-scope-in-javascript--cms-26259 Advice for understanding how Javascript variable coping works - **Let It Be - How to declare JavaScript variables** http://madhatted.com/2016/1/25/let-it-be https://www.reddit.com/r/javascript/comments/44yjzo/let_it_be_how_to_declare_javascript_variables/ A look at how `var`, `let`, and `const` behave, and how using them communicates intent. Further discussion in the Reddit comments. - **This in Javascript** https://zellwk.com/blog/this/ Tries to demystify the behavior of the `this` keyword by explaining the six situations that can change the value of `this`. - **Which Array Function When?** https://dev.to/andrew565/which-array-function-when A great explanation of the differences between the various methods that can loop over arrays (`map`, `filter`, `reduce`, and `forEach`), and when you should use each one. - **What is This in Javascript?** https://developer.telerik.com/topics/web-development/what-is-this-in-javascript/ An easy-to-read explanation of the different ways `this` can be defined in a function. - **Everything you wanted to know about JavaScript scope** https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ A detailed look at the concept of "scopes" in JS, including global, local, function, and lexical scopes, and how `this` behaves in relation to scopes. - **On `this` in Javascript** http://georgemauer.net/2017/08/03/on-this-in-javascript.html Describes how `this` is just a function parameter you don't get to name, and shows how it works with normal functions, arrow functions, and classes #### Paid Courses and Books - **Javascript: Understanding the Weird Parts** 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. ================================================ FILE: mlc_config.json ================================================ { "aliveStatusCodes": [ 0, 200, 429 ], "fallbackRetryDelay": "30s", "retryCount": 2, "timeout": "5s" } ================================================ FILE: mobx-tutorials.md ================================================ ### MobX Tutorials #### Basic Introductions - **MobX Docs** https://github.com/mobxjs/mobx https://mobxjs.github.io/mobx/ https://mobxjs.github.io/mobx/getting-started.html The official MobX site, with documentation including a getting started introduction and API reference. - **Getting Started with MobX - Video Series** https://www.youtube.com/watch?v=_q50BXqkAfI A quick two videos introduction to MobX: how to set it up, and get started coding a simple ToDo App. - **Managing complex state in React with MobX - Video Series** https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx Videos describing MobX fundamentals including debugging with the MobX-react devtools. - **Introduction video to MobX with React - Video** https://www.youtube.com/watch?v=XGwuM_u7UeQ In depth introduction to MobX with React including 'Why mobx' (all coded with ES5). - **React Native with MobX — Getting Started** https://medium.com/@dabit3/react-native-with-mobx-getting-started-ba7e18d8ff44 An introduction article about combining MobX and React Native to create a simple list app. - **Real World MobX** https://www.youtube.com/watch?v=Aws40KOx90U A talk by MobX creator Michel Weststrate, describing MobX's concepts and usage - **MobX First Impressions** https://benmccormick.org/2017/01/09/mobx-first-impressions/ A quick introduction to MobX's basic concepts and how it works - **How to Manage your JavaScript Application State with MobX** https://www.sitepoint.com/manage-javascript-application-state-mobx/ A detailed tutorial that introduces basic MobX usage, using only jQuery for the UI updates - **MobX + React Tutorial: Building your first app** http://orlandohamsho.com/javascript/mobx-react-tutorial-building-first-application/ A walkthrough that builds a basic list/detail application, and introduces the basics of MobX along the way. #### Testing - **Testing React and MobX** https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest A look at ways to test React components and MobX logic #### Other - **One awkward thing about MobX: Complex Models** 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** http://danielearwicker.github.io/MobX_Like_React_but_for_Data.html Thoughts on MobX's core concepts, and how they relate to immutability, derived data, and observables. - **The Fundamental Principles Behind MobX** https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8 MobX creator Michel Weststrate discusses MobX's key concepts, including running all updates synchronously, and potential use of Proxies as a future improvement. - **Creating a reusable popver system with React and MobX** https://medium.com/@enitoni/creating-a-reusable-popover-system-with-react-and-mobx-7f47cc3b270d A useful tutorial on implementing a React modal system driven by MobX state - **7 Tips for Using MobX** 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. - **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 - **"Confused: Redux or MobX?** https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/ An in-depth thread comparing the two libraries. Includes comments from both Dan Abramov of Redux and Michel Weststrate of MobX describing their libraries, as well a number of other good comparisons. - **Redux or MobX: An attempt to dissolve the confusion** http://www.robinwieruch.de/redux-mobx-confusion/ An in-depth comparison of the ideas, concepts, approaches, and use cases for the two state management libraries - **MobX vs Redux: Comparing the Opposing Paradigms** https://youtu.be/76FRrbY18Bs A fantastic presentation by Preethi Kasireddy at ReactConf 2017, comparing the philosophies, concepts, tradeoffs, and use cases for Redux and MobX. - **Redux vs MobX by example** 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. - **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. - **Comparing Redux and MobX with two CTOs** https://youtu.be/ZGVwMkrL2n0 A recorded presentation of two CTOs comparing several major aspects of React state management with `setState`, MobX, and Redux - **Introduction to Redux and MobX** https://medium.com/@guptagaruda/introduction-to-redux-and-mobx-e6fa98b6479 A very nice comparison of the core concepts and benefits for Redux and MobX, with some good diagrams, useful tips, and links to relevant resources. ================================================ FILE: node-js-and-npm.md ================================================ ### Node.js and NPM Note: it is HIGHLY recommended that you install Node 5.x, particularly if you are on Windows. Node 5.x includes NPM 3.x, which fixes many problems working with packages on Windows. Also, you will want to use NPM 3.7 or later, as that fixes a bug with the progress bar that drastically slowed down installations. - **A Beginner's Guide to NPM** http://www.sitepoint.com/beginners-guide-node-package-manager/ Good overview of the major NPM commands for package management - **How to use NPM to Manage Node Packages** https://www.digitalocean.com/community/tutorials/how-to-use-npm-to-manage-node-js-packages-on-a-linux-server Focused on Linux, but the commands should mostly be cross-platform - **NPM - Node.js Package Manager** https://semaphoreci.com/community/tutorials/npm-node-js-package-manager Good tutorial on working with packages and dependencies using NPM - **Microsoft's Node.js Guidelines** https://github.com/Microsoft/nodejs-guidelines A great resource for setting up and working with Node on Windows, including solutions for common issues like compiling native-code modules and path length problems - **Learn You Node with VS Code** http://devhammer.net/blog/learn-you-node-with-vs-code/ Some basic instructions for setting up Node and working with NPM - **Control of Your Global Node Packages on Windows** http://www.bossable.com/1710/nodejs-package-path-for-windows/ Tips for dealing with various path problems - **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. - **Understanding NPM** https://unpm.nodesource.com/ An interactive visualization that is intended to help you understand the role and scope of NPM. - **NPM for Beginners: A Guide for Front-End Developers** https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/ An excellent introduction to what NPM is, and how to use it for installing and managing package dependencies. ================================================ FILE: project-structure.md ================================================ ### Project Structure **Related topics**: - [Boilerplates and Starter Kits](./boilerplates-and-starter-kits.md) - [React Component Patterns](./react-component-patterns.md) - [React State Management](./react-state-management.md) - [React and Forms](./react-forms.md) - [React and AJAX](./react-ajax.md) - [React Architecture and Best Practices](./react-architecture.md) - [Redux Architecture and Best Practices](./redux-architecture.md) #### Project File Structure - **Scaling React.js Applications** https://vimeo.com/168648012 Max Stoiber's talk about managing large react.js applications. Covers "Feature" structure, redux-saga and CSS modules. - **How to Scale React Applications** https://www.smashingmagazine.com/2016/09/how-to-scale-react-applications/ 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. - **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. - **Rules for Structuring (Redux) Applications** http://jaysoo.ca/2016/02/28/organizing-redux-application/ http://jaysoo.ca/2016/02/28/applying-code-organization-rules-to-concrete-redux-code/ http://jaysoo.ca/2016/12/12/additional-guidelines-for-project-structure/ Gives several useful rules for structuring code, with examples. - **A Better File Structure for React/Redux Applications** http://marmelab.com/blog/2015/12/17/react-directory-structure.html Suggests a domain-based structure, with tests kept alongside the code they relate to. - **Route-Based Folder Structure** https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346 Ryan Florence, an author of React Router, gives his suggested file structure. - **How to Better Organize Your React Applications?** https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1 Another feature-style approach, describing things in terms of "components", "scenes", and "services". - **Fractal Project Structure** https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure Docs from the React Redux Starter Kit project describing their "Fractal Project Structure" concept, and advice for file and app organization. - **Redux Structure: a Way to Success** https://datarockets.com/blog/redux-structure Thoughts on a "modules and components"-based approach to file structure, - **My journey toward a maintainable project structure for React/Redux** https://hackernoon.com/my-journey-toward-a-maintainable-project-structure-for-react-redux-b05dfd999b5 Describes an evolution of approaches for project structure - **Building Modular Redux Applications** https://vimeo.com/album/4199344/video/187454108 A talk discussing an approach to Redux structure by splitting logic into "data providers/sources" and presentation. - **How to Structure real world Redux/React Applications** https://medium.com/@yiquanzhou/how-to-structure-real-world-redux-react-application-d61e66a7dd36 Another look at structuring code, based on business logic, data domains, and reusability. - **When a good plan comes together: React project structure for scaling** http://web.archive.org/web/20170706123441/http://thereactionary.net/when-a-good-plan-comes-together-react-project-structure-for-scaling/ More discussion of tradeoffs in various structure approaches. - **Structuring and Organizing the React Components Directory** 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. - **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`. - **Decoupling Hierarchies for Maintainable Code** https://medium.com/altschool-engineering/decoupling-hierarchies-for-maintainable-code-b13c24b2f047 Some very interesting thoughts on how component structure, data flow, and folder structure can interact with each other. - **Writing Scalable React Apps with the Component Folder Pattern** https://medium.com/styled-components/component-folder-pattern-ee42df37ec68 Describes a specific variation on "feature folders" that puts all files for a given component in a separate folder, as well as an approach for providing configurable component rendering with default behavior as a fallback. - **Fractal: A React app structure for infinite scale** https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af - **Domain directory structure for React apps - why it's worth trying** https://tech.offgrid-electric.com/domain-directory-structure-for-react-apps-why-its-worth-trying-b3855ee77a1e Discusses experience with the "A Better File Structure" approach, and gives advice on best practices for import paths, creating sub-domains, and more. - **The 100% correct way to structure a React app (or why there's no such thing** https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed An extensive set of pragmatic thoughts on good practices for React project structure. Tries to quantify time spent on activities like creating new files and switching editor tabs, and gives some opinions on which patterns are more useful. ================================================ FILE: pros-cons-discussion.md ================================================ ### React/Flux/Redux Pros, Cons, and Discussion **Related Topics**: - [Redux addons catalog - Apps and Examples](https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md): Links to various projects built with Redux, both purpose-built-examples and "real" applications, as well as several Redux usage stories - [Redux Architecture and Best Practices](./redux-architecture.md): many "lessons learned"-type articles after having used Redux #### High-Level Comparisons and Business Cases - **Using React is a Business Decision, Not a Technology Choice** 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/#/ A slideshow laying out a number of arguments for using React - **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 - **Productive Javascript Development** http://benmccormick.org/2015/11/25/productive-javascript-development/ Looks at 6 ways different frameworks make things "easy": concepts, reading/writing code, architecting / maintaining / debugging apps. - **How React Helped Us Scale a Large Web App** https://medium.com/opengov-developers/how-react-helped-us-scale-a-large-web-app-d89f96c4790a A look at how React has been used to scale the OpenGov app architecture in terms of both users and developers. - **The Other Reasons We Chose React** https://wheniwork.engineering/the-other-reasons-we-chose-react-fbb37e570999 A summary of how When I Work evaluated several different frameworks for future development, and the reasons why they picked React - **When Does a Project Need React?** https://css-tricks.com/project-need-react/ Some useful thoughts on when it makes sense to use React: when there's lots of state, spaghetti code, or lots of DOM management. - **Which Projects Need React? All of Them!** https://css-tricks.com/projects-need-react/ A response to the previous article, suggesting that React has benefits across a wide variety of applications. - **Why I'm betting on React Native for my next Startup** https://calbucci.com/why-im-betting-on-react-native-for-my-next-startup-3b8ff5ae03e4 A startup product lead gives several reasons why he's using React Native for their large app, including uniformity of experience, testing, recruiting, and scalability. - **Why Choose React?** https://www.lullabot.com/articles/why-choose-react Some high-level thoughts on the benefits of choosing React, including proven use at scale, influence on the community, versatility, and that it's "just Javascript". - **Why We Chose React To Help Serve Millions of Educators** 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. - **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. - **Why we built our new UI in React, from the ground up** https://blog.cloud-elements.com/dev-discuss-why-we-built-our-new-ui-in-react-from-the-ground-up The Cloud Elements team describes why they rewrote their UI in React, and how the React ecosystem worked well for their approach. - **Advocating for software quality at METRO** https://www.thoughtworks.com/insights/blog/advocating-software-quality-metro The METRO Cash & Carry team discusses how they've handled migrating parts of their app from Reflux to Redux, including motivation, business issues, the case for quality, and their strategy for migrating. #### Redux/Flux Comparisons - **Redux: Concept Over Implementation** http://www.schibsted.pl/2015/09/redux-concept-over-implementation/ Some high-level thoughts on why Redux over standard Flux - **Why use Redux over Flux?** http://stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux Another good post from Redux's author comparing Redux and Flux #### Other Comparisons - **Flux is the new WndProc** https://bitquabit.com/post/the-more-things-change/ https://news.ycombinator.com/item?id=10381015 An intriguing comparison between a React + a Flux-type architecture, and the classic Win32 WndProc message switch handling approach. Plenty of good discussion in the comments. - **I'm Sticking with React (For Now)** https://hackernoon.com/im-sticking-with-react-for-now-47b792be555d Some thoughts on the differences between React and other similar libs like Preact and Inferno, and why there's value in staying with React. - **My experience with Redux** https://medium.com/@ajchambeaud/my-experience-with-redux-90e4e4a31518 A look at Redux's influences, some experience using Redux, Dan Abramov's involvement with the community, and some other libs that may be interesting to look at. - **What's good about Redux** http://danielearwicker.github.io/What_s_good_about_Redux.html Some thoughts on Redux's core "what-if?" questions, and some of the potential implications of those decisions. - **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. - **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. - **Reflections on React** https://medium.com/@burkeholland/reflections-on-react-65d152a13d9e A former Telerik dev gives his thoughts on the current state of the React world, including how much people like it, use of standard JS syntax like classes, the variety of UI libs, and the lack of serious enterprise-class components like data grids and schedulers. Some good discussion in the comments, too. - **The delight of working on a React + Redux app** https://medium.com/dailyjs/the-delight-of-working-on-a-react-redux-app-affc22757e81 Some interesting personal opinions on the benefits of working with React+Redux, including explicitness, traceability, and easy unit testing. - **Don't Blame it on React or Redux** https://diessi.ca/blog/dont-blame-it-on-react-or-redux/ Some short but well-written thoughts that argue in favor of React and Redux's "do it yourself" / "don't prescribe how to solve everything" approach, and that blaming them for bad app design or boilerplate is wrong. - **What's So Great About Redux?** https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b https://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. - **Thoughts on Redux and its similarities with OOP** https://medium.com/@dhruvrajvanshi/thoughts-on-redux-and-its-similarities-with-oop-6d200f34656 Another post that's very similar to "What's So Great About Redux?". with thoughts on the overall benefits of Redux and some potential disadvantages in relation to use of TypeScript. Some good discussion in the comments, too. - **6 mistakes Reacters make that Re-framers avoid** https://purelyfunctional.tv/article/react-vs-re-frame/ https://news.ycombinator.com/item?id=15157527 https://news.ycombinator.com/item?id=15158334 Comparisons between common React/Redux patterns, and how ClojureScript developers using the Reframe toolkit might solve the problems instead. Some decent discussion in the HN comments, including one comment that directly responds to the points in the original article, and discusses how React+Redux give you the power to solve the specific problems you're dealing with. - **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 - **What's Your #1 Problem With React?** https://www.reddit.com/r/reactjs/comments/3pm4b8/we_all_love_react_but_whats_your_1_problem_with_it/ Developers discuss problems they've run into with React - **Application Architecture with React** https://news.ycombinator.com/item?id=10213905 More article discussion on React and Flux experiences - **"Pros and Cons of React and Flux"** https://www.reddit.com/r/reactjs/comments/39wsfi/what_are_pros_and_cons_of_using_reactjsflux/cs7msvp A FANTASTIC comment that points out how each JS framework is a reaction to a specific category of problems - **"Any Serious / Large / Real Web Apps with React and Flux?"** https://www.reddit.com/r/reactjs/comments/3jcdfk/has_anyone_did_any_serious_large_real_web/ Good discussion of scaling React and Flux past a small toy app - **"Redux feels bloat - what alternatives?"** https://www.reddit.com/r/reactjs/comments/3towfy/redux_feels_bloated_complicated_and_not_easy_what/ Thoughts on Redux, its ecosystem, and API - **"Getting Started with Redux" discussion** https://www.reddit.com/r/javascript/comments/3u0167/getting_started_with_redux_a_free_30part_video/ Some great discussion on real-world experience with Redux, particularly by user TheAceOfHearts - **"Why has Redux become so popular vs other Flux solutions"?** https://www.reddit.com/r/reactjs/comments/3u54ju/why_has_redux_become_so_popular_vs_altjs_and/ Thoughts on the benefits and pros of using Redux - **"Has anybody actually built a decent sized React app?"** https://www.reddit.com/r/reactjs/comments/3wi0cx/has_anybody_actually_built_a_decent_sized_react/ More good discussion on practical experiences - **"Here we see the culmination of the great Frameworks vs Libraries divide"** https://news.ycombinator.com/item?id=10969819 A great piece of insight: "pick and choose libraries" vs "use a full framework" is a personal choice based on trust and decisiveness - **"What are the real benefits of using Flux/Redux?"** https://www.reddit.com/r/javascript/comments/3w8uey/what_are_the_real_benefits_of_using_fluxredux/ Discussion of some of the actual practical advantages of using Redux, with some thoughts on similar structures in ClojureScript. - **"React Tutorial: Cloning Yelp"** https://news.ycombinator.com/item?id=11778663 https://news.ycombinator.com/item?id=11782234 Around 250 comments on React, dependency management, tutorial writing, and library churn. Also a great quote on the inherent complexity of developing any application. - **"9 things every ReactJS beginner should know"** https://www.reddit.com/r/javascript/comments/42fo3m/9_things_every_reactjs_beginner_should_know/ Some interesting discussion on easy vs simple, desktop vs web, and managing container components. - **"React.js Introduction for People Who Know Just Enough jQuery"** https://news.ycombinator.com/item?id=9856855 https://news.ycombinator.com/item?id=9859143 https://news.ycombinator.com/item?id=9860960 A long discussion thread about many aspects related to use of React and frameworks. Plenty of good discussion overall. In addition, buried in the overall thread, some specifically insightful comments about managic codebase size and complexity, and doing web apps "by hand" with direct DOM manipulation vs what a framework like React provides. - **"I'm a web dev who uses jQuery for a large app - How can I convince my bosses a JS framework is the way to go?"** https://www.reddit.com/r/javascript/comments/3v43qf/im_a_web_developer_who_uses_jquery_to_write_a/ Another long, in-depth discussion thread on the merits of JS frameworks, as well as "big-bang" rewrites - **"Why isn't AJAX present in Many examples of React/Flow/Redux?"** https://www.reddit.com/r/reactjs/comments/4pbq2x/why_isnt_ajax_present_in_many_examples_of/ A long discussion thread that covers several topics related to tutorials, articles, and official docs, and various approaches. Includes a couple comments from Dan Abramov on the limited size and scope of the React team. - **"How can I better market my Javascript library?"** https://news.ycombinator.com/item?id=11833301 The developer of a Redux wrapper library asks how to get more attention online. I offer a pretty long reply comment describing the various network effects involved in any addon library, and critique his specific library from a Redux user's perspective. - **"Our conversion from Angular to React"** https://www.reddit.com/r/reactjs/comments/4upt6t/netlify_our_conversion_from_angular_to_react/d5smdih A comment pointing out that React's "mostly the view" status enables it to be used in a wide variety of situations, which also means it works best when you are willing and able to come up with your own architecture. - **"Dan Abramov: Redux is not an architecture or a pattern, it's just a library"** https://www.reddit.com/r/javascript/comments/4rcqpx/dan_abramov_redux_is_not_an_architecture_or/ A discussion thread covering a number of aspects of Redux usage, including its relation with other libraries and patterns such as event sourcing. - **"Why isn't AJAX present in many examples of React/Flow/Redux?"** https://www.reddit.com/r/reactjs/comments/4pbq2x/why_isnt_ajax_present_in_many_examples_of/ Discussion of why a typical React app is made up of many different libraries and pieces. - **"Confused: Redux or MobX?"** https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/ An in-depth thread comparing the two libraries. Includes comments from both Dan Abramov of Redux and Michel Weststrate of MobX describing their libraries, as well a number of other good comparisons. - **"A SoundCloud client in React and Redux** https://news.ycombinator.com/item?id=11890229 Includes an extended discussion on use of Redux with forms - **"Why Learning Angular 2 was Excruciating"** https://news.ycombinator.com/item?id=12534296 https://news.ycombinator.com/item?id=12536634 Another very long thread about the JS ecosystem and versioning. The linked comment describes how React, Redux, and Webpack have brought predictability to a particular application. - **"React perf and optimization tests"** https://twitter.com/AdamRackis/status/751486423232966656 Discussion of React's performance compared to an existing Handlebars/Knockout app - **"Why is everying in Javascript changing so fast?** https://news.ycombinator.com/item?id=11833301 https://news.ycombinator.com/item?id=12760268 https://news.ycombinator.com/item?id=12758514 Yet another rant thread about Javascript churn, but with a couple very insightful comments about the unique complexities and challenges involved in writing applications for the web. - **"Youtube is being rebuilt on Web Components"** https://www.reddit.com/r/javascript/comments/59ax4f/youtube_is_being_rebuilt_on_web_components_and/d97rsdd/ Some interesting thoughts on how various frameworks have approached composition, and how React helps make it more approachable. - **"Modern JS developer workflow makes me sad"** https://www.reddit.com/r/javascript/comments/5fphiw/modern_js_developer_workflow_makes_me_sad/ A fairly well-written rant about problems a dev was experiencing due to complexity of build tools. There's extended discussion with some excellent suggestions and advice, and ultimately the author was able to resolve some of the complaints about build times and sourcemaps. - **"Create an Instagram-like App with React, Node, and Redux"** https://www.reddit.com/r/javascript/comments/5pyeni/tutorial_create_an_instagramlike_app_with_react/dcvlvzw/ A humorous comment summarizing the benefits of using React over jQuery, and Redux/MobX along with plain React. - **"Is it a good practice to use Create-React-App for learning?"** https://news.ycombinator.com/item?id=13944449 https://www.reddit.com/r/reactjs/comments/60vurv/is_using_create_react_app_bad_practice/ My comments addressing why CRA exists, and why it's a good idea to use it when learning React (especially in comparison to a "learn Webpack+Babel first" approach). - **"React/Redux or Angular 2 better for big enterprise project?"** https://www.reddit.com/r/javascript/comments/5wixxc/reactredux_or_angular_2_better_for_big_enterprise/ Some good discussion on what "enterprise" means, and the relative merits of various frameworks for building enterprise apps. - **"Redux is overused. Use setState first unless you know why you need Redux"** https://twitter.com/_jayphelps/status/846226930416345088 Jay Phelps, author of redux-observable, starts a long and involved Twitter thread about when it's appropriate to use Redux - use cases, app sizes, and reasons. Lots of interesting opinions. - **"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 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. - **"React is focused on making your code understandable, not on making simple examples as short as possible"** https://twitter.com/dan_abramov/status/930380316463726593 Some great points from Dan Abramov about React focusing on code predictability, maintainability, and data flow, rather than terseness. - **"Ways to compose components and functionality without altering components?"** https://twitter.com/andrestaltz/status/939123607426486274 https://twitter.com/andrestaltz/status/939257877600104448 https://gist.github.com/staltz/08bf613199092eeb41ac8137d51eb5e6 A couple very long Twitter threads with discussion from Andre Staltz (creator of Cycle), Dan Abramov, and Andrew Clark, looking at possible ways to handle composition of functionality for a "current humanized time" behavior. Lots of interesting comments in the Twitter thread, and the example gist. Also some useful comments from Andre on how someone from outside the React community might approach trying to solve problems using React. #### React's PATENTS License ##### License Change to MIT - **Relicensing React, Jest, Flow, and Immutable.js** https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/ Facebook's announcement that React and other projects are now using the MIT license - **4 Lessons from the 'React Patent License' Controversy** https://hackernoon.com/4-lessons-from-the-react-patent-license-controversy-3da3c4baf3a4 Some reactions to the MIT license change, and thoughts on how it affects React. ##### Prior Patents Discussion - **Dan Abramov Twitter threads addressing patent concerns** https://twitter.com/dan_abramov/status/754992075087745024 https://twitter.com/dan_abramov/status/766210972776337408 https://gist.github.com/gaearon/df0c4025e67399af72786d7ac7c819cc A couple of extended discussions from Dan debunking myths about React's PATENTS clause, and a collection of further related links - **React's license: necessary and open?** http://lu.is/blog/2016/10/31/reacts-license-necessary-and-open/ Analysis from a lawyer on the merits of React's patent license, and whether it still qualifes as "Open Source". - **React, Facebook, and the Revocable Patent License: Why it's a Paper Tiger** https://medium.com/@dwalsh.sdlr/react-facebook-and-the-revokable-patent-license-why-its-a-paper-25c40c50b562 Analysis of the React patent license from an IP lawyer, in response to the latest set of discussions and arguments online - **3 Points to Consider before Migrating Away from React because of Facebook's 'BSD+Patent' License** https://medium.com/progressive-web-apps/react-progressive-web-apps-part-2-d55c6bd4b316 Several valuable thoughts from a patent attorney on what the React PATENTS license actually means, how it relates to "React alternatives" like Preact, and how it affects React users legally. - **Open Source Community Over-REACTS to X Rated Code** https://heathermeeker.com/2017/08/19/open-source-community-over-reacts-to-x-rated-code/ A patent attorney gives perspective on how React's PATENTS license is similar to already-existing licenses, and what that means for both the Apache Software Foundation and other React users. - **Undersatnding the Facebook vs Apache Software Foundation License Kerfluffle** http://writing.jan.io/2017/08/19/understanding-the-facebook-vs-asf-license-kerfuffle.html A no-nonsense, clearly-written explanation of exactly what has happened regarding the Apache Software Foundation and the Facebook BSD+Patents license, including a timeline of events, summary of stances on both sides, and an FAQ on what it means. - **Comments from other companies on the acceptability of the license** https://wptavern.com/automattic-will-continue-to-use-react-js-in-calypso-despite-patent-clause https://twitter.com/paul_irish/status/754864479460929536 https://twitter.com/palmerj3/status/766236192669073412 https://blogs.windows.com/buildingapps/2016/04/13/react-native-on-the-universal-windows-platform/ Comments from developers at Automattic, Google, Spotify, and Microsoft, indicating they're fine with using React - **"Comment on the Apache Foundation's statement about Facebook's BSD+Patents license"** https://www.reddit.com/r/programming/comments/6nnxir/apache_foundation_bans_use_of_facebook_bsdpatents/dkb3v4p/?context=3 One of the best layman's summaries I've seen about what the patents file actually means and is intended to do. - **Further discussions** https://news.ycombinator.com/item?id=12108273 https://news.ycombinator.com/item?id=12108526 https://vimeo.com/170598656#comment_14699807 https://github.com/facebook/react/issues/7293 https://news.ycombinator.com/item?id=12597488 https://www.reddit.com/r/reactjs/comments/6nx6jv/is_anyone_here_concerned_about_the_recent/ More discussion threads regarding the PATENTS license ================================================ FILE: react-ajax.md ================================================ ### React and AJAX #### Basic Concepts - **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. - **How to make AJAX requests in React?** https://medium.com/@baphemot/how-to-make-ajax-requests-in-react-a6a52bb5a8b1 A helpful introduction to making AJAX requests, including libraries to use, where to run requests, and a couple examples of handling "loading..." status. - **Understanding React: data hydration / initialization** https://medium.com/@baphemot/understanding-reactjs-data-hydration-initialization-bacbb790c7cb Describes several possible approaches to loading data from a server at app startup, including API calls and ways to embed data into the page. - **Where to fetch Data: componentWillMount vs componentDidMount** https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/ A quick comparison of when these two lifecycle methods are called, and why AJAX calls should generally be done in `componentDidMount` - **How to fetch data in React** https://www.robinwieruch.de/react-fetching-data/ 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** https://www.javascriptstuff.com/react-ajax-best-practices Covers four ways to approach managing queries and data fetching. - **AJAX/HTTP Library Comparison** https://www.javascriptstuff.com/ajax-libraries A useful overview of the most popular AJAX libraries, including platform support and feature comparisons. - **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. - **How to make AJAX API calls in React** https://www.techiediaries.com/react-ajax/ Looks at common libraries that are used for making AJAX calls in React apps, discusses which lifecycle methods to use for starting AJAX calls, and gives examples of using `fetch` to make AJAX calls. #### Request Implementation Examples - **Implementing 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 - **Build a React + Flux App with User Authentication** https://scotch.io/tutorials/build-a-react-flux-app-with-user-authentication 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** 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 - **You don't need a fancy framework to use GraphQL with React** https://edgecoders.com/you-dont-need-a-fancy-framework-to-use-graphql-with-react-b47b436626fb A detailed explanation of how to construct GraphQL queries in a client and load the data into React components, without using any complicated libraries. #### Handling Request Status with State - **React-Redux issue #210: "dispatching in componentWillMount?"** https://github.com/reactjs/react-redux/issues/210#issuecomment-244774674 Some valuable extended discussion about how managing requests and data really involves several distinct possible states. - **"Slaying a UI Antipattern" comparisons** http://blog.jenkster.com/2016/06/how-elm-slays-a-ui-antipattern.html https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a https://medium.com/@gcanti/slaying-a-ui-antipattern-with-flow-5eed0cfb627b https://medium.com/@marsbergen/nice-pattern-for-redux-state-b8641b6ff9d1 https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-react-64a3b98242c Articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles. - **Better data fetching with RemoteDataJS** 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. - **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. ================================================ FILE: react-architecture.md ================================================ ### React Architecture and Best Practices #### Thinking in React - **Thinking in React** https://facebook.github.io/react/docs/thinking-in-react.html The original guide to breaking a UI into components and setting up data flow - **Removing User Interface Complexity, or Why React is Awesome** http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome A long walkthrough that builds up a pseudo-React-like library, demonstrating what React does and why you would want to use it. Has lots of embedded demos. - **Describing UI State with Data** http://nicolashery.com/describing-ui-state-with-data/ Demonstrates modeling the state and actions of an application, and updating the UI based on that. - **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 - **"Trying to understand why React prefers one-way data binding"** https://www.reddit.com/r/javascript/comments/4ni311/trying_to_understand_why_react_prefers_oneway/ Some excellent and very informative discussion on why the "one-way data flow" paradigm is used with React, vs two-way data binding. - **You're Missing the Point of React** https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a Dan Abramov explains React's real value: not popularizing the virtual DOM, but its use of composition and unidirectional data flow - **How to solve a Problem with React** https://codequs.com/p/HyLJOnBt/how-to-solve-a-problem-with-react/ A guide explaining ways to approach planning out a React app: composing individual components into larger components, or working top-down to plan out a component hierarchy. - **A Conceptual Introduction to React Components** https://ifelse.io/2016/10/20/introducing-react-components/ Examples and suggestions for how to approach breaking a UI concept into components with relationships - **Common React Mistakes - Unneeded State** http://reactkungfu.com/2015/09/common-react-dot-js-mistakes-unneeded-state/ Examples of how to think about and model data and UI state - **Understanding the Functional Revolution in Front-End Applications** 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** https://blog.risingstack.com/functional-ui-and-components-as-higher-order-functions/ Another tutorial on functional programming and how it relates to React - **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) - **Lessons Backbone Developers Can Learn From React** http://benmccormick.org/2015/09/09/what-can-backbone-developers-learn-from-react/ Discusses 3 lessons from React: "UIs are trees of reusable components", "modern JS is cleaner code", and "don't use DOM for state" - **State is an Anti-Pattern** https://www.reddit.com/r/reactjs/comments/3bjdoe/state_is_an_antipattern/ Some long-winded but useful thoughts on what makes a good component: "intuitive", "same input -> same output", "pure", and "only side effects are Flux actions" - **Why Local Component State is a Trap** https://www.safaribooksonline.com/blog/2015/10/29/react-local-component-state/ Thoughts on a "single state tree" vs local component state - **Functional Javascript: Reverse-Engineering the Hype** http://banderson.github.io/functional-js-reverse-engineering-the-hype/#/ A slideshow that talks about why functional-type programming matters, and how it relates to React-type apps. - **Principles of Strong Components** http://gedd.ski/post/strong-components/ Generic advice on designing good components. Not React-specific, but highly applicable to React. - **Some Thoughts on Function Components in React** https://medium.com/javascript-inside/some-thoughts-on-function-components-in-react-cb2938686bc7 Suggestions for ways to approach writing components, particularly using React's functional component syntax - **Why React is Awesome at Scale** https://medium.com/@cowi4030/why-react-is-awesome-at-scale-acfd9ce53c23 Examples of how React's use of declarative rendering simplifies the need to think about imperative state transitions. - **"What are the biggest 'aha' moments you had while learning React?"** https://www.reddit.com/r/reactjs/comments/5gmywc/what_were_the_biggest_aha_moments_you_had_while/ Some great discussion of important concepts and things to understand about React. - **React "aha" moments** https://tylermcginnis.com/react-aha-moments/ Tyler McGinnis shares some of his own "aha" moments in thinking about React - **From Backbone to React: How to write great code** https://frontendne.co.uk/talks/from-backbone-to-react-how-to-write-great-code A talk that looks at a number of key ideas that React helps you understand, and uses some comparisons between Backbone and React to illustrate them. - **Thinking Statefully** https://daveceddia.com/thinking-statefully/ Some great examples of how to think in declarative/stateful terms (such as passing an `isOpen` prop to a modal instead of calling `open()` ). - **Just Write Components** https://medium.com/lystable-product-engineering/just-write-components-75bd7875223e The Lystable team discusses how consistently writing encapsulated components leads to scalability in application development - **"Thinking in React" - A paradox statement** https://medium.com/@nimelrian/thinking-in-react-a-paradox-statement-33c19e2eb9e2 Some thoughts on the recent "Flux architecture hampered React innovation" Twitter discussion, including a list of three principles for React components, and tradeoffs of data flow handling. - **Thinking in React** https://www.codementor.io/radubrehar/thinking-in-react-8duata34n Some quick thoughts on how React's rendering approach can be applied universally, how it simplifies dealing with state transitions, and how its API helps devs build UIs naturally. - **Front End Center: Single-Responsibility Components: Object-Oriented Design in React** https://youtu.be/pSdp92Up8O8 An excellent screencast that discusses how the "Single Responsibility Principle" can be applied to organizing and designing React components. - **React's Ecosystem as a flexible Framework** https://www.robinwieruch.de/essential-react-libraries-framework/ Robin Wieruch discusses why React's "just the view" + "pick-and-choose libraries" approach is ultimately a good thing, and provides some opinionated decisions on good library choices for several categories such as app boilerplate, utility library, styling, AJAX requests, and more. - **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 - **Nine things every React beginner should know** https://camjackson.net/post/9-things-every-reactjs-beginner-should-know A solid list of concepts and suggestions for writing a React-based app. - **React Best Practices and Tips** http://www.toptal.com/react/tips-and-practices Several excellent guidelines for component structure and behavior - **Best Practices for Building Large React Applications** http://blog.siftscience.com/blog/2015/best-practices-for-building-large-react-applications Excellent advice for structuring components and improving reuse - **Designing Simpler React Components** https://medium.com/building-asana/designing-simpler-react-components-13a0061afd16 Tips on developing components for a scalable application, including using immutable data, pure functions, and some interesting suggestions on injecting data into components to improve separation of concerns. - **React.js Best Practices for 2016** https://blog.risingstack.com/react-js-best-practices-for-2016/ Some high-level suggestions for tools and approaches. - **How to avoid refactoring in your first React.js application** http://andrejgajdos.com/how-to-avoid-refactoring-in-your-first-react-application/ Covers several useful topics such as props vs state and use of shouldComponentUpdate, and links to several other articles on anti-patterns and component lifecycles. - **The State of React.js in 2016** https://speakerdeck.com/koba04/the-state-of-react-dot-js-2016 Looks at a number of things to consider when writing React code today, including deprecation of string refs and upcoming updates to the React rendering implementation - **React Playbook** https://github.com/kylpo/react-playbook https://medium.com/@kylpo/redux-best-practices-eef55a20cc72 A variety of tips, best practices, opinions, and comparisons related to React, Redux, Immutable.js, and MobX. Includes thoughts on component architecture, file structure, coding style, and other topics. - **React Best Practices & Patterns** http://seanamarasinghe.com/developer/react-best-practices-patterns/ A number of useful conventions for writing React code. - **React Gotchas** https://daveceddia.com/react-gotchas/ Three quick tips to keep in mind while writing React code (capitalize component names, close all JSX tags, and remember setState is asynchronous) - **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 - **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 - **React Best Practices** https://medium.com/@nesbtesh/react-best-practices-a76fd0fbef21 Suggestions and tips for effectively writing React and Redux - **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. - **The Top 5 [Tips] of Effective React** https://code.kiwi.com/the-top-5-of-effective-react-984e54cceac3 Tips include using container/presentational components, keeping components simple, and more. - **Advice on large scale React apps - rebuilding the social publishing platform for Latam** https://medium.com/taringa-on-publishing/advice-on-large-scale-react-js-apps-rebuilding-the-biggest-social-publishing-platform-for-latam-1f4c8fa35a4f Lessons learned from migrating a PHP application to a universal React/Redux/Webpack application, including introducing React to a team, documentation, types, and more. - **11 lessons learned as a React contractor** https://medium.com/@jolyon_russ/11-lessons-learned-as-a-react-contractor-f515cd0491cf https://news.ycombinator.com/item?id=13332138 A number of useful tips, including using multiple small components instead of one customizable one, migrating build processes, keeping things simple, and more. Extended discussion in the HN comments. - **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, and much more. - **10 Reasons why I moved from Angular to React** https://www.robinwieruch.de/reasons-why-i-moved-from-angular-to-react/ Robin Wieruch gives some good thoughts why he chose to focus on React. A nice overview of some of React's benefits. - **Our journey migrating 100K lines of code from AngularJS to React** https://tech.small-improvements.com/2017/01/25/how-to-migrate-an-angularjs-1-app-to-react/ The Small Improvements team describes how they implemented an Angular>React migration, starting from the bottom up. - **Our Best Practices for Writing React Components** https://medium.com/code-life/our-best-practices-for-writing-react-components-dec3eb5c3fc8 A description of the MuseFind team's approaches for writing components - **Lessons Learnt Rewriting a React Library from Scratch** https://www.codecks.io/blog/2017/lessons-learnt-rewriting-react-lib/ Some suggestions for use of context, embracing components, and writing documentation - **10 React mini-patterns** https://hackernoon.com/10-react-mini-patterns-c1da92f068c5 A collection of simple but useful patterns for writing React code, from basic top-down data flow via props to formatting text for display. - **8 Tips for Dealing with Large React Codebases** https://medium.com/@l_e/8-tips-for-dealing-with-large-react-codebases-aed6235500a4 Several useful suggestions, including using guard clauses when rendering, writing descriptive component names, simplifying form change handlers, and more. - **How to Organize a Large React Application and Make It Scale** https://www.sitepoint.com/organize-large-react-application/ A number of practical suggestions for managing large codebases, including build config to simplify imports, folder structures, file naming, Redux, tests, and more. - **React Properly** http://www.benmvp.com/slides/2017/oscon/react-properly.html#/ A presentation by Ben Ilegbodu of Eventbrite, listing several useful best practices like use of ESLint, good structure for render functions, and more. - **You Can Spread Props in JSX, But Should You?** https://medium.com/@kylpo/you-can-spread-props-in-jsx-but-should-you-6cc3e766e281 Some thoughts on the pros and cons of using JSX's object spread operator, including examples of how it is compiled via Babel - **Techniques for decomposing React components** https://medium.com/dailyjs/techniques-for-decomposing-react-components-e8a1081ef5da Three useful techniques for splitting up components: splitting render methods, passing React elements as props, and extracting higher-order components. - **How to become a more productive React developer** https://dev.to/karljakoblind/how-to-become-a-more-productive-react-developer Quick suggestions for useful tools that increase productivity, including Prettier for formatting, ESLint for error checking, the React and Redux DevTools for debugging, and React-Hot-Loader for faster edits. - **8 Things to learn in React before using Redux** https://www.robinwieruch.de/learn-react-before-using-redux/ Robin Wieruch covers a list of key React concepts you should be familiar with before trying to tackle learning Redux or other major state management libraries. - **7 architectural attributes of a reliable React component** https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/ An excellent list of principles to consider when designing React components, including single responsibility, encapsulation, reusability, testability, and meaning. - **8 Key React Component Decisions** https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594 A list of important design decisions to consider when starting a React project, including use of a starter kit, preferred component definition approach, state management, styling, and more. - **Is React SOLID?** https://dev.to/kayis/is-react-solid-630 Looks at the SOLID architectural principles, and discusses how those apply to React components. - **Clean Code vs Dirty Code: React Best Practices** 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 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** 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** https://medium.freecodecamp.org/reusable-web-application-strategies-d51517ea68c8 Looks at how to run an app in reusable ways via iframes, reusable app components, and reusable UI components. - **Integrating React in a 6+ Year Old Rails App** https://blog.codeship.com/integrating-react-in-a-6-year-old-rails-app/ Discuss techniques for using React in an existing Rails app. Focus is a bit more on the Rails side of things, but some useful info. - **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. - **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. ================================================ FILE: react-component-composition.md ================================================ ### React Component Composition #### Higher-Order Components - **Mixins Are Dead. Long Live Composition** https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 A look at some of the issues with using mixins, and reasons why higher-order components are (usually) an improvement. - **Mixins Considered Harmful** https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html https://news.ycombinator.com/item?id=12087796 Dan Abramov explains why the React team discourages use of mixins, and prefers HoCs - **Higher Order Components: Theory and Practice** http://engineering.blogfoster.com/higher-order-components-theory-and-practice/ Gives practical use cases for HOCs, such as authentication, routing, and data management, with samples. - **Sharing and Testing Code in React with Higher Order Components** http://blog.carbonfive.com/2016/02/02/sharing-and-testing-code-in-react-with-higher-order-components/ Demonstrates extracting HOCs from existing code, and testing them. - **Higher Order React Components** http://natpryce.com/articles/000814.html A solid explanation of what HoCs are, with examples and use cases - **Higher Order Components: A React Application Design Pattern** https://www.sitepoint.com/react-higher-order-components/ A discussion of how to use Higher Order Components to keep your React applications tidy, well structured and easy to maintain. Also, how pure functions keep code clean and how these same principles can be applied to React components. - **Connected Higher Order Components with React and Redux** http://www.avitzurel.com/blog/2016/08/03/connected-higher-order-components-with-react-and-redux/ Demonstrates creating HoCs that are connected to Redux - **React, Higher Order Components, and Legacy Applications** http://browniefed.com/blog/react/ Examples of how to integrate React into an existing application using HoCs - **React Higher Order Components in depth** https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e A very detailed article looking at some advanced HoC patterns - **Real World Examples of Higher Order Components** http://rea.tech/reactjs-real-world-examples-of-higher-order-components/ Explanations and examples of HOCs and their uses - **ReactCasts: Higher Order Components** 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. - **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 - **Higher Order What?** https://dev.to/kayis/higher-order-what A quick introduction to the concept of Higher Order Functions and Components - **Reusable State with Higher Order Components** https://daveceddia.com/extract-state-with-higher-order-components/ An easy-to-read explanation of how HOCs work, and examples of how to extract common logic into a reusable HOC - **Why you should keep your React components pure by using HOCs** https://medium.com/@DjamelH/why-you-should-keep-your-react-components-pure-by-using-hocs-67e5c7f80c81 Walks through extracting stateful behavior into an HOC so that it's more reusable and the wrapped components are simpler. - **A gentle introduction to Higher Order Components** https://www.robinwieruch.de/gentle-introduction-higher-order-components/ An excellent article demonstrating several ways to use HOCs to manage conditional rendering logic in a reusable way. - **Why Higher Order Components Make Sense** https://medium.com/javascript-inside/why-higher-order-components-make-sense-fe4145b4e305 Several examples and some discussion of how HOCs can be used to compose and transform behavior. - **Simple explanation of Higher-Order Components** http://blog.jakoblind.no/simple-explanation-of-higher-order-components-hoc/ A short, easy-to-read explanation of the basic concepts and examples of HOCs. - **Real World Higher-Order Components** http://blog.jakoblind.no/real-world-higher-order-components-hocs/ Several useful examples of actual HOCs, such as adding a hidden prop, providing toggle functionality, and only showing a component if a feature flag is turned on. - **Composing React components through props transference** https://blog.echobind.com/composing-react-components-through-property-transference-d8bc2dbecef5 Quick examples of how to use `React.children.map()` and `React.cloneElement()` to pass props onto arbitrary child elements. - **Higher Order Components in React** https://www.sitepen.com/blog/2017/08/15/higher-order-components-in-react/ Shows an example of a React app that needs to authenticate routes, and how a HOC can help handle that in a reusable way. Also includes example HOCs for A/B-testing features, collecting metrics, and injecting props. - **Save the "zombines": How to add state and lifecycle methods to stateless React components** 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. - **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 - **Function as Child Components** https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9 Explains the "function as a child" technique as an alternative to Higher Order Components - **ReactCasts: Function as Child Component** https://www.youtube.com/watch?v=WE3XAt9P8Ek A screencast that introduces the idea of Functions as Children and demonstrates usage - **React Patterns - Render Callback** 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 - **Declarative Components in React** https://blog.echobind.com/declarative-components-in-react-b21ced9895b5 Demonstrates ways to make reusable flexible components using the "function as a child" pattern. - **Upgrade your React.js HOC with renderProps** https://reactrocket.com/post/turn-your-hocs-into-render-prop-components/ Gives examples of how to adapt HOCs for use with the render props pattern. - **Use a Render Prop!** https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce https://news.ycombinator.com/item?id=15651808 Michael Jackson describes why he gave his "Never Write Another HOC" talk, looks at some of the problems with both mixins and HOCs, and how render props can help solve those. There's some related discussion in the HN comments. - **How to give rendering control to users with prop getters** https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf Kent C Dodds describes how "prop getter" functions can be used with render props to provide more control over how rendering behavior is hooked together. - **Rendering a function with React** 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. #### Functional Composition - **Functional React Series - Part 1: Get your App outta my Component** https://medium.com/@adamterlson/functional-react-series-part-1-get-your-app-outta-my-component-92656ae13e25 Part 1 in a series about writing React applications by treating components as functions, not templates. - **Functional Components with React stateless functions and Ramda** https://medium.com/@mirkomariani/functional-components-with-react-stateless-functions-and-ramda-e83e54fcd86b Examples of using Ramda functions to compose together components - **Composing React Components with Ramda** https://medium.com/let-s-learn/lets-learn-composing-react-components-with-ramda-5db457997554 Another set of examples showing how to use composition of small functional components to create a larger set of behaviors. - **Deconstructing the React Component: A Functional Approach to Building React Apps** https://jaysoo.ca/2017/04/30/learn-fp-with-react-part-1/ https://jaysoo.ca/2017/05/10/learn-fp-with-react-part-2/ An excellent series that shows how to apply advanced Functional Programming techniques towards combining and composing React components together. - **How to add state to functional components using Recompose** http://blog.jakoblind.no/2017/04/03/how-to-add-state-to-functional-components-using-recompose/ Some quick examples of using the Recompose library to wrap components with additional behavior. - **Top 5 Recompose HOCs** https://medium.com/@abhiaiyer/top-5-recompose-hocs-1a4c9cc4566 A list of 5 useful HOCs provided by the Recompose library, including `branch` and `withHandlers`. - **ReactCasts #11: Recompose** https://youtu.be/SQtrgiLy3Fo A screencast that introduces the Recompose library and explains some of its useful tools like `withState` and `branch`. - **Destroy All Classes: Turn React Components Inside Out with Functional Programming** https://www.bignerdranch.com/blog/destroy-all-classes-turn-react-components-inside-out-with-functional-programming/ Demonstrates progressively refactoring a class component with logic into separate functional components, and then tying them together with Recompose - **A React journey: from vanilla, to type-safe, to monadic** https://medium.com/@giuseppemaggiore/a-react-journey-from-vanilla-to-type-safe-to-monadic-41beaa386910 Demonstrates adding TypeScript to a JS React app for type-checking, then using a specialized library called Monadic-React to perform complex and type-safe composition of React components and logic. - **Using Recompose to build higher-order components** https://blog.bigbinary.com/2017/09/12/using-recompose-to-build-higher-order-components.html Examples of refactoring components using the Recompose library, including use of `branch` and `compose`. - **Curry away in React** 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 - **Functions as Child Components and Higher Order Components** http://rea.tech/functions-as-child-components-and-higher-order-components/ Comparisons and examples for these two component patterns - **Simplifying life with React render callbacks** https://medium.com/@adamrackis/simplifying-life-with-react-render-callbacks-cb37d58e55 An overview of several different ways to wrap up components, including cloning children, HOCs, and render callbacks. - **"HOCs vs render callbacks / function-as-child"** https://twitter.com/mjackson/status/890725796117176321 https://twitter.com/acdlite/status/890727843302301700 A short but interesting Twitter thread with some comments from Michael Jackson, Andrew Clark, and others, on the mental differences between using HOCs and render callbacks. - **Never Write Another HoC** https://youtu.be/BcVAq3YFiuc Michael Jackson demonstrating that a component with render prop can do anything a HOC can do, and more. - **React Composition Patterns from the Ground Up** https://hackernoon.com/react-composition-patterns-from-the-ground-up-8401aaad93d7 Comparison of patterns such as Lifting State, Higher-Order Components, Render Callbacks, and "Renderless" State Providers, and how they relate to React's component model. - **Solving the problems of Higher Order Components without throwing the baby out with the bathwater** https://hackernoon.com/solving-the-problems-of-higher-order-components-without-throwing-the-baby-out-with-the-bathwater-40ddc72df5aa A response to some criticisms of HOCs, such as indirection and naming collisions, showing some ways to compose HOCs to avoid the issues. - **Randomness in React Props** https://medium.com/@joshuawcomeau/randomness-in-react-props-3929c1669f8b Demonstrates several approaches to structuring logic for generating values and passing them to children, including initialization in a constructor, creating a wrapper component, and using a function-as-a-child. - **Simplifying life with React render callbacks** https://medium.com/@adamrackis/simplifying-life-with-react-render-callbacks-cb37d58e55 Compares several approaches for passing data from a parent component directly to a child, including cloning children, using a HOC, and using render props. - **React Developer's Everyday Struggle - Extending Big Applications** https://blog.callstack.io/react-developers-everyday-struggle-extending-big-applications-84ec4e62e2ad Looks at different possible solutions to handling form inputs and validation logic, including existing form libs, a validation HOC, and a function-as-children approach. - **Seven patterns by example: the many ways to `type="radio"` in React** https://techblog.commercetools.com/seven-patterns-by-example-the-many-ways-to-type-radio-in-react-bfe14322bb6f Compares multiple approaches for rendering and controlling a group of radio inputs, including passing a list of options as an array, creating a RadioOption component, compound components, context, function as a child, prop getters, and dynamic RadioOption creation. - **How "Controllable" React components maximize reusability** https://medium.com/myheritage-engineering/how-controllable-react-components-maximize-reusability-86e3d233fa8e Gives examples of uncontrolled, controlled, and controllable components, looks at pros and cons of those approaches, and describes how controllable components improve reusability. - **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. ================================================ FILE: react-component-patterns.md ================================================ ### 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 - **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 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. - **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. - **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. - **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. #### 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. - **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://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** 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. - **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 Examples of using Higher Order Components to pass data to nested components using `context` - **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. - **"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. - **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. - **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. - **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 - **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. - **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. - **Modals in React** https://medium.com/@david.gilbertson/modals-in-react-f6c3ff9f4701 A demonstration of building a reusable modal component using the "portals" technique - **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. - **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. - **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. ================================================ FILE: react-deployment.md ================================================ ### 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. - **Surge vs Github Pages: How to deploy a create-react-app project** https://medium.freecodecamp.com/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089 Shows how to deploy a CRA-based app onto the Surge.sh and Github Pages static hosting sites - **Fullstack React: Deploying a React App** https://www.fullstackreact.com/articles/deploying-a-react-app-to-s3/ https://www.fullstackreact.com/articles/deploying-a-react-app-with-a-server/ A pair of articles that show how to deploy a React app's static assets onto Amazon S3, and a backend API server onto Heroku - **Deploying React + Redux to Heroku** http://www.thegreatcodeadventure.com/deploying-react-redux-to-heroku/ Covers configuring Webpack for production, setting up build tasks and environment variables, configuring an Express server, and pushing the app to Heroku - **Create-React-App with an Express Backend** https://daveceddia.com/create-react-app-express-backend/ A quick overview showing how to configure Create-React-App to proxy API requests to a separate server (example uses Express, but applies to any other app server). - **Create-React-App with Express in Production** https://daveceddia.com/create-react-app-express-production/ Shows how to set up an React app with an Express server that serves as both API server and static file server, and deploy it to Heroku. - **From React to an Electron app ready for production** https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3 Walks through the basics of configuring a Create-React-App-based Electron app and building it for production. - **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** http://serverless-stack.com/ A large, well-written, in-depth tutorial that covers all aspects of building a React app with an AWS "serverless" backend: creating an AWS account, setting up the serverless backend and API, building a React app that talks to the API, and deploying the React app on AWS. - **Using React in Multiple Environments** 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. - **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. - **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 ================================================ FILE: react-forms.md ================================================ ### React and Forms (Note: the "linked state mixin" and "two-way binding" approaches described in some of these articles are still valid, but _mostly_ discouraged at this point. The more idiomatic approach is "one-way data flow" with "controlled inputs".) **Related topics**: - [Redux Techniques: Redux and Forms](redux-techniques.md#redux-and-forms) #### "Controlled" and "Uncontrolled" Inputs - **React Docs: Forms** https://facebook.github.io/react/docs/forms.html The React documentation page on forms. Describes "controlled" and "uncontrolled" form inputs. - **React "controlled" vs "uncontrolled" inputs** https://gist.github.com/markerikson/d71cfc81687f11609d2559e8daee10cc An explanation of the terms "controlled inputs" and "uncontrolled inputs" - **React Form Components** http://donavon.js.org/react-forms/ A look at controlled vs uncontrolled inputs, with a useful note about issues with controlled inputs and certain browsers. - **Uncontrolled components are an anti-pattern** https://medium.com/@jedwards8/uncontrolled-components-are-an-anti-pattern-abbdd86fd39e Argues that uncontrolled components are a bad idea and should be avoided. - **ReactJS and controlled forms** http://leftdevel.com/blog/reactjs-controlled-forms/ A look at the difference between controlled and uncontrolled inputs, and some problems that can come from using uncontrolled inputs. - **Managing React Controlled Component State** http://spraso.com/managing-react-controlled-component-state/ Some short examples of how to properly manage state for controlled inputs - **Managing state and controlled form fields with React** https://blog.iansinnott.com/managing-state-and-controlled-form-fields-with-react/ Describes the concepts of "controlled" and "uncontrolled" inputs. - **React Hates me: "Overcontrolled" components** http://www.matthiaslienau.de/blog/2015/4/8/react-hates-me-overcontrolled-components Describes some specific issues with controlled inputs and the preventDefault method - **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 - **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. - **Controllable React Components** https://speakerdeck.com/lettertwo/controllable-react-components A slideshow discussing how React components can themselves either be controlled or uncontrolled, and introducing a library to help make components controllable. - **Collecting data from a wizard form** https://goshakkk.name/wizard-form-collect-info/ Examples of how to handle data management for a multi-step form - **React Forms: Using Refs** https://css-tricks.com/react-forms-using-refs/ A quick recap of what "controlled components" are, and some excellent examples of how to use refs to directly access values for different types of inputs in forms - **Understanding your options with forms in React** https://medium.com/@thegreengreek/understanding-your-options-with-forms-in-react-afedc91ebf3e A quick summary of the three major forms approachs (controlled inputs, uncontrolled inputs + refs, uncontrolled inputs + serialization), with code examples for each - **Transitioning from uncontrolled inputs to controlled** https://goshakkk.name/turn-uncontrolled-into-controlled/ Explains how to refactor React forms with uncontrolled inputs to use controlled inputs instead. - **Tightly Controlled Textareas - Building solid plain text editors in React** https://hashnode.com/post/tightly-controlled-textareas-building-solid-plain-text-editors-in-react-cj6yvu6yq00cls5wtrbbkw96d A tutorial for implementing controlled behavior for a simple Markdown text editor component, including examples. #### Form Tutorials and Usage - **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 - **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 - **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. - **Handling React Forms with Mobx Observables** https://blog.risingstack.com/handling-react-forms-with-mobx-observables/ Some examples of working with forms in React, using MobX for the data management. - **Radio Buttons and Checkboxes in React** http://react.tips/radio-buttons-in-reactjs/ http://react.tips/checkboxes-in-react/ Tutorials on managing various inputs in forms with React - **Building a Multi-Step Registration Form with React** https://www.viget.com/articles/building-a-multi-step-registration-form-with-react A form example that shows how to track the current form step, render the right form component, and store all the necessary form data - **Making dynamic form inputs with React** https://goshakkk.name/array-form-inputs/ Covers how to build a form that can add and remove entries dynamically, with examples. - **How to handle forms with just React** https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f Describes a different approach for reading and managing form data, besides the usual "controlled inputs" pattern, based on the Javascript FormData object. - **Should a form for editing update the underlying model?** https://goshakkk.name/react-forms-for-editing/ Some quick thoughts on ways to handle tracking data in a form - whether it should be fully controlled by a parent, or accept the initial values and report them when it's submitted. - **Modeling form state in React** http://beautifulcode.1stdibs.com/2017/03/23/react-form-state/ Examples of how to structure form state to handle values and validation. Applicable no matter what state management approach is being used. - **Better Form Management** https://medium.com/@robbiedelavictoria/better-form-management-37c994095b1c A couple useful examples of approaches for simplifying React form handling logic. - **Forms in React** http://presentations.survivejs.com/forms-in-react/#/ Slides for a workshop on approaches for managing forms in React. Includes summaries of the various major approaches for managing forms, and links to several useful form-related libraries. - **Some Thoughts on Forms in React** https://medium.com/javascript-inside/some-thoughts-on-forms-in-react-9ca2d9078c20 An extended look at several form-related concepts, including describing them as "view-driven" vs "model-driven", extracting form management into a Higher-Order Component, adding validation, and more. - **How to Work with Forms, Inputs, and Events in React** 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 - **Form Validation Tutorial with React.js** https://html5hive.org/reactjs-form-validation-tutorial/ A good example of setting up form validation in React - **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 A 2-part series, demonstrating how to use Ramda and FP approaches to create validation logic - **Form recipe: Conditionally disabling the Submit button** http://goshakkk.name/form-recipe-disable-submit-button-react/ Some simple examples of validating data from controlled inputs - **Instant form field validation with React's controlled inputs** https://goshakkk.name/instant-form-fields-validation-react/ Examples of how to perform validation during rendering, and immediately show which inputs are invalid - **Really Dumb Form Validation** https://medium.com/@l_e/really-dumb-form-validations-739611d2ffcd Some quick examples of simple but effective form validation handling inside of React components. - **Why not field-level validations?** https://goshakkk.name/y-no-field-level-validations/ Thoughts on why it's better to handle validation at the "whole form" level, rather than strictly per-field. - **Validating React forms upon submit** https://goshakkk.name/submit-time-validation-react/ Discusses core concepts of validating form inputs, and demonstrates how to handle validations on submit for both uncontrolled and controlled components. #### Other - **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. - **Comparison of form libraries in React** https://codebrahma.com/form-libraries-in-react/ A good comparison of several different React/Redux-based form libraries, with code snippets demonstrating usage. - **The Joy of Forms with React and Formik** https://keyholesoftware.com/2017/10/23/the-joy-of-forms-with-react-and-formik/ Looks at some of the complexities with handling forms in React, and how the Formik library can help simplify that logic. - **Painless React Forms with Formik** https://hackernoon.com/painless-react-forms-with-formik-e61b70473c60 Describes how the Formik library can help solve transforming props to form state, validation and error messages, and handling form submission. - **Formik - Handling files and reCaptch** https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc Demonstrates how to use the Formik library to accept uploaded files and work with reCaptcha validation. - **Final Form / React Final Form** https://codeburst.io/final-form-the-road-to-the-checkered-flag-cd9b75c25fe https://medium.com/@erikras/final-form-arrays-and-mutators-13159cb7d285 https://blog.cloudboost.io/final-form-decorators-calculated-fields-and-warnings-bf9cccd21b7e Erik Rasmussen, author of the popular Redux-Form library, introduces his new framework-agnostic Final Form library and its bindings for React. ================================================ FILE: react-hooks.md ================================================ ### 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. ================================================ FILE: react-implementation.md ================================================ ### React Implementation and Concepts #### Resources - **React Team core Notes** https://github.com/reactjs/core-notes Notes from the React team's weekly-ish meetings #### Core Concepts - **React Components, Elements, and Instances** https://medium.com/@dan_abramov/react-components-elements-and-instances-90800811f8ca Clarifies the differences between these related terms. - **React Elements vs React Components vs Component Backing Instances** https://medium.com/@fay_jai/react-elements-vs-react-components-vs-component-backing-instances-14d42729f62 Another solid comparison of what these terms mean, how React uses them, and how they differ. - **React - Basic Theoretical Concepts** https://github.com/reactjs/react-basic React team member Seb Markbage dives into his mental model for how React works. (Note: after the first few paragraphs, _not_ "basic" at all. Definitely an involved read, but informative.) - **Our First 50,000 Stars** https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html A post celebrating React's progress, including a history of how React's concepts came together over time - **React Elements vs React Components** https://tylermcginnis.com/react-elements-vs-react-components/ An explanation of how elements represent DOM nodes, what `createElement` does, and how components and rendering relate to elements #### Miniature React Implementations - **Building React from Scratch** https://www.youtube.com/watch?v=_MAD4Oly9yg Paul O'Shannessy walks through building a mini React implementation - **Building Your Own React Clone in Five Easy Steps** http://blog.javascripting.com/2016/10/05/building-your-own-react-clone-in-five-easy-steps/ Builds a mini-React implementation to illustrate the basic principles - **Reverse Engineering React** https://vimeo.com/album/3930691 A video series covering the implementation of an alternative/miniature version of React called "Reaction". Note that it doesn't look at React itself, but does cover all the equivalent concepts in a simpler implementation. - **Tiny React Reimplementation** http://jsbin.com/qiguyibolu/1/edit?js,output A _very_ tiny (100 lines) implementation of React's basic algorithm - **Tiny React Renderer** https://github.com/iamdustan/tiny-react-renderer A heavily commented learning implementation of a bare basic React renderer - **How to write your own Virtual DOM** https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060 https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76 A series of articles that build up a small Virtual DOM system from scratch. - **Write Your Own React.js!** https://medium.com/@calebmer/write-your-own-react-js-776dbef98b8 Some thoughts on why and how you might want to try writing your own React-alike, and some of the tradeoffs involved in writing something like React. - **Didact: Learning how React works by building it from scratch** https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5 https://engineering.hexacta.com/didact-element-creation-and-jsx-d05171c55c56 https://engineering.hexacta.com/didact-rendering-dom-elements-91c9aa08323b https://engineering.hexacta.com/didact-instances-reconciliation-and-virtual-dom-9316d650f1d0 https://engineering.hexacta.com/didact-components-and-state-53ab4c900e37 https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec An ongoing series of articles showing how to build parts of React's API and implementation, like `createElement`, `setState`, and the "Fiber" reconciliation approach. - **deact: React under the hood** https://github.com/lukebelliveau/deact A repository for learning about how React works internally. Has a link to a slide set that explains the concepts, and has branches for the various lessons. - **React Internals** http://www.mattgreer.org/articles/react-internals-part-one-basic-rendering/ http://www.mattgreer.org/articles/react-internals-part-two-componentWillMount-and-componentDidMount/ http://www.mattgreer.org/articles/react-internals-part-three-basic-updating/ http://www.mattgreer.org/articles/react-internals-part-four-setState/ A 5-part series that will recreate React from the ground up, illustrating how it works along the way. - **Making a custom React renderer** 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. - **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. - **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 - **React Events In Depth** https://www.youtube.com/watch?v=dRo_egw7tBc A Javascript Air episode focused on how React's Events system works, with React team members Dan Abramov and Ben Alpert - **Dive Into React Codebase: Handling state changes** http://reactkungfu.com/2016/03/dive-into-react-codebase-handling-state-changes/ A deep dive into how React implements component state and `setState()` - **On the Async Nature of `setState` in React** http://thereignn.ghost.io/on-the-async-nature-of-setstate-in-react/ Digs into the behavior of `setState`, and whether it is actually always async or not. Some decent info, although the final section does make some strange statements. - **setState() State Mutation Operator May Be Synchronous in ReactJS** https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm Digs into the behavior of React's setState method, and discusses when it may be synchronous vs asynchronous - **React Internals: Through the Lens of a Renderer** https://www.youtube.com/watch?v=VVxQAoNK_XQ A talk exploring how a React renderer works, and how to implement a tiny renderer - **Making custom renderers for React** http://goshakkk.name/react-custom-renderers/ Describes techniques for building custom rendering components that bridge between normal rendering and something like a canvas - **The Inner Workings of Virtual DOM** https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf An in-depth article that digs into how a Virtual DOM implementation works, using Preact as an example. Includes some detailed flowcharts of their behavior. - **React Internals** https://zackargyle.github.io/react-internals-slides/#/ An informative slideshow that walks through many aspects of React's implementation and behavior, including rendering, reconciliation, setState, Fiber, and more, with helpful visualizations. - **Preact Internals** https://medium.com/@asolove/preact-internals-1-the-easy-parts-3a081fa36205 https://medium.com/@asolove/preact-internals-2-the-component-model-36a05e32957b A series of posts that walk through the Preact codebase and explain its implementation, as well as the component model. - **The React Source Code: A Beginner's Walkthrough** https://medium.com/@ericchurchill/the-react-source-code-a-beginners-walkthrough-i-7240e86f3030 A long, detailed walkthrough of large parts of the React codebase - **Preact: Into the void 0** https://youtu.be/LY6y3HbDVmg A talk by Jason Miller, author of Preact, covering some of the core implementation concepts behind Preact (and other virtual DOM/component libraries), as well as some important aspects for DOM manipulation performance. - **Under the hood: ReactJS** https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/ An incredibly detailed walkthrough of React's entire codebase and execution flow, with many diagrams and flowcharts illustrating things. Very impressive. - **Preact Internals** https://medium.com/@asolove/preact-internals-1-the-easy-parts-3a081fa36205 https://medium.com/@asolove/preact-internals-2-the-component-model-36a05e32957b https://medium.com/@asolove/preact-internals-3-some-fiddly-little-bits-f353b1ad7abc A 3-part series that dives into the implementation and concepts of the Preact library codebase. - **An Interview with the React Team About Wordpress and Project Gutenberg** https://wpcouple.com/interview-react-team-facebook-wordpress-gutenberg/ A Wordpress community site interviews Dan Abramov, Andrew Clark, and Sophie Alpert about a variety of topics, including how they prioritize features, how React is tested, dealing with breaking changes, downsides of React, and aspects of Wordpress using React for its "Project Gutenberg" tool. - **The React Story: How Facebook's Instagram Acquisition Led to the Open Sourcing of React** https://stackshare.io/posts/the-react-story An extensive podcast interview with Pete Hunt, former React team member, recounting his early work at Facebook, how he began using React at Instagram, how that led to the growth of React inside Facebook, and how the decision to open-source React happened. Page includes a complete transcript of the discussion. - **How exactly does React handle events?** https://levelup.gitconnected.com/how-exactly-does-react-handles-events-71e8b5e359f2 A detailed look at how React's internal event handling works, including normalization of events, SyntheticEvent objects, and more. - **A look inside React Fiber** http://makersden.io/blog/look-inside-fiber/ Traces through the source code for React 16 / React Fiber, starting with the main `render()` function and diving down from there through the system. - **Understanding the React Source Code** https://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 - **React v16.0** https://reactjs.org/blog/2017/09/26/react-v16.0.html The React team officially announces the release of React 16 and describes the new features, including returning arrays, error handling, better server-side rendering, and more. - **React 16: A look inside an API-compatible rewrite** https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/ The React team describes how they handled building and testing React 16 to be backwards compatible with existing code. - **ReactConf 2017: A Cartoon Intro to Fiber** https://youtu.be/ZCuYPiUIONs A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations. - **Roadmap for React - Fiber and Beyond** https://www.youtube.com/watch?v=QW5TE4vrklU A keynote by Andrew Clark, describing the ideas behind React Fiber and the benefits it will give. - **React Fiber: A Closer Look at the New Engine of React** https://www.infoq.com/news/2017/05/react-fiber-closer-look A useful summary of the goals and implementation approach for the new React Fiber algorithm - **Top Resources to Explore React Fiber** https://hackernoon.com/top-resources-to-explore-react-fiber-9a2b19114520 A helpful list of links to further articles and resources for learning about React Fiber - **React Fiber for the rest of us** http://www.benmvp.com/slides/2017/reactboston/fiber.html#/ Slides from Ben Ilegbodu's ReactBoston presentation, which summarize the changes in React 16. - **What's new in React 16?** https://www.robinwieruch.de/what-is-new-in-react-16/ A very useful look at the new user-facing features in React 16, with code examples. - **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 - **What's Next for React - React Fiber** https://www.youtube.com/watch?v=aV1271hd9ew Andrew Clark describes the concepts, implementation, and potential benefits of the in-progress React Fiber internal algorithm reimplementation. - **React Fiber Resources** https://github.com/koba04/react-fiber-resources Links and info on the new React Fiber algorithm - **Why, What, and How of React Fiber** https://www.youtube.com/watch?v=crM1iRVGpGQ Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase. - **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. ================================================ FILE: react-native.md ================================================ ### React Native #### Tutorials - **React Native Express** http://www.reactnativeexpress.com/ A full set of tutorials for everything related to React Native - **Awesome React Native Education** https://github.com/hsavit1/Awesome-React-Native-Education An overview of the React Native ecosystem, in a similar style to react-redux-links - **React Native Workshop** https://rangle-io.gitbooks.io/react-native-workshop/content/ An introduction to React Native's concepts, in conjunction with Flexbox and Redux - **React Native Made Easy** https://www.reactnative.guide/ An extensive tutorial that teaches many aspects of React Native project setup and tooling while building an example notes app. - **Building the F8 App** http://makeitopen.com/ A dive into how the Facebook F8 conference mobile app was built, including planning, design, testing, and data management. - **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. - **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 - **Offline-First Apps with React Native and Redux** http://rationalappdev.com/offline-first-apps-with-react-native-and-redux/ A tutorial that builds out a cat GIF app using React Native, Redux, Node, and Express, and includes offline support. - **Let's Build: Cryptocurrency Native Mobile App with React Native + Redux** https://medium.com/react-native-training/bitcoin-ripple-ethereum-price-checker-with-react-native-redux-e9d076037092 https://medium.com/@wesharehoodies/tutorial-react-native-redux-native-mobile-app-for-tracking-cryptocurrency-bitcoin-litecoin-810850cf8acc https://medium.com/@wesharehoodies/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iii-a454dda156b https://medium.com/@wesharehoodies/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iv-b0e0c5ca2dca A 4-part tutorial series that shows how to set up a React Native project, add Redux, fetch data with Redux, and display that data with React. #### Specific aspects - **Using iOS Image Picker with React Native** http://goshakkk.name/react-native-camera-roll-image-picker/ Getting an ImagePicker to work on iOS is painful. It's barely documented. This tutorial-style article shows you everything you need to do to finally start asking users for images. - **Rapid cross-platform development with React Native** https://robots.thoughtbot.com/rapid-cross-platform-mobile-development-with-react-native Thoughts on how React Native enables code reuse and iteration, and a look at using the flexbox-based layout system on various platforms. - **Debugging React Native Applications** https://medium.com/reactnativeacademy/debugging-react-native-applications-6bff3f28c375 A useful description of tools and techniques that can be used to help debug RN apps. - **Under the hood of React Native** https://speakerdeck.com/mkonicek/under-the-hood-of-react-native A slideset digging into the guts of how React Native works - **What I learned from building my first React Native App** http://cmichel.io/lessons-from-building-first-react-native-app/ 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 - **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/ Demonstrates how to build an app that uses JWT authentication, and persist the token in storage to keep the user logged in - **React Native Effective Patterns** https://medium.com/the-poli/react-native-effective-patterns-3e0c9db6c32c Some useful suggestions for writing React Native apps, including use of callbacks, separating navigation from views, use of Redux, and more. - **React Native Layout Tricks** https://www.theodo.fr/blog/2017/04/react-native-layout-tricks/ Helpful examples for achieving specific UI layouts using RN's Flexbox implementation - **Where does authentication fit in a React Native app?** https://goshakkk.name/auth-in-react-native-apps/ Some quick thoughts on what authentication involves and how to handle it in an RN app - **The building blocks of React Native animations** https://goshakkk.name/react-native-animated-building-blocks/ Several useful sets of guidelines for thinking through and implementation animations in React Native, including "how should this change", visual state, transitions, and interpolations, plus links to additional resources for RN animations. - **6 Tips You Want to Know about React Native Performance** https://www.simplytechnologies.net/blog/2017/6/6/6-tips-you-want-to-know-about-react-native-performance Several useful suggestions for improving RN performance, including RN-specific suggestions like using FlatList instead of ListView, and pushing animations into native code. - **How we restructured our app with React-Navigation** https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26 Describes some of the history of the React-Navigation library, and shows some examples of how to use it with Redux and make a Higher-Order Component to work with it. - **A comprehensive guide for integrating React-Navigation with Redux including authentication flow** https://medium.com/@shubhnik/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf An extended tutorial that demonstrates connecting React-Navigation and Redux, and shows how to implement an authentication workflow. - **A Year of React Native: Styling** https://madebymany.com/stories/a-year-of-react-native-styling-part-1 https://madebymany.com/stories/a-year-of-react-native-styling-part-2 Looks at ways that styling in RN differs from styling on the web, and useful patterns for organizing styling logic in RN apps. - **React Native app performance: Major issues and insights on improving your app's performance** https://www.simform.com/react-native-app-performance/ A detailed look at common causes of perf issues in RN, such as memory leaks, large app size, and slow rendering, and discusses various solutions. - **React Native at Grofers: Using React Native components inside native views** https://lambda.grofers.com/starting-with-react-native-at-grofers-a-guide-to-using-react-native-components-inside-native-bbdd6a3470d4 Looks at the pros and cons of using RN components in native views, including turnaround shipping speed, approach for bridging views, and performance. - **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. - **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 ================================================ FILE: react-performance.md ================================================ ### React/Redux Performance and Optimization My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) list includes a number of useful tools for visualizing React component updates, in the [Devtools > Component Update Monitoring](https://github.com/markerikson/redux-ecosystem-links/blob/master/devtools.md#component-update-monitoring) section. #### React Components - **React Docs: Performance** 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. - **React, Inline Functions, and Performance** 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. - **Respectable React Components** http://kelle.co/react-perf-slides/ A slideshow that walks through the core concepts of managing good React performance. - **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. - **Index as a Key is an Anti-Pattern** https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318 A reminder that unique keys are the best idea for arrays of components. - **React.js pure render performance anti-pattern** https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f Looks at common ways that you might accidentally stop pure rendering from doing its job, such as passing in new object references or creating new functions as props. - **How to Make Your React Apps 15x Faster** https://reactjsnews.com/how-to-make-your-react-apps-10x-faster A couple quick tips: using NODE_ENV=production, and Babel's React constant/inline transformations - **Optimising React rendering** https://medium.com/@lavrton/how-to-optimise-rendering-of-a-set-of-elements-in-react-ad01f5b161ae Another couple quick tips: only updating changed elements, and making children smarter - **Performance optimisations for React applications** https://medium.com/@alexandereardon/performance-optimisations-for-react-applications-b453c597b191 Covers ways to make update checks fast and easy. (NOTE: the advice given to "denormalize" data may not be the best approach - see discussion with Dan Abramov in the comments.) - **Should I use shouldComponentUpdate?** http://jamesknelson.com/should-i-use-shouldcomponentupdate/ A reminder that `shouldComponentUpdate` is itself code that has to execute, and that using it involves measured tradeoffs. - **"shouldComponentUpdate - using it for performance optimizations"** https://www.reddit.com/r/reactjs/comments/4gfn26/shouldcomponentupdate_using_it_for_performance/ Discussion on pros, cons, and approaches to using `shouldComponentUpdate` - **A Cartoon Guide to Performance in React** https://www.youtube.com/watch?v=-t8eOoRsJ7M An excellent presentation by Lin Clark of Code Cartoons. Covers what work browsers do when rendering, what work React does, and the main ways you can improve React performance. Very clear and easy to understand. - **Component Rendering Performance in React** https://medium.com/modus-create-front-end-development/component-rendering-performance-in-react-df859b474adc A comparison of how fast rendering happens in React 14 vs 15, and functional components vs class components - **Performance Conditionally Rendered Content in React** https://gist.github.com/ryanflorence/a301dc184f75e929a263dc1e80399a28 A tip for improving performance when conditionally rendering components: use a function as a child, and only call that function if the condition is true. - **Dan Abramov - "Don't stress over binding in render"** https://twitter.com/dan_abramov/status/760199672824815616 Dan advises not to worry about binding methods in render functions unless profiling shows it's a real perf problem for you - **Real-World React Debugging** https://www.youtube.com/watch?v=0MGTONvtlrI http://jaredforsyth.com/real-world-react-debugging/#/ A talk on strategies for debugging React apps, with slides. - **Don't Use Bind when Passing Props** https://daveceddia.com/avoid-bind-when-passing-props/ https://www.reddit.com/r/reactjs/comments/4ri9x8/dont_use_bind_when_passing_props/ Advice on approaches to function binding, with further discussion. - **React Perf Debugging: Animation and FLIPping** https://engineering.siftscience.com/browser-dgaf-that-you-use-react/ https://engineering.siftscience.com/browser-dgaf-use-react-pt-2-flipping-react/ A deep dive into some tricky issues that come up with running animations, and some ways to work around those. - **Virtualizing the Virtual DOM** https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209 Discussion and examples of using the "virtualization" technique to only render list components that are currently in view. - **Creating more efficient React views with windowing** 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://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 - **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 Suggestions for using React's Perf API to benchmark component rendering, and use of shouldComponentUpdate to cut down on unnecessary renders. - **Why and How to Use PureComponent in React** https://60devs.com/pure-component-in-react.html A look into what React.PureComponent is, how it works, and how it can be used to improve performance - **React at 60FPS** https://hackernoon.com/react-at-60fps-4e36b8189a4c A look at several useful techniques for benchmarking and improving React application performance - **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`. - **Why Did This React Component Re-Render?** http://ericlathrop.com/2017/02/why-did-this-react-component-rerender/ A reminder that passing a style object in `render` will usually cause shallow-equality checks to fail, even if the style values are identical - **React is Slow, React is Fast: Optimizing React Apps in Practice** https://medium.com/dailyjs/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba A clear and informative explanation covering multiple aspects of performance, including use of the Chrome DevTools flame graph for visualizing perf, extracting components and implementing `shouldComponentUpdate`, connecting to Redux, and use of Recompose and Reselect to improve performance. - **Optimizing React Performance with Stateless Components** https://www.sitepoint.com/optimizing-react-performance-stateless-components/ Shows the basics of using functional components, discusses why `shouldComponentUpdate` is needed for perf improvements, and demonstrates use of `PureComponent` and the Recompose library as other possible approaches. - **Twitter Lite and High Performance React Progressive Web Apps at Scale** https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3 Excellent advice and information from the Twitter Lite dev team on how they optimized their app, including code splitting, ways to avoid "jank", optimizing React rendering, optimizing Redux usage, and more. - **Optimizing React Rendering** https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02 https://flexport.engineering/optimizing-react-rendering-part-2-7b2e9a9ea21f 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. - **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 - **Memoize React components** https://medium.com/@planttheidea/memoize-react-components-33377d7ebb6c Discusses the basic ideas of memoization, and shows how they can be applied to wrapping React components using the `moize` library (or other memoization libraries). - **When to use Component or PureComponent** https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81 Good advice on the potential benefits of using `PureComponent`, as well as several potential downsides or gotchas (such as binding functions in `render()`). - **The Virtual DOM and its Anti-Patterns** https://medium.com/riipen-engineering/the-virtual-dom-and-its-anti-patterns-aa4c523d00ed First in a 3-part series discussing causes of slow components and wasteful rendering. Later posts will cover ways to optimize Redux usage, and tools to find bottlenecks that can be optimized. - **How to greatly improve your React app performance** https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6 Discusses React perf issues like bad `sCU` implementations, changing the DOM too fast, and event/callback usage, with possible solutions. - **React Performance Fixes on Airbnb Listing Pages** https://medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4 Excellent practical discussion of actual perf issues that were showing up in Airbnb pages and how they resolved them. Covers performance recordings, handling initial renders, scrolling, only using component state for values that affect re-rendering, and more. - **Debugging React Performance with React 16 and Chrome DevTools** https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad Shows how to use the Chrome DevTools to profile React code using performance recordings, including analysis of recordings to track down perf issues. - **Demystifying Memory Usage using ES6 React Classes** 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 Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - **Progressive Web Apps with React** https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12 https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2 https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline-support-and-network-resilience-c84db889162c A multi-part series by Addy Osmani on building performant Progressive Web Apps, including page loading, code splitting, and offline handling. - **Progressive loading for modern web applications via code splitting** https://medium.com/@lavrton/progressive-loading-for-modern-web-applications-via-code-splitting-fb43999735c6 Examples of how to set up code splitting, and write components that encapsulate the process for improved loading times. - **Performance Optimizing a React Single Page App** https://medium.com/front-end-hacking/performance-optimizing-a-react-single-page-app-a68985fa72cc https://medium.com/@ryancollinsio/performance-optimizing-a-react-single-page-app-part-2-92a0f0c83202 A series of articles looking at various performance-related topics, including server rendering, asset optimization, code splitting, memoization, and immutable data. - **Javascript Start-up Performance** https://medium.com/dev-channel/javascript-start-up-performance-69200f43b201 Addy Osmani digs into the issues involved in parsing and compiling JS scripts on load, discusses how to measure performance, and gives advice for lower parse times. - **Improving first load time of a Production React App** https://hackernoon.com/improving-first-time-load-of-a-production-react-app-part-1-of-2-e7494a7c7ab0 A detailed look at the various approaches used by UrbanClap to improve their load time, including file chunking, on-demand loading, dropping non-critical libraries, and more - **Simple Pattern for Asynchronously Loading React Components** https://mackness.github.io/react/patterns/2017/03/20/simple-pattern-for-asynchronously-loading-react-components.html A quick example of using dynamic importing to lazy-load React components - **React Progressive Web Apps** https://medium.com/progressive-web-apps/react-progressive-web-apps-part-1-1cf381421672 https://medium.com/progressive-web-apps/react-progressive-web-apps-part-2-d55c6bd4b316 A pair of posts that cover how to set up an initial PWA and check its behavior against best practices, and how to add offline-first behavior to a React+Redux PWA. - **What profiling my Universal React-Redux app revealed** https://medium.com/@darioghilardi/what-profiling-a-universal-react-redux-app-revealed-c5cc4986353c Discusses using the Chrome DevTools to debug and do CPU profiling of a Node server process that was doing server-side rendering of a React app. - **Performance-tuning a React application** https://medium.com/@joshuawcomeau/performance-tuning-a-react-application-f480f46dc1a2 An excellent case study on improving load time for a small React+Redux app. Describes use of gzipping, image cropping, lazy loading, and more. - **A React and Preact Progressive Web App Performance Case Study: Treebo** https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299 An extensive technical deep dive into how Treebo optimized their React application for good performance on mobile devices. - **Firebase + React: Optimizing for the Real World** https://codeburst.io/firebase-react-optimizing-for-the-real-world-4d9edbbd54c5 Describes shrinking a React + Firebase app bundle from 1.7MB to 230KB by switching to smaller alternative packages and analyzing bundle size. - **A Pinterest Progressive Web App Performance Case Study** https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154 A deep dive into how Pinterest optimized their new PWA app, including route chunking, use of babel-preset-env, service workers, and use of normalized Redux state. #### Immutable Data - **Building Efficient UI with React and Redux** https://www.toptal.com/react/react-redux-and-immutablejs Builds a simple app using React, Redux, and Immutable.js, and looks at some of the most common misuses of React and how to avoid them. - **"Comparing React to Vue for dynamic tabular data"** https://news.ycombinator.com/item?id=11765477 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 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** http://stackoverflow.com/questions/37285200/react-redux-performance-optimization-with-componentshouldupdate Discussion of proper Redux connection structure and use of Immutable's `toJS()`, with links to further articles and discussions. - **"React-Immutable-Mixin vs PureRenderMixin" - comment from Lee Byron** https://github.com/jurassix/react-immutable-render-mixin/issues/19#issuecomment-222567064 Immutable.js author Lee Byron comments on a performance discussion, giving advice on suggested Immutable.js usage patterns - **"Immutable perf tip: avoid toJS"** https://twitter.com/leeb/status/746733697093668864 Another suggestion from Lee Byron to avoid use of Immutable.js's data conversion functions based on performance reasons. - **"Potential concerns with using Immutable.js"** https://www.reddit.com/r/javascript/comments/4rcqpx/dan_abramov_redux_is_not_an_architecture_or/d51g4k4?context=3 A comment discussing a number of potential negative tradeoffs when using Immutable.js, including both performance anti-patterns and API issues - **Persistent data structures and structural sharing: a reason to use Immutable.js** https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2 https://www.reddit.com/r/reactjs/comments/5h7pqz/persistent_data_structures_and_structural_sharing/ https://twitter.com/acemarke/status/806933658204372992 An excellent article that describes how Immutable.js's implementation can improve performance while updating large objects, with benchmarks. There's further good discussion on Reddit, and in the Twitter thread, Immutable.js author Lee Byron confirms that calling `toJS()` is _very_ expensive and should definitely not be used in a Redux `mapState` function. - **Should I use Immutable.js with Redux?** https://medium.com/@fastphrase/should-i-use-immutablejs-with-redux-58f88d6fd81e A well-written comparison of several pros and cons for using Immutable.js, including perf benefits, perf negatives, enforced immutability, and overhead of use. - **"Performance of immutable data updates"** https://www.reddit.com/r/javascript/comments/699d6i/whats_a_transducer/dh5nzad/?context=3 Some Reddit comments pointing out that there is always a cost to updating data immutably, but that it's worth considering that cost in the context of the application. #### Redux Performance - **Practical Redux, Part 6: Connected Lists, Forms, and Performance** http://blog.isquaredsoftware.com/2017/01/practical-redux-part-6-connected-lists-forms-and-performance/ Discusses the key considerations for performance in Redux apps, with some examples and pointers to further information. - **High Performance Redux** http://somebody32.github.io/high-performance-redux/ A detailed HTML slideshow that digs down into React Redux to show how `connect()`'s optimizations work, and has interactive demos to show various approaches. (Note: the code-related slides advance using the down arrow to step through different lines of code - don't miss that info!) - **How to optimize small updates to props of nested component?** http://stackoverflow.com/questions/37264415/how-to-optimize-small-updates-to-props-of-nested-component-in-react-redux Looks at how a normalized Redux state structure combined with multiple connected components can improve performance - **Redux TodoMVC Pull #1: Optimization** https://github.com/mweststrate/redux-todomvc/pull/1 An optimization pass for a Redux vs MobX benchmark, demonstrating several techniques - **Redux Issue #1751: Performance issues with large collections** https://github.com/reactjs/redux/issues/1751 Discussion of several factors that affect Redux performance - **Improving React and Redux Performance with Reselect** http://blog.rangle.io/react-and-redux-performance-with-reselect/ Covers how to use Reselect to define memoized "selector" functions that can cut down on duplicate work - **Chat discussion - summary of Redux connection perf considerations** https://gist.github.com/markerikson/53735e4eb151bc228d6685eab00f5f85 An overview of how having many connected components can improve performance - **Chat discussion - single connected component vs many connected components** https://gist.github.com/markerikson/6056565dd65d1232784bf42b65f8b2ad An extended chat log discussing pros and cons of various approaches to managing connected components in a Redux app - **React Performance Debugging: The Magic of Reselect Selectors** http://rea.tech/reactjs-performance-debugging-aka-the-magic-of-reselect-selectors/ Discussion of React perf topics, and how Reselect selector functions can improve perf for Redux apps - **Refactoring Components for Redux Performance** https://yahooeng.tumblr.com/post/152078809581/refactoring-components-for-redux-performance Discusses common perf issues, methods for analyzing perf, and ways to structure Redux-connected container components to cut down on re-rendering. - **React/Redux Performance Tuning Tips** https://medium.com/@arikmaor/react-redux-performance-tuning-tips-cef1a6c50759 A number of suggestions for improved performance with Redux - **An artificial example where MobX really shines and Redux is not really suited** https://medium.com/@dtinth/an-artificial-example-where-mobx-really-shines-and-redux-is-not-really-suited-for-it-1a58313c0c70 https://www.reddit.com/r/reactjs/comments/5hf4d4/an_artificial_example_where_mobx_really_shines/ https://github.com/dtinth/pixelpaint/pull/1 An excellent in-depth article that sets up a specific benchmark example, and compares the performance of a MobX implementation vs several different Redux-based implementations. There's valuable discussion in the Reddit comments, and Dan Abramov submitted a PR to the sample project that demonstrates some fairly simple changes that result in improved Redux performance. - **Performance Optimizations in Redux's `mapStateToProps`** http://cmichel.io/performance-optimizations-in-redux-mapstatetoprops/ Some quick tips on how to properly cache and memoize selectors for use in `mapState` functions - **Surprising polymorphism in React applications** https://medium.com/@bmeurer/surprising-polymorphism-in-react-applications-63015b50abc A Chrome V8 engine developer digs into the nitty-gritty details of how common Redux reducer patterns result in less-optimized behavior from the JS engine running the code. - **Redux isn't slow, you're just doing it wrong - an optimization guide for React-Redux** http://reactrocket.com/post/react-redux-optimization/ An excellent summary of the basic steps for good performance with React-Redux - **Measuring performance gains - AngularJS to React (with Redux or MobX)** https://medium.com/@guptagaruda/measuring-performance-gains-angularjs-to-react-with-redux-or-mobx-fb221517455 A highly detailed article that investigates and benchmarks performance between an Angular 1.x app and equivalent React+Redux and React+MobX apps in a variety of real-world use cases. Excellently written and researched. - **The most unknown Redux performance trick** https://medium.com/@jidefr/the-most-unknown-redux-performance-trick-986fdfe871fa Examples of how `connect`'s lesser-known `areStatesEqual` option can be used to skip unnecessary re-renders. - **Optimizing Redux Components** https://medium.com/riipen-engineering/optimizing-redux-components-cbaad062abc7 Discusses Redux-specific perf optimizations, such as avoiding unnecessary work in `mapState` functions, memoization, and advanced comparison function options for `connect`. - **React + Redux Performance and the Benchmarks to Prove It** https://tech.smartling.com/react-redux-performance-and-the-benchmarks-to-prove-it-79b0bc9f25a4 Describes an approach for benchmarking a React+Redux app to understand how much impact performance optimizations actually give. - **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. ================================================ FILE: react-redux-architecture.md ================================================ ### React/Redux Architecture **Related topics**: - [React Component Patterns](./react-component-patterns.md) - [React State Management](./react-state-management.md) - [React and Forms](./react-forms.md) - [React and AJAX](./react-ajax.md) - [React Architecture and Best Practices](./react-architecture.md) - [Redux Architecture and Best Practices](./redux-architecture.md) - [Project Structure](./project-structure.md) ================================================ FILE: react-redux-testing.md ================================================ ### React/Redux Testing #### React and Components - **Approaches to Testing React Components** http://reactkungfu.com/2015/07/approaches-to-testing-react-components-an-overview/ A great starting point to testing, looking at the main ways you can test component structure and state handling - **Test Driven React Tutorial** http://spencerdixon.com/blog/test-driven-react-tutorial.html Describes project setup and basic approaches, using the common stack of Webpack+Karma+Mocha+Chai+Sinon - **How to Test React.js Components** https://nemisj.com/how-to-test-react-js-components/ Covers what to test, and how to test things like props and shallow rendering - **Testing React Applications** http://12devsofxmas.co.uk/2015/12/day-2-testing-react-applications/ A long, in-depth article describing approaches and use of Tape, React TestUtils, and Enzyme - **TDD and React Components** https://medium.com/@nackjicholsonn/tdd-and-react-components-5ae5a9a5a7bf Detailed example of using TDD to design and develop a React component, using Teaspoon for testing - **What to Test in a React App** https://daveceddia.com/what-to-test-in-react-app/ General guidance on what types of tests you might want to write and what to test for. - **Testing React Applications** https://www.youtube.com/watch?v=59Ndb3YkLKA A presentation by Max Stoiber, looking at what types of things to test in a React/Redux application, and ways to use tools like Jest to speed up the testing process. - **Good Practices for Testing React Apps** https://medium.com/@TuckerConnelly/good-practices-for-testing-react-apps-3a64154fa3b1 Thoughts on writing end-to-end tests, unit tests, and integration tests for Reaact applications, including treating components as "black boxes". - **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 - **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. - **Testing React Components with Teaspoon and Unexpected** http://dchambers.github.io/articles/testing-react-components-with-teaspoon-and-unexpected/ A short but useful look at a couple testing libraries and ways to use them. - **Unit Testing React Components and Redux Reducers**  https://web.archive.org/web/20161028043905/http://pebblecode.com/blog/react-redux-unit-testing/  Some basic examples for testing reducers and components. - **Getting Started with TDD in React** https://semaphoreci.com/community/tutorials/getting-started-with-tdd-in-react Covers a typical Mocha+Chai+JSDOM+Enzyme setup, talks about why/how/what to test, and walks through several examples. - **Testing React Applications** https://youtu.be/KBhHsYlF4mQ A fantastic talk that goes through many important details of trying to test React components under JSDOM. - **Testing in React: Getting Off the Ground** https://medium.com/javascript-inside/testing-in-react-getting-off-the-ground-5f569f3088a A look at approaches and ways to start testing React components - **Testing React Applications Examples** https://github.com/mxstbr/react-testing A repo showcasing how to test various parts of a common React/Redux app using Mocha, expect and enzyme - **React TDD Guide** https://github.com/zpratt/react-tdd-guide A repo with step-by-step commits demonstrating approaches to testing React apps - **Idiomatic React Testing Patterns** https://gist.github.com/joshdover/235714771d94509a83609b16d232014a https://news.ycombinator.com/item?id=12087437 Several useful patterns for testing React components, with discussion on HN. - **A Step-by-Step TDD Approach on Testing React Components using Enzyme** https://web.archive.org/web/20161002211902/http://thereignn.ghost.io/a-step-by-step-tdd-approach-on-testing-react-components-using-enzyme/ An excellent article covering TDD, React, and Enzyme. - **How to Test React Components Using Jest** https://www.sitepoint.com/test-react-components-jest/ 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 Looks at using the React Storybook component editor to do UI testing - **Testing React Components with mocha-webpack** https://medium.com/@mmontoya/testing-reactjs-components-with-mocha-webpack-ce7f710d268c Looks at how mocha-webpack can be used to enable faster testing for React components - **Testing React Components with Enzyme and Mocha** https://ifelse.io/2016/04/04/testing-react-components-with-enzyme-and-mocha/ Examples of setting up a Webpack+Mocha test environment, and using Enzyme for implementing tests - **Testing for PropType Errors in React** https://daveceddia.com/testing-for-proptypes-errors/ Some quick examples that use Sinon to check for error logging to help verify correct prop usage during testing. - **Testing React Applications** https://blog.logrocket.com/testing-react-applications-part-1-of-3-ebd8397917f3 Describes several types of unit tests that can be written in a React app (component tests, component tests, storybook tests), and the intent and benefits of each. - **Testing React Applications with Jest** https://auth0.com/blog/testing-react-applications-with-jest/ An in-depth explanation of how to use Jest for React testing, including setup, basic test structure, using Enzyme for rendering React components, mocking, and more. - **Never render in React testing again** https://medium.com/@planttheidea/never-render-in-react-testing-again-fc4bcfc2f71d Some examples of using higher-order functions to simplify test logic - **React + TDD = Love** https://medium.com/@admm/test-driven-development-in-react-is-easy-178c9c520f2f A tutorial that walks through a TDD-based approach to building components in an application. - **Snapshot Testing React with Jest** https://daveceddia.com/snapshot-testing-react-with-jest/ An excellent explanation of what "snapshot testing" is, and how to apply it to test React components using Jest - **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. - **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. - **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. - **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. - **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 - **Simple React/Redux Testing** https://medium.com/@caljrimmer/simple-react-redux-testing-cd579d4c2103 Looks at how to test rendering, behavior, and state of an application - **Unit Testing a Redux App** https://www.codementor.io/reactjs/tutorial/redux-unit-test-mocha-mocking Example ways to test pieces of a Redux app, including actions, reducers, and middleware - **React-Boilerplate Testing Docs** https://github.com/mxstbr/react-boilerplate/blob/v3.0.0/docs/testing/unit-testing.md https://github.com/mxstbr/react-boilerplate/blob/v3.0.0/docs/testing/component-testing.md Useful description of how to use Mocha, Expect, and Enzyme to test React and Redux code - **Testing Redux Applications** http://randycoulman.com/blog/2016/03/15/testing-redux-applications/ http://randycoulman.com/blog/categories/getting-testy/ A great writeup on how to specifically deal with testing pieces of a Redux app. The "Getting Testy" post series also has a lot of really good idea on how to go about writing tests and what kinds of things should be tested. - **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 - **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 - **Generative Testing using Redux: Reducers** https://medium.com/javascript-inside/generative-testing-your-redux-reducers-326d7368f284 A look at using "generative testing" to autoomatically test reducers with varying inputs - **Some Thoughts on Testing React/Redux Applications** https://medium.com/javascript-inside/some-thoughts-on-testing-react-redux-applications-8571fbc1b78f Guidelines and best practices for what and how to test in a React/Redux app - **Test Driving a change to a Redux application - Step by Step** https://medium.com/@kensodev/test-driving-a-change-to-a-react-redux-application-step-by-step-6c8856e7644c Demonstrates a TDD approach to reworking a Redux app feature - **Workship Slides: React and Redux Testing** http://www.slideshare.net/visualengin/workshop-23-reactjs-react-redux-testing A slideshow that gives a helpful overview of the React Test Utilities and Enzyme to test React components - **Low effort, high value: Integration tests in Redux apps** https://hackernoon.com/low-effort-high-value-integration-tests-in-redux-apps-d3a590bd9fd5 A discussion of the benefits of unit tests vs integration tests, with examples of how to test the various aspects of a Redux app - **Testing React/Redux Applications** https://github.com/leocristofani/testing-react-redux-applications Several useful resources for testing, including tips/guidelines, a sample application with tests, and links to more resources. - **How to test React and Redux with Redux-Saga and ReactDND** https://medium.freecodecamp.com/testing-react-and-redux-with-redux-saga-and-reactdnd-whew-dedebcbd78dd In-depth examples of testing React components using the Teaspoon library, as well as setting up tests for Redux-connected components, Redux-Saga functions, and uses of ReactDND. - **Simplify your Redux unit testing using Tape** 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** https://www.wsbrunson.com/testing-redux-containers/ Some useful tips for setting up tests for Redux-connected components - **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`. - **Redux Testing Step by Step: A simple Methodology for Testing Business Logic** https://hackernoon.com/redux-testing-step-by-step-a-simple-methodology-for-testing-business-logic-8901670756ce An excellent article by Tal Kol, describing how different types of tests fit together, the different kinds of Redux code that need to be tested, and how to write tests for each. - **TDDing React + Redux** http://engineering.pivotal.io/post/tdding-react-and-redux/ Helpful examples of patterns for testing various parts of a React+Redux app. - **Testing Redux: Async Action Creators** http://joeellis.la/testing-redux-actions/ Describes approaches for testing async action creators, particularly thunks that make AJAX calls. - **A guide to TDD a React/Redux TodoList App** https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-1-b8a200bb7091 https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-2-8d4cb2dc154c https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-3-f25c2289c54 https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-4-edb62e113c9b A 4-part series that demonstrates a Test-Driven Development approach to writing a React/Redux app, with detailed explanations of what each test example does. - **Building a React/Redux app with Test Driven Development** https://medium.com/@gilly.ames/building-a-react-redux-app-with-test-driven-development-b2ed73e60be9 A guided walkthrough that shows how to apply TDD to actions, reducers, and services - **Testing Replicated Redux** http://jimpurbrick.com/2017/07/31/testing-replicated-redux/ Describes how the use of "property testing" to generate possible actions helped the author track down bugs in his distributed multiplayer Redux application. - **Test-Driven Development with React and Redux, using Redux TDD** https://medium.freecodecamp.org/test-driven-development-with-react-and-redux-using-redux-tdd-3fd3be299918 https://hackernoon.com/redux-tdd-a-deep-dive-344cd7682a54 Describes using a specific set of helper functions to drive testing the behavior and data flow of a React+Redux application. - **Writing tests for redux-observable** https://dev.to/julioolvr/writing-tests-for-redux-observable Quick examples of how to set up tests for redux-observable epics. - **End-to-end testing on a React-Redux app** https://medium.com/@darioghilardi/end-to-end-testing-on-a-react-redux-app-10f5a26f2f61 Some high-level thoughts of how to best implement end-to-end testing in a way that works with React-Redux apps. Discusses use of Cypress, real APIs vs mock APIs, and some Rails-specific setup. - **How to Snapshot Test Everything in Your Redux App with Jest** https://hackernoon.com/how-to-snapshot-test-everything-in-your-redux-app-with-jest-fde305ebedea Detailed examples of how to test React components, Redux reducers, connected components, and selectors using Jest snapshot tests. - **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. - **Recipes for Testing Redux Actions and Reducers** https://densitylabs.io/blog/recipes-for-testing-redux-actions-and-reducers Useful examples of testing Redux code, using redux-thunk, chai, axios, redux-mock-store, and axios-mock-adapter. - **Unit Testing Redux Connected Components** 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. - **Interview: redux-saga-test-plan** https://survivejs.com/blog/redux-saga-test-plan-interview/ An interview with the author of the redux-saga-test-plan library, discussing how it works and how it can simplify the process of testing sagas. - **Subcutaneous Testing against React + .NET Applications** https://jeremydmiller.com/2017/12/19/subcutaneous-testing-against-react-net-applications/ Discusses a possible approach for using the Storyteller .NET integration testing tool to help drive a client-side Redux app for integration testing. - **Creating unit tests for redux-observable with marble diagrams** https://medium.com/@dmitrymartynov_84736/creating-unit-tests-for-redux-observable-with-marble-diagrams-b1e1b34e5f44 Describes how to set up tests for redux-observable epics, and define expectations for behavior using marble diagrams - **How I test redux-saga** https://codeburst.io/how-i-test-redux-saga-fcc425cda018 Short examples of a typical saga and a test for that saga, with some thoughts on a couple tricks for testing sagas. - **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 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** https://www.sitepoint.com/javascript-testing-unit-functional-integration/ A comparison of the various levels of tests you can run, and what roles they play in development. - **Reddit - "Karma/Mocha/Chai/Sinon setup"** https://www.reddit.com/r/javascript/comments/4217x6/ive_spent_six_hours_attempting_to_set_up/ Reddit user Cody_Chaos describes his approach to running unit tests under Node with Mocha, and integration tests in a browser with Karma. Includes several useful config setup snippets. - **Setting Up Javascript Testing Tools for ES6** http://x-team.com/2016/05/setting-up-javascript-testing-tools-for-es6/ Tips on configuring tools to work with ES6 code, and writing tests using ES6 - **Keep Calm and Love Javascript Unit Tests - Part 2: Asynchronism** http://www.theodo.fr/blog/2016/06/keep-calm-and-love-javascript-unit-tests-part-2-asynchronism/ Useful tips for testing asynchronous behavior under Mocha. - **Testing with Mocha and Webpack** 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. - **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. - **Keep Calm and Love Javascript Unit Tests** http://www.theodo.fr/blog/2016/04/keep-calm-and-love-javascript-unit-tests-part-1/ http://www.theodo.fr/blog/2016/06/keep-calm-and-love-javascript-unit-tests-part-2-asynchronism/ An introduction to using Mocha, Chai, and Sinon to write unit tests for various scenarios. - **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. - **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 - **Jest Testing Resources** https://facebook.github.io/jest/blog/2016/07/27/jest-14.html https://facebook.github.io/jest/blog/2016/10/03/jest-16.html Announcements of updates to the Facebook Jest testing tool, with links to further articles and information. - **Migrating Ava to Jest** http://browniefed.com/blog/migrating-ava-to-jest/ Some quick tips on switching your testing config to use Jest - **Web Application Test Strategy** https://blog.scottnonnenberg.com/web-application-test-strategy/ Thoughts on a "test pyramid" approach to testing, balancing speed and results between unit tests, integration tests, and automation. - **Enzyme vs Unexpected-React** https://medium.com/@bruderstein/enzyme-vs-unexpected-react-ee9cb099d12b A comparison of how Enzyme and Unexpected-React are used in testing React components, with arguments in favor of Unexpected-React - **Jest vs Mocha for React Testing** https://spin.atomicobject.com/2017/05/02/react-testing-jest-vs-mocha/ A comparison of the strengths and weaknesses of the Jest and Mocha testing frameworks - **Javascript unit testing frameworks: Comparing Jasmine, Mocha, AVA, Tape, and Jest** https://raygun.com/blog/javascript-unit-testing-frameworks/ A useful comparison and summary of the major unit testing frameworks available - **Effective Snapshot Testing** https://blog.kentcdodds.com/effective-snapshot-testing-e0d1a2c28eca Kent C Dodds looks at the pros and cons of using snapshot testing, and how to make snapshot tests more useful. - **Write tests. Not too many. Mostly integration.** https://blog.kentcdodds.com/write-tests-not-too-many-mostly-integration-5e8c7fff591c Some short thoughts on the value of different kinds of tests, with extensive discussion in the comments. - **Stubbing HTTP Reqeusts with Sinon** http://mherman.org/blog/2017/11/06/stubbing-http-requests-with-sinon/ An extensive tutorial that discusses the benefits of stubbing behavior in tests, setting up Mocha+Chai+Sinon, and using Sinon's stub functions in integration and unit tests. - **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. - **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. ================================================ FILE: react-routing.md ================================================ ### React and Routing #### Routing - **Routing React Apps: The Complete Guide** https://scotch.io/tutorials/routing-react-apps-the-complete-guide An in-depth article covering use of React-Router (v2) - **Do I Even Need a Routing Library?** http://jamesknelson.com/even-need-routing-library/ Another excellent article from James K Nelson that digs into the core concepts behind a topic, this time looking at what routing libraries do, issues with browser history, and what to consider when deciding on a routing approach. - **Webpack code splitting with Create React App and React Router** https://www.drewbolles.com/blog/2016/11/14/webpack-code-splitting-with-create-react-app-react-router/ A quick example of how to use React-Router's hooks to set up code splitting with Webpack - **Multifactor Authentication in your React Apps** https://scotch.io/tutorials/multifactor-authentication-in-your-react-apps A tutorial demonstrating how to use the Auth0 service, along with React Router, to implement multi-factor authentication for an app. - **How to Handle Routing in React** https://code.tutsplus.com/tutorials/understanding-how-to-handle-routing-in-react--cms-27355 A quick example of using React-Router v2 in a small React app - **React-router alternative: switch** https://medium.com/@daveford/react-router-alternative-switch-acd7961f08db Some examples of simply using switch statements and the history API for routing - **Routing in React, the uncomplicated way** https://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997 Examples of how to implement a custom routing approach, with minimal external dependencies. - **Build your own React Router v4** https://tylermcginnis.com/build-your-own-react-router-v4/ Tyler McGinnis, a React Training partner, walks through the process of building a miniature version of React Router v4 to help explain its concepts and implementation. - **A little bit of history** https://medium.com/@pshrmn/a-little-bit-of-history-f245306f48dd A deep look at the "history" library, which is the core of React Router and used by other routing libraries as well. - **Building a context-free React router** https://reactarmory.com/guides/context-free-react-router A tutorial that teaches how to create a simple push-state based React router without relying on React's context API. - **All About React Router 4** https://css-tricks.com/react-router-4/ A deep look at patterns and strategies for using React-Router v4 successfully. - **React Router DOM: set-up, essential components, & parameterized routes** https://blog.logrocket.com/react-router-dom-set-up-essential-components-parameterized-routes-505dc93642f1 An introduction to the concept of a router, setting up React-Router, essential parts of the library, and how to build routes that have parameters. - **Advanced React Router concepts: recursive path, code splitting, animated transitions, and more** https://blog.logrocket.com/advanced-react-router-concepts-code-splitting-animated-transitions-scroll-restoration-recursive-17096c0cf9db A tutorial that demonstrates how to implement a variety of useful features using React-Router v4. - **React Router 4 Tutorial From Scratch** https://appdividend.com/2017/09/12/react-router-tutorial-example-scratch/ A short tutorial demonstrating use of React Router v4 - **React Router v4 Unofficial Migration Guide** https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a Practical advice and specific steps needed to migrate an app from React-Router v3 to v4. - **Introduction to React Router** https://dev.to/aurelkurtula/introduction-to-react-router-ha A quick look at the basics of React-Router v4. - **React Router 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 - **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 - **Let the URL Do the Talking** http://formidable.com/blog/2016/07/11/let-the-url-do-the-talking-part-1-the-pain-of-react-router-in-redux/ http://formidable.com/blog/2016/07/19/let-the-url-do-the-talking-part-2-bargaining-and-acceptance-with-redux-and-react-router/ http://formidable.com/blog/2016/07/25/let-the-url-do-the-talking-part-3-empower-the-url-with-redux-little-router/ http://formidable.com/blog/2016/09/13/introducing-nested-routing-in-redux-little-router/ A series of articles discussing pain points when using React-Router and Redux together, and introducing a library called Redux-Little-Router as an alternative - **An Introduction to the Redux-First Routing Model** https://medium.freecodecamp.com/an-introduction-to-the-redux-first-routing-model-98926ebf53cb An article that argues in favor of keeping location state in Redux, updating it with actions, and syncing the browser URL based on that state. Includes a sample implementation for the approach, and a link to the actual library the author built. - **Pre Release: Redux-First Router - A Step Beyond Redux-Little-Router** https://medium.com/faceyspacey/pre-release-redux-first-router-a-step-beyond-redux-little-router-cd2716576aea An opinionated article that argues against the approaches used by both React-Router and Redux-Little-Router, in favor of basing routing state in Redux, with a corresponding new library. - **Routedux - Routing the Redux way** https://cjdev.github.io/routedux/ An article introducing a library that maps URLs to actions and vice versa. - **Entering/Leaving hooks of routing for Redux apps** https://medium.com/@kuy/entering-leaving-hooks-of-routing-for-react-redux-app-22e6eea055a5 Discusses use of enter/leave routing hooks for handling component data fetching needs, and how that is handled with the author's Redux-based routing library. - **Routes as State in React** https://blog.boon.gl/2017/06/29/routes-as-state-in-react.html Some thoughts on why tracking route data as state might make sense, and some examples of how to approach that. - **Redux-First Router data fetching; solving the 80% use case for async middleware** https://medium.com/faceyspacey/redux-first-router-data-fetching-solving-the-80-use-case-for-async-middleware-14529606c262 An extended article discussing "component-first" vs "route-first" data fetching approaches, and how the author's library helps solve the "route-first" approach. - **Redux-First Router: Just Dispatch Actions** https://survivejs.com/blog/redux-first-router-interview/ An interview with the author of the redux-first-router library. The author describes the core concepts, how it differs from React-Router, useful features, and why he developed it. - **A Redux First Router Saga** https://medium.com/@bryanfillmer/a-redux-first-router-saga-67c2cda9252e Examples and discussion of how to use sagas in conjunction with Redux-based routing to handle side effects that are connected to route changes. - **Redux First Router - First Impressions** https://www.dailydrip.com/topics/react/drips/redux-first-router-first-impressions A short tutorial that shows how to add redux-first-router to a CRA project and configure it. - **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 - **How to Build a React Application with User Login and Authentication** https://stormpath.com/blog/build-a-react-app-with-user-authentication Builds a small React app from the ground up, with use of React-Router for routing and the Stormpath SDK to handle authentication and authorization. - **JWT Authentication with React + Redux** 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 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 - **Dealing with Authentication in React** 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. - **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. - **How to Implement Authentication for Your React App** https://medium.appbase.io/how-to-implement-authentication-for-your-react-app-cf09eef3bb0b https://medium.appbase.io/securing-a-react-web-app-with-server-side-authentication-1b7c7dc55c16 A pair of posts that demonstrate implementing both client-side and server-side authentication behavior for a React/Node app. - **Protected Routes and Authentication with React Router v4** https://tylermcginnis.com/react-router-protected-routes-authentication/ A great tutorial that shows how to create routes that only authenticated users can access. - **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 - **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. ================================================ FILE: react-server-rendering.md ================================================ ### React Server Rendering - **What's New with Server-Side Rendering in React 16** https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67 Sasha Aickin, who wrote most of React 16's new SSR implementation, gives a very detailed look at how the implementation and behavior have changed. - **React for Beginers: Creating an Isomorphic React App** https://medium.com/codingbox/react-for-beginners-creating-isomorphic-react-redux-app-and-deploying-it-on-heroku-6a313f8f3693 An in-depth article describing an isomorphic project configuration and deployment - **React.js: Server side rendering** http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/ An example of setting up server rendering using React-Router and Express - **ReactJS: Server side rendering with router v4 and redux** http://crypt.codemancers.com/posts/2017-06-03-reactjs-server-side-rendering-with-router-v4-and-redux/ A follow-up to the previous post that shows how to implement SSR using React-Router v4 instead of v3, and includes use of Redux as well. - **Build a Universal Javascript App** https://www.packtpub.com/books/content/build-universal-javascript-app-part-1 https://www.packtpub.com/books/content/build-universal-javascript-app-part-2 A tutorial that discusses some benefits of building a universal app, and walks through building an app with Express, React, and React Router. - **React is gaining ground as a universal server side templating system** https://medium.com/@velmu/react-is-gaining-ground-as-a-universal-server-side-templating-system-26fe02eebe12 Some thoughts on using React as a template rendering engine, integrated into various server-side language stacks. - **Server Side React** https://remysharp.com/2016/12/07/server-side-react A well-written article detailing lessons learned trying to use React to render on the server, including tools used, bumps in the road and links to further resources - **Universal React Rendering: How We Rebuilt SitePoint** https://www.sitepoint.com/universal-react-rendering-sitepoint/ The SitePoint team explains how they added server-rendered React content into their existing Wordpress application - **React on the Server for Beginners: Build a Universal React and Node App** https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app Details building a React app that renders on both the client and the server - **Going Isomorphic with Python and React** https://dev.to/__amol__/going-isomorphic-with-python-and-react A look at how to use DukPy and React together to write an isomorphic web application with Python without even installing Node.js. - **Server side rendering with React, React Router v4, React Helmet, and CSS Modules** https://blog.digitalkwarts.com/server-side-rendering-with-reactjs-react-router-v4-react-helmet-and-css-modules/ A detailed tutorial demonstrating how to set up a production-ready SSR application - **Code Cracked for Code Splitting + SSR in Reactlandia: React Loadable + Webpack Flush Chunks** https://hackernoon.com/code-cracked-for-code-splitting-ssr-in-reactlandia-react-loadable-webpack-flush-chunks-and-1a6b0112a8b8 Describes some of the problems involved in properly implementing both SSR and code-splitting, and how a combination of libraries seems to help solve those problems. - **Server-Side React Rendering** https://css-tricks.com/server-side-react-rendering/ A good tutorial that walks through the basic setup needed to start rendering React components into HTML in an Express server. - **Server-Render like a Pro /w Redux-First Router in 10 steps** https://medium.com/faceyspacey/server-render-like-a-pro-w-redux-first-router-in-10-steps-b27dd93859de A walkthrough for using the author's Redux-First Router library for managing SSR, including setting up Webpack configs. - **Introducing Second: a framework for mostly-static React applications** 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. - **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. - **React SSR** https://blog.eleven-labs.com/en/react-ssr/ A step-by-step guide to setting up an SSR React app from scratch, including use of Redux. - **Case study of SSR with React in a large e-commerce app** http://blog.jakoblind.no/case-study-of-ssr-with-react-in-a-large-e-commerce-app/ A set of tips and lessons learned from implementing SSR in an existing React app over the course of several years, including some concrete implementation details. - **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. - **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. - **Server-side rendering React apps** https://hph.is/coding/server-side-rendering-react A friendly introduction to setting up a basic SSR React 16 app from scratch, including simple rendering of HTML, addition of Webpack and Babel, and use of React-Router. - **Using React and Next.js to build a PWA** https://aerolab.co/blog/react-nextjs-pwa/ Shows how to build a Hacker News app using the Next.js SSR platform - **The simple guide to server-side rendering React with styled-components** https://medium.com/styled-components/the-simple-guide-to-server-side-rendering-react-with-styled-components-d31c6b2b8fbf A short walkthrough that sets up a basic React SSR app, and adds the styled-components library for styling - **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. ================================================ FILE: react-state-management.md ================================================ ### React State Management #### State Types and Data Flow - **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. - **Props vs State** https://github.com/uberVU/react-guide/blob/master/props-vs-state.md A quick summary of the differences between "props" and "state" in React components - **The 5 Types of React Application State** http://jamesknelson.com/5-types-react-application-state/ Describes different categories of state: data, communication, control, session, and location - **"M" and "C" in "MVC"** 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. - **Exploring React's State Propagation** https://www.sitepoint.com/exploring-reacts-state-propagation/ Discusses data flow in React, the difference between `state` and `props`, and the usefulness of immutability - **Redux'ing without Redux** https://medium.com/@m.mollaverdi/reduxing-without-redux-75dbd5c05336 Thoughts on how some of Redux's goodness can perhaps be utilised without actually using Redux. - **Dataflow through React** https://jurassix.gitbooks.io/dataflow-through-react/content/index.html An online book that covers a number of topics on React components and data flow. - **React Anti-Patterns: Props in Initial State** https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e Discussion of why using props to initialize a component's state may or may not be a bad idea. - **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 structure. - **React state management patterns** http://vijayt.com/post/react-state-management-patterns/ Useful summaries of some common patterns for managing state (encapsulated vs uni-directional flow, single store or multiple stores, shared state between components). - **Watch Out for Undefined State** https://daveceddia.com/watch-out-for-undefined-state/ Discusses the common mistake of making data requests and not having data fields initialized for use in the initial render, and looks at several ways to handle the issue. - **How to Work with and Manipulate State in React** https://www.sitepoint.com/work-with-and-manipulate-state-in-react/ Covers how to access and update state in components, the difference between state and props, and working with stateless components. - **Lowest Common Ancestor** https://blog.embermap.com/lowest-common-ancestor-fbf5d5313a1 An article that discusses the principle of keeping shared state at the "lowest common ancestor" of the components that need it. Actually talks about Ember, but the concepts are completely applicable to React as well. - **Understanding State and Props in React** https://hackernoon.com/understanding-state-and-props-in-react-94bc09232b9c A helpful explanation of the difference between "props" and "state". - **Local Storage in React** https://www.robinwieruch.de/local-storage-react/ Demonstrates how to persist state in React using local storage, how to use it as a cache, and how to make it expire. - **How to manage or eliminate React state without Redux** http://monicalent.com/blog/2017/07/23/manage-state-in-react/ An excellent writeup on techniques you can use to help manage state in React without using Redux, including only using component state for things that are really needed, extracting state management logic, and rethinking when you actually need stateful components. - **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` - **React component state cheatsheet** https://twitter.com/dan_abramov/status/749710501916139520 Dan Abramov pseudocodes his guidelines for when to put something into component state - **Where to Hold React Component Data: state, store, static, and this** https://medium.freecodecamp.com/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00 A great summary of different places to store state, and when and why you should use each. - **How to handle state in React: The Missing FAQ** https://medium.com/react-ecosystem/how-to-handle-state-in-react-6f2d3cd73a0c An article that dispels misunderstandings and answers common questions about how to handle state in React. - **Finding `state`'s place with React and Redux** https://medium.com/@adamrackis/finding-state-s-place-with-react-and-redux-e9a586630172 A look at when and how using React component state may be useful, even when using Redux for primary app state - **A case for setState** https://medium.com/@zackargyle/a-case-for-setstate-1f1c47cd3f73 An article arguing that React component state still has a number of uses. - **Using a function in `setState` instead of an object** https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1 An introduction to a lesser-known feature of `setState`: the ability to pass a callback function to update the state. Useful for ensuring proper updates. - **"Best kept React secret: declare state changes separately from component classes"** https://twitter.com/dan_abramov/status/824308413559668744 Dan Abramov shows some screenshots that demonstrate how to define state update functions outside a component, then pass them to `setState` - **Functional `setState` is the future of React** https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b Discusses passing a function to `setState` to perform updates, why that approach is useful, and how that pattern can be used to separate state update logic from component definition - **Does React have a `setState` problem? / `setState()` Gate: Navigating Behavior Confusion** https://twitter.com/i/moments/842710066826530816 https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82 Eric Elliott recently posted a tweet saying that `setState` is bad for learners, and advanced devs have learned to avoid it. That spawned a large Twitter thread arguing the idea. Elliott later posted an article explaining his concerns in detail. Some excellent reading and points to consider all around - the "Moments" link includes a few of the tweets, but the whole thread is worth reading. - **Understanding ReactJS: `setState`** https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b Several helpful tips and concepts for understanding how component state and `setState` work, including how to initialize component state, ways to call `setState`, and common errors. - **Stack Overflow: "Do I need to use `setState(function)` overload?"** http://stackoverflow.com/questions/43428456/do-i-need-to-use-setstatefunction-overload-in-this-case/43440790#43440790 Dan Abramov gives a great in-depth answer explaining when and why to pass an updater function to `setState` instead of passing an object - **"`setState` doesn't actually care whether you've mutated your data or not"** https://news.ycombinator.com/item?id=14706862 A couple comments from myself, talking about how `setState` actually behaves in practice in relation to mutation and immutability. - **Atomic `setState` Updates in React** https://alligator.io/react/getting-atomic-updates-with-setstate/ Discusses how the standard object form of `setState` can cause race conditions, while the functional form is more predictable. - **`setState` ftw** https://speakerdeck.com/michelebertoli/setstate-ftw Slides from Facebook dev Michele Bertoli's talk on how `setState` works, how to use it properly, and useful techniques for working with `setState`. ================================================ FILE: react-styling.md ================================================ ### React and Styling #### Basic Concepts - **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** 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** http://jsramblings.com/2017/09/22/understand-the-react-styling-paradigms.html An excellent, very readable summary of the three main ways to deal with styles in React (plain CSS, CSS modules, and CSS-in-JS). Lists some pros and cons for each one, and points to some additional resources for learning about them. - **CSS in JS** http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html Christopher Chedeau's classic talk that inspired the "CSS in JS" revolution - **Components: A Styling Odyssey** https://speakerdeck.com/alexlande/components-a-styling-odyssey Slideshow discussing pros and cons of various approaches to managing styles for components - **A Unified Styling Language** https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660 A fantastic article that reviews why people might want to write their styles in Javascript, explores possible benefits of doing so, and looks at how the "CSS" and "JS" communites can work together going forward. - **U&I With React** https://github.com/FarhadG/ui-react A free online book that teaches how to modular, extendable, and scalable component-based UIs. Covers best practices, and techniques like CSS preprocessors, CSS modules, inline styles, and more. Chapters available to read for free on Github, and the Leanpub book can be picked up for free as well. - **All You Need To Know About CSS-in-JS** https://medium.com/@wesharehoodies/all-you-need-to-know-about-css-in-js-984a72d48ebc A clear summary of the differences between "inline styles" and "CSS-in-JS", the pros and cons of using CSS-in-JS, and quick examples of using some of the most popular CSS-in-JS libraries. - **The CSS Holy War & How To Think Beyond Dogma / A Brief History of CSS-in-JS: How We Got Here and Where We're Going** https://medium.com/gitconnected/the-css-holy-war-how-to-think-beyond-dogma-e2c67692d409 https://medium.com/gitconnected/a-brief-history-of-css-in-js-how-we-got-here-and-where-were-going-ea6261c19f04 A pair of articles that look at the history of CSS, discuss the problems it tries to solve, and describe the use of CSS-in-JS as a way to help solve certain use cases in today's apps. - **Four ways to style React components** https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 Quick examples of plain CSS, CSS modules, inline styles, and the styled-components library. - **The best "styling in React" tutorial you've ever seen** https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945 A comparison of how to style an application using inline styles, the styled-components library, and CSS modules. Has some good explanations of how each approach works. - **CSS-in-JS 101: All you need to know** https://github.com/stereobooster/css-in-js-101 An extensive look at different ways to handle CSS in React, with pros and cons, techniques for optimizing CSS, and comparisons of different CSS-in-JS libraries. - **Styling React** https://survivejs.com/react/advanced-techniques/styling-react/ An overview of the various approaches for styling React applications and components, and some of the problems each approach tries to solve. #### Components and Styling - **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** 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. - **React JS Style Components** https://www.youtube.com/watch?v=gNeavlJ7lNY A talk describing ways to better compose existing styles in an application, using components. - **Orthogonality and CSS in JS** https://benmccormick.org/2017/01/03/orthogonality-and-css-in-js/ Some thoughts on the "separation of concerns" concept, and how that relates to defining modular code and components (including styling). - **James Kyle's thoughts on styling and components** https://twitter.com/i/moments/861549552901468160 A Twitter thread from James Kyle, discussing how many of the arguments about styling and components are a result of people building different kinds of applications #### CSS-Based Approaches - **CSS Modules by Example** https://www.javascriptstuff.com/css-modules-by-example/ A set of 7 examples demonstrating ways to use CSS modules. - **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. - **How we made our product more personalized with CSS Variables and React** https://medium.com/geckoboard-under-the-hood/how-we-made-our-product-more-personalized-with-css-variables-and-react-b29298fde608 A walkthrough of how to build a themeable application using React components that update CSS variables for dynamic styles - **Styling your React app for beginners** https://medium.com/@dylan.broadbridge/styling-your-react-app-for-beginners-f6b39779019b Examples of basic CSS usage in a CRA-based application, including importing CSS files and use of inline styles in components for layout. #### JS-Based Approaches - **Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS** https://medium.com/maintainable-react-apps/journey-to-enjoyable-maintainable-styling-with-react-itcss-and-css-in-js-632cfa9c70d6 A long, in-depth article detailing one dev's progression through various approaches to handling CSS. - **Thoughts on Inline Styles** https://medium.com/@andrewingram/my-thoughts-on-inline-styles-da94682b5e35 A look at reasons why people might or might not use inline style approaches, and some opinions and suggestions on when to use different approaches. - **Style as a Function of State** https://medium.com/@rofrischmann/styles-as-functions-of-state-1885627a63f7 A look at how styles can be managed similar to UI, and an example using the author's new styling library - **Invidual Paint for your React Components** https://vimeo.com/album/4199344/video/187454103 A talk discussing various approaches to manage styles and themes for React - **Writing Your Styles in JS != Writing Inline Styles** http://mxstbr.blog/2016/11/inline-styles-vs-css-in-js Max Stoiber describes the key difference between "inline styles" and "CSS-in-JS" approaches: styles applied to elements vs styles added to a style tag. - **CSS-in-JS comparisons** https://github.com/MicheleBertoli/css-in-js A repository that contains implementation comparisons between many different CSS-in-JS libraries - **Comparing CSS in JS Solutions** http://ludovf.net/blog/comparing-css-in-js-solutions/ An overview of the various CSS-in-JS libraries and how their implementations differ. - **CSS in React Comparison Examples** https://github.com/joeshub/css-in-react A repo that demonstrates the basics of several different React CSS approaches and libraries. - **Should I use CSS-in-JS with React?** https://reactarmory.com/answers/should-i-use-css-in-js Some opinionated thoughts on the pros and cons of using CSS-in-JS approaches, including concerns about possibly security issues. - **Writing a CSS-in-JS Library from Scratch** 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 - **Styling ReactJS Applications** https://www.youtube.com/watch?v=19gqsBc_Cx0 Max Stoiber's talk at ReactNL 2016, comparing various options for styling React applications and introducing his new library, Styled-Components. - **Scalable Styles in Production JS** https://medium.com/front-end-hacking/scalable-styles-in-production-js-cde88016f357 Some comparisons between various approaches to managing styles (plain CSS, inline styles, CSS-in-JS), and why Aphrodite can help solve some of the issues that come up. - **"Styled Components or Glamor?"** https://www.reddit.com/r/reactjs/comments/5eq8ew/styled_components_or_glamor/ Discussion and comparisons between some different CSS-in-JS libraries - **The magic behind styled-components** http://mxstbr.blog/2016/11/styled-components-magic-explained/ A look at how the styled-components library uses the new ES6 "tagged template literals" feature to interpolate arguments and build up CSS - **Styled-Components: Enforcing Best Practices** https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/ A look at some best practices for writing styles for reusable components, and how the styled-components library can help enforce those principles. - **A 5-Minute Intro to Styled Components** https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55 A quick intro to the styled-components library - **CSS in JS: The Argument Refined** https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955 The author of the Este.js boilerplate describes his investigation of various React styling libraries, and how he ended up building his own - **Styled-Components in Action** https://medium.com/@lvarayut/styled-components-in-action-723852f2a93d A tutorial that walks through the main goals and concepts of Styled-Components, with examples - **Emotion: The Next Generation of CSS-in-JS** https://medium.com/@tkh44/emotion-ad1c45c6d28b The author of the Emotion library gives an overview of its principles, benchmarks, and uses. - **With styled-components into the future** https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c A talk transcript that discusses the history and future direction of the Styled-Components library, including how it works, improvements in v2, and plans for interoperability between CSS-in-JS libraries. - **The performance of styled React components** http://blog.primehammer.com/2017/09/27/the-performance-of-styled-react-components/ Benchmarks comparing size, build speed, and other aspects of different CSS-in-JS libraries. - **Styled-Components Nitty-Gritty** 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 - **Create That Component** https://medium.com/taitounited/create-that-component-1-7a2267bc2833 https://medium.com/taitounited/create-that-component-2-f6e6ba2e6b5a https://medium.com/taitounited/create-that-component-3-25f1f722cead A series of examples that build components for assorted concepts like toggle switches, ripple effects, and toasts, using libraries like styled-components. ================================================ FILE: react-techniques.md ================================================ ### React Tips and Techniques - **Get your React.js application translated with style** https://medium.com/@jamuhl/get-your-react-js-application-translated-with-style-4ad090aefc2c A short opinionated intro to several aspects of handling translation in a React app, by the author of a React internationalization library. - **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. - **SVG Patterns in React - Build a Twitter Wall** https://www.robinwieruch.de/react-svg-patterns/ A tutorial that covers several aspects of using SVG in React, and demonstrates how to use the svg-patterns library to generate patterend backgrounds. - **Translating React Apps** https://tech.gadventures.com/translating-react-apps-99dede52d924 Discusses how to use the React-Intl library to add translations to a React app - **Lessons from migrating a large codebase to React 16** https://blog.discordapp.com/lessons-from-migrating-a-large-codebase-to-react-16-e60e49102aa6 An excellent post from the Discord team recapping how they migrated an older React codebase to work with React 16, including use of codemods, replacing private API usage, upgrading dependencies, and other issues they ran into. - **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. - **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. - **Don't Over React! Rendering Binary Data** https://www.bignerdranch.com/blog/dont-over-react/ Useful approaches for handling file blobs in a React app - **Global Component Registration** 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 - **Exploiting Script Injection Flaws in ReactJS Apps** https://medium.com/dailyjs/exploiting-script-injection-flaws-in-reactjs-883fb1fe36c1 Describes how React is safe by design as long as it's used as intended, and looks at several possible attack vectors that can result from wrong use of React. - **How can I securely use CSS-in-JS with React?** https://reactarmory.com/answers/how-can-i-use-css-in-js-securely Covers several potential security holes that can result from allowing user input into CSS-in-JS libraries, with examples. #### JSX and Events - **Is JSX Still Relevant? Are there other options?** https://goshakkk.name/jsx-relevancy-options/ Gosha Arinich addresses complaints about using JSX and "mixing HTML into JS" by discussing how JSX is syntax sugar for `React.createElement()` calls, and how JSX is really optional. - **React Without JSX** https://mockbrian.com/blog/2017/08/11/react-without-jsx/ 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/ A look at ways to show React components inside of Backbone views, and some discussion of how to simplify React rendering when JSX isn't available by using libraries like `react-hyperscript-helpers`. - **How I learned to stop worrying and love the JSX** http://jamesknelson.com/learned-stop-worrying-love-jsx/ Discusses several aspects of JSX, including "separation of concerns", how JSX translates into function calls, that JSX is optional, when to avoid using JSX, and more. - **React without a build step** https://medium.com/@alexkrolick/writing-react-components-for-3rd-party-embedding-50331c18e26 Describes how using `React.createElement` instead of JSX eliminates the need for a compile step, compares examples of equivalent JSX and `createElement` usage, and shows how to write a small embeddable widget using React/Preact that doesn't need any build step at all. - **9 Things You Should Know About JSX** https://dev.to/sarah_chima/9-things-you-should-know-about-jsx-3bm A useful explanation of what JSX syntax is, how it works, and and how to use it. - **How the JSX Transform Works** https://jaketrent.com/post/how-jsx-transform-works/ A helpful explanation of how JSX tags are transformed into React elements, with example snippets - **JSX In Depth - an interactive tutorial** http://blog.klipse.tech/javascript/2016/12/14/jsx.html An interactive version of the "JSX in Depth" tutorial from the React docs - **Events in React** https://www.kirupa.com/react/events_in_react.htm An introduction to React's event handling system, including useful tips and some gotchas - **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://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 - **Intro to Debugging React Applications** https://medium.com/@baphemot/intro-to-debugging-reactjs-applications-67cf7a50b3dd An excellent introduction to the basic tools, concepts, and approaches for debugging React apps, including the browser's DevTools console, network tab, and source debugger, as well as the React DevTools. - **React v16 beta is out, suddenly everyone needs to catch UI errors** https://medium.com/shiftgig-blog/react-v16-beta-is-out-suddenly-everyone-needs-to-catch-ui-errors-37c8c4b527e9 Discussion and examples of using the new `componentDidCatch` and `ErrorBoundary` features in React 16, including a demo of what errors they will and won't catch. - **Catching exceptions using Higher Order Components in React 16** https://codeburst.io/catching-exceptions-using-higher-order-components-in-react-16-b8a401853a10 https://twitter.com/dan_abramov/status/890716011133100032 Examples of how to write a Higher-Order-Component that adds error boundaries. ALso worth contrasting with Dan's tweet, where he suggests that you shouldn't need to use HOCs to make use of error boundaries. ================================================ FILE: react-tutorials.md ================================================ ### React Tutorials #### Basic Introductions - **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 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 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** 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** https://scotch.io/tutorials/learning-react-getting-started-and-concepts Walks through the basics of components, JSX, props/lifecycle, and data flow - **React.js for Stupid People** http://blog.andrewray.me/reactjs-for-stupid-people/ A high-level overview of what React is, and some pros and cons - **React.js Tutorial and Guide to the Gotchas** https://zapier.com/engineering/react-js-tutorial-guide-gotchas/ Excellent look at what React and JSX are, and how to handle components and state. Also some excellent guidelines to be aware of when writing React code. - **Intro to the React Framework** http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660 Discusses components, JSX, component lifecycle, state/props, and mixins. Covers an older version of React, but most of the information is still useful. - **React.js Introduction For People Who Know Just Enough jQuery To Get By** http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/ A step-by-step tutorial that builds a simple component with jQuery and with React - **Build with React** http://buildwithreact.com/#articles A series of short articles introducing React concepts - **Survive.js Training** https://survivejs.github.io/training/#/0 An interactive presentation that goes through quick intros to Babel and Webpack before covering React basics, type checking, state management with Redux and MobX, async data, routing, performance, testing, and structuring applications. - **React From Zero** https://github.com/kay-is/react-from-zero A simple (99% ES2015 less) tutorial for React. Everything runs in the browser without a manual pre-compilation. - **React Hello World Examples** https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a A one-page set of simple snippets demonstrating usage of React - **I Learned How to be Productive in React in a Week and You Can, Too** https://css-tricks.com/productive-in-react/ A solid article written by a React newcomer, covering the basics, some gotchas, and important takeaways. Aimed at general web devs who are curious about React. - **React Enlightenment** http://www.reactenlightenment.com/ A straightforward, cookbook-style approach to learning React. (Currently a work-in-progress.) - **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 Workshop** https://github.com/jesstelford/react-workshop A self-directed set of workshop lessons that teach React basics. - **How React Do?** http://blog.jfo.click/how-react-do/ A tutorial written by someone as they learned React, stepping up through a series of React concepts. - **React Tutorials for Beginners** https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA A set of video tutorials introducing React concepts - **A Walk Through My "Just Enough React To Get You Into Trouble" Presentation** http://www.globalnerdy.com/2016/07/22/a-walk-through-my-just-enough-react-to-get-you-into-trouble-presentation-at-tampa-code-camp-2016/ A blog post version of a talk introducing React's core concepts, and demoing them in JSFiddle - **React Intro** https://docs.google.com/presentation/d/19DaabQG8CB4INKGpaHao0hIXcB7zmETg4IHOZkF7MPM A slideshow from Lee Byron, one of React's early team members, giving an overview of what React is, how it works, and how it can fit into applications. - **React 101: Condensed** http://erikaybar.name/react-101-medium-and-slides/ Links to an HTML slideshow and accompanying blog post that introduce just enough info to give you a taste of what React is about. - **React by Example** https://medium.com/front-end-hacking/react-by-example-part-1-76d3e2137cf4 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 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. - **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. - **React Holiday** https://react.holiday/ A series of short lessons that teach core React concepts, each with an interactive sandbox example to play with. - **The Beginner's Guide to React** https://egghead.io/courses/the-beginner-s-guide-to-reactjs A free video series from Kent C Dodds that teaches React fundamentals. Each lesson's sample code is a simple index.html file so you can focus on learning React, without distractions from other tools. - **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 - **React's Five Fingers of Death: Master these concepts to master React** https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3 A humorously-titled quick introduction to some of React's basic concepts - **13 Things you need to know about React** http://aimforsimplicity.com/post/13-things-you-need-to-know-about-react/ A list of useful key concepts to understand if you want to "speak React" - **React Interview Questions** https://tylermcginnis.com/react-interview-questions/ Assorted questions and answers that come up while learning React - **React Cheat Sheet** http://reactcheatsheet.com/ A filterable list of React's APIs and concepts - **React Cheat Sheet** https://ihatetomatoes.net/react-cheat-sheet-pdf/ A downloadable PDF with snippets demonstrating uses of React's syntax and APIs - **The philosophy of React** https://medium.com/@malinnaleach/the-philosophy-of-react-e2c126c61af3 Some high-level overviews of React's concepts, like state, props, and control flow - **A few things every new React developer should know** https://medium.com/deepscan/a-few-things-every-new-react-developer-should-know-part-1-93940e11800a https://medium.com/deepscan/a-few-things-every-new-react-developer-should-know-part-2-913e089e8fc2 - **An Introduction to React and the Surrounding Ecosystem in 2017** https://www.youtube.com/watch?v=qDTQzIzqodw A video presentation that describes some of the business case and benefits of using React, introduces React component concepts, and discusses some of the common tools in the React ecosystem. - **React Interview Questions** https://github.com/Pau1fitz/react-interview A large list of questions on React concepts that might pop up in an interview, with answers. - **A React Christmas** 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 - **Hacking with React** http://www.hackingwithreact.com/ A hands-on introduction to making a web app using React 0.14, React Router 1.0, ES6, Jest and more. Book is free to read online, and can also be purchased to get other formats. - **React/Flux Tutorial Part 1: React** http://spapas.github.io/2015/06/05/comprehensive-react-flux-tutorial/ Demonstrates building up a CRUD app UI using React - **Learn React** https://www.kirupa.com/react/index.htm A series of articles that cover a variety of topics, including project setup, components, styling, JSX, state, and more. - **React Primer (Draft)** https://github.com/mikechau/react-primer-draft A very long and well-written dive into React's concepts. Note that the "draft" label is accurate - it still says it covers React 0.12 and 0.13, and the non-React sections listed in the Table of Contents are empty. However, the existing React content is still useful, just be aware that some of the details may be out of date. - **React.js Program - React.js Fundamentals** http://courses.reactjsprogram.com/courses/reactjsfundamentals A 12-part text+video course that includes quizzes and a hands-on curriculum. The Fundamentals course is free, and the site also includes paid courses for other React and Redux-related topics. - **Step by Step Guide to React and Redux** http://satyam.github.io/book-react-redux/ A complete guide to building an app with React and Redux, from tool selection to project configuration to server and client code. (NOTE: Currently in-progress as of May 2016 - only covers project configuration and server-side setup so far, but the content looks promising.) - **React Speed Coding** https://leanpub.com/reactspeedcoding https://github.com/manavsehgal/reactspeedcoding A complete book that covers the entire application stack, from project setup to component design to connecting to a backend. Free to read online, other formats purchasable. Repo includes demos, samples, code from the book, and the manuscript. - **A Complete Intro to React** http://btholt.github.io/complete-intro-to-react/ An online workshop intended to get you up to speed on modern development and give you an idea what it's like to develop an app in the React ecosystem. - **React+Redux Workshop** https://github.com/btholt/react-redux-workshop An online workshop that gets you up to speed on using React and Redux - **React Tutorial: Build a Yelp Clone** https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/ A full-length walkthrough of how to build an app that uses routing, Google Maps integration, and more. - **Build a Music Player with React & Electron** https://scotch.io/tutorials/build-a-music-player-with-react-electron-i-setup-basic-concepts https://scotch.io/tutorials/build-a-music-player-with-react-electron-ii-making-the-ui https://scotch.io/tutorials/build-a-music-player-with-react-electron-iii-bringing-it-all-together A 3-part tutorial that builds a desktop music app with React for the UI and Electron for the desktop functionality - **Interactive Guide to Server-side rendering with Webpack, React, React Transmit, CSS modules and more** https://github.com/dimaip/server-side-rendering A Github project with a series of commits showing steps for putting together a basic app with server-side rendering and async data fetching. - **Building a Slack-Style Chat Application** http://codeutopia.net/blog/2016/01/17/learning-react-basics-and-building-a-basic-application-prototype/ http://codeutopia.net/blog/2016/01/25/getting-started-with-npm-and-browserify-in-a-react-project/ http://codeutopia.net/blog/2016/02/01/react-application-data-flow-where-and-how-to-store-your-data/ http://codeutopia.net/blog/2016/02/08/using-webrtc-and-react-to-build-a-basic-chat-server/ http://codeutopia.net/blog/2016/02/15/improving-our-react-workflow-with-es6-and-functional-stateless-components/ A multi-part series that builds up a chat application - **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. - **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. - **React 101** https://blog.tighten.co/react-101-building-a-gif-search-engine https://blog.tighten.co/react-101-using-redux 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 - **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/ 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/ https://www.fullstackreact.com/react-daily-ui/004-calculator/ A series of tutorials that build small apps, and explain React features and concepts that are used in the process. - **Building your First React Javascript App** http://www.primaryobjects.com/2016/09/19/building-your-first-react-javascript-app/ A tutorial that builds a small app demonstrating form inputs and remote data requests. - **From React to Flux to Redux** http://react.tips/from-react-to-flux-to-redux/ Four implementations of a shopping list application, built with varying approaches to help you see the differences: React/ES5, React/ES6, React/Flux/ES5, React/Redux/ES6. - **Create an Instagram-like App with Node.js, React, and Redux** http://www.eloquentwebapp.com/instagram-app-node-react-redux/ An in-depth tutorial that demonstrates several advanced React concepts, including routing, hot loading, use of Redux and redux-saga, and more. - **Building a chat component in React and ES6** http://www.zsoltnagy.eu/building-a-chat-component-in-react-and-es6/ An introduction to React by building a small chat app - **Learning React with Create-React-App** 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 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** https://scotch.io/tutorials/retrogames-library-with-node-react-and-redux-1-server-api-and-react-frontend Part 1 of a series building an application using Node, React, Redux, and MongoDB with Mongoose. - **Building a React Component Library** https://hackernoon.com/building-a-react-component-library-part-1-d8a1e248fe6c https://hackernoon.com/building-a-react-component-library-part-2-46fd4f77bb5c https://hackernoon.com/building-a-react-component-library-part-3-adb2cd0e021c A series that walks through how to build your own React component library and publish it to NPM. - **Building Powerful List Components in React** https://www.robinwieruch.de/react-paginated-list/ https://www.robinwieruch.de/react-infinite-scroll/ https://www.robinwieruch.de/react-advanced-list-component/ An excellent 3-part series that shows how to build real-world list components that handle pagination and infinite scrolling, using concepts like higher-order-components. - **Accept Stripe Payments with React and Express** https://www.robinwieruch.de/react-express-stripe-payment/ 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. - **Make Your Own Charts in React Without a Charting Library** 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. - **Building Tesla's Battery Range Calculator with React** https://medium.freecodecamp.org/building-teslas-battery-range-calculator-with-react-part-1-2cb7abd8c1ee A detailed guided walkthrough for building a React version of Tesla's battery range calculator application. Includes lots of code samples, and instructions for deploying a working version of the app. - **How to Build Free-Hand Drawing using React** https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/ Demonstrates building a component that listens to mouse events, saves the coordinates, and draws the resulting lines using SVG. - **React Crash Course for Beginners** https://code.tutsplus.com/series/react-crash-course-for-beginners--cms-1204 A tutorial series that teaches React concepts by building a movie gallery app. - **Creating a Blogging App Using React** https://code.tutsplus.com/series/creating-a-blogging-app-using-react--cms-1171 A tutorial series that shows how to build a blogging app with a server backend that includes routing authentication, and CRUD. - **Build a Metronome in React** https://daveceddia.com/build-metronome-react/ An easy-to-follow, step-by-step tutorial that demonstrates key concepts like loading data, initializing state, and handling input changes. - **Microservices with Docker, Flask, and React** 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. - **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. - **MERN Stack Tutorial** https://appdividend.com/2017/06/28/mern-stack-tutorial/ An extensive full-stack app tutorial that covers building an app with React on the client and Mongo+Express on the back end. - **Build a realtime PWA with React** https://blog.pusher.com/build-a-realtime-pwa-with-react/ Covers building a Progressive Web App that shows crypto-currency pricess, using Create-React-App and the Pusher service. - **Getting Started with React: Build a Cryptocurrency Ticker** https://sabe.io/tutorials/getting-started-with-react A tutorial that demonstrates how to build a simple real-time display of cryptocurrency prices. - **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 Also see the course sites listed in the [Community Resources](community-resources.md#online-course-sites) page. - **React.js Program** http://courses.reactjsprogram.com/courses The complete list of paid courses available on the site, including ES6/7 and Redux + Immutable.js. Courses on React Native and Universal React coming soon. - **React for Beginners** https://reactforbeginners.com/ A complete course that teaches how to build full real-world applications. Includes videos and source code. - **React: Up & Running** http://shop.oreilly.com/product/0636920042266.do http://www.phpied.com/react-up-and-running/ A book that starts with 0 setup and no tools, just React, then moves on to introduce additional syntax while building a CRUD app. Also covers linting, testing, build processes, and data management. **appendTo Instructor-led React Courses** https://appendto.com/courses/react-training/ appendTo offers instructor-led, hands-on React training courses on React, Redux, React Native, ES6, and Webpack. - **The Road to Learn React** http://www.robinwieruch.de/the-road-to-learn-react/ A pay-what-you-want ebook that teaches a good foundation for React itself, including React component patterns, working with data (fetching, sorting, and filtering), unit testing, and more. The author's blog posts are excellent, and this book is definitely recommended. - **Taming the State in React** https://www.robinwieruch.de/learn-react-redux-mobx-state-management/ 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** https://daveceddia.com/learn-pure-react/ A paid ebook that lays out a guided step-by-step process for learning React quickly and in the right order, with a focus on the fundamentals of React. - **Best ReactJS Books in 2017** https://reactdom.com/blog/reactjs-books A list of available React-related books, with some quick reviews. ================================================ FILE: redux-architecture.md ================================================ ### Redux Architecture and Best Practices **Related Topics**: - [Redux addons catalog - Apps and Examples](https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md): Links to various projects built with Redux, both purpose-built-examples and "real" applications, as well as several Redux usage stories #### When Should You Use Redux? - **You Might Not Need Redux** https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367 Dan Abramov discusses the tradeoffs involved in using Redux. - **You Might Not Need Redux** https://blog.tighten.co/you-might-not-need-redux A similar article from Samantha Geitz, discussing when you might want to use Redux. - **The Case for Flux** https://medium.com/swlh/the-case-for-flux-379b7d1982c6#.tgrsz3zhc The author of Redux lays out reasons you might want to use a Flux-style architecture - **Reasons Why I Love Redux** https://twitter.com/jlongster/status/780879989164081152 James Longster describes his appreciation for Redux, and how its constraints force you to think through your state handling - **Why You Should Care About Flux** http://jaysoo.ca/2015/06/02/why-you-should-care-about-flux/ Describes the value in separating "reads" from "writes", and eliminating local state. Applies to Redux as well. - **Redux and Why It's Good For You** https://www.fullstackreact.com/articles/redux-with-mark-erikson/ An introduction to some benefits that Redux can give you when used in a React app, including multiple views of the same data and improved development with hot reloading. - **When to use Redux** 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 - **Wordpress Calypso: Our Approach to Data** https://github.com/Automattic/wp-calypso/blob/master/docs/our-approach-to-data.md The team behind Wordpress's new admin panel looks at their migration from emitters to Flux to Redux, and describes how they organize their state tree, use selectors to extract state, run queries with components, and persist their store state through refreshes. - **So you've screwed up your Redux store - or, why Redux makes refactoring easy** https://blog.boldlisting.com/so-youve-screwed-up-your-redux-store-or-why-redux-makes-refactoring-easy-400e19606c71 Describes some useful practices for organizing Redux actions, reducers, and selectors. - **10 Tips for Better Redux Architecture** https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44 A great article covering when and why to use Redux, benefits, and several tips for a better application architecture. - **Where do I put my business logic in a React-Redux application?** https://medium.com/@jeffbski/where-do-i-put-my-business-logic-in-a-react-redux-application-9253ef91ce1 Describes several options for managing logic and async behavior (thunks, sagas, etc), and introduces a new middleware as an alternative approach - **Code Sharing Between React Native and React Web Apps** https://medium.com/the-many/code-sharing-between-react-native-and-react-web-apps-b1e1de22fc53 Describes ways to architect Redux actions and reducers in the context of a product that shares code between React Native and React Web clients - **Avoiding Accidental Complexity When Structuring Your App State** https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a An excellent set of guidelines for organizing your Redux store structure. - **Redux Step by Step: A Simple and Robust Workflow for Real Life Apps** https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092 A follow-up to the "Accidental Complexity" article, discussing principles for structuring a Redux app and demonstrating how they apply to actual code. - **Things I Wish I Knew About Redux** https://medium.com/horrible-hacks/things-i-wish-i-knew-about-redux-9924abf2f9e0 https://www.reddit.com/r/javascript/comments/4taau2/things_i_wish_i_knew_about_redux/ A number of excellent tips and lessons learned after building an app with Redux. Includes info on connecting components, selecting data, and app/project structure. Additional discussion on Reddit. - **Developing component-based web apps with React and Redux** https://medium.com/@carlos_paelinck/developing-component-based-web-apps-using-react-redux-6236bc958930 Some examples of component structure and data handling in a drawing app. - **Switching from Backbone to React and Redux** 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. - **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. - **Thinking in Redux (when all you've known is MVC)** https://hackernoon.com/thinking-in-redux-when-all-youve-known-is-mvc-c78a74d35133 Some useful mental comparisons for understanding Redux when coming from an MVC architecture background - **React + Redux: Architecture Overview** https://medium.com/mofed/react-redux-architecture-overview-7b3e52004b6e A look at the common pieces that make up a Redux application, with some very useful diagrams to illustrate what they are and how they fit together. - **React Redux Architecture** https://github.com/hirviid/react-redux-architecture Some notes on an opinionated architecture for large React/Redux applications - **Redux for state management in large web apps** https://www.mapbox.com/blog/redux-for-state-management-in-large-web-apps/ Excellent discussion and examples of idiomatic Redux architecture, and how Mapbox applies those approaches to their Mapbox Studio application. - **Reducing our Redux Code with React Apollo** https://dev-blog.apollodata.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a Peggy Rayzis from MLS shares a detailed look at how they used the React Apollo library and GraphQL to drastically simplify their Redux application - **"I made a diagram of my first React app - do you see anything that's going to bite me?"** https://www.reddit.com/r/reactjs/comments/6ec4dz/i_made_a_diagram_of_the_design_of_my_first_react/ A Reddit thread with some excellent discussion about how Apollo and GraphQL fit into the architecture of a Redux application. - **Turning Requirements into React/Redux Code** https://decembersoft.com/posts/turning-requirements-into-react-redux-code/ Looks at a typical description of desired behavior for a loading/container component, then walks through breaking the description into requirements and shows how to implement those in React and Redux. - **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 - **Redux Best Practices** https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e Guidelines for tools, component structure, file layout, and async data handling - **"Redux Best Practices?"** https://www.reddit.com/r/javascript/comments/3p9o0j/redux_best_practices/ Short but good discussion on approaches. - **React-Redux Style Guide** https://github.com/ghengeveld/react-redux-styleguide An opinionated style guide for developing applications in ES6+ with React and/or Redux. - **Redux Patterns and Anti-Patterns** https://tech.affirm.com/redux-patterns-and-anti-patterns-7d80ef3d53bc Some tips for using Redux, including use of Immutable.js and structuring for action creators and reducers - **A Simple Naming Convention for Action Creators in Redux** https://decembersoft.com/posts/a-simple-naming-convention-for-action-creators-in-redux-js/ Some tips for consistent and understandable naming of actions and action creators - **Our Redux Migration (and 5 tips for adoption in a mature codebase)** https://blog.agolo.com/our-redux-migration-and-5-tips-for-adoption-in-a-mature-codebase-dc62322cb921 Lessons learned from migrating to Redux, including choosing a directory structure nd knowing when to use Redux. - **Redux without Profanity** https://tonyhb.gitbooks.io/redux-without-profanity/content/ An online book covering best practices and approaches for managing a Redux application - **Taming Large React Applications with Redux** http://slides.com/joelkanzelmeyer/taming-large-redux-apps#/ A slideshow with a number of best practices, including tips on using container components, immutable data, normalization, and more. - **Real-World React and Redux** https://dzone.com/articles/real-world-reactjs-and-redux-part-1 https://dzone.com/articles/real-world-reactjs-and-redux-part-2 A series of articles covering practical architecture lessons learned from building Redux apps, especially regarding use of custom middleware - **Idiomatic Redux: Why Use Action Creators?** http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/ Thoughts on why consistent use of action creators is a good practice, as opposed to putting logic inline into components. - **Seven Months into Redux: Two Things My Team Learned Along the Way** https://medium.com/@benipsen/seven-months-into-redux-two-things-my-team-learned-along-the-way-5d979c25ea61 Describes the benefits a dev team got from using RxJS streams and using selector functions to derive data. - **Redux anti-pattern: dumb mapStateToProps** http://goshakkk.name/redux-antipattern-mapstatetoprops/ An analysis of a somewhat common Redux anti-pattern, where `mapStateToProps` is doing too little, shifting all the domain knowledge into the component that should not be aware of it. - **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 - **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. - **A Year of Development with Redux** 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 - **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 - **When to Define Action Creators in Redux** https://daveceddia.com/redux-action-creators/ An excellent overview of why action creators exist, why they’re worth using, and when you can skip them - **React Redux Design Lessons Learned** http://www.jeremyzerr.com/sites/default/files/React-Redux-Design-Lessons-Learned.pdf A slideshow that coves some core React and Redux concepts, then discuses how the authors approached designing and developing a timesheet application - **3 Things I Learned about Working with Data in Redux** https://dev.bleacherreport.com/3-things-i-learned-about-working-with-data-in-redux-5fa0d5f89c8b https://www.reddit.com/r/reactjs/comments/5wgh9a/3_things_i_learned_about_working_with_data_in/ Good practices for keeping UI state in components, using Higher-Order Components for reusability, and connecting multiple components at lower levels of the application - **Some tips for getting started with Redux** https://medium.com/@dave.draper20/some-tips-for-getting-started-with-redux-187fa949c0e8 Some excellent suggestions for getting into Redux, including not using it until you need it, use of `connect`, and making sure to call functions that were passed down as props. - **Quick Redux tips for connecting your React components** https://medium.com/dailyjs/quick-redux-tips-for-connecting-your-react-components-e08da72f5b3 A couple quick suggestions for use of `connect`, including connecting lower in the tree and using the `renderCountProp` option - **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 - **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. - **Five Tips for Working with Redux in Large Applications** https://medium.com/appnexus-tech/five-tips-for-working-with-redux-in-large-applications-89452af4fdcb Useful suggestions for architecting Redux apps, include use of indices / lookup tables, separation of state, and reuse of common reducer logic. - **React State vs Redux State: When and Why?** https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/ Some helpful suggestions on how to categorize state into short/medium/long-term, and how to decide where that state should live - **React Native, Redux, and Firebase for experts, by dummies** https://medium.com/rumors/react-native-redux-and-firebase-for-experts-by-dummies-6376becdd5c8 The Rumors team describes how they've structured their Redux+Firebase application, and some of the things they ran into - **Redux Architecture Guidelines** http://joeellis.la/redux-architecture/ Several useful tips for building a good Redux app, including planning state shape, avoiding nesting, storing plain data, and more. - **Getting started in React with Redux** https://medium.com/@simonhfrost/getting-started-in-react-with-redux-8b2b42b66dee Some quick tips for structuring a Redux app, including several related to organizing state. - **Notes from my first React + Redux project** https://medium.com/audelabs/notes-from-my-first-react-redux-project-3f799beeb140 A recap of how the author built a front end for a complex online payment site. Doesn't really have specific suggestions, but it's well written and serves as a useful description of the common libraries and tools in a React+Redux app and how they fit together. - **Journey of a Thousand Ducks** https://tech.iheart.com/video-journey-of-a-thousand-ducks-f0bb1a9b982c Devs from the iHeartRadio web team describe how they have approached refactoring their React app with homegrown state management to use Redux. - **React+Redux: Tips and Best Practices for Clean, Reliable, & Maintainable Code** https://speakerdeck.com/goopscoop/react-plus-redux-tips-and-best-practices-for-clean-reliable-and-scalable-code An excellent slideshow with a wide variety of tips and suggestions, including keeping action creators simple and data manipulation in reducers, abstracting away API calls, avoiding spreading props, and more. - **Why not to store objects in Redux** https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de Some quick thoughts on why you should keep plain JS objects in your store, instead of class instances. - **10 Redux tips to scale your dev team** https://blog.matters.tech/10-redux-tips-from-the-trenches-55e06ed1c0a8 Some excellent suggestions for helping larger dev teams use Redux successfully, including planning traing/docs reading time, generalizing action types, normalizing state, and more. - **Scaling Redux: Codebase Organization and Organizing State** https://medium.com/@uttamkini/scaling-redux-part-1-codebase-organization-80f978cd8a72 https://medium.com/@uttamkini/scaling-redux-part-2-organizing-state-8a1c5e8fffbf Several suggestions for managing a Redux codebase, including use of feature folders / ducks, separating data and UI state in the store, organizing data by API structure, and more. - **Tips for success with React and Redux** https://medium.com/@AlexFaunt/tips-for-success-with-react-and-redux-b782c6b22ff0 Advice on how much of your React component tree should be connected to Redux, using non-HTML components to manage things like document titles, consistently using actions for app behavior, and moving app logic out of components. - **Chart the Stock Market with React, Redux, React-Vis, and Socket.io** https://medium.com/@ddcreationstudi/chart-the-stock-market-with-react-redux-react-vis-and-socket-io-18caf312693c An overview of approaches used and lessons learned in writing a real-time stock market charting example app. Not a tutorial specifically, but some useful ideas for structuring things. - **Growing Pains: Migrating Slack's Desktop App to BrowserView** https://slack.engineering/growing-pains-migrating-slacks-desktop-app-to-browserview-2759690d9c7b The Slack team discusses how they use Redux in an Electron app, including use of the `electron-redux` middleware for syncing actions between Redux stores in different Electron processes and use of `redux-observable` for managing side effects. - **Redux: Architecting and scaling a new web app at the NY Times** https://www.youtube.com/watch?v=lI3IcjFg9Wk A talk from an NY Times developer describing how they scaled a React+Redux app to over a million users per month. - **"React and Redux as a framework"** https://www.reddit.com/r/javascript/comments/747vx1/react_and_redux_as_a_framework/ Useful discussion of where "business logic" should live in a Redux app, such as data fetching and transformation. - **How to approach making changes to an existing React-Redux application** https://gautamdhameja.com/how-to-approach-making-changes-to-an-existing-react-redux-application-ae00482c0f9a A clear suggested order of steps to follow when adding new functionality to a React+Redux app. - **Tips for Redux** https://www.yihangho.com/tips-for-redux/ Some excellent tips for working with Redux, including designing the state tree, dealing with side effects, implementing optimistic updates, and more. - **How We Built Our UI** https://www.endgame.com/blog/technical-blog/how-we-built-our-ui The Endgame team discusses why they rebuilt their app's UI, why they picked React and Redux, use of REdux-Saga to manage business logic, and how the data workflow fits together. - **Best practices with React and Redux application development** https://developers.redhat.com/blog/2017/11/15/best-practices-react-redux-web-application-development/ A wide variety of suggestions, including use of TypeScript, customizing build configurations, managing dependencies, handling callbacks with params, using selectors, and more. - **How Bitmovin used React/Redux to Develop Its New Dashboard** https://bitmovin.com/bitmovin-used-reactredux-to-develop-new-dashboard/ The Bitmovin team describes their React+Redux architecture, including how they approached organizing Redux actions. - **What I've learned from a few large-scale React and Redux projects** https://medium.com/20spokes-whiteboard/what-ive-learned-from-a-few-large-scale-react-and-redux-projects-d454000da167 Some short thoughts on best practices from using React and Redux, including ensuring all logic is tested, having descriptive Redux actions that tell a story, and ensuring React components are understandable by using prop types. - **Redux Anti-Patterns: State Management** http://blog.mgechev.com/2017/12/07/redux-anti-patterns-race-conditions-state-management-duplication/ Some good descriptions of common anti-patterns in Redux apps, with examples and solutions. Looks at state duplication, state ownership, and handling of state updates. - **"So much to learn about organizing Redux state by looking at popular apps"** https://mobile.twitter.com/tharakawj/status/937285802287124480 A tweet with screenshots of the Redux DevTools, showing the contents of Redux stores from Twitter and Pinterest. - **5 Strategies to Prevent Bugs in a Large Redux Codebase** https://decembersoft.com/posts/5-strategies-to-prevent-bugs-in-a-large-redux-codebase/ Short but useful thoughts on using testing, static typing, immutability, parameter validation, and code reviews with Redux apps. #### Encapsulation and Reusability **Related topics**: [Redux Techniques - Selectors](./redux-techniques.md#selectors-and-normalization) - **Scalable Frontend with Elm or Redux** https://github.com/slorber/scalable-frontend-with-elm-or-redux A repo containing ongoing discussion about ways to handle fully encapsulated reusable chunks of logic and components in Redux, with a number of submitted approaches being compared. - **Encapsulation in Redux: the Right Way to Write Reusable Components** http://blog.javascripting.com/2016/02/02/encapsulation-in-redux/ A look at one way to write encapsulated action handling in Redux - **How to Reuse Redux Components** https://medium.com/@MattiaManzati/how-to-reuse-redux-components-8acd5b4d376a Discussion of an Elm-inspired approach to wrapping up reusable components and logic - **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 - **Encapsulation in Redux: the Right Way to Write Reusable Components** http://blog.javascripting.com/2016/02/02/encapsulation-in-redux/ Examples of an Elm-style encapsulation approach - **The Problem with Redux... And How to Fix It** http://blog.javascripting.com/2016/05/21/the-problem-with-redux-and-how-to-fix-it/ Demonstration of Redux-Elm, a library that adds composable actions to Redux - **Applying Redux Reducers to Arrays** http://blog.scottlogic.com/2016/05/19/redux-reducer-arrays.html Looks at one way to implement the classic "multiple instances of one connected component" issue in Redux. - **Redux: Encapsulating the Redux State Tree** http://randycoulman.com//blog/2016/09/13/encapsulating-the-redux-state-tree/ 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 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/ Description of an approach for dividing up domain-specific state from abstract state, and reusing logic based on those slices. - **The Power of Higher-Order Reducers** http://slides.com/omnidan/hor#/ A set of slides discussing how reducers can be layered together to add capabilities - **Redux Issue #822: "How to create a generic list as a reducer?"** https://github.com/reactjs/redux/issues/822 Discussion of various approaches to the "generic list of reusable components" problem - **Redux-Doghouse - Creating React-Redux Components through Scoping** http://engineering.datadoghq.com/redux-doghouse--creating-reusable-react-redux-components-through-scoping/ A look at some of the issues involved in trying to write reusable connected components that can be instantiated many times, and how the library they wrote helps solve those problems. - **Redux Stack: Modular Redux Configuration** https://medium.com/@jondot/redux-stack-modular-redux-configuration-ec96412a2262 Discussion of a small library that tries to make it easier to hook together different Redux addons. - **Scoped Selectors for Redux Modules** http://www.datchley.name/scoped-selectors-for-redux-modules/ A follow-on to Randy Coulman's series on local vs global selectors, discussing tradeoffs in approaches for defining and managing selectors. - **Scaling React and Redux at IOOF** http://www.slideshare.net/VivianFarrell/scaling-react-and-redux-at-ioof A slideshow discussing creation of enterprise-scale Redux apps built with "micro-frontends" that can be composed together, and a look at a "Redux-Subspace" library to help with that - **Structuring Redux Selectors** http://cmichel.io/redux-selectors-structure/ Another article on "globalizing" selector functions, with references to the articles by Randy Coulman and Dave Atchley. - **Instance Reducers** http://www.thesoftwaresimpleton.com/blog/2016/12/20/instance-reducers/ An interesting approach to the "multiple instances of a connected component" problem. - **How to use Redux on highly scalable Javascript applications?** https://medium.com/@alexmngn/how-to-use-redux-on-highly-scalable-javascript-applications-4e4b8cb5ef38 Discussion of ways to structure reducers, selectors, and other logic into reusable features - **Building a simple Redux library** https://medium.com/@tcclevela/building-a-simple-redux-library-44ce4f004822 Looks at important steps to follow when building a Redux addon library: only use middleware if really needed, keep things simple, and encapsulate abstractions. Shows a particularly good example of using selectors in the library to encapsulate state lookups, and allowing the end user to initialize the selectors so that the data can be mounted anywhere in the state tree the user wants. - **Namespacing Actions for Redux** https://kickstarter.engineering/namespacing-actions-for-redux-d9b55a88b1b1 Looks at ways to namespace actions so that multiple copies of components and logic can work in an isolated manner, especially in conjunction with the `redux-loop` library. - **Selector Pattern: Painless Redux Store Destructuring** https://hackernoon.com/selector-pattern-painless-redux-store-destructuring-bfc26b72b9ae Good examples of creating encapsulated selectors that are given just their slice of state as arguments, with a centralized definition of how the state slices map to those selectors. - **Fractal Architecture** http://antontelesh.github.io/architecture/2016/03/16/fractal-architecture.html Discesses some rules of fractal architecture, looks at how those apply to React, Elm, and Cycle, and then describes ways to apply those rules to Redux code to enforce modularity. - **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 - **Redux Saga in Action** https://medium.com/@totaldis/redux-saga-in-action-s-f7d11cffa35a Some interesting thoughts on ways to organize the majority of your app's logic using redux-saga - **redux-scuttlebutt; eventually consistent shared state among peers** https://medium.com/@grrowl/redux-scuttlebutt-eventually-consistent-shared-state-among-peers-191d48102079 Describes how to use the Redux-Scuttlebutt library to sync actions and updates between multiple instances of a Redux application - **Write Better Redux with redux-module-builder** https://www.fullstackreact.com/articles/better-redux-module-management/ Describes how to use the utilities included in the redux-module-builder package to better organize a Redux application - **The Elegance of React, Redux, and Ramda** https://medium.com/javascript-inside/the-elegance-of-react-ebc21a2dcd19 Demonstrates ways to use Ramda to compose together React components and Redux behavior - **Extreme Decoupling: React, Redux, Selectors** http://www.thinkloop.com/article/extreme-decoupling-react-redux-selectors/ Discusses an API-first approach to splitting apart a Redux app into view, state, and integration layers. - **Using React(-Native) with Redux and Redux Saga** https://medium.com/@marcelschulze/using-react-native-with-redux-and-redux-saga-a-new-proposal-ba71f151546f Description of a decoupled saga-based app structure, similar to that described in "Redux Saga in Action" - **Minimal Redux Setup** https://medium.com/@benevolentNinja/minimal-redux-setup-e6a10fcbcb68 Thoughts on using a single reducer and a single "UPDATE" action type - **Scaling your Redux App with Ducks** https://medium.freecodecamp.com/scaling-your-redux-app-with-ducks-6115955638be An overview of a modified version of the "ducks" architecture, with the contents for a given feature in a folder instead of a single file. - **Implementing Redux is tedious. But it doesn't have to be.** https://medium.com/@jeswin/implementing-redux-is-tedious-but-it-doesnt-have-to-be-33702a1fb1dd Describes another "minimal Redux" variation. Definitely not "idiomatic Redux" usage, but a technically valid implementation. Some discussion of tradeoffs in the comments. - **How we reduced boilerplate and handled asynchronous actions with Redux** https://blog.algolia.com/how-we-reduced-boilerplate-and-handled-asynchronous-actions-with-redux/ A look at conventions that have helped the Algolia team write Redux apps. - **Ducks++: Redux Reducer Bundles** https://medium.com/@DjamelH/ducks-redux-reducer-bundles-44267f080d22 Describes an enhancement to the original "ducks" proposal, adding a string constant to help define where the state is kept in the store. - **Isomorphic Redux** https://medium.com/@ellisande_poet/isomorphic-redux-fdaadea13bb5 Walks through an implementation of keeping two Redux stores in sync via distributed actions over websockets. - **Introducing FilterBubbler: A WebExtension built using React/Redux** https://hacks.mozilla.org/2017/06/introducing-filterbubbler-a-webextension-built-using-reactredux/ Describes how the authors built a browser WebExtension that uses the Redux-WebExt bridge as part of the implementation. - **Scaling Redux for real-life applications** https://hackernoon.com/scaling-redux-for-real-life-applications-be18c731a54d Describes a variation of the "ducks" structure that divides code into "basic concepts" that contain app state and minimal logic, and "container concepts" that contain minimal data and implement most application logic. - **Agile Front End Enterprise Architecture with React, Redux, and Vanilla JS** https://medium.com/shiftgig-blog/agile-front-end-architectures-with-react-redux-and-vanilla-js-23f4e5626e01 A description of how ShiftGig organizes their architecture, including a combination of Redux usage with sagas, and traditional OOP approaches like Model classes and Services. - **NgRx: Patterns and Techniques** https://blog.nrwl.io/ngrx-patterns-and-techniques-f46126e2b1e5 Describes a variety of patterns and approaches for using the NgRx library (a clone of Redux built with RxJS and commonly used with Angular). The labels and categories given for side effects approaches, like "content-based decider", "content enricher", etc, can be applied to existing Redux middlewares as well. - **MVC implemented by React and Causality-Redux** https://medium.com/dailyjs/mvc-implemented-by-react-and-causality-redux-c4125a01e95c https://medium.com/@causality_redux/react-redux-how-to-write-significantly-less-code-c0562ff06d5a A pair of posts discussing how to use the "causality-redux" library to implement an MVC-type architecture on top of React and Redux. - **"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. - **"Redux Connect as render props" discussion** https://news.ycombinator.com/item?id=15427954 https://twitter.com/mjackson/status/915335846324092930 A couple of discussion threads looking at the recent popularity of of experiments with `connect` as a render prop. - **Kea: A High Level Abstraction between React and Redux** https://medium.com/@mariusandra/kea-vs-setstate-redux-mobx-dva-jumpstate-apollo-etc-4aa26ea11d02 https://survivejs.com/blog/kea-interview/ An article by the author of the Kea library discussing how it makes it easier to use React and Redux together, and an interview with the author discussing the history and usage of the library. - **The joy of React+Redux with Elixir/OTP** https://limenius.com/elixir-otp-react-redux/ Covers building a Redux-based client that receives update messages from an Elixir server. - **Reslice - Yet Another Way of Managing Scale in React and Redux** 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?"** 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. - **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 ================================================ FILE: redux-middleware.md ================================================ ### Redux Middleware #### Tutorials - **Exploring Redux Middlewares** http://blog.krawaller.se/posts/exploring-redux-middleware/ Understanding middlewares through a series of small experiments - **Understanding Redux Middleware** https://medium.com/@meagle/understanding-87566abcfb7a Breaks down Redux's applyMiddleware function line-by-line, and explains the concepts involved - **Building Redux Middleware** https://reactjsnews.com/redux-middleware Demonstrates building a basic Redux middleware - **A Beginner's Guide to Redux Middleware** https://www.codementor.io/reactjs/tutorial/beginner-s-guide-to-redux-middleware A useful explanation of middleware use cases, with numerous examples - **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. - **Redux Middleware Tutorial** 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** http://briantroncone.com/?p=529 Digs into the concepts and implementation of middleware. - **Middlewares and React Redux Lifecycle** https://medium.com/@rajaraodv/using-middlewares-in-react-redux-apps-f7c9652610c6 A description of what a middleware is, and how it works in Redux - **ReactCasts #6: Redux Middleware** https://www.youtube.com/watch?v=T-qtHI1qHIg A screencast that describes how middleware fit into Redux, their uses, and how to implement a custom middleware - **Redux Middleware** https://vmayakumar.wordpress.com/2016/12/27/redux-middleware/ Some analogies for understanding middleware in terms of the OOP "Decorator Pattern" vs Functional Programming composition - **Workshop Slides: Redux Middleware** http://www.slideshare.net/visualengin/workshop-22-reactredux-m A slideshow that explains how Redux middleware work, with several helpful visualizations - **Understanding Redux Middleware and Writing Custom Ones** https://dev.to/imwiss/understanding-redux-middleware-and-writing-custom-ones Describes the concept of middleware in Redux, possible use cases, and gives an example of writing a middleware to handle caching. - **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. #### Middleware Techniques - **Two Weird Tricks with Redux** 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. - **Connecting Redux to your API** https://blog.boldlisting.com/connecting-redux-to-your-api-eac51ad9ff89 Describes imperative and declarative approaches to managing request data and metadata - **Fix Ugly JSON Api Responses With Redux Middleware** http://blog.benwiley.org/fix-json-responses-redux-middleware/ Sets up a sample project that requests JSON data, then shows how to use some custom middleware to transform the response. - **You Aren't Using Redux Middleware Enough** https://medium.com/@jacobp100/you-arent-using-redux-middleware-enough-94ffe991e6 Suggestions for using middleware to solve a number of interesting use cases - **Defining user on-boarding flows with Redux middleware** https://medium.com/@JohnRandom/defining-user-on-boarding-flows-with-redux-middlewares-217885acbafc Demonstrates implementing an on-boarding feature by implementing a Redux middleware to track user behavior and dispatch actions in response. - **"Do I always need to return a value from a Redux middleware?"** https://stackoverflow.com/questions/45964129/do-i-always-need-to-return-a-value-from-a-redux-middleware/45964310#45964310 My answer to a question about whether middleware should do `return next(action)`. Short version: yes, always, unless you want to alter expected behavior. - **Practical Advanced Redux Webinar: Redux Middleware** https://www.youtube.com/watch?v=DqWiuvuK_78 A recorded screenshare livestream that discusses the usefulness of Redux middleware, and demonstrates building middleware for fetching data, logging, and throttling. - **Redux: Drawing the Lines between Actions and Middleware** https://michaelwashburnjr.com/redux-actions-middleware/ Compares examples of behavior between thunks and middleware, and discusses when you might want to implement behavior in a middleware. - **Redux Middleware and Enhancers** https://chariotsolutions.com/blog/post/redux-middleware-and-enhancers-getting-redux-to-log-debug-and-process-async-work/ Describes some common Redux middleware and their uses, as well as how to set up the Redux DevTools enhancer for debugging. - **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. - **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. ================================================ FILE: redux-reducers-selectors.md ================================================ ### Redux Reducers and Selectors #### Reducers - **Redux Docs: Structuring Reducers** 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"** https://www.reddit.com/r/javascript/comments/42ey9e/redux_reducer_composition_without_slicing_state/ Discussion of ways to organize actions and reducer logic - **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. - **The Power of Higher-Order Reducers** http://slides.com/omnidan/hor#/ A slideshow from the author of redux-undo and other libraries, explaining the concept of higher-order reducers and how they can be used - **Modifying a Leaf of the Redux State Tree** http://cmichel.io/modifying-a-leaf-of-the-redux-state-tree/ Some useful observations on how to properly do deep immutable updates. - **"How to dynamically load reducers for code splitting in a Redux application?"** http://stackoverflow.com/questions/32968016/how-to-dynamically-load-reducers-for-code-splitting-in-a-redux-application Dan Abramov gives a basic exapmle of how to rebuild and replace the root reducer function at runtime - **Inject reducer arbitrarily rather than top level for Redux store to replace reducer** https://medium.com/@jimmy_shen/inject-reducer-arbitrarily-rather-than-top-level-for-redux-store-to-replace-reducer-fdc1060a6a7 A quick example of the basic approach to injecting additional reducers at runtime - **State Snapshots in Redux** http://kyleshevlin.com/state-snapshots-in-redux/ Describes a useful technique for saving copies of state slices on command, and re-applying those copies at a later point to ensure a known starting point for further actions. - **"Problems with Flux"** http://www.code-experience.com/problems-with-flux/ Discusses the idea of having all state updates for an action listed in one place, vs spread throughout the store. Written shortly after the release of Redux, but definitely relevant. - **Redux Tree** https://blog.shakacode.com/redux-tree-efc9e3d22d6e Looks at structuring a reducer/state tree as "branches" and "leaves", and introduces the idea of an "interaction" to encapsulate all related state changes for a given action, with a library to implement the idea. - **Reducer composition with Higher Order Reducers** https://medium.com/@mange_vibration/reducer-composition-with-higher-order-reducers-35c3977ed08f Some great examples of writing small functions that can be composed together to perform larger specific reducer tasks, such as providing initial state, filtering, updating specific keys, and more. - **Using Currying to Compose Reducers** http://www.guyzissman.com/posts/pipe-reducers/ Some short but helpful examples of how currying functions can be used to reuse reducer logic for similar use cases. - **Higher Order Reducers - It just sounds scary** https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705 Explains how reducers can be composed like Lego bricks to create reusable and testable reducer logic. - **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 - **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. - **Dynamic Store Injection for Redux** https://docs.google.com/presentation/d/1JA9hhBgx9-k0sHO9UVSTiD1WTBvsZJ13cWIudUao9vE/edit#slide=id.gcb9a0b074_1_0 A slideshow that demonstrates the basic approach for dynamically adding reducers at runtime. - **State Snapshots with Redux** https://medium.com/@kyleshevlin/state-snapshots-with-redux-209884cca170 Describes a useful technique for saving known state values and using those to reset or restore an earlier state. - **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 - **Idiomatic Redux: Using Reselect Selectors for Performance and Encapsulation** http://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/ Introduces the core concepts of using selector functions to derive data from a Redux store, memoizing functions for performance, how to use the Reselect library to create memoized selector functions, and advanced techniques for working with selectors when writing `mapState` functions for `connect`. - **ReactCasts #8: Selectors in Redux** https://www.youtube.com/watch?v=frT3to2ACCw A great overview of why and how to use selector functions to retrieve data from the store, and derive additional data from store values - **React, Reselect, and Redux** https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c An explanation of how Reselect's memoized selector functions are useful in Redux apps, and how to create unique selector instances for each component instance. - **Use Selectors in Redux for Great Good** https://medium.com/@TomasEhrlich/use-selectors-in-redux-for-great-good-59286ce2e2a1 A short article explaining the importance of selectors, with a few examples of how they benefit applications and how to use them. - **Reselect with Redux and React** https://www.youtube.com/watch?v=6Xwo5mVxDqI A screencast that introduces the Reselect library and discusses why it's useful in Redux apps - **Optimizing React Redux Application Development with Reselect** https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/ A good tutorial on Reselect. Covers the concept of "selector functions", how to use Reselect's API, and how to use memoized selectors to improve performance. - **Usage of Reselect in a React-Redux Application** https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application Discusses the importance of memoized selectors for performance, and good practices for using Reselect. - **Redux: Up your game with selectors** https://medium.com/@emilycoco/redux-up-your-game-with-selectors-9aee3a6928ae A quick look at the benefits of using selector functions to encapsulate looking up data from the store. - **Better Redux Selectors with Ramda** https://medium.com/@grrttn/better-redux-selectors-with-ramda-c1ab7af3f16 A long article that describes how to use the Ramda FP utility library to create selectors, including use of functional composition. - **Selectors: Slice your concerns like butter!** https://bmbarker90.github.io/selectors-presentation/#/ A slideshow that discusses what selector functions are and why you would want to use them. - **Reselect's Memoization in 3 Functions** https://hackernoon.com/reselect-style-memoization-in-3-functions-aff30f8cba11 A dive into the Reselect source code, with explanations of memoization concepts and how Reselect implements memoization. - **Memoize-Immutable: efficient memoizer for Redux** https://blog.prototypo.io/memoize-immutable-efficient-memoizer-for-redux-and-other-immutable-environments-59277fefa45f Discusses principles of immutability and memoization, and a library they built to help memoize Redux data lookups - **"Any deep-dive/advanced tutorials on reselect?"** https://www.reddit.com/r/reactjs/comments/5dxasp/any_deepdiveadvanced_tutorials_on_reselect/ Discussion on passing arguments to Reselect selectors, and how to use "factory functions" to define per-component selectors for Redux `mapState` functions - **Selectors 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 **Related topics**: - [Redux Architecture - Encapsulation](./redux-architecture.md#encapsulation-and-reusability) - [Redux Performance](./react-performance.md#redux-performance) - **Querying a Redux Store** https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions. - **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: Using Redux-ORM** http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/ http://blog.isquaredsoftware.com/2016/10/practical-redux-part-2-redux-orm-concepts-and-techniques/ A look at how Redux-ORM can help manage normalized data in a Redux store, including use cases, basic usage, key concepts, and advanced techniques. - **Advanced Redux Entity Normalization** https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5 Describes a "keyWindow" concept for tracking subsets of entities in state, similar to an SQL "view". A useful extension to the idea of normalized data. - **Redux Normalizr: Improve your State Management** http://www.robinwieruch.de/the-soundcloud-client-in-react-redux-normalizr/ A tutorial describing how to use Normalizr for improved data management of nested data in Redux - **Using normalizr.js in a Redux store** https://medium.com/@mcowpercoles/using-normalizr-js-in-a-redux-store-96ab33991369 Some examples of using Normalizr and selectors to manage normalized data - **Two mistakes I made working with Redux** http://www.mattzeunert.com/2016/06/01/redux-mistakes.html Some suggestions on how to handle denormalizing data and defining actions. - **"How do you add/remove to a redux store generated with normalizr?** http://stackoverflow.com/questions/34954726/how-do-you-add-remove-to-a-redux-store-generated-with-normalizr Stack Overflow discussion of how to handle updates to normalized data - **GraphQL is not only for Backend** https://riad.blog/2017/01/07/graphql-is-not-only-for-backend-react-redux/ A look at how to use GraphQL to query into a Redux store - **Dissecting Twitter's Redux Store** https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1 https://medium.com/@nuncamind/diving-deeper-into-twitters-redux-store-adventures-in-minified-vendor-javascript-67fbac5dc219 An informative look at the contents of the Redux store for Twitter's new mobile site. The second article shows how to dig through the minified JS to enable use of the Redux DevTools against a production site. - **"Why are you supposed to normalize data in Redux?"** https://twitter.com/AdamRackis/status/847883670950219776 A Twitter thread with some excellent discussion, explaining why use of normalized data is encouraged with Redux. - **Redux Clerk: Reusable action creators and reducers for async CRUD** https://inside.getambassador.com/redux-clerk-reusable-action-creators-and-reducers-for-async-crud-b0b6954f7056 Discussion of a library that tries to reduce the repetitive nature of async CRUD work in Redux - **json-api-normalizer: An Easy Way To Integrate the JSON API and Redux** https://www.smashingmagazine.com/2017/05/json-api-normalizer-redux/ An in-depth article discussing why normalization of data is a good practice with Redux, and how use of the JSON API format can make normalized data easier to work with. - **How I Stumbled Upon Normalizing Redux State** http://kyleshevlin.com/how-i-stumbled-upon-normalizing-redux-state/ A short summary of the benefits and concept behind normalizing state - **The only reducer you will ever need** https://medium.com/riipen-engineering/the-only-reducer-you-will-ever-need-4dd41206f980 Demonstrates using Normalizr and seamless-immutable to write a generic entity merging reducer - **How to use Normalizr to organize data in a Redux store** https://dashbouquet.com/blog/frontend-development/using-normalizr-to-organize-data-in-stores-practical-guide https://dashbouquet.com/blog/frontend-development/using-normalizr-to-organize-data-in-store-part-2 A 2-part post with examples of normalizing nested data using Normalizr, using Redux-Saga to control the fetching logic, and denormalizing the data for use in the UI. - **Introducing @ngrx/entity** https://medium.com/ngrx/introducing-ngrx-entity-598176456e15 Describes an NgRX-based library for generating reducer operations and selectors for normalized entities. - **Shape your Redux store like your database** https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5 Discusses the merits of storing data in arrays vs lookup tables for access speed, and adding additional indices to allow easily lookup up items based on other values besides IDs. - **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. ================================================ FILE: redux-side-effects.md ================================================ ### Redux Side Effects #### Basic Concepts - **Stack Overflow: Dispatching Redux Actions with a Timeout** http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559 Dan Abramov explains the basics of managing async behavior in Redux, walking through a progressive series of approaches (inline async calls, async action creators, thunk middleware). - **Stack Overflow: Why do we need middleware for async flow in Redux?** 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. - **"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 - **Why doesn't Redux support AJAX out of the box?** http://goshakkk.name/redux-no-ajax-by-default/ Looks at how AJAX calls fit into a Redux application - **Adding Customized Asynchrony to Redux** https://anyperk.engineering/im-lauren-and-i-m-a-frontend-apprentice-here-at-anyperk-a1a40106d231 A quick introduction to some of the libraries that can be used to manage asynchronous behavior in Redux. #### Thunks - **What the heck is a "thunk"?** https://daveceddia.com/what-is-a-thunk/ A quick explanation for what the word "thunk" means in general, and for Redux specifically. - **Thunks in Redux: The Basics** https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60 A detailed look at what thunks are, what they solve, and how to use them. - **A Dummy's Guide to Redux and Thunk in React** https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3 A tutorial that shows how to take a React component that does its own data fetching, and rework it to use accept data from Redux and use a thunk action creator instead. - **Understanding how redux-thunk works** https://medium.com/@gethylgeorge/understanding-how-redux-thunk-works-72de3bdebc50 An attempt to explain both redux-thunk and Redux's applyMiddleware enhancer, by rewriting the original implementations to add logging and rework names for ease of understanding. - **Async Actions with Redux Thunk Demystified** http://blog.jakoblind.no/2017/04/25/async-actions-with-redux-thunk-demystified/ A quick look at the source code for redux-thunk, how it works, and how to use it. - **Sense-ible Redux Thunk** https://medium.com/sensehq/sense-ible-redux-thunk-30b866ca5914 Examples of how to define reusable caching and authorization handling for thunks using decorators - **Returning promises from Redux action creators** https://medium.com/collaborne-engineering/returning-promises-from-redux-action-creators-3035f34fa74b Shows how returning a promise from a thunk action creator allows the caller to chain off the promise and execute code after the action creator is complete. - **ReactCasts #10: Redux Thunk Tricks** https://www.youtube.com/watch?v=xihoZZU0gao An excellent screencast that covers three useful tips for use of redux-thunk: thunk return values, multi-dispatch, and when to use `getState` #### Side Effect Approach Comparisons - **Redux side effects and you** https://medium.com/javascript-and-opinions/redux-side-effects-and-you-66f2e0842fc3 Thoughts on the proliferation of new side effect libs for Redux, and some comparisons of the commonly used approaches. - **"Controversial opinion: redux-thunk is too powerful"** https://twitter.com/intelligibabble/status/800103510624727040 https://twitter.com/dan_abramov/status/800310164792414208 Some discussion on the pros and cons of redux-thunk's flexibility and usage, as well as possible issues with multiple dispatches in a row. - **Idiomatic Redux: Thoughts on Thunks, Sagas, Abstractions, and Reusability** http://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/ A response to several "thunks are bad" concerns, arguing that thunks (and sagas) are still a valid approach for managing complex sync logic and async side effects. - **What are the benefits, pros, and cons of redux-thunk over redux-saga?** https://hashnode.com/post/what-are-the-benefits-of-redux-thunk-over-redux-saga-what-pros-and-cons-do-they-have-over-each-other-ciqvyydh7065w3g53ffalif61 An excellent discussion of where side effects belong in a Redux app, and how thunks and sagas can be used to handle async logic. - **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. - **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 - **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/ An excellent look at the most popular libraries for Redux side effects, with comparisons of how each one works. - **Redux 4 Ways** https://medium.com/react-native-training/redux-4-ways-95a130da0cdc Side-by-side comparisons of implementing some basic data fetching using thunks, sagas, observables, and a promise middleware - **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 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. - **Redux-Observable Epics vs Redux Sagas** https://shift.infinite.red/redux-observable-epics-vs-redux-sagas-8e53610c0eda A humorous look at how redux-observable and redux-saga compare. It recaps their backgrounds and basic ideas, then shows comparison implementations for some small tasks and rates the approaches. - **Async operations in React Redux applications** https://codebrahma.com/structuring-async-operations-react-redux-applications/ An introduction to the complexities of handling async logic in JS, and comparisons of how the same series of API calls could be handled using JS Promises, thunks, sagas, and observables. - **"Redux and API/fetch calls. How do you handle them?** https://twitter.com/rem/status/888361414070501376 A Twitter poll asking about people's preferences for handling async work in Redux. The replies are interesting, and show a very wide variety of choices being used. - **Understanding redux-saga: from action creators to sagas** https://blog.logrocket.com/understanding-redux-saga-from-action-creators-to-sagas-2587298b5e71 Some short examples comparing implementations of the same fetching logic inside a component, using redux-thunk, and using redux-saga. - **Polling with Redux** https://bigbitecreative.com/polling-with-redux/ Compares implementations of a polling loop between redux-saga and redux-observable - **Redux-Saga vs Redux-Observable** https://hackmd.io/s/H1xLHUQ8e Some notes comparing sagas and observables, including "mental models", side-by-side comparison implementations of tasks like fetching / sequencing / cancelation, and more. - **Redux Sagas, Observables, oh my** https://spectrum.chat/thread/2e738f7a-b385-4120-aff1-5fca9d1a6f34 An extensive discussion thread that compares the relative uses cases and merits of redux-saga and redux-observable #### Sagas - **Master Complex Redux Workflows with Sagas** http://konkle.us/master-complex-redux-workflows-with-sagas/ Describes what sagas are, how Redux-Saga uses generators to run sagas, some potential concerns, and how to use them. - **Stack Overflow: Why do we need middleware for async flux in Redux?** http://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34623840#34623840 A comparison of imperative thunks vs declarative sagas, and some of the benefits that sagas can provide for testing and decoupling of logic. - **Managing Side Effects in React + Redux using Sagas** http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/ Demonstrates various ways to implement a Timer app as a state machine, including using sagas to manage the periodic updates. - **Persist Redux State By Using Sagas** http://engineering.invisionapp.com/post/persist-redux-state-by-using-sagas/ A very well-written set of examples showing how to use sagas to implement some complex store persistence logic. - **Handling async in Redux with Sagas** http://wecodetheweb.com/2016/10/01/handling-async-in-redux-with-sagas/ Covers the basic concepts and syntax of sagas, and how they can improve testability. (Updated version of a 2015 post, covering the latest version of redux-saga.) - **Redux Saga conceptual diagram** https://twitter.com/kuy/status/731484272234663937 A useful diagram illustrating the various things a saga can do - **"Redux Sagas benefits?"** https://www.reddit.com/r/reactjs/comments/4ng8rr/redux_sagas_benefits/ Discussion of when and why you might want to use sagas, with some great examples in the comments. - **Manage Side Effects Efficiently with Redux Saga** https://youtu.be/QJVdcIlqGwc A presentation describing the concepts of generators and sagas. - **Redux Saga conceptual diagram** https://qiita-image-store.s3.amazonaws.com/0/69860/8cc1a873-c675-9009-570d-9684da4a704f.png A nifty diagram from @kuy illustrating the general interaction of Redux Saga's async flow operators - **Async Operations using Redux-Saga** https://medium.com/@andresmijares25/async-operations-using-redux-saga-2ba02ae077b3 An example of using Redux-Saga to coordinate multiple async calls based on another article's flight data scenario. - **Should I use redux-saga or not?** https://speakerdeck.com/kuy/should-i-use-redux-saga-or-not A presentation from Yuki Kodama, comparing side effect approaches. In Japanese, but still has a number of useful diagrams that can be understood by English speakers. - **Interview with Redux-Saga Author Yassine Eloaufi** http://survivejs.com/blog/redux-saga-interview/ An interview with the author of Redux-Saga, where he describes some of its concepts and history - **Lazy registration with Redux and Sagas** http://goshakkk.name/lazy-auth-redux-saga-flow/ Examples of using Redux-Saga to implement an async series of user interactions. - **A Saga that led Xero to Redux** https://devblog.xero.com/a-saga-that-led-xero-to-redux-aa1361b9a800 Examples of how Xero's async logic for their dashboard evolved over team, from nested callbacks to promises to Redux with sagas - **The Three 'R's: Refactoring, React, and Redux for robust async JS** https://devblog.xero.com/the-three-rs-refactoring-react-and-redux-for-robust-async-js-252648a8632f More information from Xero on how they have used sagas for async workflows, including splitting code up into smaller sagas that can be composed. - **4 Quick Tips for Managing Many Sagas in a React-Redux-Saga App** https://decembersoft.com/posts/4-tips-for-managing-many-sagas-in-a-react-redux-saga-app/ Some useful suggestions for structuring and organizing sagas - **Implementing feature flags using React and Redux Saga** http://blog.launchdarkly.com/implementing-feature-flags-in-single-page-apps-using-react-and-redux-saga/ A quick example of how to use sagas to manage feature flag API requests - **Javascript Power Tools: Redux-Saga** http://formidable.com/blog/2017/javascript-power-tools-redux-saga/ http://formidable.com/blog/2017/composition-patterns-in-redux-saga/ http://formidable.com/blog/2017/real-world-redux-saga-patterns/ A fantastic series that teaches the concepts, implementation, and benefits behind Redux-Saga, including how ES6 generators are used to control function flow, how sagas can be composed together to accomplish concurrency, and practical use cases for sagas. - **Managing Side Effects with Redux Saga: A Primer** http://web.archive.org/web/20161112151214/https://www.sigient.com/blog/managing-side-effects-with-redux-saga-a-primer-1 Looks at how side effects complicate testing, and how sagas use descriptions of side effects to make testing easier. Also looks at how sagas fit into a Redux application architecture. - **Exploring Redux Sagas** https://medium.com/onfido-tech/exploring-redux-sagas-cc1fca2015ee An excellent article that explores how to use sagas to provide a glue layer to implement decoupled business logic in a Redux application. - **Redux-Saga: put() from inside a callback / File Upload Progress** https://decembersoft.com/posts/redux-saga-put-from-inside-a-callback/ https://decembersoft.com/posts/file-upload-progress-with-redux-saga/ A pair of posts demonstrating how to use Redux-Saga's "event channel" feature to interact with non-Redux code - **Effects as Data** https://gist.github.com/iammerrick/fc4a677cea11d9c896e8d3a29a184f91 A small essay on the benefits of treating effects as data, and how it enables decoupling - **redux-saga factories and decorators** https://medium.com/@TomasEhrlich/redux-saga-factories-and-decorators-8dd9ce074923 Some quick examples of creating reusable sagas to reduce duplicate code - **Handling action errors in Redux-Saga using Either** https://medium.com/@jamiedixon/handling-errors-in-redux-saga-using-either-12671bc6cf90 Demonstrates an approach to handling error cases in Flux Standard Actions using the functional programming "Either" concept. - **Writing more testable code with Redux-Saga** https://medium.com/grey-frogs/writing-more-testable-code-with-redux-saga-c1561f995225 Gives examples of some sagas for managing complex async query handling logic, and how to use the redux-saga-test-plan library to help test their behavior. - **Analytics on easy mode with Redux-Saga** https://goshakkk.name/analytics-easy-redux-saga/ Quick examples of how to use Redux-Saga to implement analytics handling. - **Modelling common patterns with redux-saga** 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". - **Redux Saga Retry Patterns** https://medium.com/@bryanfillmer/keep-trying-redux-saga-style-b273882b9ec https://codeburst.io/try-again-more-redux-saga-patterns-bfbc3ffcdc A pair of articles discussing ways to handle reconnects, retries, and error handling in sagas. - **Redux, Firebase, and the Saga in between** https://medium.com/rumors/redux-firebase-and-the-saga-in-between-c2bd5adf6de1 Discussion and examples of how to use sagas to simplify and generalize interaction with Firebase in a Redux app. - **When should I use a saga?** https://medium.com/@felixclack/when-should-i-use-a-saga-708cb3c75e9a Some quick rules of thumb for determining if building a saga is a good choice for a given feature. - **Redux Saga: the Viking way to manage side effects** https://www.slideshare.net/nachomartin/redux-sagas-react-alicante A comprehensive slideset that covers many aspects of sagas, from basic concepts to use with complex workflows. - **Detecting state changes with Redux-Saga** https://goshakkk.name/detect-state-change-redux-saga/ Shows a simple but useful technique for running saga behavior based on state changes rather than just dispatched actions. - **Common patterns with Redux-Saga** https://engineering.universe.com/common-patterns-with-redux-saga-ed68f89dfecf Examples of useful patterns for sagas, including running multiple requests in parallel, using the `race` keyword to time out requests, and using sagas to manage a queue of events. - **States and React: step-by-step user interaction with state machines** https://sandstorm.de/de/blog/post/states-and-react-step-by-step-user-interaction-with-state-machines.html Demonstrates managing "snackbar" popup notifications using sagas to show and hide the popups - **Taming Redux with Sagas** 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 - **Epic Middleware in Redux** https://medium.com/@kevinsalter/epic-middleware-in-redux-e4385b6ff7c6 Discussion and examples of using Redux-Observable and RxJS to create "epics" which can transform actions. - **Action Streams and Redux** https://medium.com/@markusctz/action-streams-and-redux-77f8ac99c2e9 Examples of how Redux-Observable can simplify complex async logic - **Using redux-observable to handle asynchronous logic in Redux** https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522 An extended post that compares a thunk-based implementation of handling a line-drawing example vs an observable-based implementation. - **Redux Observable to the rescue** https://medium.com/@daslusan/redux-observable-to-the-rescue-b27f07406cf2 A quick comparison of writing some complex AJAX-related logic as a thunk and with redux-observable, and some of the benefits of writing the code using observables. - **Using redux-observable for asynchronous actions** https://medium.com/imersotechblog/using-redux-observable-for-asynchronous-actions-1afb31cbc01c Looks at possible complexities in handling async requests, and how redux-observable can be used to help handle complex async behavior. - **Reactive Redux State with RxJS** 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 - **Better async Redux** https://blog.scottnonnenberg.com/better-async-redux-i18n-and-node-js-versions/ Comparisons and examples of using Redux-Loop for declarative side effects - **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. - **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. - **Testing for Race Conditions with Redux** https://paulgray.net/race-conditions-in-redux/ Examples of how to write reducer logic to handle multiple async responses that could return out of order. - **Building a React/Redux/Elm Bridge** https://medium.com/javascript-inside/building-a-react-redux-elm-bridge-8f5b875a9b76 Discusses various way to integrate React, Redux, and Elm together, including a Redux middleware that talks to Elm. - **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 - **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. ================================================ FILE: redux-techniques.md ================================================ ### Redux Techniques **Related Topics**: - [Redux Reducers and Selectors](./redux-reducers-selectors.md) - [Redux UI Management](./redux-ui-management.md) #### Debugging - **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. - **Drew Bug** https://www.youtube.com/watch?v=n8vkg_RVIRo A video demonstrating a Redux crash reporter and time travel debugger. - **Redux DevTools Without Redux** https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f Instructions on setting up the Redux DevTools browser extension to use things other than a single Redux store (such as reducers for use within a React component, or other state libs) - **Redux Error Reports Concept** https://medium.com/@jrullmann/redux-error-reports-concept-ab85b658f53e A semi-hypothetical description of tools that could be built to report errors by leveraging Redux - **A Quick Look at the React and Redux DevTools** http://mediatemple.net/blog/tips/a-quick-look-at-the-react-and-redux-devtools/ An intro to using the React DevTools and Redux DevTools extensions for debugging - **Improve your development workflow with the Redux DevTools Extension** https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83 The author of the Redux DevTools extension describes new features, including "pause/locking" for iteration on behavior, and some changes needed to add it to the store. - **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. - **Redux Logging in Production / Maximizing Debuggability in Redux** https://blog.logrocket.com/redux-logging-in-production-3b2a4816b713 https://blog.logrocket.com/maximizing-debuggability-with-redux-79b2ad07b64c A pair of articles discussing a variety of aspects and approaches for debugging Redux apps. Includes several mentions of the LogRocket service, but also covers other tools and approaches, including building your own analytics pipeline. - **Redux DevTools for Dummies** https://medium.com/@tylerwclark/redux-devtools-for-dummies-74566c597d7 An overview of the Redux DevTools Extension, including examples of how to properly add the DevTools when setting up a Redux store, and explanations of the various parts of the extension's UI. - **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. - **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 - **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. - **Standard actions in Redux** https://medium.com/@jtbennett/standard-actions-in-redux-c6a415c8aea4 A description of the Flux Standard Action specification, and how it can be used with Redux - **Redux runtime reconfiguration techniques** https://www.youtube.com/watch?v=ZvbZTXs3Y3E http://redux-reconfig.surge.sh/ http://codepen.io/vnovick/pen/pEgKww/?editors=0010#0 Discussion and demonstration of some ways to load reducers and components at runtime. - **Secure file uploads with redux-plupload** http://engineering.tes.com/post/secure-file-uploads/ Some examples of how to use Redux-Plupload to manage file uploads - **{Persist}ence is Key: Using Redux-Persist to Store Your State in LocalStorage** https://medium.com/@clrksanford/persist-ence-is-key-using-redux-persist-to-store-your-state-in-localstorage-ac6a000aee63 A quick introduction to using redux-persist to reuse store state between page refreshes - **Immuto: Strongly Typed Redux Composition** http://danielearwicker.github.io/Immuto_Strongly_Typed_Redux_Composition.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. - **Using Actions in Redux the Correct Way** http://cmichel.io/using-actions-in-redux-the-correct-way/ An interesting trick using ES6 proxies to ensure wrong action types aren't accidentally used. - **Object Oriented Functional Programming, or, How You Can Use Classes as Redux Reducers** https://medium.com/@ustunozgur/object-oriented-functional-programming-or-how-can-you-use-classes-as-redux-reducers-23462a5cae85 An exploration of how to use Immutable.js Record classes with methods as Redux reducers. This is a very non-idiomatic approach, but the article is reasonably informative. - **Exploring Interaction History with Redux-DAG-History** https://blog.atsid.com/exploring-interaction-history-d09a52a7d186 The Microsoft Research group describes a library they built to implement a "branching" approach to application history and undo/redo capabilities. - **Roll the Dice: Random Numbers in Redux** https://daveceddia.com/random-numbers-in-redux/ Some excellent examples of how "impure values" like random numbers should fit into a Redux application. - **Random in Redux** https://blog.ohlman.io/random-in-redux-b6b9932ad061 Another quick example of how to use seed values to safely generate random numbers in Redux. - **Things I learned about Redux: Don't Dispatch from React Lifecycle Methods** https://github.com/carlsverre/talk-react-redux-learnings 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. - **Manage analytics actions in React** https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de Discusses using Redux middleware and redux-observable to manage analytics behavior in isolation from the rest of the application. - **Using dynamic localization to improve accessibility with React and Redux** https://medium.com/checkr/using-dynamic-localization-to-improve-accessibility-with-react-and-redux-7650878af6ef Some quick examples and discussion of how Checkr uses the react-redux-i18 package to set up localization for their app. - **Evil things you do in Redux - dispatch in updating lifecycle methods** https://hackernoon.com/evil-things-you-do-with-redux-dispatch-in-updating-lifecycle-methods-ad116de882d4 Thoughts on the pros and cons of dispatching Redux actions in React lifecycle methods, such as causing cascades of re-renders and updates in other components. - **Redux and JSON Schema** https://blog.prismatik.com.au/redux-and-json-schema-c63368931143 Short discussion of the overall benefits of using JSON Schema to define data structures, and a Redux library that helps use those for Redux. - **A Simple Way to Implement Timers and Timeouts in Redux** https://spin.atomicobject.com/2017/11/20/timers-timeouts-redux/ A quick example of storing a "current time" value and timers as "expire times". - **Redux Dead Drop** https://medium.com/@erikras/redux-dead-drop-1b9573705bec Describes a possible technique for passing messages between widely separated components, such as triggering focus on a particular DOM node - **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 - **Why I created Redux-Tiles library to deal with Redux verbosity** 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: 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. - **Redux Action Creator Creators** https://hackernoon.com/redux-action-creator-creators-6684b051d4c6 An example of using functions that take additional arguments, and using those to generate action creators. Includes example of using this to add analytics and promises to actions. - **The only action you will ever need** https://medium.com/riipen-engineering/the-only-action-you-will-ever-need-f3a42661d2dd Looks at creating a reusable "fetch" action creator that can be customized to generate fetching logic for different REST API endpoints. - **Redux mapStateToProps and mapDispatchToProps Shorthand** https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132 A quick example of the "object shorthand" supported by `connect` for `mapDispatch`, and use of Reselect's `createStructuredSelector` for equivalent behavior of `mapState`. - **Less Redux Boilerplate with Union Types** https://codeburst.io/less-redux-boilerplate-with-union-types-3d5fd6acb53c 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. - **Abstracting Vuex/Redux Action Patterns** https://medium.com/coding-stones/abstracting-vuex-redux-action-patterns-8df36b0e2fcc Examples of generating action types and action creators that use similarly-formatted actions (such as FETCH_DATA_REQUEST/SUCCESS/ERROR). - **Stop writing mapStateToProps, start using declarative models** https://medium.com/@kyleramirez/part-1-stop-writing-mapstatetoprops-start-using-declarative-models-ce72716db9fc https://medium.com/@kyleramirez/part-2-stop-writing-mapstatetoprops-start-using-declarative-models-403734a5f9ee https://medium.com/@kyleramirez/part-3-stop-writing-mapstatetoprops-start-using-declarative-models-3eb752d811b7 Discusses a library called ReactiveRecord, which encapsulates the process of defining client-side models for REST APIs, fetching data, and reading it from the store. - **"Comments on 'reducing boilerplate'"** https://www.reddit.com/r/reactjs/comments/7069ct/i_love_redux_but_i_hate_the_boilerplate/dn1mj4s/ A great comment on what "boilerplate" actually means, how people optimize too much for initial dev time, and how Redux improves long-term maintainability. - **How to delete hundreds (or thousands) of lines of ReduxJS code** https://medium.com/@ianduvall/how-to-delete-hundreds-or-thousands-of-lines-of-reduxjs-code-4736b34f7345 Short examples of reusable action creator and reducer logic for handling "loading" state for multiple features in an app. - **Keducer - Automate writing Redux reducers with 5 lines of Javascript** 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. - **Introducing redux-recompose** https://medium.com/wolox-driving-innovation/932e746b0198 Introduces a reducer utility library to help simplify handling of async actions - **The elegance of decorated Redux** https://blog.cloudboost.io/the-elegance-of-decorated-redux-b0bd7e2de16a Looks at using `connect` as a decorator, extracting `connect` definitions for reuse with multiple components, and combining multiple connections together to apply to a single component. - **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 - **VR Redux / ReactVR Redux Revisited** http://jimpurbrick.com/2017/01/04/vr-redux/ http://jimpurbrick.com/2017/07/04/react-vr-redux-revisited/ http://jimpurbrick.com/2017/11/10/replaying-replicated-redux/ A set of posts that discuss using ReactVR and Redux to implement a networked VR application, including using a Redux middleware to synchronize actions between the clients, and approaches to managing consistency and optimistic updates. - **Firebase with Redux** https://medium.com/@prescottprue/firebase-with-redux-82d04f8675b9 Examples for combining Firebase into a Redux application - **Redux: Perils of Time** http://redux-perils-of-time.surge.sh/#/?presenter A slideshow with some intriguing thoughts on how to manage offline experiences, cached data, and optimistic UI in a Redux app. - **Introducing Redux Offline: Offline-First Architecture for Progresive Web Applications** https://hackernoon.com/introducing-redux-offline-offline-first-architecture-for-progressive-web-applications-and-react-68c5167ecfe0 An excellent blog post explaining the need for better offline behavior in web apps, and introducing a new Redux-based library that helps manage that behavior. - **Offline GraphQL Queries with Redux Offline and Apollo** http://www.east5th.co/blog/2017/07/24/offline-graphql-queries-with-redux-offline-and-apollo/ Discussion of how to use Redux Offline to enable persistance and Apollo queries of data while offline - **Redux Websocket Integration** https://medium.com/@ianovenden/redux-websocket-integration-c1a0d22d3189 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/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. - **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. ================================================ FILE: redux-tutorials.md ================================================ ### Redux Tutorials #### Basic Introductions - **Redux Docs** 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://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://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. - **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. - **What Does Redux Do? (and when should you use it?)** https://daveceddia.com/what-does-redux-do/ An excellent summary of how Redux helps solve data flow problems in a React app. - **How Redux Works: A Counter-Example** https://daveceddia.com/how-does-redux-work/ A great follow-up to the previous article. It explains how to use Redux and React-Redux, by first showing a React component that stores a value in its internal state, and then refactoring it to use Redux instead. Along the way, the article explains important Redux terms and concepts, and how they all fit together to make the Redux data flow work properly. - **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 - **Redux-Tutorial** https://github.com/happypoulp/redux-tutorial A file-based tutorial to Redux (click on each numbered .js file in the repo) - **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 nifty cartoon-ish diagrams. - **Functionally Managing State with Redux** http://wecodetheweb.com/2015/09/29/functionally-managing-state-with-redux/ A quick overview of Redux's core concepts, and how to use it with React - **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. - **Redux diagrams** https://github.com/reactjs/redux/issues/653 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 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. - **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. - **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. - **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. - **React/Redux Tutorials** https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBbSLZjvleMwldX8jGgXV6a A set of video tutorials introducing Redux concepts - **Redux for the Very Beginner** http://toranbillups.com/blog/archive/2016/01/22/redux-for-the-very-beginner/ A beginner-friendly screencast that introduces Redux - **React, Redux, and React-Redux** http://jilles.me/react-redux-and-react-redux/ Comparison and examples of implementing a filterable list with just React, with "manual" React code reading from Redux, and using the official React-Redux library - **Redux's Mysterious Connect Function** https://medium.com/mofed/reduxs-mysterious-connect-function-526efe1122e4 An overview of how to use React-Redux's `connect` function to glue together a Redux store and React components - **Why You Should Use Redux to Manage Immutability** https://www.toptal.com/javascript/immutability-in-javascript-using-redux An introduction to several aspects of Redux, including immutability concepts, use of immutable data libraries, using middleware for side effects, and connecting React to Redux - **An Introduction to Redux / Redux: Would you like to know more?** https://c3-tko.github.io/introduction-to-redux/#/ https://c3-tko.github.io/redux-would-you-like-to-know-more/#/ A pair of HTML slideshows that discuss some of the problems of storing application state, how Redux can help solve those problems, and several tradeoffs and benefits of using Redux. - **DevGuides: Introduction to Redux** http://devguides.io/redux/ A tutorial that covers several aspects of Redux, including actions, reducers, usage with React, and middleware. - **React-Redux `connect` explained** https://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/ A short but clear explanation of what the React-Redux library does, and how its `connect` function works to interact between React components and a Redux store (including several helpful diagrams). - **Redux by Example** https://medium.com/front-end-hacking/redux-by-example-part-1-4afca1b7bd58 https://medium.com/front-end-hacking/redux-by-example-part-2-e9750574e3c1 https://medium.com/front-end-hacking/redux-by-example-part-3-52e82d82d861 https://medium.com/front-end-hacking/redux-by-example-part-4-474c76eec86d A 4-part series that illustrates core Redux concepts via a series of small example repos, with explanations of the source and concepts in the articles. - **React-Redux Cheatsheet** https://github.com/uanders/react-redux-cheatsheet A diagram that tries to illustrate all the various pieces of the React+Redux API and workflow - **Beginner's guide to React/Redux - How to start learning and not be overwhelmed** https://medium.com/netscape/beginners-guide-to-react-redux-how-to-start-learning-and-not-be-overwhelmed-af04353101e A good writeup from a React/Redux beginner, with advice on how to get started learning React and Redux, how to approach building your first meaningful React+Redux application, and related topics such as file structure, data flow, and rendering logic. - **Getting Started with Redux** https://www.sitepoint.com/getting-started-redux/ https://www.sitepoint.com/redux-not-art-structuring-state-react-apps/ A pair of very readable tutorials for getting started with Redux. The first introduces Redux's core concepts while building out a small shopping cart example, and the second describes how to transition from storing data using React's `setState` over to putting it in Redux instead, and gives examples of managing real-world form state with Redux. - **When do I know I'm ready for Redux?** https://medium.com/dailyjs/when-do-i-know-im-ready-for-redux-f34da253c85f Walks through a typical process of scaling up a React application, and how Redux can help solve common pain points with data flow. Has some really neat animated diagrams that illustrate how state updates interact with the React component tree. - **4 ways to dispatch actions with Redux** https://blog.bam.tech/developper-news/4-ways-to-dispatch-actions-with-redux Describes different ways to dispatch actions from React components: directly passing the store, using `connect`, using sagas, and using the `bindActionCreators` utility. - **Introduction to Redux** https://www.kirupa.com/react/introduction_to_redux.htm A basic introduction to the ideas of storing data in Redux and dispatching actions to update that data. - **Using Redux with React** https://www.kirupa.com/react/introduction_to_redux.htm An excellent follow-up to the previous article, with explanations of why Redux is helpful in a React app, and diagrams showing the data flow. - **TLTR; Redux** https://medium.com/@nicotsou/tltr-redux-e4fc30f87e4a A clear descriptive overview of Redux's background, core concepts, principles, and usage with React. Also describes the basics of async behavior, testing, and debugging. - **Introduction to Redux / A beginner's introduction to working with Redux in React** https://dev.to/aurelkurtula/introduction-to-redux-1g3 https://dev.to/aurelkurtula/a-beginners-introduction-to-working-with-redux-in-react-13k A pair of tutorials that explain the basics of working with a Redux store and how to use the React-Redux library. - **Immutable Updates in React and Redux** https://daveceddia.com/immutable-updates-react-redux/ Good examples of how to properly update nested state immutably - **The most common Redux mistake and how to avoid it** http://blog.jakoblind.no/most-common-redux-mistake/ Quick tips on understanding how to update data immutability, and avoid mutations. - **Replacing state in Redux reducers: a few approaches** https://chariotsolutions.com/blog/post/replacing-state-in-redux-reducers-a-few-approaches/ Examples of different ways to safely update state in reducers. - **React application state management with Redux** https://chariotsolutions.com/blog/post/react-application-state-management-with-redux/ A tutorial that discusses why a state management library is useful in React apps, introduces Redux usage, and shows how to subscribe to Redux store updates both by hand and using React-Redux. #### Project-Based Tutorials - **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. Covers topics like managing relational data, connecting multiple components and lists, complex reducer logic for features, handling forms, showing modal dialogs, and much more. - **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. - **The Soundcloud Client in React + Redux** http://www.robinwieruch.de/the-soundcloud-client-in-react-redux/ A detailed walkthrough demonstrating project setup, routing, authentication, fetching of remote data, and wrapping of a stateful library. - **Full-Stack Redux Tutorial** http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html A full-blown, in-depth tutorial that builds up a complete client-server application. - **Getting Started with React, Redux and Immutable: a Test-Driven Tutorial** http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-1/ http://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/ Another solid, in-depth tutorial, similar to the "Full-Stack" tutorial. Builds a client-only TodoMVC app, and demonstrates a good project setup (including a Mocha+JSDOM-based testing configuration). Well-written, covers many concepts, and very easy to follow. - **Managing Data Flow on the Client Side** http://blog.madewithlove.be/post/redux/ Walks through a small Redux example, and talks about the benefits - **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. - **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. - **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/ https://decembersoft.com/posts/redux-hero-part-3-choose-wisely-a-fun-introduction-to-reselect-js/ https://decembersoft.com/posts/redux-hero-part-4-every-hero-needs-a-villain-a-fun-introduction-to-redux-saga-js/ An introduction to Redux and related libraries through building a small RPG-style game - **Building a Chat App with React, Redux, and PubNub** https://www.pubnub.com/blog/2016-06-14-getting-started-with-pubnub-and-react/ https://www.pubnub.com/blog/2016-06-28-reactjs-chat-app-infinite-scroll-history-using-redux/ 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 - **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. - **Zero to Hero with React and Redux** https://codequs.com/p/B1oWbS_Nyx/zero-to-hero-with-react-and-redux/ A 2-hour video tutorial that introduces Redux concepts and use with TypeScript. - **Screencast: Builting a React/Redux App from Scratch** https://medium.com/@kensodev/screencast-1-1-session-building-a-react-redux-application-from-scratch-f888c1e74c6 A 2-hour screencast demonstrating building a Redux app from the ground up - **Build a Media Library With React, Redux, and Redux-Saga** https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-1 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 - **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. - **A comprehensive React-Redux tutorial** https://spapas.github.io/2016/03/02/react-redux-tutorial/ A very long, detailed article that digs into Redux's concepts, and builds a book management application in the process. - **React and Redux Sagas Authentication App Tutorial** http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial/ http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial-part-2/ http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial-part-3/ A 3-part tutorial that builds a reasonably complex app, using Redux-Saga, Redux-Form and React-Router, with an emphasis on practical aspects of putting things together. - **Get familiar with React, Redux, and basic personal finance** https://medium.com/@ryanjyost/react-redux-react-router-and-rainy-day-fund-tutorial-e589f0803306 A tutorial that builds a small financial savings calculation app. - **Build a CRUD App Using React, Redux, and FeathersJS** 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. - **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. - **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 - **React + Redux: User Registration and Login Tutorial** http://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example A tutorial that shows how to build a React+Redux app that uses JWT authentication, with the example based on a real-world application. - **Build a Bookshop with React & Redux** https://scotch.io/tutorials/build-a-bookshop-with-react-redux-i-react-redux-flow https://scotch.io/tutorials/bookshop-with-react-redux-ii-async-requests-with-thunks Introduces React and Redux concepts by building a small bookshop app. - **How to build a Chat Application using React, Redux, Redux-Saga, and Web Sockets** https://medium.freecodecamp.org/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a A tutorial that demonstrates building a small real-time client-server chat application. - **CRUD with Redux** https://www.youtube.com/playlist?list=PLuNEz8XtB51KfnHc99GwscPy1UbLJyXHW A video screencast tutorial series that demonstrates how to build a CRUD app with React, Redux, React-Router, and MongoDB. - **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 - **Read the Source ep17 - React Redux with Dan Abramov** https://youtu.be/VJ38wSFbM3A Dan walks through the implementation and concepts of React-Redux. A great follow-up to the Egghead.io tutorial series. - **Connect.js explained** https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e A very simplified version of React Redux's `connect()` function that illustrates the basic implementation - **Build Yourself a Redux** https://zapier.com/engineering/how-to-build-redux/ An excellent in-depth "build a mini-Redux" article, which covers not only Redux's core, but also `connect` and middleware as well. - **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. - **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 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** https://www.spencerdixon.com/blog/rebuilding-redux/ A short screencast that demonstrates building a mini-Redux from scratch - **Build Alterdux: A Redux-Compatible Library From Scratch** https://antjanus.com/blog/web-development-tutorials/front-end-development/build-alterdux-redux-like-redux-compatible-library-scratch/ A useful example of building a mini-Redux from the ground up, with explanations of some of the ideas that Redux uses. - **Code your own Redux** http://blog.jakoblind.no/2017/03/13/learn-redux-by-coding-a-mini-redux/ http://blog.jakoblind.no/2017/03/20/learn-react-redux-by-coding-the-connect-function-yourself/ Another "build a mini-Redux" series, including an explanation of how React-Redux's `connect` function works - **Dissecting Redux** https://medium.com/@jankjr_/dissecting-redux-864039c6cf59 A dive through the source code of Redux looking at the parts that really matter, with discussion of the design decisions and patterns used and what consequences they have. - **"Redux without the sanity checks in a single file"** https://gist.github.com/gaearon/ffd88b0e4f00b22c3159 A gist from Dan Abramov, showing how Redux's core logic fits into less than 100 LOC. - **Reading Redux: `createStore`** https://engineering.universe.com/reading-redux-ca160163867e A guided walkthrough of the code for Redux's `createStore` function - **Implement React Redux from Scratch** https://medium.com/@kj_huang/implementation-of-react-redux-part-1-411b971a9b5b https://medium.com/@kj_huang/implementation-of-react-redux-part-2-633441bd3306 https://medium.com/@kj_huang/implementation-of-react-redux-part-3-dc54fce9746a A 3-part series that builds a slightly simplified version of the React-Redux v5 `connect` function to explain how it works. A good follow-up from Dan's "connect.js explained" gist, which shows the basic conceptual behavior of `connect`, while this one traces through the internals. - **"I use React and Redux but never React-Redux, what am I missing out on?"** https://www.reddit.com/r/javascript/comments/6hperk/i_use_react_and_redux_but_never_reactredux_what/dj0fywb/ A response I wrote to someone who asked why they should use the React-Redux `connect` function instead of subscribing to the store manually, where I described the benefits of using `connect` instead of writing manual subscription code. - **"Help getting @connect command to work with my Create-React-App project"** https://www.reddit.com/r/reactjs/comments/6l9roo/question_help_getting_connect_command_to_work/djskwqi/ A comment I wrote describing why the Redux team discourages use of `connect` as a decorator. - **tiny-redux** https://github.com/jamischarles/tiny-redux A small reimplementation of Redux, with comments explaining how the code works. - **Finally understand Redux by building your own Store** https://toddmotto.com/redux-typescript-store Teaches Redux concepts by going under the hood and building a Redux-equivalent Store class from scratch - **redux-class** https://github.com/GKhalsa/redux-class A miniature Redux and React-Redux implementation built for learning purposes #### Paid Courses and Books - **Redux in Action** https://www.manning.com/books/redux-in-action A comprehensive book that covers many key aspects of using Redux, including the basics of reducers and actions and use with React, complex middlewares and side effects, application structure, performance, testing, and much more. Does a great job of explaining the pros, cons, and tradeoffs of many approaches to using Redux. Personally recommended by Redux co-maintainer Mark Erikson. - **The Complete Redux Book** https://leanpub.com/redux-book How do I manage a large state in production? Why do I need store enhancers? What is the best way to handle form validations? Get the answers to all these questions and many more using simple terms and sample code. Learn everything you need to use Redux to build complex and production-ready web applications. (Note: now permanently free!) - **Developing a Redux Edge** https://bleedingedgepress.com/developing-a-redux-edge/ This book is for anyone wanting to learn about Redux, a predictable state container for JavaScript apps. It is aimed at intermediate developers who have a good understanding of creating single page applications with JavaScript. - **Modern React with Redux, by Stephen Grider (paid)** https://www.udemy.com/react-redux/ Master the fundamentals of React and Redux with this tutorial as you develop apps with React Router, Webpack, and ES6. This course will get you up and running quickly, and teach you the core knowledge you need to deeply understand and build React components and structure applications with Redux. - **Redux, by Tyler McGinnis (paid)** https://tylermcginnis.com/courses/redux/ When learning Redux, you need to learn it in the context of an app big enough to see the benefits. That's why this course is huge. A better name might be 'Real World Redux. If you're sick of "todo list" Redux tutorials, you've come to the right place. In this course we'll talk all about what makes Redux special for managing state in your application. We'll build an actual "real world" application so you can see how Redux handles edge cases like optimistic updates and error handling. We'll also cover many other technologies that work well with Redux, Firebase, and CSS Modules. - **Learn Redux, by Wes Bos (free)** https://learnredux.com/ A video course that walks through building 'Reduxstagram' — a simple photo app that will simplify the core ideas behind Redux, React Router and React.js - **Modern Web Apps with React and Redux (paid)** http://code.tutsplus.com/courses/modern-web-apps-with-react-and-redux A paid course on TutsPlus that builds a spaced-repetition notecard app. ================================================ FILE: redux-ui-management.md ================================================ ### Redux UI Management #### UI and Widget Implementations - **"How can I display a modal dialog in Redux?"** http://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions/35641680 Dan Abramov describes a great technique for descriptively managing React modal dialogs using Redux actions and state, by storing names of components and their props. - **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.) - **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. - **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://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. - **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** 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 - **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 - **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. ================================================ FILE: redux-without-react.md ================================================ ### Using Redux without React #### Vanilla JS and jQuery - **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 #### Angular - **An Adventure in Redux: building redux-adventure** http://csharperimage.jeremylikness.com/2016/07/an-adventure-in-redux-building-redux.html Builds a small randomized dungeon game using Redux, TypeScript, and Angular 2 - **Building Redux in TypeScript with Angular 2** http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ An extended tutorial that builds up a mini-Redux in TypeScript, then transitions to building an application - **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. - **Build a Better Angular 2 Application with Redux and ngrx** http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/ An extended article that demonstrates how to build a Redux-based Angular 2 app using the ngrx store implementation. Some interesting discussion in the comments. - **Real World Angular** 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 - **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. - **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** 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. - **Learn Redux in Angular with NgRx Store** https://malcoded.com/posts/angular-ngrx-guide An extensive tutorial that introduces the concept of Redux and its Angular equivalent NgRx/store, and walks through building a small Angular currency conversion app. - **Ultimate Angular: NGRX Store + Effects** https://ultimateangular.com/ngrx-store-effects A free video course from Angular expert Todd Motto. Covers core Redux concepts, writing a Redux store, the NgRx version of Redux, and how to use the ngrx/effects library for handling side effects. - **NGRX Store: Understanding State Selectors** https://toddmotto.com/ngrx-store-understanding-state-selectors A deep look at how selectors can be used to extract data from a store and transform it as needed by components. - **NGRX Store: Actions vs Action Creators** https://toddmotto.com/ngrx-store-actions-versus-action-creators Describes the reasons for defining actions as constants, namespacing actions, using action creator functions, and defining actions as TypeScript classes - **"ngrx/store vs angular/store"** https://www.reddit.com/r/Angular2/comments/67coeo/ngrxstore_vs_angularreduxstore/ Discussion of the differences between ngrx/store and angular/store, with a comparison from an angular/store contributor - **A Beginner's Guide to Ngrx/store** https://medium.com/stratajet-tech/a-beginners-guide-to-ngrx-store-bc2184d6d7f0 Describes how ngrx/store implements the Redux pattern using RxJS, and walks through a todo app tutorial #### Ember - **Why ember redux?** http://toranbillups.com/blog/archive/2017/08/02/why-ember-redux/ The author of the ember-redux lib talks about why he likes Redux, and why he prefers using it with Ember. - **The Frontside Podcast: ember-redux and glimmer-redux** https://frontside.io/podcast/055-redux-and-ember-with-toran-billups https://frontside.io/podcast/089-glimmer-redux-with-toran-billups A pair of podcasts with the creator of ember-redux and glimmer-redux - **Setting Up Redux + Observables in an Ember App** https://medium.com/@john.sniezek/setting-up-redux-observables-in-an-ember-app-aca9dccdd152 A tutorial that shows how to set up ember-redux and add redux-observable. - **Using ember-changeset with ember-redux** https://emberway.io/using-ember-changeset-with-ember-redux-200a7e46c59a Examples of using a tool called ember-changeset to handle in-progress form edits in conjunction with the ember-redux bindings. #### Aurelia - **Managing State in Aurelia: How to Use Aurelia with Redux** https://www.sitepoint.com/managing-state-aurelia-with-redux/ A tutorial that builds a small Markdown editor three ways: pure Aurelia with data binding, Aurelia with Redux to manage state, and then implementation of undo/redo on top. - **Managing State in Aurelia: How to Use Aurelia with Redux** https://www.sitepoint.com/managing-state-aurelia-with-redux/ 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.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 - **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# - **Something Useless - Redux Implemented in Elixir** http://hostiledeveloper.com/2017/04/18/something-useless-redux-implemented-in-elixir.html An Elixir developor walks through implementing Redux in Elixir - **Advanced Redux in Xamarin** https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-1-action-creators-19cb257093d2 https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-2-persistent-actions-middleware-2c1c684328a https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-3-database-middleware-5dac7b5ee6ba Discusses how to use a C# implementation of Reedux, including the concepts of action creators and thunks, implementing persistence via middleware, and interacting with a database. - **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 - **Getting started with Redux in Swift** https://medium.com/mackmobile/getting-started-with-redux-in-swift-54e00f323e2b An overview of how to use the ReSwift library as part of an iOS app. - **Cedux: Experimenting with the Redux Model in C for Managing State** https://spin.atomicobject.com/2017/11/27/redux-model-in-c-cedux/ Examples of an experimental implementation of Redux in C - **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 - **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#. ================================================ FILE: static-typing.md ================================================ ### Static Typing #### Pros and Cons - **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. - **Why use static types in Javascript?** https://dev.to/iampeekay/why-use-static-types-in-javascript-part-1 Part 1 of a 4-part series on static typing: intro to Flow syntax, advantages and disadvantages of static types, and whether they should be used with Javascript. #### React PropTypes - **React Docs: Typechecking With PropTypes** https://facebook.github.io/react/docs/typechecking-with-proptypes.html The official reference docs for PropTypes - **What are PropTypes?** https://themeteorchef.com/snippets/what-are-proptypes/ An introduction to React's PropTypes feature and how it can help create more predictable APIs for components. - **React PropTypes & Flow types cheat sheet** https://medium.com/@chenglou/react-proptypes-flow-types-cheat-sheet-ed80f8e1383d Some quick comparisons and gotchas between the two type declaration approaches - **Accessing React PropTypes Meta-data** https://medium.com/@nunogrilopinheiro/accessing-react-proptypes-meta-data-45b3465abda7 A look at how to access PropTypes info at runtime using various tooling - **React: Validating Children** http://www.mattzabriskie.com/blog/react-validating-children Examples of using PropTypes to enforce what children can be passed to a component - **React Pattern: Centralized PropTypes** https://medium.freecodecamp.org/react-pattern-centralized-proptypes-f981ff672f3b Discusses creating centralized definitions of data structures using PropTypes to reduce repetition, and suggests a few other good practices for working with PropTypes. #### TypeScript - **TypeScript: the Missing Introduction** https://toddmotto.com/typescript-the-missing-introduction An introduction to TypeScript's concepts, with explanations of a number of terms related to compilers and static typing. - **TypeScript Deep Dive** https://basarat.gitbooks.io/typescript/content/ An online book that digs into numerous TypeScript topics - **Immutable.js Records in TypeScript** https://spin.atomicobject.com/2016/11/30/immutable-js-records-in-typescript/ Examples of setting up typing for custom classes based on Immutable.js's Record class. - **Strongly Typing Injected React Props** https://medium.com/@prashaantt/strongly-typing-injected-react-props-635a6828acaf A demonstration of using TypeScript to define prop types for a React component, and enforcing behavior based on that. - **Hybrid Types in TypeScript** https://turbomack.github.io/posts/2016-12-07-hybrid-types-in-typescript.html Examples of adding type checking to some dynamic code that uses d3 for visualization. - **A Typed pluck: exploring TypeScript 2.1's mapped types** https://medium.com/@danvdk/a-typed-pluck-exploring-typescript-2-1s-mapped-types-c15f72bf4ca8 Detailed explanation of how the "mapped types" feature in TS 2.1 can be used to add typing to functions that map over data - **Hello World with Webpack, TypeScript, and React** https://www.bennadel.com/blog/3293-hello-world-with-webpack-and-typescript-2-3-4-in-react-15-6-1.htm An example of setting up a project that uses Webpack, React, an TypeScript together. - **Yet Another TypeScript Book** https://pagalvin.gitbooks.io/yet-another-typescript-book/content/ A casual introduction to the main features of TypeScript. #### Flow Tutorials - **The Fundamentals of Flow in 10-ish Minutes** https://www.youtube.com/watch?v=xWMuAUbXcdQ A short presentation that looks at what Flow is, benefits, and how to use it - **Go with the Flow - A Static Type Checking Tool for Javascript** https://www.theodo.fr/blog/2016/11/go-with-the-flow-a-static-type-checking-tool-for-javascript/ A quick introduction to Flow, its usage, and some comparisons with Typescript. - **Setting up Flow when you've already got Babel in place** https://medium.freecodecamp.com/using-flow-with-babel-c04fdca8d14d Instructions for integrating Flow into an existing project - **Eradicate Runtime Errors in React with Flow** http://technologyadvice.github.io/eradicate-runtime-errors-in-react-with-flow/ An introduction to Flow's benefits in a project, and how to use it - **Flow Guide: The Definitive Guide for using Flow** https://github.com/ryyppy/flow-guide Instructions on setting up Flow, a style guide, and links to further info - **Why Use Flow?** https://blog.aria.ai/post/why-use-flow/ A look at the concepts of static typing and type inference, examples of using Flow to add type declarations to code, and pointers to further information on Flow. - **Why You Need Types** http://jaysoo.ca/2016/08/23/why-you-need-types/ Some thoughts on how static typing can help development, with examples using Flow. - **Better docs and static analysis** https://blog.scottnonnenberg.com/better-docs-and-static-analysis/ A walk through setting up Flow, some possible problems you might encounter, and ways to customize and improve the typing process. - **Getting Started with Flow and Webpack** https://blog.iansinnott.com/getting-started-with-flow-and-webpack/ Walks through the process for adding Flow to an existing Webpack+Babel project. - **Flow type cheat sheet** http://www.saltycrane.com/blog/2016/06/flow-type-cheat-sheet/ A comprehensive list of built-in Flow types - **Notes on Flow type checking in Javascript** https://davidxmoody.com/2016/notes-on-flow-type-checking-in-javascript/ A variety of quick notes and snippets of Flow syntax for various use cases - **Flow Fundamentals for JavaScript Developers** https://gist.github.com/busypeoples/61e83a1becc9ee9d498e0db324fc641b A JS file in a gist that provides a commented walkthrough of Flow concepts and syntax. - **Flow type checking tips** https://medium.com/@_kamerontanseli/flow-type-checking-tips-393e5323c040 Useful lessons learned from adding Flow to an existing codebase, including handling type declarations, using Flow's utility types, and ensuring immutability. #### React, Redux, and Static Types - **Checking React and Redux Code with Flow** http://djcordhose.github.io/react-intro-live-coding/2016_jsunconf.html#/ A slideshow that shows the basics of adding type information to Redux-based code - **Using Redux with Flow** http://frantic.im/using-redux-with-flow Covers how to use Flow typing with Redux - **Type Checking with Flow in React + Redux** http://www.robinwieruch.de/the-soundcloud-client-in-react-redux-flow/ Demonstrates setting up static typing with an existing project - **Redux Flow Tutorial** http://dchambers.github.io/articles/redux-flow-tutorial/ Covers how to set up Flow for type-checking a Redux application - **Typed Redux** https://blog.callstack.io/typed-redux-2aa8bff926ff Examples of how to use Flow to add typing to Redux apps - **Tagged Unions, React, and Redux** https://hackernoon.com/tagged-unions-react-and-redux-55e262e4d0ea Examples of using Flow union types to define component props - **Typing React Components** https://datarockets.com/blog/typing-react-components Examples of migrating from React PropTypes to Flow, as well as typing Redux usage - **Type-Checking React and Redux with Flow** https://blog.callstack.io/type-checking-react-and-redux-thunk-with-flow-part-1-ad12de935c36 https://blog.callstack.io/type-checking-react-and-redux-thunk-with-flow-part-2-206ce5f6e705 Examples of how to define Flow types for React components and Redux functions - **How the Debugger got into the Flow** http://jasonlaster.github.io/devtools/js/2017/01/20/typing-the-debugger.html A look at how the Firefox DevTools team uses Flow to help type their React and Redux code for improved maintainability - **Typed Redux: Redux Revisited** https://www.ajostrow.me/articles/redux-revisited A follow-up to an earlier post by the author, giving an updated set of thoughts on use of TypeScript with Redux - **Type-safe Flux Standard Actions in React** https://www.triplet.fi/blog/type-safe-flux-standard-actions-fsa-in-react-using-typescript-fsa/ Describes the "Flux Standard Action" concept, and how the TypeScript FSA library can be used to help generate FSAs in a type-safe way. - **Type-Safe Asynchronous Actions (Redux-Thunk) Using TypeScript FSA** https://www.triplet.fi/blog/type-safe-asynchronous-actions-redux-thunk-using-typescript-fsa/ Examples of how to generate and use type-safe async actions in TypeScript - **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 - **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 - **React, Redux, and TypeScript: Typed Connect** https://www.silviogutierrez.com/blog/react-redux-and-typescript-typed-connect/ Discusses a simpler set of typings for the `connect` function and how to use them with React. - **A New Redux Action Pattern for TypeScript 2.4+** https://spin.atomicobject.com/2017/07/24/redux-action-pattern-typescript/ Describes how to use the new features in TS 2.4, such as string enums, to simplify defining types for Redux actions. - **Best Practices for Flow Typing React Components** https://building.coursera.org/blog/2017/06/01/best-practices-for-flow-typing-react-components/ Several useful suggestions and examples for using Flow types with React components. - **React Higher-Order Components using TypeScript** https://www.triplet.fi/blog/react-higher-order-components-hoc-using-typescript/ Examples of how to properly write React HOCs in TypeScript, including adding types. - **React and TypeScript: The Basics** https://spin.atomicobject.com/2017/10/31/react-typescript-basics/ Covers important questions you might have when using React and TypeScript together, including approaches for project setup, adding NPM packages, typing React components, using Redux, and more. - **Typing Higher-Order Components in Recompose with Flow** https://medium.com/flow-type/flow-support-in-recompose-1b76f58f4cfc Describes some of the work needed to add Flow types for the Recompose library, and how to use Recompose, Flow, and React together. - **Type-safe React + Redux: Eliminating the 'any' type** https://medium.com/@joeldalley/type-safe-react-redux-eliminating-the-any-type-dad21ebd3cd5 Examples of declaring types for data modeling, Redux actions and reducers, Redux-Observable epics, and React components. - **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. - **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. - **Back to the Basics: Using React + Flow** https://medium.com/javascript-inside/back-to-the-basics-1bd3b12e38dc https://medium.com/javascript-inside/back-to-the-basics-using-react-flow-pt-2-99292993829f A series that demonstrates using Flow to add static typing for a Tic-Tac-Toe game - **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. - **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 - **Runtime Introspection of Flow Types** https://medium.com/@joe_stant/runtime-introspection-of-flow-types-ddb7e5b042a5 A look at some ways to potentially use Flow types for further analysis using various tooling - **Phantom Types with Flow** https://medium.com/@gcanti/phantom-types-with-flow-828aff73232b Description of an advanced technique for tracking data flow using types - **Exhaustive switch in Flow** https://ouicar.github.io/2016/08/08/exhaustive-switch.html A trick to help catch missing case errors in switch statements. - **Flow Cookbook** http://sitr.us/2016/12/20/flow-cookbook.html Assorted useful techniques for using Flow types - **Secret Flow Types** https://medium.com/@raxwunter/secret-flow-types-86b2ebb30951 A list of "advanced" Flow type declarations, such as Keys, Diff, and Shape. - **Stronger JavaScript with Opaque Types** https://codemix.com/opaque-types-in-javascript/ Describes how to use Flow's "opaque types" feature to make otherwise compatible types separate, such as an account number and a balance. - **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 - **Flow as a replacement for PropTypes** http://blog.rstankov.com/flow-as-replacement-for-proptype/ Describes some limitations of PropTypes, and how Flow can help solve those - **Flow vs TypeScript** http://djcordhose.github.io/flow-vs-typescript/flow-typescript-2.html#/ A comparison of the features, goals, and usage of both type systems - **Typescript vs Flow** https://gist.github.com/voltrevo/ecb5b7292707d29b13ae453ae0b529d9 A comparison of common features, advantages in either system, missing features, and other aspects. - **TypeScript vs Flow** https://github.com/niieani/typescript-vs-flowtype An in-depth, unbiased comparison of differences and similarities between TypeScript and Flow - **TypeScript vs Flow** https://blog.mariusschulz.com/2017/01/13/typescript-vs-flow Some quick thoughts on both Flow and TS being "non-standard JS", with good discussion in the comments. - **TypeScript, Flow, and the Importance of Toolchains over Tools** https://dzone.com/articles/typescript-flow-and-the-importance-of-toolchains-o Some thoughts on why type checkers are important, how they differ, and what considerations go into selecting a type checking tool - **Refactoring 30000 Lines of JS with types** https://www.reaktor.com/blog/refactoring-30000-lines-js-types/ A description of the Reaktor team's approach to adding types to their project, their experience with both Typescript and Flow, and why they chose Typescript. - **How we migrated a 200K+ LOC Project to TypeScript** https://hashnode.com/post/how-we-migrated-a-200k-loc-project-to-typescript-and-survived-to-tell-the-story-ciyzhikcc0001y253w00n11yb The Coherent Labs team discusses the tradeoffs in using static typing for JS code, why they chose TypeScript, and how they approached migrating their codebase to TypeScript. - **Why I was looking forward to Flow, and then I wasn't** https://medium.com/@ckoster22/why-i-was-looking-forward-to-flow-and-then-i-wasnt-7c0a86f2d603 Some useful thoughts on the tradeoffs involved in using Flow - **Flow: What's the verdict?** https://amplitude.engineering/flow-whats-the-verdict-9a458ecde27f Thoughts on some pros and cons of using FLow, including dealing with code that doesn't have types, and several specific use cases the Amplitude team has run into. - **Going Statically Typed with Flow** https://labs.contactually.com/going-statically-typed-with-flow-72626ed86cec Some thoughts on why Contactually opted to use Flow for their React+Redux app, including ease of integrating Flow into an existing app. - **Typed JavaScript with TypeScript, Flow, and Elm** http://djcordhose.github.io/flow-vs-typescript/elm-flow-typescript.html#/ A slideshow that discusses the benefits of using type systems, and looks at how TS, Flow, and Elm compare in several aspects. - **Flow and TypeScript** https://engineering.tumblr.com/post/165261504692/flow-and-typescript The Tumblr engineering team discusses their experience comparing Flow and TS, and why they opted to use TS. - **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. - **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. ================================================ FILE: thinking-in-react-and-flux.md ================================================ ### Thinking in React and Flux **Related Topics** - [React Component Patterns](./react-component-patterns.md) - [React State Management](./react-state-management.md) - [React Architecture and Best Practices](./react-architecture.md) - [Redux Architecture and Best Practices)](./redux-architecture.md) - [Project Structure](./project-structure.md) ================================================ FILE: tips-and-best-practices.md ================================================ ### Tips, Guidelines, and Best Practices **Related Topics** - [React Architecture and Best Practices](./react-architecture.md) - [Redux Architecture and Best Practices](./redux-architecture.md) ================================================ FILE: using-react-with-es6.md ================================================ ### Using React with ES6 #### React Component Definitions - **Which React Component Class Syntax Should I Use?** http://reactkungfu.com/2015/07/what-react-component-class-syntax-should-i-use/ Compares the standard React.createClass() syntax vs ES6 React.Component class syntax - **Coding with React like a Game Developer** https://medium.com/@PhilPlckthun/coding-with-react-like-a-game-developer-e39ffaed1643 Demonstrates React usage with ES5 vs ES6, plus some other topics - **The React Quick Start Guide: ES6 Edition** http://www.jackcallister.com/2015/08/30/the-react-quick-start-guide-es6-edition.html An ES6 version of the other guide listed earlier - **Digging Into React: Choosing Component Styles** http://benmccormick.org/2016/05/02/digging-into-react-choosing-component-styles/ A comparison of the three ways to define a React component. Good descriptions, and links to some other related discussions. - **Refactoring React Components to ES6 Classes** http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes Walks through the steps needed to convert an older-style `React.createClass()` component to use the newer ES6 class syntax instead. - **React ES5 to ES6 Checklist** https://github.com/cht8687/React-ES5-To-ES6-Checklist A checklist of steps and changes to refactor your ES5-based React code to use ES6 features - **React `createClass` vs ES6 Class Components** https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/ A comparison of the different ways to create class components in React, and some of the differences between how they behave (including method binding) #### Methods and Instance Binding - **React and ES6 - Binding Approaches** http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html Various methods of binding "this" in React ES6 classes - **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, ES6, Autobinding, and createClass()** http://blog.andrewray.me/react-es6-autobinding-and-createclass/ A useful review of how JS function binding works, and how to handle it in ES6 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 comments, giving his thoughts on how to handle method binding. - **Do you even need that bind?** https://swizec.com/blog/do-you-even-need-that-bind/swizec/7247 A dive through React's implementation of event handling, and why callback binding is needed - **Use Property Initializers for Cleaner React Components** https://www.fullstackreact.com/articles/use-property-initializers-for-cleaner-react-components/ A look at how the "Class Properties"/"Property Initializer" syntax allows much cleaner definition of method binding, and how to configure Babel to use that syntax - **Javascript, React, This, and Programming Fundamentals** https://www.andrewfong.com/blog/2017/05/13/javascript-react-this-and-programming-fundamentals/ A helpful explanation of how `this` works in Javascript, how method binding works, and how that relates to React classes and class methods. #### Method Binding Utilities - **React-Autobind** https://github.com/cassiozen/React-autobind A useful utility to bind class methods. A good compromise - makes binding explicit, but removes repetition. - **react-bind-decorator** https://github.com/zackargyle/react-bind-decorator Another autobinding approach, intended to be fast and performant. - **react-class-binder** https://github.com/Klathmon/react-class-binder https://www.reddit.com/r/reactjs/comments/4p0ytu/i_made_a_small_package_to_easily_autobind_this_in/ Automatically bind methods defined in a React component using the ES2015 class syntax (similar to how React.createClass works). The Reddit comments have discussion on some differences between the various libs that implement autobinding. - **Reflective Bind** https://github.com/flexport/reflective-bind A Babel plugin that transforms use of inline functions in render methods so you don't have to worry about rendering performance. ================================================ FILE: webpack-advanced-techniques.md ================================================ ### Webpack Advanced Techniques #### Build Optimization - **Webpack: Build Performance** https://github.com/webpack/docs/wiki/build-performance Webpack docs on ways to speed up builds. - **How to make your webpack builds 10x faster** http://www.slideshare.net/trueter/how-to-make-your-webpack-builds-10x-faster Slideshow that lists a number of approaches for making Webpack builds faster, such as narrowing scope, using the DllPlugin, using HappyPack for parallel builds, and more. - **Advanced Frontend Optimization with Webpack** http://sokra.github.io/slides/frontend-optimize Slides by Webpack's original author, describing ways to improve Webpack builds. - **Fixing annoying imports in React Projects** https://medium.com/datawallet-tech/fixing-annoying-imports-in-react-projects-895a6ad24c24 A quick example of using Webpack's module aliasing to simplify import paths, with further discussion in the comments. - **Webpack Plugins we been keeping on the DLL** https://medium.com/@soederpop/webpack-plugins-been-we-been-keepin-on-the-dll-cdfdd6cb8cd7 An overview of Webpack's DllPlugin, and how it can be used for faster dev builds. - **DllPlugin usage summary** https://github.com/erikras/react-redux-universal-hot-example/issues/616#issuecomment-228956242 Notes from a user who wants to document his findings on usage of DllPlugin. Pretty thorough. - **Implement Webpack DLL Plugin for React-Boilerplate** https://github.com/mxstbr/react-boilerplate/pull/495 A PR adding usage of DllPlugin to React-Boilerplate. Thorough and well-commented - should be a very useful reference to anyone trying to set it up in their own project. - **Optimizing Webpack** http://engineering.invisionapp.com/post/optimizing-webpack/ Explains how to use DllPlugin to pre-bundle vendor libraries for faster build times. - **Manually Tuning Webpack Builds** https://medium.com/@xjamundx/manually-tuning-webpack-builds-284923f47f44 Tips for cutting down bundle sizes by removing duplicate library instances and fine-tuning usage of various libraries. - **Tips for faster Webpack builds** https://www.reddit.com/r/javascript/comments/4xuknm/webpack_dashboard/d6jdl8z A Reddit comment with several useful tips to follow when trying to speed up builds - **Formidable Playbook** https://formidable.com/open-source/playbook/ Formidable Labs describes their preferred approaches for configuring Webpack, including optimization approaches. - **Webpack Performance: The Comprehensive Guide** https://github.com/lcxfs1991/blog/issues/15 An in-depth look at the parts that go into a Webpack build, and how each piece can be optimized for a faster build. - **Speeding up Webpack performance with parallel builds** http://tech.trivago.com/2015/12/15/parallel-webpack/ Describes a tool called `parallel-webpack`, which can build multiple entry points in multiple formats in parallel. - **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. - **Tree-shaking ES6 Modules in Webpack 2** https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b A look at the concept of tree-shaking to reduce output size, how it relates to module formats, and how to configure Webpack to properly allow for tree-shaking - **Webpack tree-shaking** https://medium.com/@johnstew/webpack-tree-shaking-20914b7a9ca5 An explanation of what tree-shaking is, how to configure Webpack to apply it, and how it works. - **How to optimize Moment.js with Webpack** https://github.com/jmblog/how-to-optimize-momentjs-with-webpack Tips on using IgnorePlugin and ContextReplacementPlugin to strip out uneeded locales from Moment - **Declaratively Rendering Earth in 3D, Part 1: Building a Cesium + React App with Webpack** http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/ Shows how to configure Webpack to load the Cesium 3D globe library, and how to set up a Webpack config that uses DllPlugin to build a separate bundle for Cesium. - **Tree shake Lodash with Webpack, Jest, and Typescript** https://medium.com/@martin_hotell/tree-shake-lodash-with-webpack-jest-and-typescript-2734fa13b5cd Walks through ways to configure Webpack and Babel to properly tree shake Lodash so that it only includes used functions. - **Webpack for real tasks: decreasing front-end size and improving caching** https://iamakulov.com/notes/webpack-front-end-size-caching/ Covers a variety of ways to improve bundle sizes, including minification with Uglify, tree shaking imports, referencing external libraries, and more. - **Webpack 3 + React - Production Build Tips** https://medium.com/netscape/webpack-3-react-production-build-tips-d20507dba99a General advice for improving Webpack builds, including code splitting, minification, and several more. Includes a complete Webpack config file at the end with the proper settings. - **d-l-l: Easy, automatic, optimized DLL config handler for Webpack** https://survivejs.com/blog/dll-interview/ An interview with the author of a tool for automatically generating DLL bundles, discussing how to use it and how it works. - **High-performance webpack config for front-end delivery** https://www.codementor.io/drewpowers/high-performance-webpack-config-for-front-end-delivery-90sqic1qa Covers 7 optimizations you can add to a Webpack setup to build bundles faster and make them smaller. - **Unpacking the Mysteries of Webpack** https://www.viget.com/articles/unpacking-the-mysteries-of-webpack-a-novices-journey Recaps some high-level Webpack terms and concepts, and walks through several changes to speed up compilation and improve bundle size. - **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 - **React-Router and Webpack in Production** https://reactjsnews.com/webpack-in-production Tips on dynamically loading route views and optimizing chunk sizes - **Webpack Async Bundle Loading** http://jilles.me/webpack-async-bundle-loading/ A quick look at how to delay-load some portion of your app's code. - **Code Chunking with Webpack** https://medium.com/react-weekly/code-chunking-with-webpack-a-pragmatic-approach-e17e8bcc6453 Covers how to configure chunked bundles and dynamic bundle loading with Webpack and React-Router. - **Dynamic Vendor Bundling in Webpack** https://medium.com/jeremy-gayed/dynamic-vendor-bundling-in-webpack-528993e48aab An approach to dynamically adding anything from `node_modules` to a "vendor" bundle - **Webpack Config: Commons Chunk Plugin part 1** https://www.youtube.com/watch?v=-xzWMKuiS2o An intro to what the Webpack Commons Chunk Plugin does and how it works - **A beginner's step-by-step guide to Code Splitting with Webpack 2 and React Router** http://brotzky.co/blog/a-beginners-step-by-step-guide-to-code-splitting-with-webpack-2-and-react-router/ An excellent guide to concepts and configuration needed for code splitting. - **Lazily Load Code Declaratively in React and Webpack** https://gist.github.com/iammerrick/f3f9edfbf5dc279af775f73020193dcc Demonstrates one way to request and render components on demand, using Webpack's bundle-loader - **Building Vendor and Feature Bundles with Webpack** http://odetocode.com/blogs/scott/archive/2016/12/01/building-vendor-and-feature-bundles-with-webpack.aspx Demonstrates using DllPlugin to build a vendor bundle, and generating multiple bundles for different features by dynamically building up multiple entry points. - **Components a la carte** http://darrennewton.com/2016/12/21/components-a-la-carte/ Describes a technique for dynamically loading only certain features that a user should see - **Dynamic Imports with Webpack 2** https://dev.to/kayis/dynamic-imports-with-webpack-2 A quick example of how to use dynamic imports to load pages or components at runtime - **Lazy Loaded React Components with Webpack 2** https://dev.to/kayis/lazy-loaded-react-components-with-webpack-2 A follow-on to the previous article, showing how to extend the dynamic imports approach to lazily load and render components - **Vendor and code splitting in Webpack 2** https://medium.com/@adamrackis/vendor-and-code-splitting-in-webpack-2-6376358f1923 An excellent dive into multiple aspects of code splitting, including basic setup, advanced config, and some Webpack gotchas/tips. - **How to use Webpack's new "magic comment" feature with React Universal Component + SSR** https://medium.com/webpack/how-to-use-webpacks-new-magic-comment-feature-with-react-universal-component-ssr-a38fd3e296a Introduces Webpack's new "magic comments" feature for defining chunk names, and shows how to use that in association with a couple of libraries for optimized server-side rendering approaches - **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. - **Impress Your Friends with Code Splitting in React** https://hackernoon.com/impress-your-friends-with-code-splitting-in-react-9f9a3ca2ae6e Examples of using `async/await` and dynamic `import()` to lazy-load React components and display them after they're loaded. - **ECMAScript Asychronicity - dynamic import** https://blog.eleven-labs.com/en/ecmascript-asynchronicity-dynamic-import/ Recaps ES6 module behavior and use of Webpack's CommonsChunkPlugin, and describes how to lazy load code using `require.ensure` and the new dynamic `import()` capability. - **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 An excellent pair of posts that cover ways to structure components in terms of features, load them at runtime using Webpack's dynamic importing, and apply the same principles to loading Redux feature logic. - **How to reduce your bundle size by automatically getting your dependencies from a CDN** https://medium.com/comparethemarket/how-to-reduce-your-bundle-size-by-automatically-getting-your-dependencies-from-a-cdn-96b25d1e228 A quick example of using the `dynamic-cdn-webpack-plugin` to have your bundle reference libraries from the Unpkg CDN, rather than including them in the main bundle. - **Webpack 3, Dynamic Imports, Code Splitting, and Long Term Caching Made Easy** https://blog.cloudboost.io/webpack-3-dynamic-imports-code-splitting-and-long-term-caching-made-easy-1892981e0ae7 Describes how to configure Webpack and use React-Loadable to set up code-splitting, as well as set up consistent module hash IDs. - **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 - **Building Better Bundles** http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-generic-redux-modals-and-building-better-bundles/ An article describing what `process.env.NODE_ENV` means, and how it is used as part of a production build process to optimize build sizes - **Chat discussion - summary of process.env.NODE_ENV and its use with Webpack** https://gist.github.com/markerikson/6776848172c33aaa4db882627c689e18 An overview of how the `process.env.NODE_ENV` variable is often used to define optimizations for Webpack production builds - **Webpack Bloat** http://www.jamesonnetworks.com/entry/webpack-bloat Discussion of how to improve production configurations for smaller bundle sizes - **"Vector.im bundle is too big - analysis"** https://github.com/vector-im/vector-web/issues/2498 Web perf expert Nolan Lawson analyzes why the JS bundle for the Vector.im web app is too big, and ways it could potentially be improved using code splitting and app structure changes. A good example of ways to improve bundle sizes. - **Unlocking a Mystery: Visualizing the Common Webpack Bundles** https://www.redfin.com/blog/2016/12/unlocking-a-mystery-visualizing-the-common-webpack-bundles.html A recap of some previous tools used to analyze Webpack bundle sizes, and description of a new tool they built to provide better bundle visualization - **Analysing and minimising the size of client side bundle with Webpack and source-map-explorer** https://medium.com/@nimgrg/analysing-and-minimising-the-size-of-client-side-bundle-with-webpack-and-source-map-explorer-41096559beca Tips on using source-map-explorer to check the size of code included in a minified bundle, and removing unneeded polyfills - **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 - **Avoid Webpack bloat: Optimize your dependencies** https://www.zillow.com/engineering/webpack-optimize-dependencies/ Tips for tracking bundle sizes and managing dependency handling - **Webpack bits: getting the most out of the CommonsChunkPlugin** https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318 Sean Larkin of the core Webpack team shares examples of common bundle size problems, and how to use the CommonsChunkPlugin to extract heavily used libraries into a separate bundle. - **Weeding Out Your ES6 Webpack Bundle Sizes** https://medium.com/lendingtree-engineering/weeding-out-your-es6-webpack-bundle-sizes-62cbc5a62a30 A recap of how adding a couple libraries to a production app resulted in much larger bundles, and some practical steps that can be taken to investigate and improve bundle sizes - **How Webpack's ContextReplacementPlugin works** https://iamakulov.com/notes/all/webpack-contextreplacementplugin/ An explanation of how ContextReplacementPlugin can be used to alter what files Webpack loads into a bundle. - **How to do proper tree-shaking in Webpack 2** https://blog.craftlab.hu/how-to-do-proper-tree-shaking-in-webpack-2-e27852af8b21 Explains several important concepts related to tree shaking, and how to configure Webpack and other tools to ensure it happens correctly. - **3 ways to reduce Webpack bundle size** http://blog.jakoblind.no/2017/05/18/3-ways-to-reduce-webpack-bundle-size/ A quick summary of some possible approaches to optimize bundle sizes, with links to more information - **Introducing Bonsai: an open source Webpack analyzer** https://medium.com/@Pinterest_Engineering/introducing-bonsai-an-open-source-webpack-analyzer-6bdfe22f8984 The Pinterest team describes the problems they'd encountered optimizing their Webpack bundles, and introduces a new tool to help analyze bundles and dependency trees. - **Size Limit: Make the Web Lighter** https://evilmartians.com/chronicles/size-limit-make-the-web-lighter Demonstrates writing a tiny library that results in a 100KB Webpack bundle, and then walks through improving the Webpack settings to improve bundle size to only 17B. - **Put Your Webpack Bundle On A Diet** https://www.contentful.com/blog/2017/10/10/put-your-webpack-on-a-diet-part-1/ https://www.contentful.com/blog/2017/10/19/put-your-webpack-bundle-on-a-diet-part-2/ https://www.contentful.com/blog/2017/10/27/put-your-webpack-bundle-on-a-diet-part-3/ A multi-part series that covers approaches for shrinking bundle size, ranging from simply using Webpack's -p flag up to advanced optimizations. - **What Lurks Within: Reducing Bundle Sizes with Webpack Bundle Analyzer** http://engineering.teacherspayteachers.com/2017/12/20/reducing-bundle-sizes-with-webpack-bundle-analyzer.html Tips for using the Webpack Bundle Analyzer tool to track down large dependencies. - **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://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** https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf 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** 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** http://blog.isquaredsoftware.com/2017/08/blogged-answers-webpack-hmr-vs-rhl/ A description of the differences between the HMR API offered by Webpack and how the React-Hot-Loader tool works, and advice on using "plain HMR". - **SurviveJS: Hot Module Replacement** https://survivejs.com/webpack/appendices/hmr/ A guide to HMR concepts and usage, written by a Webpack core team member - **Live Editing Javascript with Webpack** http://jlongster.com/Backend-Apps-with-Webpack--Part-III Some interesting and advanced tricks for ways HMR could be used. - **Using React with "plain" Webpack HMR** https://github.com/reactjs/redux/pull/1455 Dan Abramov removes use of the React-Transform plugin from Redux's examples, and demonstrates how to use the "plain" Webpack HMR API to do reloading of updated components, reducers, and other code. - **Basic HMR Usage Example** https://gist.github.com/markerikson/dc6cee36b5b6f8d718f2e24a249e0491 An extracted example demonstrating using "plain" HMR to reload components, reducers, and even sagas. - **React - Hot Module Reload** https://medium.com/@baphemot/react-hot-module-reload-f6b3d34b9b86 An explanation of how to set up HMR using React-Hot-Loader 3.0 - **Adding HMR to Create-React-App** http://chrisshepherd.me/posts/adding-hot-module-reloading-to-create-react-app A quick example of the basic pattern for using plain HMR with Webpack - **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. - **ReactCasts #7: Hot Module Replacement in Create-React-App** https://www.youtube.com/watch?v=hcl3lNjgj-E A screencast talking about what HMR is, and two ways to add it to projects created with Create-React-App - **"Difference between Webpack HMR and React-Hot-Loader?"** https://github.com/facebookincubator/create-react-app/issues/1063#issuecomment-261788083 Dan Abramov clarifies that HMR is the API and capability that Webpack gives you, while React-Hot-Loader is a specialized tool that uses the HMR API to automatically add HMR handling to React code. - **Hot reload all the things!** https://hackernoon.com/hot-reload-all-the-things-ec0fed8ab0 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/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. - **Hot reloading in React apps with code splitting** https://medium.com/zoover-engineering/hot-reloading-in-react-apps-with-code-splitting-17e6793fc80d Looks at complexities in using RHL and React-Loadable together, and shows a Babel plugin that can help turn off code-splitting in development mode. #### Other Tips and Examples - **Course: Using Webpack for Production Javascript Apps** https://egghead.io/courses/using-webpack-for-production-javascript-applications A video course by Kent C. Dodds, covering a number of very useful Webpack techniques for real-world apps. Requires an Egghead subscription, but solid and useful info. - **Javascript at Tumblr - Switching to Webpack** https://javascript.tumblr.com/post/143583264647/here-at-tumblr-we-use-a-js-bundler-to-compile-our Tumblr's dev team talks about switching from Browserify to Webpack, their migration steps, and some useful tips learned about pieces like CommonsChunkPlugin. - **Webpack HTML plugin in a Nutshell** http://www.jonathan-petitcolas.com/2016/01/23/webpack-html-plugin-in-a-nutshell.html Looks at what the HTML Webpack plugin can do and how to use it. - **Truly Multiple Entries with Webpack** https://kuzzmi.com/blog/truly-multiple-entries-with-webpack Instructions on how to configure multiple entry points properly - **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. - **Using the HTML Webpack Plugin for generating HTML files** 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** https://www.jackfranklin.co.uk/blog/css-modules-webpack-react/ Covers setting up and configuring Webpack to use CSS Modules for styling - **Webpack Tricks** https://github.com/rstacruz/webpack-tricks A useful list of tips for improving Webpack usage - **Useful Webpack DefinePlugin Usage** http://tomasalabes.me/blog/_site/web-development/2017/01/03/Useful-Webpack-Define-Plugin-Usages.html Several useful tips and use cases for using the Webpack DefinePlugin, including logging, feature flags, and handling multiple environments - **Artsy Webpack Tour** https://github.com/TheLarkInn/artsy-webpack-tour Sean Larkin of the Webpack core team gives a visually annotated tour of the Webpack 2 source code - **Squeezing Webpack into backend frameworks** https://infinum.co/the-capsized-eight/squeezing-webpack-into-backend-frameworks Covers how to use Webpack to replace the Rails asset pipeline - **Easy Offline First Apps with Webpack's Offline Plugin** 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. - **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 - **Environment based application configuration using Webpack** https://kostasbariotis.com/environment-based-application-configuration-using-webpack/ An explanation of how environment-based configuration is useful, and a couple examples of ways to handle config files for varying environments. - **From Grunt and Bower to Webpack, Babel, and Yarn - Migrating a legacy front-end build system** https://medium.com/appifycanada/migrate-to-webpack-from-grunt-bower-legacy-build-system-344526f47873 A recap of the steps needed to migrate an Angular app's build system to Webpack, including managing imports, handling global variables, and code splitting. - **Case study: improving the Polished size for Webpack users** https://iamakulov.com/notes/polished-webpack/ A detailed investigation of bundle size issues for the Polished library, and steps taken to improve the sizes for distribution. - **Unambiguous Webpack Config with Typescript** https://medium.com/webpack/unambiguous-webpack-config-with-typescript-8519def2cac7 Shows how to use Typescript and type definitions to ensure correct setup of Webpack configs. - **Webpack 2 & Semantic-UI Theming** https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf Discusses how to configure Webpack to load Semantic-UI's LESS files to allow use of a custom theme. - **Webpack: Creating dynamically named outputs for wildcarded entry files** https://medium.com/@sanjsanj/webpack-creating-dynamically-named-outputs-for-wildcarded-entry-files-9241f596b065 Demonstrates a useful technique for collecting files based on globbing, and generating Webpack entry definitions from those files. - **To ship less code, write transpiler-aware Javascript** https://medium.com/@jbartos/to-ship-less-code-write-transpiler-aware-javascript-a56250296760 Tips for improving bundle size by using syntax supported natively by browsers, as well as other techniques for improving bundle output. - **Deploying ES2015+ Code in Production Today** https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ Discusses a way to use `script type="module"` loading as a way to determine if a browser supports most modern syntax, and how to configure Babel to target modern browsers. Not Webpack specific, but useful. - **Long term caching using Webpack records** https://medium.com/@songawee/long-term-caching-using-webpack-records-9ed9737d96f2 Looks at how to use the RecordsPlugin to ensure consistent filenames between builds, allowing for more predictable bundle output for long-term caching of files. - **The Contributor's Guide to Webpack** https://medium.com/webpack/the-contributors-guide-to-webpack-part-1-a0410cc82ca4 https://medium.com/webpack/the-contributors-guide-to-webpack-part-2-9fd5e658e08c https://medium.com/webpack/the-contributors-guide-to-webpack-part-3-44cc149af02c A series by Webpack maintainer Sean Larkin that dives into the internals of Webpack. Topics include packages that are maintained by the Webpack core team, the Tapable plugin base class, and how Webpack builds its dependency graph. #### Webpack Tools - **Webpack Dashboard** https://github.com/FormidableLabs/webpack-dashboard A CLI dashboard for your webpack dev server - **Webpack Visualizer** https://chrisbateman.github.io/webpack-visualizer/ A tool and plugin to visualize the (pre-minified) sizes of files in a Webpack bundle - **Webpack Bundle Analyzer** https://github.com/th0r/webpack-bundle-analyzer Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap, and can parse minified bundles to show true minified (and gzipped) sizes - **source-map-explorer** https://github.com/danvk/source-map-explorer Analyze and debug JavaScript (or Sass or LESS) code bloat through source maps. Help determine which file each byte in your minified code came from. - **bundle-buddy** https://github.com/samccone/bundle-buddy Bundle Buddy is a tool to help you find source code duplication across your javascript chunks/splits. This enables you to fine tune code splitting parameters to reduce bundle invalidation rates as well as improve repeat page load performance. ================================================ FILE: webpack-tutorials.md ================================================ ### Webpack Tutorials Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpack) for more links to documentation, plugins, people, utilities, and articles. #### Overviews and Introductions - **Webpack Documentation** https://webpack.js.org/ Webpack's new documentation site, explaining concepts, configuration, and recipes - **Webpack Academy** https://webpack.academy/ Courses on Webpack concepts and usage, from the Webpack team. - **Webpack from First Principles** https://www.youtube.com/watch?v=WQue1AN93YU 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 Three lessons giving a brief introduction to webpack and loaders concepts. First lesson is free. - **Webpack - The Module Bundler** http://alp82.github.io/webpack-experiment-slides/#/ HTML slideshow that describes Webpack's features and links to demos - **Unpacking Webpack** http://blog.tighten.co/unpacking-webpack A useful overview of what Webpack can do and why you would want to use it. - **Webpack 101: An Introduction to Webpack** http://code.hootsuite.com/webpack-101/ A useful intro to Webpack's concepts and capabilities, with some examples. - **Webpack: The Missing Guide** http://www.eloquentwebapp.com/webpack-missing-guide/ An intro to what Webpack is, what it can do, and how to use it. - **What is Webpack and what can it do for you?** https://x-team.com/blog/webpack-can-absolute-beginners/ A plain-English explanation of what Webpack is and what problems it can help solve. - **Seamless client side Javascript with Webpack** https://opbeat.com/community/posts/seamless-client-side-javascript-with-webpack-by-jack-franklin/ A talk by Jack Franklin, talking about what problems Webpack solves - **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. - **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. - **Webpack 2** http://sokra.github.io/slides/webpack2/#3 A slideshow from Webpack's original author. Describes the basics of Webpack, how it can be used to build Progressive Web Apps, and improve speed and reliability through bundling. #### Basic Tutorials - **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. - **Beginner's Guide to Webpack** https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460 A walkthrough for getting started with a Webpack dev setup - **Webpack Your Bags** 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 - **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.) - **Learn Webpack** https://github.com/danderu/learn-webpack A repository with examples and exercises to learn webpack for newbies - **Utilizing Webpack and Babel to build a React.js App** http://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app/ A lesson from a larger course on React. Covers basic Webpack concepts and setup. - **Introduction to Webpack** http://code.tutsplus.com/tutorials/introduction-to-webpack-part-1--cms-25791 http://code.tutsplus.com/tutorials/introduction-to-webpack-part-2--cms-25911 Covers basic setup, loaders, managing styles and images, and more. - **Why I think Webpack is the right approach to build pipelines** http://devlog.disco.zone/2016/06/01/webpack/ Some thoughts on how Webpack works, and why its "tree of modules" approach to bundling makes sense. Useful for understanding how you can work with Webpack. - **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)** 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 A set of slides that teach Webpack concepts and usage, with an associated repo that has diffs demonstrating each set of changes and configuration. - **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. - **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. - **Module Bundling with Webpack: Getting Started Guide** https://www.codementor.io/javascript/tutorial/module-bundler-webpack-getting-started-guide Tutorial covering basic config setup and concepts - **Webpack Tutorials for Beginners** https://www.youtube.com/playlist?list=PL4cUxeGkcC9iTQ3J5oa6orDIMQKKxl8dC A video tutorial series explaining Webpack config and loaders - **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** 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. - **Migration to Webpack@2** https://blog.shakacode.com/migration-to-webpack-2-c9803871b931 Some tips for updating a Webpack 1 config to work with Webpack 2 - **A Beginner's Guide to Webpack 2 and Module Bundling** https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/ 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** 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 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/#/ A follow-up presentation, digging into advanced Webpack concepts, configuration, and internals - **webpack By Example** https://medium.com/front-end-hacking/webpack-by-example-part-1-1d07bc42006a https://medium.com/front-end-hacking/webpack-by-example-part-2-ff6c75b1e20 https://medium.com/front-end-hacking/webpack-by-example-part-3-a4ceaaa6299a https://medium.com/front-end-hacking/webpack-by-example-part-4-f55821016821 A 4-part series that illustrates core Webpack concepts via a series of small example repos, with explanations of the source and concepts in the articles. - **How to setup Webpack 2.0 from scratch in 2017** https://codeburst.io/easy-guide-for-webpack-2-0-from-scratch-fe508a3ce44e https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-ii-66beb5dbccc2 https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-iii-d374c021f9fc https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-iv-102efc01ffad https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-v-495dba627718 A detailed tutorial that walks through setting up a Webpack config piece-by-piece, and explains several Webpack concepts along the way. - **A Webpack Setup that Makes Sense** https://medium.com/@Idan_Co/a-webpack-setup-that-makes-sense-35b4b6b8ef5f Looks at ways to define Webpack setup and tasks in a more modular, reusable manner. - **Webpack: A Gentle Introduction to the Module Bundler** https://auth0.com/blog/webpack-a-gentle-introduction/ A well-written tutorial that explains core Webpack concepts like entries, output, loaders, and plugins, and shows how to set up a basic build config for an application. - **Starting with Webpack from scratch** https://www.netlify.com/blog/2017/11/30/starting-with-webpack-from-scratch/ Walks through setting up a Webpack config from the ground up, with explanations and examples of how to configure Webpack and what the resulting output looks like. - **Webpack 3 quickstarter: Configure Webpack from scratch** https://medium.com/@nirjhor123/webpack-3-quickstarter-configure-webpack-from-scratch-30a6c394038a A walkthrough for Webpack setup that covers basic entry and output definition, webpack-dev-server setup, and adding loaders and plugins. - **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 - **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. - **Webpack Series Part 1: Some Configs Explained** http://tomasalabes.me/blog/_site/web-development/2016/04/30/Webpack-Series-Part-1.html Describes a number of Webpack config options, including "noParse", "libraryTarget", and "externals" - **Angular + Webpack <3** https://docs.google.com/presentation/d/10mIapWjv1pyUQaMv6G8MCdoe9OK2Ey8zz-CLkHuFdRI/edit?usp=sharing 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. - **Why Can't Anyone Write a Simple Webpack Tutorial?** https://medium.com/@dtothefp/why-can-t-anyone-write-a-simple-webpack-tutorial-d0b075db35ed A goofy but informative look at many of the concepts and pieces that make up Webpack - **Webpack Loader Variations** https://javascriptstuff.com/webpack-loader-variations/ Examples of the different ways to define a loader in a 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 - **Webpack and the Public Path Config** http://tomasalabes.me/blog/_site/web-development/2016/12/10/Webpack-and-the-public-path.html Looks at how to configure URLs for resources that are not part of the final output bundle, such as images on CDNs - **Source Maps with Webpack in Chrome** http://erikaybar.name/webpack-source-maps-in-chrome/ Tips for proper configuration of sourcemaps, including some gotchas and differences between `devtool` config values. - **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. - **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. - **Stages of Learning Webpack, Part 3 - SourceMaps, Loaders, and Plugins** https://dev.to/nitishdayal/stages-of-learning-webpack-pt-3---sourcemaps-loaders--plugins Shows how to configure sourcemaps for debugging, use a loader to add TypeScript support, and add a plugin to generate an HTML index page for the bundle. - **Let's talk about our Webpack config files** https://engineering.tripping.com/lets-talk-about-our-webpack-config-files-89a6ac0e0cf9 The Tripping.com team shows off the contents of their Webpack production config file, explains the capabilities they want to have, and how each piece of the config file implements those capabilities. - **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 - **webpack-config-utils** https://github.com/kentcdodds/webpack-config-utils Provides utilities to make it easier to compose your config object, so it's easier for people to read. - **prepacked** https://github.com/mikeyamadeo/prepacked The power of webpack with simplified configuration. All the tools to effectively build in development and then ship for production with minimal setup. - **terse-webpack** https://github.com/ericclemmons/terse-webpack Webpack simplified in a fluent API with presets & an escape hatch so you're not locked in. - **Easy Webpack** https://github.com/easy-webpack/core An easy way to create configuration files for Webpack, with modularized individual features anbd preset configs. - **Maintainable Webpack Config** https://github.com/chrisvfritz/maintainable-webpack-config An experiment to make Webpack configs testable and maintainable - **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), … - **webpack-flow** https://github.com/webpack-flow/webpack-flow 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!