Date post: | 05-Dec-2014 |
Category: |
Technology |
Upload: | vagmi-mudumbai |
View: | 2,300 times |
Download: | 1 times |
Building single page apps with React.JS
@vagmi - on twitter/github/facebook
http://facebook.github.io/react/
My JS journey
React.JS is not an MVC Framework
React.JS is a view library
And…. its fast
State is the root of all evil.
Whats wrong with two-way data binding?
http://embed.plnkr.co/0DGOrk/preview
Shamelessly Stolen from https://docs.google.com/presentation/d/1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/
edit#slide=id.g380053cce_0143
Shamelessly Stolen from https://docs.google.com/presentation/d/1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/
edit#slide=id.g380053cce_0143
Shamelessly Stolen from https://docs.google.com/presentation/d/1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/
edit#slide=id.g380053cce_0143
Shamelessly Stolen from https://docs.google.com/presentation/d/1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/
edit#slide=id.g380053cce_0143
Shamelessly Stolen from https://docs.google.com/presentation/d/1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/
edit#slide=id.g380053cce_0143
Mutability is the root of all evil - May be Rich Hickey
State vs Props
this.setState(newState)Re-renders itself and all the containing components
Are you crazy?
Virtual DOMAs it turns out, JS is fast enough
renderA: <div><span>first</span></div> renderB: <div><span>second</span><span>first</span></div> => [replaceAttribute textContent 'second'], [insertNode <span>first</span>]
DOM Diffing
<JSX></JSX>
Look ma, no templates
Mixing markup and JS in the same file?
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
Show me some code
React Problems
Cart Details Cart Summary
App
HeaderCart Component
Enter Fluxhttp://facebook.github.io/react/docs/flux-overview.html
Stores, Events, Dispatchers
Views ---> (actions) ----> Dispatcher ---> (registered callback) ---> Stores -------+ Ʌ | | V +-- (Controller-Views "change" event handlers) ---- (Stores emit "change" events) --+
@vagmi on Github/Twitter/FacebookThanks