Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Single Page Apps with React.JS

13,202 views

Published on

Published in: Technology

Building Single Page Apps with React.JS

  1. 1. Building single page apps with React.JS @vagmi - on twitter/github/facebook
  2. 2. http://facebook.github.io/react/
  3. 3. My JS journey
  4. 4. React.JS is not an MVC Framework
  5. 5. React.JS is a view library
  6. 6. And…. its fast
  7. 7. State is the root of all evil.
  8. 8. Whats wrong with two-way data binding? http://embed.plnkr.co/0DGOrk/preview
  9. 9. Shamelessly Stolen from https://docs.google.com/presentation/d/ 1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/ edit#slide=id.g380053cce_0143
  10. 10. Shamelessly Stolen from https://docs.google.com/presentation/d/ 1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/ edit#slide=id.g380053cce_0143
  11. 11. Shamelessly Stolen from https://docs.google.com/presentation/d/ 1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/ edit#slide=id.g380053cce_0143
  12. 12. Shamelessly Stolen from https://docs.google.com/presentation/d/ 1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/ edit#slide=id.g380053cce_0143
  13. 13. Shamelessly Stolen from https://docs.google.com/presentation/d/ 1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/ edit#slide=id.g380053cce_0143
  14. 14. Mutability is the root of all evil - May be Rich Hickey
  15. 15. State vs Props
  16. 16. this.setState(newState) Re-renders itself and all the containing components
  17. 17. Are you crazy?
  18. 18. Virtual DOM As it turns out, JS is fast enough
  19. 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. 20. <JSX></JSX>
  21. 21. Look ma, no templates
  22. 22. Mixing markup and JS in the same file?
  23. 23. 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
  24. 24. Show me some code
  25. 25. React Problems
  26. 26. App Cart Component Header Cart Details Cart Summary
  27. 27. Enter Flux http://facebook.github.io/react/docs/flux-overview.html
  28. 28. Stores, Events, Dispatchers Views ---> (actions) ----> Dispatcher ---> (registered callback) ---> Stores -------+ Ʌ | | V +-- (Controller-Views "change" event handlers) ---- (Stores emit "change" events) --+
  29. 29. Thanks @vagmi on Github/Twitter/Facebook

×