1 / 45 Looking at the Codes React Examples Eueung Mulyana https://eueung.github.io/112016/react-exp CodeLabs | Attribution-ShareAlike CC BY-SA

React Version: 15.4.1 Part 1 - Basic Examples: https://eueung.github.io/112016/react-cont Introduction to React already covered here: https://eueung.github.io/112016/react 2 / 45

Outline Starter Kit - Cnt'd React Bootstraped 3 / 45

Starter Kit - Cnt'd 4 / 45

5 / 45 Structure r e a c t - 1 5 . 4 . 1 $ t r e e - L 2 . | - - b u i l d | - - - - - - r e a c t - d o m - f i b e r . j s | | - - r e a c t - d o m - f i b e r . m i n . j s | | - - r e a c t - d o m . j s | | - - r e a c t - d o m . m i n . j s | | - - r e a c t - d o m - s e r v e r . j s | | - - r e a c t - d o m - s e r v e r . m i n . j s | | - - r e a c t . j s | | - - r e a c t . m i n . j s | | - - r e a c t - w i t h - a d d o n s . j s | | - - r e a c t - w i t h - a d d o n s . m i n . j s | - - e x a m p l e s | | - - b a s i c | | - - b a s i c - c l i c k - c o u n t e r | | - - b a s i c - c o m m o n j s | | - - b a s i c - j s x | | - - b a s i c - j s x - e x t e r n a l | | - - b a s i c - j s x - h a r m o n y | | - - b a s i c - j s x - p r e c o m p i l e | | - - f i b e r | | - - j q u e r y - b o o t s t r a p | | - - j q u e r y - m o b i l e | | - - q u a d r a t i c | | - - R E A D M E . m d | | - - s h a r e d | | - - t r a n s i t i o n s | | - - w e b c o m p o n e n t s | - - R E A D M E . m d

6 / 45 < ! D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a c h a r s e t = " u t f - 8 " > < t i t l e > Q u a d r a t i c F o r m u l a C a l c u l a t o r < / t i t l e > < l i n k r e l = " s t y l e s h e e t " h r e f = " . . / s h a r e d / c s s / b a s e . c s s " / > < / h e a d > < b o d y > < h 1 > Q u a d r a t i c F o r m u l a C a l c u l a t o r < / h 1 > < d i v i d = " c o n t a i n e r " > < p > I f y o u c a n s e e t h i s , R e a c t i s < s t r o n g > n o t < / s t r o n g > w o r k i n g r i g h t . T h i s i s p r o b a b l y b e c a u s e y o u & a p o s ; r e v i e w i n g t h i s o n y o u r f i l e s y s t e m i n s t e a d o f a w e b s e r v e r . T r y r u n n i n g < p r e > p y t h o n - m S i m p l e H T T P S e r v e r < / p r e > a n d g o i n g t o < a h r e f = " h t t p : / / l o c a l h o s t : 8 0 0 0 / " > h t t p : / / l o c a l h o s t : 8 0 0 0 / < / a > . < / p > < / d i v > < h 4 > E x a m p l e D e t a i l s < / h 4 > < p > T h i s i s w r i t t e n w i t h J S X i n a s e p a r a t e f i l e a n d t r a n s f o r m e d i n t h e b r o w s e r . < / p > < p > L e a r n m o r e a b o u t R e a c t a t < a h r e f = " h t t p s : / / f a c e b o o k . g i t h u b . i o / r e a c t " t a r g e t = " _ b l a n k " > f a c e b o o k . g i t h u b . i o / r e a c t < / a > . < / p > < s c r i p t s r c = " . . / . . / b u i l d / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / b u i l d / r e a c t - d o m . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / b a b e l - c o r e / 5 . 8 . 2 4 / b r o w s e r . m i n . j s " > < / s c r i p t < s c r i p t t y p e = " t e x t / b a b e l " s r c = " e x a m p l e . j s " > < / s c r i p t > < / b o d y > < / h t m l > quadratic HTML

