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

React

 React

Workshop covering React: A Library for Building User Interfaces.

0b2600a627d0af06ca6bbf9abe4067af?s=128

James Hughes

July 29, 2014
Tweet

More Decks by James Hughes

Other Decks in Programming

Transcript

  1. REACT A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

  2. OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT

    DESIGNING THE APP BUILDING THE APP
  3. OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT

    DESIGNING THE APP BUILDING THE APP
  4. OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT

    DESIGNING THE APP BUILDING THE APP
  5. OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT

    DESIGNING THE APP BUILDING THE APP
  6. OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT

    DESIGNING THE APP BUILDING THE APP
  7. OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT

    DESIGNING THE APP BUILDING THE APP
  8. OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT

    DESIGNING THE APP BUILDING THE APP
  9. OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT

    DESIGNING THE APP BUILDING THE APP
  10. OVERVIEW

  11. LOTS OF PEOPLE USE REACT AS THE V IN MVC.

    SINCE REACT MAKES NO ASSUMPTIONS ABOUT THE REST OF YOUR TECHNOLOGY STACK, IT'S EASY TO TRY IT OUT ON A SMALL FEATURE IN AN EXISTING PROJECT. “ ” JUST THE UI http://facebook.github.io/react/
  12. REACT USES A VIRTUAL DOM DIFF IMPLEMENTATION FOR ULTRA-HIGH PERFORMANCE.

    IT CAN ALSO RENDER ON THE SERVER USING NODE.JS — NO HEAVY BROWSER DOM REQUIRED. “ ” VIRTUAL DOM http://facebook.github.io/react/
  13. REACT IMPLEMENTS ONE-WAY REACTIVE DATA FLOW WHICH REDUCES BOILERPLATE AND

    IS EASIER TO REASON ABOUT THAN TRADITIONAL DATA BINDING. “ ” DATA FLOW http://facebook.github.io/react/
  14. HOW IT WORKS

  15. COMPONENTS VIRTUAL DOM ACTUAL DOM

  16. COMPONENTS VIRTUAL DOM ACTUAL DOM

  17. COMPONENTS VIRTUAL DOM ACTUAL DOM

  18. COMPONENTS VIRTUAL DOM ACTUAL DOM

  19. COMPONENTS VIRTUAL DOM ACTUAL DOM

  20. A BASIC COMPONENT

  21. COMPONENT FUNDAMENTALS PROPS JSX OR REACT.DOM GOALS

  22. A STATEFUL COMPONENT

  23. STATE STATE VS PROPS COMPONENT LIFECYCLE GOALS

  24. componentWillMount componentDidMount componentWillUnmount shouldComponentUpdate componentWillUpdate componentDidUpdate getInitialState DOES NOT COVER

    EVERY METHOD
  25. DESIGNING THE APP

  26. BUILDING THE APP