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

What is React?

What is React?

This is a talk I gave about React at Triangle Javascript in January 2015

Links to examples can be found at the end of the presentation

Nathan Hunzaker

January 27, 2015

More Decks by Nathan Hunzaker

Other Decks in Programming


  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. JSX

  5. Build a DOM tree Compare to old state Get cheapest

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

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

    a unidirectional data flow.” http://facebook.github.io/flux/
  8. 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!
  9. Iconography: User interface icon by Aziz, the Noun Project http://thenounproject.com/azisher

    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