thinking-in-react-and-flux.md

Thinking in React and Flux

• 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.

• 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
  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

• Components, React, and Flux
  http://slides.com/danabramov/components-react-flux-wip#/
  A fantastic HTML slideshow that discusses how to organize code as reusable components, and the basic concepts and benefits of a Flux unidirectional architecture

• Reactive, Component-Based UIs
  http://banderson.github.io/reactive-component-ui-presentation/#/
  Another fantastic HTML slideshow describing the three principles of React: "functional over OOP", "stateless over stateful", "clarity over brevity" (use arrow keys to advance slides)

• Why You Should Care About Flux
  http://jaysoo.ca/2015/06/02/why-you-should-care-about-flux/
  Describes the value in separating "reads" from "writes", and eliminating local state

• 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.

• "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

• Reasons Why I Love Redux
  https://twitter.com/jlongster/status/780879989164081152
  James Longster describes his appreciation for Redux, and how its constraints force you to think through your state handling

• 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