Slide 1

Slide 1 text

React Walk-Thru Santa Cruz JS Meetup 8th May 2015

Slide 2

Slide 2 text

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.