ReactJS

React - A library for creating user interfaces.

React is about V in MVC

- It is more of a library than a framework.
- Can be used with any other framework / technology.

Motivations for React

- Templates are underpowered. 
- Keeping UI in sync with ever changing state changes is a hard problem.

What's wrong with templates ?

- Nothing. They served the purpose of generating DOM by combining data and markup in a clean way.
- But they are limiting:
    - Display logic is separated into templates and view models.        
    - Templates represents the state of the UI at the beginning. Afterwards, we are on our own.
    - Do not use the full power of javascript (#each, #if like constructs are limiting).
- We can do better.

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.

React's implementation

  - Re-render UI whenever data changes. 
  - Virtual DOM
  - Synthetic Events 
  - Batch Rendering

ReactComponent

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

Simple React Component

state vs props

- React components are basically state machines.
- 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.
- A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.
- These things shouldn't go into state
    - Computed values based on other state variables.
    - Duplicated data from props. 

Composite React Component

Communication between components

Composite Keys and reconciliation of nodes

Life cycle of a React component

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