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