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

React for Poets

React for Poets

A very high level look at React


Nathan Hunzaker

April 09, 2015


  1. React for Poets

  2. • What React it is • Why we like it

    • What React isn't
  3. What is React?

  4. React is a JavaScript library for building user interfaces.

  5. "How should the user interface be built, and how should

    it update?"
  6. It forces a developer to break up their user interface

    into small components.
  7. <Blogs/> <Navigation/> <Posts/> <Post/> <Post/> <Post/> <Post/>

  8. 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
  9. None
  10. Component Tree

  11. Build a component tree Compare to old data Determine fastest

    update method Update page Data
  12. State changed! So what...

  13. Define Interface Change Data • Each change updates the user

    interface • Data only goes in one direction (down)
  14. Why I like React

  15. Trouble in Paradise

  16. • Web applications • Pages with frequent UI updates •

    Things the browser can't do on its own JS apps are great for:
  17. • Page load times • Handling critical errors • Mobile

    performance Challenges with JS Apps:
  18. None
  19. Why I like React

  20. Server side rendering

  21. None
  22. • Responsive page loads • More strategies for handling failure

    (not just blank screens) With server side rendering:
  23. None
  24. None
  25. Page Load Boot App Server

  26. Mobile performance

  27. • Designed for low memory devices • Hyper efficient page

    updates • Stress tested on millions of devices on sites such as facebook.com, airbnb.com, and bbc.com
  28. It's not the right tool for everything

  29. • Sites with only few interactions • Simple content oriented

    sites • Handoff projects where the maintainer is not familiar with JavaScript development • Server-side rendering requires NodeJS expertise React is not ideal for:
  30. React is exciting

  31. Break down UI into components

  32. Addresses a lot of JS issues

  33. None
  34. Thanks! Nate Hunzaker @natehunzaker