Building Single Page Apps with React.JS

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