React Walk-Thru - Santa Cruz JS, May 2015
-
Upload
simon-sturmer -
Category
Technology
-
view
163 -
download
1
Transcript of React Walk-Thru - Santa Cruz JS, May 2015
React Walk-ThruSanta Cruz JS Meetup
8th May 2015
Simon Sturmer Front-end Engineer @ Facebook
@simonsturmer
–Some Guy on Twitter
“Building in React feels a little like Cheating.”
Before we begin: ES6
• Template Strings
• Arrow Functions
• Destructuring Assignment
• Many more goodies…
Template Strings
… also multi-line and backslash literals.
Arrow Functions
Note the .bind(this) which is the most important part.
Destructuring Assignment
the real win is using with function calls like require()
… ok, now to the good stuff
Why React?
• Fresh way to build your UI
• Just the View layer
• Small API (can be learnt in a day)
• It’s an abstraction over the browser DOM
React is different
react(data) → <View/>
• View is pure function of state
• Declarative
• Compositional
Think of React like this…
…this is in-fact how react started.
In React this would be:
oh right, JSX…
JSX
• Not a templating library
• Just syntax sugar on top of JS
• Totally Optional
Using State
Composition
• Does not actually wrap one element with another
• Extend functionality, add defaults, etc.
OK, let’s build…
Who’s Using React• Netflix • AirBnB • PayPal • Yahoo • BBC • Pintrest • Instagram • WhatsApp • …and of course Facebook
Simon Sturmer …and my little coder-in-the-making
@simonsturmer
I’ll post links to the slides and the demo code on Twitter.