React

Workshop covering React: A Library for Building User Interfaces.

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