Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Walk-Thru - Santa Cruz JS

React Walk-Thru - Santa Cruz JS

Quick intro to React which was followed by some code demos (not in this slide deck) and some Q&A. Will post video link on Twitter @simonsturmer

A01b931867096ec8874202e233279212?s=128

Simon Sturmer

May 08, 2015
Tweet

Transcript

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

  2. Simon Sturmer Front-end Engineer @ Facebook
 @simonsturmer

  3. –Some Guy on Twitter “Building in React feels a little

    like Cheating.”
  4. Before we begin: ES6 • Template Strings • Arrow Functions

    • Destructuring Assignment • Many more goodies…
  5. Template Strings … also multi-line and backslash literals.

  6. Arrow Functions Note the .bind(this) which is the most important

    part.
  7. Destructuring Assignment the real win is using with function calls

    like require()
  8. … 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
  9. React is different react(data) → <View/> • View is pure

    function of state • Declarative • Compositional
  10. Think of React like this… …this is in-fact how react

    started.
  11. In React this would be: oh right, JSX…

  12. JSX • Not a templating library • Just syntax sugar

    on top of JS • Totally Optional
  13. Using State

  14. Composition • Does not actually wrap one element with another

    • Extend functionality, add defaults, etc.
  15. OK, let’s build…

  16. Who’s Using React • Netflix • AirBnB • PayPal •

    Yahoo • BBC • Pintrest • Instagram • WhatsApp • …and of course Facebook
  17. Simon Sturmer …and my little coder-in-the-making
 @simonsturmer I’ll post links

    to the slides and the demo code on Twitter.