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.