ReactJS

React - A library for creating user interfaces.

React is about V in MVC

- React is not a MVC framework. It doesn't come with controllers, router etc.
- React is all about Views in the application.
- Can be used with any other framework / technology.

Motivations for React

- Templates are underpowered.
  - Templates greatly served the purpose of generating HTML by combining data 
    and markup in a clean way. But they are limiting in ways.
  - Templates represent the state of the UI at the beginning. Afterwards, we are on our own.      
  - UI and display logic is separated into templates and view models.
  - Templates do not use the full power of javascript (#each, #if like constructs are limiting).

- Dom mutations are slower
  - The slowest part of the web application is dom updates.

- Building user interfaces is hard.
   - Lots of state.
   - Random events (user actions, ajax callbacks, timer events) can change state in different timeframes.
   - Keeping UI in sync with ever changing state often results in spaghetti 
     and hard to debug code.

ReactComponent

- React approaches building user interfaces by breaking them into components.     
- Combines DOM representation and display logic into one unit.
- React components describes UI at any point of time.
- Encourages loose coupling with other components.
- Components are composable and reusable.
- Radical shift from thinking in templates and view models.

React's implementation

  - Re-render UI whenever data changes. 
  - Virtual DOM
      - Javascript is super fast; dom mutations are the slowest part in the web applications.
      - Whenever state changes, React recreates virtual dom and compares with the 

existing virtual dom. With intelligent heuristics it figures out the minimal changes needed to DOM and queues those changes for batch update. - React's philosophy of Re-render everytime when data changes was made possible because of the underlying virtual dom implementation. - Synthetic Events - Diff Algorithm - Level by Level - Component Matching - Batch Rendering - Sub-tree rendering

Simple React Component

state vs props

- props
  - Props are inputs set on a components by its parent and cannot be changed within the component.

- state
  - State is created within the component and can be changed.
  - State should contain data that a component's event handlers may change to trigger a UI update.
  - State shouldn't contain computed data from other variables, duplicated data from prop.
  - Try to keep as many of your components as possible stateless. 

By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.

References

• http://calendar.perfplanet.com/2013/diff/
• http://fluentconf.com/fluent2014/public/schedule/detail/32395
• http://blog.reverberate.org/2014/02/react-demystified.html
• http://stackoverflow.com/questions/21109361/why-is-reacts-concept-of-virtual-dom-said-to-be-more-performant-than-dirty-mode
• http://ricostacruz.com/cheatsheets/react.html
• http://blog.whn.se/post/69621609605/writing-good-react-components
• http://www.slideshare.net/floydophone/react-preso-v2
• http://davidwalsh.name/event-delegate
• http://stackoverflow.com/questions/24415631/reactjs-syntheticevent-stoppropagation-only-works-with-react-events
• http://jsfiddle.net/7LEDT/6/
• http://stackoverflow.com/questions/24185029/reactjs-async-wait-for-results/24185452#24185452
• http://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements/24151862#24151862
• http://www.slideshare.net/asolove/reactjs
• http://www.slideshare.net/borgesleonardo/high-performance-web-apps-in-om-react-and-clojurescript
• http://slidedeck.io/ncherro/backbone-react-presentation
• http://tech.pro/blog/2020/a-thrown-to-the-wolves-hands-on-introduction-to-react
• http://stackoverflow.com/questions/21285923/reactjs-two-components-communicating
• http://webdesignporto.com/react-js-an-interactive-tutorial-to-get-started/#header?utm_source=http://webdesignporto.com/react-js-in-pure-javascript-facebook-library/
• http://stackoverflow.com/questions/19956563/reactjs-get-a-component-from-anywhere-in-the-app
• https://coderwall.com/p/jdybeq
• http://stackoverflow.com/questions/21132430/react-js-batching-setstate-to-ensure-only-one-dom-layout-paint
• https://github.com/facebook/react/issues/690
• http://stackoverflow.com/questions/21863263/react-jsx-unique-key-prop-in-conditional-array
• http://stackoverflow.com/questions/22538638/how-to-have-conditional-elements-and-keep-dry-with-facebook-reacts-jsx