1. Building single page
apps with React.JS
@vagmi - on twitter/github/facebook

2. http://facebook.github.io/react/

3. My JS journey

4. React.JS is not an MVC Framework

5. React.JS is a view library

6. And…. its fast

7. State is the root of all evil.

8. Whats wrong with two-way data
binding?
http://embed.plnkr.co/0DGOrk/preview

9. Shamelessly Stolen from https://docs.google.com/presentation/d/
1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/
edit#slide=id.g380053cce_0143

10. Shamelessly Stolen from https://docs.google.com/presentation/d/
1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/
edit#slide=id.g380053cce_0143

11. Shamelessly Stolen from https://docs.google.com/presentation/d/
1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/
edit#slide=id.g380053cce_0143

12. Shamelessly Stolen from https://docs.google.com/presentation/d/
1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/
edit#slide=id.g380053cce_0143

13. Shamelessly Stolen from https://docs.google.com/presentation/d/
1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/
edit#slide=id.g380053cce_0143

14. Mutability is the root of all evil
- May be Rich Hickey

15. State vs Props

16. this.setState(newState)
Re-renders itself and all the containing components

17. Are you crazy?

18. Virtual DOM
As it turns out, JS is fast enough

19. DOM Diffing
renderA: <div><span>first</span></div>
renderB: <div><span>second</span><span>first</span></
div>
=> [replaceAttribute textContent 'second'],
[insertNode <span>first</span>]

20. <JSX></JSX>

22. Look ma, no templates

23. Mixing markup and JS in the same file?

24. Give it five minutes
We strongly believe that components are the right way to
separate concerns rather than "templates" and "display logic."
We think that markup and the code that generates it are
intimately tied together. Additionally, display logic is often very
complex and using template languages to express it becomes
cumbersome. - React Authors

25. Show me some code

26. React Problems

27. App
Cart Component Header
Cart Details Cart Summary

28. Enter Flux
http://facebook.github.io/react/docs/flux-overview.html

29. Stores, Events, Dispatchers
Views ---> (actions) ----> Dispatcher ---> (registered callback) ---> Stores -------+
Ʌ |
| V
+-- (Controller-Views "change" event handlers) ---- (Stores emit "change" events) --+

30. Thanks
@vagmi on Github/Twitter/Facebook