$30 off During Our Annual Pro Sale. View Details »

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

  2. Nate Hunzaker Front-end Developer, Viget @natehunzaker

  3. We build lots of user interfaces

  4. None
  5. None
  6. None
  7. Every framework has a big idea

  8. They don't just reinvent the wheel

  9. “Backbone.js gives structure to web applications [...]”

  10. “Ember.js is built for productivity. Designed with developer ergonomics in

  11. Keep it simple

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

    which we understand.” - Rich Hickey
  13. • Composition • One way data flow • Static mental

  14. 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
  15. Encourage developers to break a user interface into small components.

  16. <Blogs/> <Navigation/> <Posts/> <Post/> <Post/> <Post/> <Post/>

  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. • No templates • Strange syntax

  24. “Templates separate technology, not concerns.” - Pete Hunt (formerly of

  25. None
  26. 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/
  27. None
  28. None
  29. None
  30. How does this work?

  31. None
  32. None
  33. npm install babel npm install react-tools

  34. None
  35. <main/> <Menu/> <Inbox/>

  36. Virtual DOM

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

    mutation path (with Levenshtein) Write new DOM (in batches) New state
  38. State changed! So what...

  39. Imperative Programming Describe the transition between state

  40. Declarative Programming Express the logic, not the flow

  41. Define Interface Change State • Each change in state flushes

    to the DOM • Properties are sent in one direction • No cascading updates
  42. Let's talk about state

  43. A component is given props A component manages state

  44. A component is given props

  45. A component manages state

  46. That's kind of it

  47. Static Rendering Model

  48. This is fast

  49. Holy Hot Modules! https://github.com/gaearon/react-hot-loader

  50. Really fast

  51. Static Mental Model

  52. When you render to a virtual environment, the DOM becomes

    an implementation detail
  53. None
  54. None
  55. What is an isomorphic?

  56. None
  57. React.render() is idempotent Same in, same out

  58. None
  59. None
  60. React.renderToStaticMarkup

  61. None
  62. How do I build real apps with this?

  63. Flux “Flux [...] complements React's composable view components by utilizing

    a unidirectional data flow.” http://facebook.github.io/flux/
  64. None
  65. I thought you said this was simple

  66. 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!
  67. Flux Formal Capacitor: A demo isomorphic Flux app https://github.com/vigetlabs/capacitor

  68. Flux Fun http://www.natehunzaker.com/yappy-bird/

  69. App State Stimuli New state

  70. Initial State Sound Jump()

  71. None
  72. None
  73. None
  74. None
  75. NuclearJS https://github.com/optimizely/nuclear-js Yahoo Flux https://github.com/yahoo/flux-examples Om (Clojurescript) https://github.com/swannodette/om

  76. On that note...

  77. React injects a few constraints that yield powerful benefits

  78. By focusing on composability and a single direction flow of

    data, we can greatly simplify our apps
  79. Hopefully you didn't ignore me after the JSX :)

  80. Thanks! Nate Hunzaker Front-end Developer, Viget @natehunzaker

  81. 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
  82. react-router: the best router https://github.com/rackt/react-router