Showing preview only (618K chars total). Download the full file or copy to clipboard to get everything.
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**<space><space>
<space><space>http://example.com<space><space>
<space><space>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"
<a id="higher-order-components"></a>
<a id="composing-components-with-functional-programming"></a>
- **[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 Patt
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
Condensed preview — 50 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (624K chars).
[
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 551,
"preview": "# Formatting\n\nPlease follow the existing formatting for each entry. In order to get newlines without paragraph breaks, "
},
{
"path": ".github/workflows/action.yml",
"chars": 467,
"preview": "name: Check URLs for dead links\non:\n workflow_dispatch:\n # schedule:\n # - cron: \"0 11 * * 1\" # Runs weekly at 7:00 "
},
{
"path": "README.md",
"chars": 25045,
"preview": "# React/Redux Links\nCurated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a col"
},
{
"path": "basic-concepts.md",
"chars": 13425,
"preview": "### Basic Concepts, Terms, and Overviews\n\n\n#### Modern Javascript Terms and Tooling Overviews\n\n- **State of the Javascri"
},
{
"path": "boilerplates-and-starter-kits.md",
"chars": 8194,
"preview": "### Boilerplates and Starter Kits\n\n\n#### Suggested Starter Kits for Learners\n\n**NOTE**: It's easy for someone new to the"
},
{
"path": "community-resources.md",
"chars": 5990,
"preview": "### Community Resources\n\n\n#### Link Lists\n\n- **Awesome React** \n https://github.com/enaqx/awesome-react \n A collecti"
},
{
"path": "es6-features.md",
"chars": 14748,
"preview": "### Javascript ES6 Features and Examples\n\n#### Overviews\n\n- **ES6 Features Overview** \n https://github.com/lukehoban/e"
},
{
"path": "flux-tutorials.md",
"chars": 1053,
"preview": "### Flux Tutorials and Concepts\n\n\n- **The Flux Quick Start Guide** \n http://www.jackcallister.com/2015/02/26/the-flux-"
},
{
"path": "framework-comparisons.md",
"chars": 6084,
"preview": "### Javascript Framework Comparisons\n\n#### React, Angular, Ember, and Vue\n\n- **Angular vs React vs Vue: A 2017 Compariso"
},
{
"path": "functional-programming.md",
"chars": 9133,
"preview": "### Functional Programming\n\n - **The Little Idea of Functional Programming** \n http://jaysoo.ca/2016/01/13/functional"
},
{
"path": "git-resources.md",
"chars": 9732,
"preview": "### Git Tutorials and Resources\n\n#### Resource Pages\n\n- **Understanding Git** \n http://www.queness.com/post/16139/unde"
},
{
"path": "immutable-data.md",
"chars": 9938,
"preview": "### Immutable Data\n\n#### Basic Concepts\n\n- **Pros and Cons of Using Immutability With React** \n http://reactkungfu.com"
},
{
"path": "javascript-resources.md",
"chars": 10016,
"preview": "### Javascript Resources\n\nWhile this list is primarily focused on learning React and Redux, and generally assumes that y"
},
{
"path": "mlc_config.json",
"chars": 124,
"preview": "{\n \"aliveStatusCodes\": [\n 0,\n 200,\n 429\n ],\n \"fallbackRetryDelay\": \"30s\",\n \"retryCount\": 2,\n \"timeout\": \"5"
},
{
"path": "mobx-tutorials.md",
"chars": 6673,
"preview": "### MobX Tutorials\n\n\n#### Basic Introductions\n- **MobX Docs** \n https://github.com/mobxjs/mobx \n https://mobxjs.gith"
},
{
"path": "node-js-and-npm.md",
"chars": 2231,
"preview": "### Node.js and NPM\n\nNote: it is HIGHLY recommended that you install Node 5.x, particularly if you are on Windows. Node"
},
{
"path": "project-structure.md",
"chars": 5843,
"preview": "### Project Structure\n\n\n**Related topics**:\n- [Boilerplates and Starter Kits](./boilerplates-and-starter-kits.md)\n- [Rea"
},
{
"path": "pros-cons-discussion.md",
"chars": 24132,
"preview": "### React/Flux/Redux Pros, Cons, and Discussion\n\n**Related Topics**:\n- [Redux addons catalog - Apps and Examples](https:"
},
{
"path": "react-ajax.md",
"chars": 5632,
"preview": "### React and AJAX\n\n#### Basic Concepts\n\n- **AJAX Requests in React: How and Where to Fetch Data** \n https://daveceddi"
},
{
"path": "react-architecture.md",
"chars": 19263,
"preview": "### React Architecture and Best Practices\n\n\n#### Thinking in React\n\n- **Thinking in React** \n https://facebook.github."
},
{
"path": "react-component-composition.md",
"chars": 16311,
"preview": "### React Component Composition\n\n#### Higher-Order Components\n\n- **Mixins Are Dead. Long Live Composition** \n https://"
},
{
"path": "react-component-patterns.md",
"chars": 31527,
"preview": "### React Component Patterns\n\n**Related topics**:\n\n- [Thinking in React](./thinking-in-react-and-flux.md): Articles disc"
},
{
"path": "react-deployment.md",
"chars": 4616,
"preview": "### React Deployment\n\n#### Applications\n\n- **Understanding React deployment** \n https://medium.com/@baphemot/understan"
},
{
"path": "react-forms.md",
"chars": 11765,
"preview": "### React and Forms\n\n(Note: the \"linked state mixin\" and \"two-way binding\" approaches described in some of these article"
},
{
"path": "react-hooks.md",
"chars": 4777,
"preview": "### React Hooks\n\n\n#### Official Resources\n\n- **React Docs: Hooks** \n https://reactjs.org/docs/hooks-intro.html \n The"
},
{
"path": "react-implementation.md",
"chars": 13998,
"preview": "### React Implementation and Concepts\n\n\n#### Resources\n\n- **React Team core Notes** \n https://github.com/reactjs/core-"
},
{
"path": "react-native.md",
"chars": 8077,
"preview": "### React Native\n\n\n#### Tutorials\n\n- **React Native Express** \n http://www.reactnativeexpress.com/ \n A full set of t"
},
{
"path": "react-performance.md",
"chars": 26174,
"preview": "### React/Redux Performance and Optimization\n\nMy [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-"
},
{
"path": "react-redux-architecture.md",
"chars": 421,
"preview": "### React/Redux Architecture\n\n\n**Related topics**:\n- [React Component Patterns](./react-component-patterns.md)\n- [React "
},
{
"path": "react-redux-testing.md",
"chars": 26017,
"preview": "\n### React/Redux Testing\n\n\n#### React and Components\n\n- **Approaches to Testing React Components** \n http://reactkungf"
},
{
"path": "react-routing.md",
"chars": 10936,
"preview": "### React and Routing\n\n#### Routing\n\n- **Routing React Apps: The Complete Guide** \n https://scotch.io/tutorials/routin"
},
{
"path": "react-server-rendering.md",
"chars": 7409,
"preview": "### React Server Rendering\n\n- **What's New with Server-Side Rendering in React 16** \n https://hackernoon.com/whats-new"
},
{
"path": "react-state-management.md",
"chars": 9020,
"preview": "### React State Management\n\n#### State Types and Data Flow\n\n- **A Visual Guide to State in React** \n https://daveceddi"
},
{
"path": "react-styling.md",
"chars": 13764,
"preview": "### React and Styling\n\n#### Basic Concepts\n\n- **Styling in React** \n https://www.kirupa.com/react/styling_in_react.htm"
},
{
"path": "react-techniques.md",
"chars": 7198,
"preview": "### React Tips and Techniques\n\n \n- **Get your React.js application translated with style** \n https://medium.com/@jamu"
},
{
"path": "react-tutorials.md",
"chars": 25732,
"preview": "### React Tutorials\n\n\n#### Basic Introductions\n\n- **React Documentation** \n https://reactjs.org/docs/getting-started.ht"
},
{
"path": "redux-architecture.md",
"chars": 36596,
"preview": "### Redux Architecture and Best Practices\n\n**Related Topics**:\n- [Redux addons catalog - Apps and Examples](https://gith"
},
{
"path": "redux-middleware.md",
"chars": 6123,
"preview": "### Redux Middleware\n\n#### Tutorials\n\n- **Exploring Redux Middlewares** \n http://blog.krawaller.se/posts/exploring-red"
},
{
"path": "redux-reducers-selectors.md",
"chars": 15030,
"preview": "### Redux Reducers and Selectors\n\n\n#### Reducers\n\n- **Redux Docs: Structuring Reducers** \n https://redux.js.org/recipe"
},
{
"path": "redux-side-effects.md",
"chars": 22528,
"preview": "### Redux Side Effects\n\n\n#### Basic Concepts\n\n- **Stack Overflow: Dispatching Redux Actions with a Timeout** \n http://"
},
{
"path": "redux-techniques.md",
"chars": 17636,
"preview": "### Redux Techniques\n\n**Related Topics**:\n- [Redux Reducers and Selectors](./redux-reducers-selectors.md)\n- [Redux UI Ma"
},
{
"path": "redux-tutorials.md",
"chars": 28075,
"preview": "### Redux Tutorials\n\n\n#### Basic Introductions\n- **Redux Docs** \n https://redux.js.org/ \n The official Redux documen"
},
{
"path": "redux-ui-management.md",
"chars": 8445,
"preview": "### Redux UI Management\n\n#### UI and Widget Implementations\n\n- **\"How can I display a modal dialog in Redux?\"** \n http"
},
{
"path": "redux-without-react.md",
"chars": 8615,
"preview": "### Using Redux without React\n\n\n#### Vanilla JS and jQuery\n\n- **Redux without React - State Management in Vanilla Javasc"
},
{
"path": "static-typing.md",
"chars": 20008,
"preview": "### Static Typing\n\n\n#### Pros and Cons\n\n- **The Shocking Secret about Static Types / You Might Not Need Typescript (or S"
},
{
"path": "thinking-in-react-and-flux.md",
"chars": 349,
"preview": "### Thinking in React and Flux\n\n**Related Topics** \n- [React Component Patterns](./react-component-patterns.md)\n- [Reac"
},
{
"path": "tips-and-best-practices.md",
"chars": 194,
"preview": "### Tips, Guidelines, and Best Practices\n\n**Related Topics**\n- [React Architecture and Best Practices](./react-architect"
},
{
"path": "using-react-with-es6.md",
"chars": 4719,
"preview": "### Using React with ES6\n\n\n#### React Component Definitions\n\n- **Which React Component Class Syntax Should I Use?** \n "
},
{
"path": "webpack-advanced-techniques.md",
"chars": 29588,
"preview": "### Webpack Advanced Techniques\n\n#### Build Optimization\n\n- **Webpack: Build Performance** \n https://github.com/webpac"
},
{
"path": "webpack-tutorials.md",
"chars": 16312,
"preview": "### Webpack Tutorials\n\nAlso see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpack) for more links"
}
]
About this extraction
This page contains the full source code of the markerikson/react-redux-links GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 50 files (595.9 KB), approximately 147.3k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.