Simon Sturmer
Front-end Engineer @ Facebook
@simonsturmer
Slide 3
Slide 3 text
–Some Guy on Twitter
“Building in React feels a little like Cheating.”
Slide 4
Slide 4 text
Before we begin: ES6
• Template Strings
• Arrow Functions
• Destructuring Assignment
• Many more goodies…
Slide 5
Slide 5 text
Template Strings
… also multi-line and backslash literals.
Slide 6
Slide 6 text
Arrow Functions
Note the .bind(this) which is the most important part.
Slide 7
Slide 7 text
Destructuring Assignment
the real win is using with function calls like require()
Slide 8
Slide 8 text
… 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
Slide 9
Slide 9 text
React is different
react(data) →
• View is pure function of state
• Declarative
• Compositional
Slide 10
Slide 10 text
Think of React like this…
…this is in-fact how react started.
Slide 11
Slide 11 text
In React this would be:
oh right, JSX…
Slide 12
Slide 12 text
JSX
• Not a templating library
• Just syntax sugar on top of JS
• Totally Optional
Slide 13
Slide 13 text
Using State
Slide 14
Slide 14 text
Composition
• Does not actually wrap one element with another
• Extend functionality, add defaults, etc.
Slide 15
Slide 15 text
OK, let’s build…
Slide 16
Slide 16 text
Who’s Using React
• Netflix
• AirBnB
• PayPal
• Yahoo
• BBC
• Pintrest
• Instagram
• WhatsApp
• …and of course Facebook
Slide 17
Slide 17 text
Simon Sturmer
…and my little coder-in-the-making
@simonsturmer
I’ll post links to the slides and
the demo code on Twitter.