Tweet
Tweet

Slide 1

Slide 1 text

REACT A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

OVERVIEW

Slide 11

Slide 11 text

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/

Slide 12

Slide 12 text

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/

Slide 13

Slide 13 text

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/

Slide 14

Slide 14 text

HOW IT WORKS

Slide 15

Slide 15 text

COMPONENTS VIRTUAL DOM ACTUAL DOM

Slide 16

Slide 16 text

COMPONENTS VIRTUAL DOM ACTUAL DOM

Slide 17

Slide 17 text

COMPONENTS VIRTUAL DOM ACTUAL DOM

Slide 18

Slide 18 text

COMPONENTS VIRTUAL DOM ACTUAL DOM

Slide 19

Slide 19 text

COMPONENTS VIRTUAL DOM ACTUAL DOM

Slide 20

Slide 20 text

A BASIC COMPONENT

Slide 21

Slide 21 text

COMPONENT FUNDAMENTALS PROPS JSX OR REACT.DOM GOALS

Slide 22

Slide 22 text

A STATEFUL COMPONENT

Slide 23

Slide 23 text

STATE STATE VS PROPS COMPONENT LIFECYCLE GOALS

Slide 24

Slide 24 text

componentWillMount componentDidMount componentWillUnmount shouldComponentUpdate componentWillUpdate componentDidUpdate getInitialState DOES NOT COVER EVERY METHOD

Slide 25

Slide 25 text

DESIGNING THE APP

Slide 26

Slide 26 text

BUILDING THE APP