g e t I n i t i a l S t a t e : f u n c t i o n ( ) { r e t u r n { a : 1 , b : 3 , c : - 4 } ; } , / * * * T h i s f u n c t i o n w i l l b e r e - b o u n d i n r e n d e r m u l t i p l e t i m e s . E a c h . b i n d ( ) w i l l * c r e a t e a n e w f u n c t i o n t h a t c a l l s t h i s w i t h t h e a p p r o p r i a t e k e y a s w e l l a s * t h e e v e n t . T h e k e y i s t h e k e y i n t h e s t a t e o b j e c t t h a t t h e v a l u e s h o u l d b e * m a p p e d f r o m . * / h a n d l e I n p u t C h a n g e : f u n c t i o n ( k e y , e v e n t ) { v a r p a r t i a l S t a t e = { } ; p a r t i a l S t a t e [ k e y ] = p a r s e F l o a t ( e v e n t . t a r g e t . v a l u e ) ; t h i s . s e t S t a t e ( p a r t i a l S t a t e ) ; } , r e n d e r : f u n c t i o n ( ) { v a r a = t h i s . s t a t e . a ; v a r b = t h i s . s t a t e . b ; v a r c = t h i s . s t a t e . c ; v a r r o o t = M a t h . s q r t ( M a t h . p o w ( b , 2 ) - 4 * a * c ) ; v a r d e n o m i n a t o r = 2 * a ; v a r x 1 = ( - b + r o o t ) / d e n o m i n a t o r ; v a r x 2 = ( - b - r o o t ) / d e n o m i n a t o r ; r e t u r n ( < d i v > < s t r o n g > < e m > a x < / e m > < s u p > 2 < / s u p > + < e m > b x < / e m > + < e m > c < / e m > = 0 < / s t r o n g > < h 4 > S o l v e f o r < e m > x < / e m > : < / h 4 > < p > < l a b e l > a : < i n p u t t y p e = " n u m b e r " v a l u e = { a } o n C h a n g e = { t h i s . h a n d l e I n p u t C h a n g e . b i n d ( n u l l , ' a ' ) } / > < / l a b e l > < b r / > < l a b e l > b : < i n p u t t y p e = " n u m b e r " v a l u e = { b } o n C h a n g e = { t h i s . h a n d l e I n p u t C h a n g e . b i n d ( n u l l , ' b ' ) } / > < / l a b e l > 7 / 45 quadratic JS+JSX Requires babel render this.state Multi-Element . . . b i n d ( )

8 / 45 quadratic One Component

< / h e a d > < b o d y > < h 1 > B a s i c E x a m p l e w i t h W e b C o m p o n e n t s < / h 1 > < d i v i d = " c o n t a i n e r " > < p > T o i n s t a l l R e a c t , f o l l o w t h e i n s t r u c t i o n s o n < a h r e f = " h t t p : / / w w w . g i t h u b . c o m / f a c e b o o k / r e a c t / " > G i t H u b < / a > . < / p > < p > I f y o u c a n s e e t h i s , R e a c t i s < s t r o n g > n o t < / s t r o n g > w o r k i n g r i g h t . I f y o u c h e c k e d o u t t h e s o u r c e f r o m G i t H u b m a k e s u r e t o r u n < c o d e > g r u n t < / c o d e > . < / p > < / d i v > < b r / > < b r / > < h 4 > E x a m p l e D e t a i l s < / h 4 > < p > T h i s e x a m p l e d e m o n s t r a t e s W e b C o m p o n e n t / R e a c t C o m p o n e n t i n t e r o p e r a b i l i t y b y r e n d e r i n g a R e a c t C o m p o n e n t , w h i c h r e n d e r s a W e b C o m p o n e n t , w h i c h r e n d e r s a n o t h e r R e a c t C o m p o n e n t i n t h e W e b C o m p o n e n t ' s s h a d o w D O M . < p > < p > L e a r n m o r e a b o u t R e a c t a t < a h r e f = " h t t p : / / f a c e b o o k . g i t h u b . i o / r e a c t " t a r g e t = " _ b l a n k " > f a c e b o o k . g i t h u b . i o / r e a c t < / a > . < / p > < s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / w e b c o m p o n e n t s j s / 0 . 7 . 2 1 / w e b c o m p o n e n t s . j s " < s c r i p t s r c = " . . / . . / b u i l d / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / b u i l d / r e a c t - d o m . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / b a b e l - c o r e / 5 . 8 . 2 4 / b r o w s e r . m i n . j s " > < / s c r i p t < s c r i p t t y p e = " t e x t / b a b e l " > / / D e f i n e W e b C o m p o n e n t v a r p r o t o = O b j e c t . c r e a t e ( H T M L E l e m e n t . p r o t o t y p e , { a t t a c h e d C a l l b a c k : { v a l u e : f u n c t i o n ( ) { v a r m o u n t P o i n t = d o c u m e n t . c r e a t e E l e m e n t ( ' s p a n ' ) ; t h i s . c r e a t e S h a d o w R o o t ( ) . a p p e n d C h i l d ( m o u n t P o i n t ) ; v a r n a m e = t h i s . g e t A t t r i b u t e ( ' n a m e ' ) ; v a r u r l = ' h t t p s : / / w w w . g o o g l e . c o m / s e a r c h ? q = ' + e n c o d e U R I C o m p o n e n t ( n a m e ) ; R e a c t D O M . r e n d e r ( < a h r e f = { u r l } > { n a m e } < / a > , m o u n t P o i n t ) ; } } 9 / 45 webcomponents HTML ES2015+JSX Requires babel this.props.name

10 / 45 webcomponents One Component

L e a r n m o r e a b o u t R e a c t a t < a h r e f = " h t t p s : / / f a c e b o o k . g i t h u b . i o / r e a c t " t a r g e t = " _ b l a n k " > f a c e b o o k . g i t h u b . i o / r e a c t < / a > . < / p > < s c r i p t s r c = " . . / . . / b u i l d / r e a c t - w i t h - a d d o n s . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / b u i l d / r e a c t - d o m . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / b a b e l - c o r e / 5 . 8 . 2 4 / b r o w s e r . m i n . j s " > < / s c r i p t < s c r i p t t y p e = " t e x t / b a b e l " > v a r C S S T r a n s i t i o n G r o u p = R e a c t . a d d o n s . C S S T r a n s i t i o n G r o u p ; v a r I N T E R V A L = 2 0 0 0 ; v a r A n i m a t e D e m o = R e a c t . c r e a t e C l a s s ( { g e t I n i t i a l S t a t e : f u n c t i o n ( ) { r e t u r n { c u r r e n t : 0 } ; } , c o m p o n e n t D i d M o u n t : f u n c t i o n ( ) { t h i s . i n t e r v a l = s e t I n t e r v a l ( t h i s . t i c k , I N T E R V A L ) ; } , c o m p o n e n t W i l l U n m o u n t : f u n c t i o n ( ) { c l e a r I n t e r v a l ( t h i s . i n t e r v a l ) ; } , t i c k : f u n c t i o n ( ) { t h i s . s e t S t a t e ( { c u r r e n t : t h i s . s t a t e . c u r r e n t + 1 } ) ; } , r e n d e r : f u n c t i o n ( ) { v a r c h i l d r e n = [ ] ; v a r p o s = 0 ; v a r c o l o r s = [ ' r e d ' , ' g r a y ' , ' b l u e ' ] ; f o r ( v a r i = t h i s . s t a t e . c u r r e n t ; i < t h i s . s t a t e . c u r r e n t + c o l o r s . l e n g t h ; i + + ) { v a r s t y l e = { l e f t : p o s * 1 2 8 , b a c k g r o u n d : c o l o r s [ i % c o l o r s . l e n g t h ] } ; p o s + + ; c h i l d r e n . p u s h ( < d i v k e y = { i } c l a s s N a m e = " a n i m a t e I t e m " s t y l e = { s t y l e } > { i } < / d i v > ) ; } r e t u r n ( < C S S T r a n s i t i o n G r o u p c l a s s N a m e = " a n i m a t e E x a m p l e " 11 / 45 transitions HTML JS+JSX Requires babel ..addons.js this.state.current

. e x a m p l e - e n t e r , . e x a m p l e - l e a v e { - w e b k i t - t r a n s i t i o n : a l l . 2 5 s ; t r a n s i t i o n : a l l . 2 5 s ; } . e x a m p l e - e n t e r , . e x a m p l e - l e a v e . e x a m p l e - l e a v e - a c t i v e { o p a c i t y : 0 . 0 1 ; } . e x a m p l e - e n t e r . e x a m p l e - e n t e r - a c t i v e , . e x a m p l e - l e a v e { m a r g i n - l e f t : 0 ; o p a c i t y : 1 ; } / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * / . e x a m p l e - l e a v e . e x a m p l e - l e a v e - a c t i v e { m a r g i n - l e f t : - 1 2 8 p x ; } . e x a m p l e - e n t e r { m a r g i n - l e f t : 1 2 8 p x ; } / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * / . a n i m a t e E x a m p l e { d i s p l a y : b l o c k ; h e i g h t : 1 2 8 p x ; p o s i t i o n : r e l a t i v e ; w i d t h : 3 8 4 p x ; } . a n i m a t e I t e m { c o l o r : w h i t e ; f o n t - s i z e : 3 6 p x ; f o n t - w e i g h t : b o l d ; h e i g h t : 1 2 8 p x ; l i n e - h e i g h t : 1 2 8 p x ; p o s i t i o n : a b s o l u t e ; t e x t - a l i g n : c e n t e r ; - w e b k i t - t r a n s i t i o n : a l l . 2 5 s ; / * T O D O : m a k e t h i s a m o v e a n i m a t i o n * / t r a n s i t i o n : a l l . 2 5 s ; / * T O D O : m a k e t h i s a m o v e a n i m a t i o n * / 12 / 45 transitions Global CSS Inline Style provided by the Component

13 / 45 Layout

14 / 45 Enter & Leave

15 / 45 transitions One Component

16 / 45 < ! d o c t y p e h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " u t f - 8 " > < m e t a h t t p - e q u i v = " X - U A - C o m p a t i b l e " c o n t e n t = " I E = e d g e , c h r o m e = 1 " > < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " > < t i t l e > j Q u e r y M o b i l e R e a c t E x a m p l e < / t i t l e > < l i n k r e l = " s t y l e s h e e t " h r e f = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / j q u e r y - m o b i l e / 1 . 4 . 5 / j q u e r y . m o b i l e . m i n . c s s " < l i n k r e l = " s t y l e s h e e t " h r e f = " h t t p s : / / d e m o s . j q u e r y m o b i l e . c o m / 1 . 4 . 5 / _ a s s e t s / c s s / j q m - d e m o s . c s s " / > < / h e a d > < b o d y c l a s s = " u i - m o b i l e - v i e w p o r t u i - o v e r l a y - a " > < d i v i d = " c o n t e n t " > < / d i v > < s c r i p t s r c = " h t t p : / / c o d e . j q u e r y . c o m / j q u e r y - 2 . 2 . 2 . m i n . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / j q u e r y - m o b i l e / 1 . 4 . 5 / j q u e r y . m o b i l e . m i n . j s " > < / < s c r i p t s r c = " . . / . . / b u i l d / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / b u i l d / r e a c t - d o m . j s " > < / s c r i p t > < s c r i p t s r c = " j s / a p p . j s " > < / s c r i p t > < / b o d y > < / h t m l > jquery-mobile HTML

* | | | - - J Q u e r y M o b i l e B u t t o n * | | - - J Q u e r y M o b i l e F o o t e r * | - - J Q u e r y M o b i l e P a g e ( t w o ) * | | - - J Q u e r y M o b i l e H e a d e r * | | - - J Q u e r y M o b i l e C o n t e n t * | | | - - P a g e T w o C o n t e n t * | | | - - J Q u e r y M o b i l e B u t t o n * | | - - J Q u e r y M o b i l e F o o t e r * | - - J Q u e r y M o b i l e P a g e ( p o p u p ) * | - - J Q u e r y M o b i l e H e a d e r * | - - J Q u e r y M o b i l e C o n t e n t * | | - - P a g e P o p U p C o n t e n t * | | - - J Q u e r y M o b i l e B u t t o n * | - - J Q u e r y M o b i l e F o o t e r * / / * g l o b a l d o c u m e n t , R e a c t * / ' u s e s t r i c t ' ; / * * M a i n a p p l i c a t i o n c o m p o n e n t . * / v a r A p p = R e a c t . c r e a t e C l a s s ( { d i s p l a y N a m e : ' A p p ' , r e n d e r : f u n c t i o n ( ) { r e t u r n R e a c t . D O M . d i v ( { c l a s s N a m e : ' a p p ' } , J Q u e r y M o b i l e P a g e ( { i d : ' o n e ' } , P a g e O n e C o n t e n t ( n u l l ) ) , J Q u e r y M o b i l e P a g e ( { i d : ' t w o ' } , P a g e T w o C o n t e n t ( n u l l ) ) , J Q u e r y M o b i l e P a g e ( { i d : ' p o p u p ' , h e a d e r T h e m e : ' b ' } , P a g e P o p U p C o n t e n t ( n u l l ) ) ) ; } } ) ; A p p = R e a c t . c r e a t e F a c t o r y ( A p p ) ; / * * j Q u e r y M o b i l e p a g e c o m p o n e n t . * / v a r J Q u e r y M o b i l e P a g e = R e a c t . c r e a t e C l a s s ( { d i s p l a y N a m e : ' J Q u e r y M o b i l e P a g e ' , g e t D e f a u l t P r o p s : f u n c t i o n ( ) { r e t u r n { ' d a t a - r o l e ' : ' p a g e ' , ' d a t a - t h e m e ' : ' a ' , h e a d e r T h e m e : ' a ' } ; } , 17 / 45 jquery-mobile JS this.props this.props.children

/ * * j Q u e r y M o b i l e b u t t o n c o m p o n e n t . * / v a r J Q u e r y M o b i l e B u t t o n = R e a c t . c r e a t e C l a s s ( { d i s p l a y N a m e : ' J Q u e r y M o b i l e B u t t o n ' , g e t D e f a u l t P r o p s : f u n c t i o n ( ) { r e t u r n { c l a s s N a m e : ' u i - b t n u i - s h a d o w u i - c o r n e r - a l l ' } ; } , r e n d e r : f u n c t i o n ( ) { r e t u r n R e a c t . D O M . p ( n u l l , R e a c t . D O M . a ( t h i s . p r o p s , t h i s . p r o p s . c h i l d r e n ) ) ; } } ) ; J Q u e r y M o b i l e B u t t o n = R e a c t . c r e a t e F a c t o r y ( J Q u e r y M o b i l e B u t t o n ) ; / * * j Q u e r y M o b i l e p a g e c o n t e n t c o m p o n e n t . * / v a r J Q u e r y M o b i l e C o n t e n t = R e a c t . c r e a t e C l a s s ( { d i s p l a y N a m e : ' J Q u e r y M o b i l e C o n t e n t ' , r e n d e r : f u n c t i o n ( ) { r e t u r n R e a c t . D O M . d i v ( { r o l e : ' m a i n ' , c l a s s N a m e : ' u i - c o n t e n t ' } , t h i s . p r o p s . c h i l d r e n ) ; } } ) ; J Q u e r y M o b i l e C o n t e n t = R e a c t . c r e a t e F a c t o r y ( J Q u e r y M o b i l e C o n t e n t ) ; / * * j Q u e r y M o b i l e f o o t e r c o m p o n e n t . * / v a r J Q u e r y M o b i l e F o o t e r = R e a c t . c r e a t e C l a s s ( { d i s p l a y N a m e : ' J Q u e r y M o b i l e F o o t e r ' , r e n d e r : f u n c t i o n ( ) { r e t u r n R e a c t . D O M . d i v ( { ' d a t a - r o l e ' : ' f o o t e r ' } , R e a c t . D O M . h 4 ( n u l l , ' P a g e f o o t e r ' ) ) ; } } ) ; J Q u e r y M o b i l e F o o t e r = R e a c t . c r e a t e F a c t o r y ( J Q u e r y M o b i l e F o o t e r ) ; / * * j Q u e r y M o b i l e h e a d e r c o m p o n e n t . * / v a r J Q u e r y M o b i l e H e a d e r = R e a c t . c r e a t e C l a s s ( { d i s p l a y N a m e : ' J Q u e r y M o b i l e H e a d e r ' , 18 / 45 jquery-mobile JS Content as Children

19 / 45 Component Tree Notes: treatment of passed props

jquery-mobile 20 / 45

React Bootstraped Or the Other Way Around 21 / 45

22 / 45 Structure r e a c t - 1 5 . 4 . 1 $ t r e e - L 2 . | - - b u i l d | - - - - - - r e a c t - d o m - f i b e r . j s | | - - r e a c t - d o m - f i b e r . m i n . j s | | - - r e a c t - d o m . j s | | - - r e a c t - d o m . m i n . j s | | - - r e a c t - d o m - s e r v e r . j s | | - - r e a c t - d o m - s e r v e r . m i n . j s | | - - r e a c t . j s | | - - r e a c t . m i n . j s | | - - r e a c t - w i t h - a d d o n s . j s | | - - r e a c t - w i t h - a d d o n s . m i n . j s | - - e x a m p l e s | | - - b a s i c | | - - b a s i c - c l i c k - c o u n t e r | | - - b a s i c - c o m m o n j s | | - - b a s i c - j s x | | - - b a s i c - j s x - e x t e r n a l | | - - b a s i c - j s x - h a r m o n y | | - - b a s i c - j s x - p r e c o m p i l e | | - - f i b e r | | - - j q u e r y - b o o t s t r a p | | - - j q u e r y - m o b i l e | | - - q u a d r a t i c | | - - R E A D M E . m d | | - - s h a r e d | | - - t r a n s i t i o n s | | - - w e b c o m p o n e n t s | - - R E A D M E . m d

23 / 45 < ! d o c t y p e h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " u t f - 8 " > < m e t a h t t p - e q u i v = " X - U A - C o m p a t i b l e " c o n t e n t = " I E = e d g e , c h r o m e = 1 " > < t i t l e > j Q u e r y I n t e g r a t i o n < / t i t l e > < l i n k r e l = " s t y l e s h e e t " h r e f = " h t t p s : / / m a x c d n . b o o t s t r a p c d n . c o m / b o o t s t r a p / 3 . 3 . 6 / c s s / b o o t s t r a p . m i n . c s s " < l i n k r e l = " s t y l e s h e e t " h r e f = " h t t p s : / / m a x c d n . b o o t s t r a p c d n . c o m / b o o t s t r a p / 3 . 3 . 6 / c s s / b o o t s t r a p - t h e m e . m i n . c s s " < s t y l e > . e x a m p l e { m a r g i n : 2 0 p x ; } < / s t y l e > < / h e a d > < b o d y > < d i v i d = " j q u e r y e x a m p l e " > < / d i v > < s c r i p t s r c = " . . / . . / b u i l d / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / b u i l d / r e a c t - d o m . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / b a b e l - c o r e / 5 . 8 . 2 4 / b r o w s e r . m i n . j s " > < / s c r i p t < s c r i p t s r c = " h t t p : / / c o d e . j q u e r y . c o m / j q u e r y - 2 . 2 . 2 . m i n . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / m a x c d n . b o o t s t r a p c d n . c o m / b o o t s t r a p / 3 . 3 . 6 / j s / b o o t s t r a p . m i n . j s " i n t e g r i t y = " s h a 3 8 4 - 0 m S b J D E H i a l f m u B B Q P 6 A 4 Q r p r q 5 O V f W 3 7 P R R 3 j 5 < s c r i p t t y p e = " t e x t / b a b e l " s r c = " j s / a p p . j s " > < / s c r i p t > < / b o d y > < / h t m l > jquery- bootstrap HTML

' u s e s t r i c t ' ; v a r E x a m p l e = R e a c t . c r e a t e C l a s s ( { h a n d l e C a n c e l : f u n c t i o n ( ) { i f ( c o n f i r m ( ' A r e y o u s u r e y o u w a n t t o c a n c e l ? ' ) ) { t h i s . r e f s . m o d a l . c l o s e ( ) ; } } , r e n d e r : f u n c t i o n ( ) { v a r m o d a l = n u l l ; m o d a l = ( < B o o t s t r a p M o d a l r e f = " m o d a l " c o n f i r m = " O K " c a n c e l = " C a n c e l " o n C a n c e l = { t h i s . h a n d l e C a n c e l } o n C o n f i r m = { t h i s . c l o s e M o d a l } o n H i d d e n = { t h i s . h a n d l e M o d a l D i d C l o s e } t i t l e = " H e l l o , B o o t s t r a p ! " > T h i s i s a R e a c t c o m p o n e n t p o w e r e d b y j Q u e r y a n d B o o t s t r a p ! < / B o o t s t r a p M o d a l > ) ; r e t u r n ( < d i v c l a s s N a m e = " e x a m p l e " > { m o d a l } < B o o t s t r a p B u t t o n o n C l i c k = { t h i s . o p e n M o d a l } c l a s s N a m e = " b t n - d e f a u l t " > O p e n m o d a l < / B o o t s t r a p B u t t o n > < / d i v > ) ; } , o p e n M o d a l : f u n c t i o n ( ) { t h i s . r e f s . m o d a l . o p e n ( ) ; } , c l o s e M o d a l : f u n c t i o n ( ) { t h i s . r e f s . m o d a l . c l o s e ( ) ; } , h a n d l e M o d a l D i d C l o s e : f u n c t i o n ( ) { a l e r t ( " T h e m o d a l h a s b e e n d i s m i s s e d ! " ) ; } } ) ; R e a c t D O M . r e n d e r ( < E x a m p l e / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' j q u e r y e x a m p l e ' ) ) ; 24 / 45 jquery-bootstrap JS+JSX Requires babel this.refs.modal

/ / S i m p l e p u r e - R e a c t c o m p o n e n t s o w e d o n ' t h a v e t o r e m e m b e r / / B o o t s t r a p ' s c l a s s e s v a r B o o t s t r a p B u t t o n = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < a { . . . t h i s . p r o p s } h r e f = " j a v a s c r i p t : ; " r o l e = " b u t t o n " c l a s s N a m e = { ( t h i s . p r o p s . c l a s s N a m e | | ' ' ) + ' b t n ' } / > ) ; } } ) ; v a r B o o t s t r a p M o d a l = R e a c t . c r e a t e C l a s s ( { / / T h e f o l l o w i n g t w o m e t h o d s a r e t h e o n l y p l a c e s w e n e e d t o / / i n t e g r a t e B o o t s t r a p o r j Q u e r y w i t h t h e c o m p o n e n t s l i f e c y c l e m e t h o d s . c o m p o n e n t D i d M o u n t : f u n c t i o n ( ) { / / W h e n t h e c o m p o n e n t i s a d d e d , t u r n i t i n t o a m o d a l $ ( t h i s . r e f s . r o o t ) . m o d a l ( { b a c k d r o p : ' s t a t i c ' , k e y b o a r d : f a l s e , s h o w : f a l s e } ) ; / / B o o t s t r a p ' s m o d a l c l a s s e x p o s e s a f e w e v e n t s f o r h o o k i n g i n t o m o d a l / / f u n c t i o n a l i t y . L e t s h o o k i n t o o n e o f t h e m : $ ( t h i s . r e f s . r o o t ) . o n ( ' h i d d e n . b s . m o d a l ' , t h i s . h a n d l e H i d d e n ) ; } , c o m p o n e n t W i l l U n m o u n t : f u n c t i o n ( ) { $ ( t h i s . r e f s . r o o t ) . o f f ( ' h i d d e n . b s . m o d a l ' , t h i s . h a n d l e H i d d e n ) ; } , c l o s e : f u n c t i o n ( ) { $ ( t h i s . r e f s . r o o t ) . m o d a l ( ' h i d e ' ) ; } , o p e n : f u n c t i o n ( ) { $ ( t h i s . r e f s . r o o t ) . m o d a l ( ' s h o w ' ) ; } , r e n d e r : f u n c t i o n ( ) { v a r c o n f i r m B u t t o n = n u l l ; v a r c a n c e l B u t t o n = n u l l ; i f ( t h i s . p r o p s . c o n f i r m ) { c o n f i r m B u t t o n = ( < B o o t s t r a p B u t t o n o n C l i c k = { t h i s . h a n d l e C o n f i r m } c l a s s N a m e = " b t n - p r i m a r y " > 25 / 45 jquery-bootstrap JS+JSX Requires babel ...this.props this.refs.root

26 / 45 Component Tree Stateless Component

27 / 45 jquery-bootstrap after openModal

28 / 45 jquery-bootstrap handleCancel

29 / 45 jquery-bootstrap after closeModal handleModalDidClose

30 / 45 BS Docs

31 / 45 BS Docs

32 / 45 BS Docs jQuery . o f f ( ) to remove event handlers (after hide) attached with the . o n ( ) method (after modal show).

< ! D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a c h a r s e t = " U T F - 8 " > < t i t l e > R e a c t E x a m p l e < / t i t l e > < l i n k r e l = ' s t y l e s h e e t p r e f e t c h ' h r e f = ' h t t p s : / / m a x c d n . b o o t s t r a p c d n . c o m / b o o t s t r a p / 3 . 3 . 6 / c s s / b o o t s t r a p . m i n . c s s ' < s t y l e > . c o n t a i n e r { p a d d i n g : 2 0 p x ; } < / s t y l e > < / h e a d > < b o d y > < m a i n c l a s s = " c o n t a i n e r " > < / m a i n > < s c r i p t s r c = " b u i l d / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " b u i l d / r e a c t - d o m . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / b a b e l - c o r e / 5 . 8 . 2 4 / b r o w s e r . m i n . j s " > < / s c r i p t < s c r i p t t y p e = " t e x t / b a b e l " s r c = " b a b e l / i n d e x . b a b e l " > < / s c r i p t > < / b o d y > < / h t m l > 33 / 45 Extra #1 HTML Ref: React Example @codepen BS CSS Only

c l a s s N a v e x t e n d s R e a c t . C o m p o n e n t { c o n s t r u c t o r ( p r o p s ) { s u p e r ( p r o p s ) ; t h i s . s t a t e = { s e l e c t e d : 0 } ; } s e t A c t i v e ( i n d e x ) { t h i s . s e t S t a t e ( O b j e c t . a s s i g n ( t h i s . s t a t e , { s e l e c t e d : i n d e x } ) ) ; / / t h i s . s e t S t a t e ( { s e l e c t e d : i n d e x } ) ; } r e n d e r I t e m s ( ) { r e t u r n t h i s . p r o p s . i t e m s . m a p ( ( i t e m , i ) = > { r e t u r n ( < l i c l a s s N a m e = { i = = = t h i s . s t a t e . s e l e c t e d ? ' a c t i v e ' : ' ' } > < a h r e f = " # " o n C l i c k = { ( ) = > t h i s . s e t A c t i v e ( i ) } > { i t e m } < / a > < / l i > ) ; } ) ; } r e n d e r ( ) { r e t u r n < u l c l a s s N a m e = " n a v n a v - p i l l s " > { t h i s . r e n d e r I t e m s ( ) } < / u l > ; } } c o n s t n a v I t e m s = [ ' H o m e ' , ' A b o u t ' , ' C o n t a c t ' ] ; R e a c t D O M . r e n d e r ( < N a v i t e m s = { n a v I t e m s } / > , d o c u m e n t . q u e r y S e l e c t o r ( ' m a i n ' ) ) ; 34 / 45 Extra #1 ES2015+JSX Requires babel One Component this.state

35 / 45 Extra #1

36 / 45 Extra #2 Structure Ref: fedosejev @GitHub f e d o s e j e v $ t r e e . | - - d a t a . j s o n | - - i m a g e s | | - - I M G _ 5 7 7 4 . j p g | | - - I M G _ 6 3 0 5 . j p g | | - - I M G _ 6 7 0 1 . j p g | | - - I M G _ 6 7 3 2 . j p g | | - - I M G _ 6 7 9 5 . j p g | - - i n d e x . h t m l | - - j s | | - - a p p . j s x | | - - c o m p o n e n t s | | - - A p p l i c a t i o n . j s x | | - - I m a g e . j s x | - - p a c k a g e . j s o n 3 d i r e c t o r i e s , 1 1 f i l e s

37 / 45 npm package.json { " n a m e " : " f e d o s e j e v - e x a m p l e " , " d e s c r i p t i o n " : " f e d o s e j e v R e a c t e x a m p l e " , " p r i v a t e " : t r u e , " m a i n " : " j s / a p p . j s x " , " d e p e n d e n c i e s " : { " b a b e l - p r e s e t - e s 2 0 1 5 " : " ^ 6 . 6 . 0 " , " b a b e l - p r e s e t - r e a c t " : " ^ 6 . 5 . 0 " , " b a b e l i f y " : " ^ 7 . 3 . 0 " , " b r o w s e r i f y " : " ^ 1 3 . 0 . 0 " , " r e a c t " : " ^ 1 5 . 0 . 2 " , " r e a c t - d o m " : " ^ 1 5 . 0 . 2 " , " w a t c h i f y " : " ^ 3 . 7 . 0 " } , " s c r i p t s " : { " b u i l d " : " b r o w s e r i f y j s / a p p . j s x - t b a b e l i f y - o j s / a p p . j s " , " s t a r t " : " w a t c h i f y j s / a p p . j s x - v - t b a b e l i f y - o j s / a p p . j s " } } $ n p m s t a r t > f e d o s e j e v - e x a m p l e @ s t a r t / h o m e / e m / f e d o s e j e v > w a t c h i f y j s / a p p . j s x - v - t b a b e l i f y - o j s / a p p . j s 7 2 3 5 8 9 b y t e s w r i t t e n t o j s / a p p . j s ( 6 . 1 4 s e c o n d s )

38 / 45 < ! d o c t y p e h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " u t f - 8 " / > < m e t a h t t p - e q u i v = " x - u a - c o m p a t i b l e " c o n t e n t = " i e = e d g e , c h r o m e = 1 " / > < t i t l e > A p p l i c a t i o n < / t i t l e > < l i n k r e l = " s t y l e s h e e t " h r e f = " h t t p s : / / m a x c d n . b o o t s t r a p c d n . c o m / b o o t s t r a p / 3 . 3 . 6 / c s s / b o o t s t r a p . m i n . c s s " < / h e a d > < b o d y > < d i v d a t a - r e a c t - a p p l i c a t i o n > < h 5 c l a s s = " t e x t - c e n t e r t e x t - m u t e d " > L o a d i n g a p p l i c a t i o n . . . < / h 5 > < / d i v > < s c r i p t s r c = " . / j s / a p p . j s " > < / s c r i p t > < / b o d y > < / h t m l > { " i m a g e s " : [ " I M G _ 5 7 7 4 . j p g " , " I M G _ 6 3 0 5 . j p g " , " I M G _ 6 7 0 1 . j p g " , " I M G _ 6 7 3 2 . j p g " , " I M G _ 6 7 9 5 . j p g " ] } Extra #2 HTML data.json BS CSS Only

39 / 45 $ t r e e . | - - d a t a . j s o n | - - i m a g e s | | - - I M G _ 5 7 7 4 . j p g | | - - I M G _ 6 3 0 5 . j p g | | - - I M G _ 6 7 0 1 . j p g | | - - I M G _ 6 7 3 2 . j p g | | - - I M G _ 6 7 9 5 . j p g | - - i n d e x . h t m l | - - j s | | - - a p p . j s x | | - - c o m p o n e n t s | | - - A p p l i c a t i o n . j s x | | - - I m a g e . j s x | - - p a c k a g e . j s o n i m p o r t R e a c t f r o m ' r e a c t ' ; i m p o r t R e a c t D O M f r o m ' r e a c t - d o m ' ; i m p o r t A p p l i c a t i o n f r o m ' . / c o m p o n e n t s / A p p l i c a t i o n . j s x ' ; R e a c t D O M . r e n d e r ( < A p p l i c a t i o n / > , d o c u m e n t . q u e r y S e l e c t o r ( ' [ d a t a - r e a c t - a p p l i c a t i o n ] ' ) ) ; Extra #2 js/app.jsx

i m p o r t R e a c t f r o m ' r e a c t ' ; i m p o r t I m a g e f r o m ' . / I m a g e . j s x ' ; i m p o r t d a t a f r o m ' . . / . . / d a t a . j s o n ' ; l e t A p p l i c a t i o n = R e a c t . c r e a t e C l a s s ( { c r e a t e I m a g e : f u n c t i o n ( i m a g e ) { r e t u r n < I m a g e s o u r c e = { i m a g e } k e y = { i m a g e } / > ; } , c r e a t e I m a g e s : f u n c t i o n ( i m a g e s ) { r e t u r n i m a g e s . m a p ( t h i s . c r e a t e I m a g e ) ; } , r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v c l a s s N a m e = " c o n t a i n e r " > < d i v c l a s s N a m e = " r o w " > < d i v c l a s s N a m e = " c o l - s m - 1 2 t e x t - c e n t e r " > { t h i s . c r e a t e I m a g e s ( d a t a . i m a g e s ) } < / d i v > < / d i v > < / d i v > ) ; } } ) ; e x p o r t d e f a u l t A p p l i c a t i o n ; / * - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * / i m p o r t R e a c t f r o m ' r e a c t ' ; l e t I m a g e = f u n c t i o n s t a t e l e s s F u n c t i o n C o m p o n e n t C l a s s ( p r o p s ) { l e t s o u r c e = ' . / i m a g e s / ' + p r o p s . s o u r c e ; l e t s t y l e = { w i d t h : ' 2 0 0 p x ' , m a r g i n : ' 1 0 p x 5 p x 0 p x 5 p x ' } ; r e t u r n ( < i m g s r c = { s o u r c e } s t y l e = { s t y l e } / > 40 / 45 Extra #2 c/Application.jsx c/Image.jsx ES2015+JSX Two Components k e y = { } react internal (cf. transitions)

41 / 45 Extra #2

Refs 42 / 45

Refs 1. A JavaScript library for building user interfaces | React 2. facebook/react: A declarative, e cient, and exible JavaScript library for building user interfaces. 3. Intro and Concept - Learning React 4. React Example 5. JavaScript - Bootstrap 6. fedosejev/how-to-create-react-components-dynamically 43 / 45

44 / 45 END Eueung Mulyana https://eueung.github.io/112016/react-exp CodeLabs | Attribution-ShareAlike CC BY-SA

45 / 45 That's All for the basics ... piece of cake, no?