Controlling Computers

with React.JS!

Laura Moore@lk_moore

laura.moore@rightbox.com

https://github.com/lauramoore

LeapMotion V2

LeapJS : WebSocket Communication

Demo:Leap-Bone-Hands

https://github.com/lauramoore/leap-bone-hand

Why React?

https://facebook.github.io/react/docs/displaying-data.html

“It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.”

FrameData

ViewState DOM

Data Flow with Flux

https://facebook.github.io/flux/docs/overview.html

DemoLeapJs – React - Flux

https://github.com/lauramoore/leap-react-noob/

OOB : Components

● React-Object-Inspector

React-Bootstrap● Well● Label● Jumbotron

https://react-bootstrap.github.io/https://github.com/xyc/react-object-inspector

React Win: Inline Styles

http://stackoverflow.com/questions/26882177/react-js-inline-style-best-practices

CSS … what were we thinking?

https://speakerdeck.com/vjeux/react-css-in-js

Flux Question : What is Leap.Controller?

? ?

Controller → Store Data

Store Exported API

Model → View

View Displays Model

Leap Challenge : Hand List

Demo : Magic Swapping Hands?

Challenge Accepted : Sorted Hand List

Leap Challenge : Hand List

Demo : Sorted Hands Stable Behavior

Leap Challenge : Space to Screen

Demo : Sorted Hands Stable Behavior

Challenge Accepted : Normalized Point

Challenge Accepted: Scale to View

Demo : Normalized vs Not Normalized

Demo : Memory Game

Flux Challenge : Ignoring Events

Challenge Accepted:Immutable Stores (TBD)