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

Introduction to React - Triangle.rb May 2015

Introduction to React - Triangle.rb May 2015

The presentation I gave at Triangle.rb introducing React.

Nathan Hunzaker

May 12, 2015

More Decks by Nathan Hunzaker

Other Decks in Technology


  1. “We can only hope to make reliable those things in

    which we understand.” - Rich Hickey
  2. Compo(sition,nents) "React is all about building reusable components. In fact,

    with React the only thing you do is build components." - facebook.github.io/react
  3. JSX “The purpose of this specification is to define a

    concise and familiar syntax for defining tree structures with attributes.” http://facebook.github.io/jsx/
  4. Build a DOM tree Compare to old state Get cheapest

    mutation path (with Levenshtein) Write new DOM (in batches) New state
  5. Define Interface Change State • Each change in state flushes

    to the DOM • Properties are sent in one direction • No cascading updates
  6. Flux “Flux [...] complements React's composable view components by utilizing

    a unidirectional data flow.” http://facebook.github.io/flux/
  7. Job Queue State State State I want to create a

    widget Ready a widget! I can totally do that! Ch-ch-ch-ch- changes I love David Bowie!
  8. By focusing on composability and a single direction flow of

    data, we can greatly simplify our apps
  9. Iconography: User interface icon by Aziz, the Noun Project http://thenounproject.com/azisher

    JavaScript Logo: https://github.com/voodootikigod/logo.js General React Concepts: React Homepage http://facebook.github.io/react/ JSX Specification http://facebook.github.io/jsx/ Rethinking Best Practices, Pete Hunt: https://www.youtube.com/watch?v=x7cQ3mrcKaY Decomplexifying Code with React, Steven Luscher: https://www.youtube.com/watch?v=rI0GQc__0SM An Introduction to ReactJS, James Pierce https://www.youtube.com/watch?v=m2fuO2wl_3c Flux Flux Homepage http://facebook.github.io/flux/ Examples React Fun https://github.com/nhunzaker/react-fun React Animatable https://github.com/nhunzaker/react- animatable An Isomorphic Chart https://github.com/nhunzaker/an- isomorphic-chart Capacitor https://github.com/vigetlabs/capacitor Yappy Bird https://github.com/nhunzaker/yappy-bird