Building Single Page Apps with React.JS
17 likes13,532 views
The document discusses building single page apps with React.JS. It notes that React is a view library, not an MVC framework, and that it is fast due to its use of a virtual DOM and DOM diffing. It also discusses some key React concepts like state, props, setState(), and JSX syntax. Problems with React are mentioned along with the Flux architecture as a solution involving stores, events, and dispatchers to manage data flow in React apps.
![DOM Diffing
renderA: <div><span>first</span></div>
renderB: <div><span>second</span><span>first</span></
div>
=> [replaceAttribute textContent 'second'],
[insertNode <span>first</span>]](https://image.slidesharecdn.com/chennai-jsfoo-react-140905212956-phpapp01/85/Building-Single-Page-Apps-with-React-JS-19-320.jpg)
Building Single Page Apps with React.JS
- 1. Building single page apps with React.JS @vagmi - on twitter/github/facebook
- 4. React.JS is not an MVC Framework
- 5. React.JS is a view library
- 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
- 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