CodeLabs React & Flux

Updates Dec 2016 : React by Examples
https://eueung.github.io/112016/react-exp
https://eueung.github.io/112016/react-cont
https://eueung.github.io/112016/react

JavaScript CodeLabs
Introduction to React and Flux
http://eueung.github.io/js-stuff/react

Transcript

1. React + Flux Eueung Mulyana http://eueung.github.io/js/react JS CodeLabs | Attribution-ShareAlike CC BY-SA  1 / 40
2. Agenda React Basics #1 React Basics #2 Flux 2 / 40
3.  React Basics #1 A JavaScript library for building UIs | React 3 / 40
4. < ! 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 > H e l l o R e a c t ! < / t i t l e > < s c r i p t s r c = " r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " r e a c t - 0 . 1 4 . 5 / 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 3 / b r o w s e r . m i n . j s " < / h e a d > < b o d y > < d i v i d = " e x a m p l e " > < / d i v > < s c r i p t t y p e = " t e x t / b a b e l " > R e a c t D O M . r e n d e r ( < h 1 > H e l l o , w o r l d ! < / h 1 > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; < / s c r i p t > < / b o d y > < / h t m l > Render @Browser hello-00-A.html 4 / 40
5. Render @Browser hello-01-B.html src/hello-01.js R e a c t D O M . r e n d e r ( d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; < ! 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 > H e l l o R e a c t ! < / t i t l e > < s c r i p t s r c = " r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " r e a c t - 0 . 1 4 . 5 / 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 - < / h e a d > < b o d y > < d i v i d = " e x a m p l e " > < / d i v > < s c r i p t t y p e = " t e x t / b a b e l " s r c = " s r c / h e l l o - 0 1 . j s " > < / s c r i p t < / b o d y > < / h t m l > < h 1 > H e l l o , w o r l d ! < / h 1 > , 5 / 40
6. < ! 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 > H e l l o R e a c t ! < / t i t l e > < s c r i p t s r c = " r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " r e a c t - 0 . 1 4 . 5 / r e a c t - d o m . j s " > < / s c r i p t > < / h e a d > < b o d y > < d i v i d = " e x a m p l e " > < / d i v > < s c r i p t s r c = " b u i l d / h e l l o - 0 2 . j s " > < / s c r i p t > < / b o d y > < / h t m l > # s r c / h e l l o - 0 2 . j s ( J S X ) R e a c t D O M . r e n d e r ( d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; # b u i l d / h e l l o - 0 2 . j s ( c o m p i l e d ) R e a c t D O M . r e n d e r ( R e a c t . c r e a t e E l e m e n t ( ' h 1 ' , n u l l , ' H e l l o , w o r l d ! ' ) , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; < h 1 > H e l l o , w o r l d ! < / h 1 > , Precompile JSX to vanilla JS n p m i n s t a l l - g b a b e l - c l i n p m i n s t a l l - g b a b e l - p r e s e t - r e a c t n p m i n s t a l l - g b a b e l - p r e s e t - e s 2 0 1 5 $ > b a b e l - - p r e s e t s r e a c t h e l l o - 0 2 . j s - - o u t - d i r = . . / b u i l d h e l l o - 0 2 . j s - > . . \ b u i l d \ h e l l o - 0 2 . j s 6 / 40
7. this.props hello-03.js < ! 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 > H e l l o R e a c t ! < / t i t l e > < s c r i p t s r c = " r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " r e a c t - 0 . 1 4 . 5 / 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 - < / h e a d > < b o d y > < d i v i d = " e x a m p l e " > < / d i v > < s c r i p t t y p e = " t e x t / b a b e l " s r c = " s r c / h e l l o - 0 3 . j s " > < / s c r i p t < / b o d y > < / h t m l > v a r H e l l o M e s s a g e = 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 } } ) ; R e a c t D O M . r e n d e r ( < d i v > H e l l o { t h i s . p r o p s . n a m e } < / d i v > ; < H e l l o M e s s a g e n a m e = " J o h n " / > , d o c u m e n t . g e t E l e m 7 / 40
8. hello-04.js v a r T i m e r = 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 { s e c o n d s E l a p s e d : 0 } ; } , t i c k : f u n c t i o n ( ) { t h i s . s e t S t a t e ( { s e c o n d s E l a p s e d : t h i s . s t a t e . s e c o n d s E l a p s e d + } , 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 , 1 0 0 0 ) ; } , 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 ) ; } , 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 . r e n d e r ( < d i v > S e c o n d s E l a p s e d : { t h i s . s t a t e . s e c o n d s E l a p s e d } < / d i v < T i m e r / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' ) ) ; this.state 8 / 40
9. TodoApp v a r T o d o L i s t = 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 ( ) { v a r c r e a t e I t e m = f u n c t i o n ( i t e m ) { r e t u r n } ; r e t u r n } } ) ; hello-05.js < l i k e y = { i t e m . i d } > { i t e m . t e x t } < / l i > ; < u l > { t h i s . p r o p s . i t e m s . m a p ( c r e a t e I t e m ) } < / u l > ; v a r T o d o A p p = 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 { i t e m s : [ ] , t e x t : ' ' } ; } , o n C h a n g e : f u n c t i o n ( e ) { t h i s . s e t S t a t e ( { t e x t : e . t a r g e t . v a l u e } ) ; } , h a n d l e S u b m i t : f u n c t i o n ( e ) { e . p r e v e n t D e f a u l t ( ) ; v a r n e x t I t e m s = t h i s . s t a t e . i t e m s . c o n c a t ( [ { t e x t : t h i s . s t a t e v a r n e x t T e x t = ' ' ; t h i s . s e t S t a t e ( { i t e m s : n e x t I t e m s , t e x t : n e x t T e x t } ) ; } , r e n d e r : f u n c t i o n ( ) { r e t u r n ( < h 3 > T O D O < / h 3 > < T o d o L i s t i t e m s = { t h i s . s t a t e . i t e m s } / > < f o r m o n S u b m i t = { t h i s . h a n d l e S u b m i t } > < i n p u t o n C h a n g e = { t h i s . o n C h a n g e } v a l u e = { t h i s . s t a t e . t e < b u t t o n > { ' A d d # ' + ( t h i s . s t a t e . i t e m s . l e n g t h + 1 ) } < / f o r m > < / d i v > ) ; } } ) ; R e a c t D O M . r e n d e r ( < d i v > < T o d o A p p / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e x a m p l e ' 9 / 40
10. TodoApp | hello-05.js 10 / 40
11. hello-06.html < ! 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 > H e l l o R e a c t ! < / t i t l e > < s c r i p t s r c = " r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " r e a c t - 0 . 1 4 . 5 / 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 : / / f a c e b o o k . g i t h u b . i o / r e a c t / j s / m a r k e d . m i n . j s " < 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 3 / b r o w s e r . m i n . j s " < / h e a d > < b o d y > < d i v i d = " e x a m p l e " > < / d i v > < s c r i p t t y p e = " t e x t / b a b e l " s r c = " s r c / h e l l o - 0 6 . j s " > < / s c r i p t < / b o d y > < / h t m l > MarkdownEditor A Component Using External Plugins 11 / 40
12. hello-06.js v a r M a r k d o w n E d i t o r = 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 { v a l u e : ' T y p e s o m e * m a r k d o w n * h e r e ! ' } ; } , h a n d l e C h a n g e : f u n c t i o n ( ) { t h i s . s e t S t a t e ( { v a l u e : t h i s . r e f s . t e x t a r e a . v a l u e } ) ; } , r a w M a r k u p : f u n c t i o n ( ) { r e t u r n { _ _ h t m l : m a r k e d ( t h i s . s t a t e . v a l u e , { s a n i t i z e : t r u e } , r e n d e r : f u n c t i o n ( ) { r e t u r n ( < h 3 > I n p u t < / h 3 > < t e x t a r e a o n C h a n g e = { t h i s . h a n d l e C h a n g e } r e f = " t e x t a r e a " d e f a u l t V a l u e = { t h i s . s t a t e . v a l u e } / > < h 3 > O u t p u t < / h 3 > < d i v c l a s s N a m e = " c o n t e n t " d a n g e r o u s l y S e t I n n e r H T M L = { t h i s . r a w M a r k u p ( ) } / > < / d i v > ) ; } } ) ; R e a c t D O M . r e n d e r ( < d i v c l a s s N a m e = " M a r k d o w n E d i t o r " > < M a r k d o w n E d i t o r / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' e 12 / 40
13.  React Basics #2 Starter Kit Examples 13 / 40
14. < ! 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 > B a s i c 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 = " . . / 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 > B a s i c E x a m p l e < / 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 < p > I f y o u c a n s e e t h i s , R e a c t i s n o t 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 < / 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 i n v a n i l l a J a v a S c r i p t ( w i t h o u t J S X ) 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 > 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 " < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / r e a c t - d o m . j s " > < / s c r i p t > < s c r i p t > . . . < / s c r i p t > < / b o d y > < / h t m l > Example #1 React with Vanilla JS < s c r i p t > v a r E x a m p l e 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 ( { r e n d e r : f u n c t i o n ( ) { v a r e l a p s e d = M a t h . r o u n d ( t h i s . p r o p s . e l a p s e d / 1 0 0 ) ; v a r s e c o n d s = e l a p s e d / 1 0 + ( e l a p s e d % 1 0 ? ' ' : ' . 0 ' v a r m e s s a g e = ' R e a c t h a s b e e n s u c c e s s f u l l y r u n n i n g f o r ' + s e c o n d s + r e t u r n R e a c t . D O M . p ( n u l l , m e s s a g e ) ; } } ) ; / / C a l l R e a c t . c r e a t e F a c t o r y i n s t e a d o f d i r e c t l y c a l l E x a m p l e v a r E x a m p l e A p p l i c a t i o n F a c t o r y = R e a c t . c r e a t e F a c t o r y ( E x a m p l e A v a r s t a r t = n e w D a t e ( ) . g e t T i m e ( ) ; s e t I n t e r v a l ( f u n c t i o n ( ) { R e a c t D O M . r e n d e r ( E x a m p l e A p p l i c a t i o n F a c t o r y ( { e l a p s e d : n e w D a t e ( ) . g e t T i m e ( ) d o c u m e n t . g e t E l e m e n t B y I d ( ' c o n t a i n e r ' ) ) ; } , 5 0 ) ; < / s c r i p t > 14 / 40
15. Example #2 React with JSX < ! 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 > B a s i c E x a m p l e w i t h J S X < / 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 > B a s i c E x a m p l e w i t h J S X < / 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 < p > I f y o u c a n s e e t h i s , R e a c t i s n o t 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 < / 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 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 > 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 " < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / 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 . 3 4 / b r o w s e r . m i n . j s " < s c r i p t t y p e = " t e x t / b a b e l " > . . . < / s c r i p t > < / b o d y > < / h t m l > < s c r i p t t y p e = " t e x t / b a b e l " > v a r E x a m p l e 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 ( { r e n d e r : f u n c t i o n ( ) { v a r e l a p s e d = M a t h . r o u n d ( t h i s . p r o p s . e l a p s e d / 1 0 0 ) ; v a r s e c o n d s = e l a p s e d / 1 0 + ( e l a p s e d % 1 0 ? ' ' : ' . 0 ' v a r m e s s a g e = ' R e a c t h a s b e e n s u c c e s s f u l l y r u n n i n g f o r ' + s e c o n d s + r e t u r n } } ) ; v a r s t a r t = n e w D a t e ( ) . g e t T i m e ( ) ; s e t I n t e r v a l ( f u n c t i o n ( ) { R e a c t D O M . r e n d e r ( d o c u m e n t . g e t E l e m e n t B y I d ( ' c o n t a i n e r ' ) ) ; } , 5 0 ) ; < / s c r i p t > < p > { m e s s a g e } < / p > ; < E x a m p l e A p p l i c a t i o n e l a p s e d = { n e w D a t e ( ) . g e t T i m e ( ) - s t a r 15 / 40
16. Example #1 Example #2 16 / 40
17. Example #3 Basic Click Counter (JSX) < ! 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 > B a s i c E x a m p l e w i t h C l i c k C o u n t e r < / t i t l e > < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / 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 - < / h e a d > < b o d y > < d i v i d = " m e s s a g e " a l i g n = " c e n t e r " > < / d i v > < s c r i p t t y p e = " t e x t / b a b e l " > v a r C o u n t e r = 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 l i c k C o u n t : 0 } ; } , h a n d l e C l i c k : f u n c t i o n ( ) { t h i s . s e t S t a t e ( f u n c t i o n ( s t a t e ) { r e t u r n { c l i c k C o u n t : s t a t e . c l i c k C o u n t + 1 } ; } ) ; } , r e n d e r : f u n c t i o n ( ) { r e t u r n ( < h 2 o n C l i c k = { t h i s . h a n d l e C l i c k } > C l i c k m e ! N u m } } ) ; R e a c t D O M . r e n d e r ( < C o u n t e r / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' m < / s c r i p t > < / b o d y > < / h t m l > 17 / 40
18. < ! D O C T Y P E h t m l > < h t m l > < h e a d > . . . < / h e a d > < b o d y > . . . < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / 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 . 3 4 / b r o w s e r . m i n . j s " < 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 > Example #4 External JSX example.js v a r E x a m p l e 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 ( { r e n d e r : f u n c t i o n ( ) { v a r e l a p s e d = M a t h . r o u n d ( t h i s . p r o p s . e l a p s e d / 1 0 0 ) ; v a r s e c o n d s = e l a p s e d / 1 0 + ( e l a p s e d % 1 0 ? ' ' : ' . 0 ' ) ; v a r m e s s a g e = ' R e a c t h a s b e e n s u c c e s s f u l l y r u n n i n g f o r ' r e t u r n } } ) ; v a r s t a r t = n e w D a t e ( ) . g e t T i m e ( ) ; s e t I n t e r v a l ( f u n c t i o n ( ) { R e a c t D O M . r e n d e r ( } , 5 0 ) ; < p > { m e s s a g e } < / p > ; < E x a m p l e A p p l i c a t i o n e l a p s e d = { n e w D a t e ( ) . g e t 18 / 40
19. Example #5 Precompiled JSX (Vanilla JS @Browser) $ > b a b e l - - p r e s e t s r e a c t e x a m p l e . j s - - o u t - d i r = b u i l d e x a m p l e . j s - > b u i l d \ e x a m p l e . j s < ! 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 > B a s i c E x a m p l e w i t h P r e c o m p i l e d J S X < / 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 > B a s i c E x a m p l e w i t h P r e c o m p i l e d J S X < / 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 n o t r u n n i n g . T r y r u n n i < p r e > . . . < / p r e > < / 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 p r e c o m p < p r e > n p m i n s t a l l - g b a b e l c d e x a m p l e s / b a s i c - j s x - p r e c o m p i l e / b a b e l e x a m p l e . j s - - o u t - d i r = b u i l d < / p r e > < 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 < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / 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 = " b u i l d / e x a m p l e . j s " > < / s c r i p t > < / b o d y > < / h t m l > 19 / 40
20. Example #6 JSX and Harmony (ES6|ES2015) < ! D O C T Y P E 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 > B a s i c E x a m p l e w i t h J S X a n d E S 6 f e a t u r e s < / 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 > B a s i c E x a m p l e w i t h J S X a n d E S 6 f e a t u r e 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 < p > I f y o u c a n s e e t h i s , R e a c t i s n o t 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 < / 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 w i t h H a r m o n y ( E S 6 ) s y n t a x 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 > 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 " < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / 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 . 3 4 / b r o w s e r . m i n . j s " < s c r i p t t y p e = " t e x t / b a b e l " > . . . < / s c r i p t > < / b o d y > < / h t m l > < h t m l > < s c r i p t t y p e = " t e x t / b a b e l " > c l a s s E x a m p l e A p p l i c a t i o n e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { v a r e l a p s e d = M a t h . r o u n d ( t h i s . p r o p s . e l a p s e d / 1 0 0 ) ; v a r s e c o n d s = e l a p s e d / 1 0 + ( e l a p s e d % 1 0 ? ' ' : ' . 0 ' v a r m e s s a g e = ` R e a c t h a s b e e n s u c c e s s f u l l y r u n n i n g f o r r e t u r n } } v a r s t a r t = n e w D a t e ( ) . g e t T i m e ( ) ; s e t I n t e r v a l ( ( ) = > { R e a c t D O M . r e n d e r ( } , 5 0 ) ; < / s c r i p t > < p > { m e s s a g e } < / p > ; < E x a m p l e A p p l i c a t i o n e l a p s e d = { n e w D a t e ( ) 20 / 40
21. Example #7 CommonJS & Browserify (Bundled Vanilla JS @ Browser) package.json { " n a m e " : " r e a c t - b a s i c - c o m m o n j s - e x a m p l e " , " d e s c r i p t i o n " : " B a s i c e x a m p l e o f u s i n g R e a c t w i t h C o m m o n J S " " m a i n " : " i n d e x . j s " , " d e p e n d e n c i e s " : { " b a b e l i f y " : " ^ 6 . 3 . 0 " , " r e a c t " : " ^ 0 . 1 4 . 0 - r c 1 " , " r e a c t - d o m " : " ^ 0 . 1 4 . 0 - r c 1 " , " w a t c h i f y " : " ^ 3 . 4 . 0 " } , " s c r i p t s " : { " s t a r t " : " w a t c h i f y i n d e x . j s - v - t b a b e l i f y - o b u n d l e . j s " } } n p m i n s t a l l n p m s t a r t 21 / 40
22. index.js ' u s e s t r i c t ' ; v a r R e a c t = r e q u i r e ( ' r e a c t ' ) ; v a r R e a c t D O M = r e q u i r e ( ' r e a c t - d o m ' ) ; v a r E x a m p l e 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 ( { r e n d e r : f u n c t i o n ( ) { v a r e l a p s e d = M a t h . r o u n d ( t h i s . p r o p s . e l a p s e d / 1 0 0 ) ; v a r s e c o n d s = e l a p s e d / 1 0 + ( e l a p s e d % 1 0 ? ' ' : ' . 0 ' ) ; v a r m e s s a g e = ' R e a c t h a s b e e n s u c c e s s f u l l y r u n n i n g f o r ' + s e c o n d s + r e t u r n } } ) ; v a r s t a r t = n e w D a t e ( ) . g e t T i m e ( ) ; s e t I n t e r v a l ( f u n c t i o n ( ) { R e a c t D O M . r e n d e r ( d o c u m e n t . g e t E l e m e n t B y I d ( ' c o n t a i n e r ' ) ) ; } , 5 0 ) ; < p > { m e s s a g e } < / p > ; < E x a m p l e A p p l i c a t i o n e l a p s e d = { n e w D a t e ( ) . g e t T i m e ( ) - s t a r t index.html < ! 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 > B a s i c C o m m o n J S E x a m p l e w i t h B r o w s e r i f y < / 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 > B a s i c C o m m o n J S E x a m p l e w i t h B r o w s e r i f y < / 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 < p > I f y o u c a n s e e t h i s , R e a c t i s n o t w o r k i n g r i g h t . I f y < / 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 C o m m o n J S m o d u l e a n d p r e c o < p r e > n p m s t a r t < / p r e > < 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 < s c r i p t s r c = " b u n d l e . j s " > < / s c r i p t > < / b o d y > < / h t m l > 22 / 40
23. Example #8 index.html < ! 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 n o t w o r k i n g r i g h t . T h i s < / 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 < 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 < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / 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 - < 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 > 23 / 40
24. v a r Q u a d r a t i c C a l c u l a t o r = 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 { a : 1 , b : 3 , c : - 4 } ; } , 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 ( < 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 , < 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 , < l a b e l > c : < i n p u t t y p e = " n u m b e r " v a l u e = { c } 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 , x : < s t r o n g > { x 1 } , { x 2 } < / s t r o n g > < / p > < / d i v > ) ; } } ) ; R e a c t D O M . r e n d e r ( < d i v > < Q u a d r a t i c C a l c u l a t o r / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' c o n t a i n e r ' ) ) ; example.js 24 / 40
25. Example #9 WebComponents 25 / 40
26. < ! D O C T Y P E h t m l > < h e a d > < m e t a h t t p - e q u i v = ' C o n t e n t - t y p e ' c o n t e n t = ' t e x t / h t m l ; c h a r s e t = u t f - 8 ' < t i t l e > 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 < / 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 > 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 < p > I f y o u c a n s e e t h i s , R e a c t i s n o t 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 < / 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 < 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 " < s c r i p t s r c = " . . / s h a r e d / t h i r d p a r t y / w e b c o m p o n e n t s . j s " > < / s c r i p t < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / r e a c t . j s " > < / s c r i p t > < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / 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 . 3 4 / b r o w s e r . m i n . j s " < s c r i p t t y p e = " t e x t / b a b e l " > . . . < / s c r i p t > < / b o d y > < / h t m l > < h t m l > index.html < s c r i p t t y p e = " t e x t / b a b e l " > 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 , { c r e a t 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 e a c t D O M . r e n d e r ( } } } ) ; d o c u m e n t . r e g i s t e r E l e m e n t ( ' x - s e a r c h ' , { p r o t o t y p e : p r o t o } ) ; c l a s s H e l l o M e s s a g e e x t e n d s R e a c t . C o m p o n e n t { r e n d e r ( ) { r e t u r n < d i v > H e l l o < x - s e a r c h n a m e = { t h i s . p r o p s . n a m e } / > ! } } / / M o u n t R e a c t C o m p o n e n t ( w h i c h u s e s W e b C o m p o n e n t w h i c h u s e s v a r c o n t a i n e r = d o c u m e n t . g e t E l e m e n t B y I d ( ' c o n t a i n e r ' ) ; R e a c t D O M . r e n d e r ( < / s c r i p t > < a h r e f = { u r l } > { n a m e } < / a > , m o u n t P o i n t ) ; < H e l l o M e s s a g e n a m e = " J i m S p r o c h " / > , c o n t a i n e 26 / 40
27. Example #10 < d i v i d = " c o n t a i n e r " > < s p a n c l a s s = " a n i m a t e E x a m p l e " d a t a - r e a c t i d = " . 0 " > < d i v c l a s s = " a n i m a t e I t e m " s t y l e = " l e f t : 0 p x ; b a c k g r o u n d : r e d ; " < d i v c l a s s = " a n i m a t e I t e m " s t y l e = " l e f t : 1 2 8 p x ; b a c k g r o u n d : g r a < d i v c l a s s = " a n i m a t e I t e m " s t y l e = " l e f t : 2 5 6 p x ; b a c k g r o u n d : b l u e ; " < / s p a n > < / d i v > 27 / 40
28. index.html < ! D O C T Y P E 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 > E x a m p l e w i t h T r a n s i t i o n s < / 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 " / > < l i n k r e l = " s t y l e s h e e t " h r e f = " t r a n s i t i o n . c s s " / > < / h e a d > < b o d y > < h 1 > E x a m p l e w i t h T r a n s i t i o n 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 < p > I f y o u c a n s e e t h i s , R e a c t i s n o t 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 < / 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 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 > 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 " < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / r e a c t - w i t h - a d d o n s . j s " > < / < s c r i p t s r c = " . . / . . / r e a c t - 0 . 1 4 . 5 / 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 . 3 4 / b r o w s e r . m i n . j s " < s c r i p t t y p e = " t e x t / b a b e l " > . . . < / s c r i p t > < / b o d y > < / h t m l > < h t m l > < 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 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 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 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 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 % p o s + + ; c h i l d r e n . p u s h ( } r e t u r n ( { c h i l d r e n } < / C S S T r a n s i t i o n G r o u p > ) ; } } ) ; R e a c t D O M . r e n d e r ( < / s c r i p t > < 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 < 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 " t r a n s i t < A n i m a t e D e m o / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' c o 28 / 40
29. transition.css . 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 - 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 ; } . 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 ; } . 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 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 * / w i d t h : 1 2 8 p x ; } 29 / 40
30.  Flux Easy Flux Example | @tonyspiro 30 / 40
31. Structure app.js stores/ListStore.js dispatcher/AppDispatcher.js components/ AppRoot.jsx NewItemForm.jsx 31 / 40
32. 32 / 40
33. { . . . , " d e p e n d e n c i e s " : { " b a b e l i f y " : " ^ 7 . 2 . 0 " , " b a b e l - p r e s e t - r e a c t " : " ^ 6 . 3 . 1 3 " , " b a b e l - p r e s e t - e s 2 0 1 5 " : " ^ 6 . 3 . 1 3 " , " b r o w s e r i f y " : " ^ 1 2 . 0 . 1 " , " e v e n t s " : " ^ 1 . 1 . 0 " , " f l u x " : " ^ 2 . 1 . 1 " , " g u l p " : " ^ 3 . 9 . 0 " , " g u l p - r e n a m e " : " ^ 1 . 2 . 1 " , " g u l p - u g l i f y " : " ^ 1 . 5 . 1 " , " l o d a s h " : " ^ 3 . 1 0 . 1 " , " r e a c t " : " ^ 0 . 1 4 . 5 " , " r e a c t - d o m " : " ^ 0 . 1 4 . 5 " , " r u n - s e q u e n c e " : " ^ 1 . 1 . 5 " , " v i n y l - s o u r c e - s t r e a m " : " ^ 1 . 1 . 0 " } , " d e v D e p e n d e n c i e s " : { } , . . . } n p m i n s t a l l - g r e a c t r e a c t - d o m b a b e l i f y b r o w s e r i f y f l u x l o d a s h e v e n t s n p m i n s t a l l - g b a b e l - p r e s e t - r e a c t b a b e l - p r e s e t - e s 2 0 1 5 n p m i n s t a l l - g v i n y l - s o u r c e - s t r e a m g u l p g u l p - u g l i f y g u l p - r e n a m e r u n - s e q u e n c e package.json 33 / 40
34. v a r g u l p = r e q u i r e ( ' g u l p ' ) ; v a r b r o w s e r i f y = r e q u i r e ( ' b r o w s e r i f y ' ) ; v a r b a b e l i f y = r e q u i r e ( ' b a b e l i f y ' ) ; v a r s o u r c e = r e q u i r e ( ' v i n y l - s o u r c e - s t r e a m ' ) ; v a r u g l i f y = r e q u i r e ( ' g u l p - u g l i f y ' ) ; v a r r e n a m e = r e q u i r e ( ' g u l p - r e n a m e ' ) ; v a r r u n S e q u e n c e = r e q u i r e ( ' r u n - s e q u e n c e ' ) ; g u l p . t a s k ( ' b u i l d ' , f u n c t i o n ( ) { r e t u r n b r o w s e r i f y ( { e n t r i e s : ' a p p . j s ' , e x t e n s i o n s : [ ' . j s x ' ] , d e b u g : t r u e } ) . t r a n s f o r m ( b a b e l i f y , { p r e s e t s : [ ' e s 2 0 1 5 ' , ' r e a c t ' ] } ) . b u n d l e ( ) . p i p e ( s o u r c e ( ' b u n d l e . j s ' ) ) . p i p e ( g u l p . d e s t ( ' d i s t ' ) ) ; } ) ; g u l p . t a s k ( ' c o m p r e s s ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( ' . / d i s t / b u n d l e . j s ' ) . p i p e ( u g l i f y ( ) ) . p i p e ( r e n a m e ( { s u f f i x : ' . m i n ' } ) ) . p i p e ( g u l p . d e s t ( ' d i s t ' ) ) ; } ) ; g u l p . t a s k ( ' d e f a u l t ' , f u n c t i o n ( c b ) { r u n S e q u e n c e ( ' b u i l d ' , ' c o m p r e s s ' , c b ) ; } ) ; gulpfile.js g u l p . t a s k ( ' w a t c h ' , f u n c t i o n ( ) { g u l p . w a t c h ( " . / * . j s " , [ ' d e f a u l t ' ] ) ; g u l p . w a t c h ( " . / c o m p o n e n t s / * . j s x " , [ ' d e f a u l t ' ] ) ; g u l p . w a t c h ( " . / d i s p a t c h e r / * . j s " , [ ' d e f a u l t ' ] ) ; g u l p . w a t c h ( " . / s t o r e s / * . j s " , [ ' d e f a u l t ' ] ) ; } ) ; 34 / 40
35. index.html < ! 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 " > < t i t l e > E a s y F l u x E x a m p l e < / t i t l e > < / h e a d > < b o d y > < h 1 > E a s y F l u x E x a m p l e < / h 1 > < d i v i d = " a p p - r o o t " > < / d i v > < s c r i p t s r c = " d i s t / b u n d l e . m i n . j s " > < / s c r i p t > < / b o d y > < / h t m l > $ > g u l p [ 0 9 : 2 5 : 5 3 ] U s i n g g u l p f i l e . / g u l p f i l e . j s [ 0 9 : 2 5 : 5 3 ] S t a r t i n g ' d e f a u l t ' . . . [ 0 9 : 2 5 : 5 3 ] S t a r t i n g ' b u i l d ' . . . [ 0 9 : 2 5 : 5 9 ] F i n i s h e d ' b u i l d ' a f t e r 5 . 4 8 s [ 0 9 : 2 5 : 5 9 ] S t a r t i n g ' c o m p r e s s ' . . . [ 0 9 : 2 6 : 0 4 ] F i n i s h e d ' c o m p r e s s ' a f t e r 4 . 9 9 s [ 0 9 : 2 6 : 0 4 ] F i n i s h e d ' d e f a u l t ' a f t e r 1 0 s app.js 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 R o o t f r o m ' . / c o m p o n e n t s / A p p R o o t ' ; R e a c t D O M . r e n d e r ( < A p p R o o t / > , d o c u m e n t . g e t E l e m e n t B y I d ( ' a p p - r o o t 35 / 40
36. ListStore.js i m p o r t { E v e n t E m i t t e r } f r o m ' e v e n t s ' ; i m p o r t _ f r o m ' l o d a s h ' ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - l e t L i s t S t o r e = _ . e x t e n d ( { } , E v e n t E m i t t e r . p r o t o t y p e , { i t e m s : [ { n a m e : ' I t e m 1 ' , i d : 0 } , { n a m e : ' I t e m 2 ' , i d : g e t I t e m s : f u n c t i o n ( ) { r e t u r n t h i s . i t e m s ; } , a d d I t e m : f u n c t i o n ( n e w _ i t e m ) { t h i s . i t e m s . p u s h ( n e w _ i t e m ) ; } , r e m o v e I t e m : f u n c t i o n ( i t e m _ i d ) { l e t i t e m s = t h i s . i t e m s ; _ . r e m o v e ( i t e m s , ( i t e m ) = > { r e t u r n i t e m _ i d = = i t e m . i d ; } ) ; t h i s . i t e m s = i t e m s ; } , e m i t C h a n g e : f u n c t i o n ( ) { t h i s . e m i t ( ' c h a n g e ' ) ; } , a d d C h a n g e L i s t e n e r : f u n c t i o n ( c a l l b a c k ) { t h i s . o n ( ' c h a n g e ' , c a l l b a c k ) ; } , r e m o v e C h a n g e L i s t e n e r : f u n c t i o n ( c a l l b a c k ) { t h i s . r e m o v e L i s t e n e r ( } ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - e x p o r t d e f a u l t L i s t S t o r e ; AppDispatcher.js i m p o r t { D i s p a t c h e r } f r o m ' f l u x ' ; i m p o r t L i s t S t o r e f r o m ' . . / s t o r e s / L i s t S t o r e ' ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - l e t A p p D i s p a t c h e r = n e w D i s p a t c h e r ( ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - A p p D i s p a t c h e r . r e g i s t e r ( ( p a y l o a d ) = > { l e t a c t i o n = p a y l o a d . a c t i o n ; l e t n e w _ i t e m = p a y l o a d . n e w _ i t e m ; l e t i d = p a y l o a d . i d ; s w i t c h ( a c t i o n ) { c a s e ' a d d - i t e m ' : L i s t S t o r e . a d d I t e m ( n e w _ i t e m ) ; b r e a k ; c a s e ' r e m o v e - i t e m ' : L i s t S t o r e . r e m o v e I t e m ( i d ) ; b r e a k ; d e f a u l t : r e t u r n t r u e ; } L i s t S t o r e . e m i t C h a n g e ( ) ; r e t u r n t r u e ; } ) ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - e x p o r t d e f a u l t A p p D i s p a t c h e r ; 36 / 40
37. 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 L i s t S t o r e f r o m ' . . / s t o r e s / L i s t S t o r e ' ; i m p o r t A p p D i s p a t c h e r f r o m ' . . / d i s p a t c h e r / A p p D i s p a t c h e r ' ; i m p o r t N e w I t e m F o r m f r o m ' . / N e w I t e m F o r m ' ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - l e t g e t L i s t S t a t e = ( ) = > { r e t u r n { i t e m s : L i s t S t o r e . g e t I t e m s ( ) } ; } / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - c l a s s A p p R o o t 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 ( ) { s u p e r ( ) ; t h i s . s t a t e = g e t L i s t S t a t e ( ) ; } _ o n C h a n g e ( ) { t h i s . s e t S t a t e ( g e t L i s t S t a t e ( ) ) ; } c o m p o n e n t D i d M o u n t ( ) { L i s t S t o r e . a d d C h a n g e L i s t e n e r ( t h i s . _ o n C h a n g e . b i n d ( t h i s ) ) ; } c o m p o n e n t W i l l U n m o u n t ( ) { L i s t S t o r e . r e m o v e C h a n g e L i s t e n e r ( t h i s . _ o n C h a n g e . b i n d ( t h i s ) ) ; } r e m o v e I t e m ( e ) { l e t i d = e . t a r g e t . d a t a s e t . i d ; A p p D i s p a t c h e r . d i s p a t c h ( { a c t i o n : ' r e m o v e - i t e m ' , i d : i d } ) ; } r e n d e r ( ) { l e t _ t h i s = t h i s ; l e t i t e m s = L i s t S t o r e . g e t I t e m s ( ) ; l e t i t e m H t m l = i t e m s . m a p ( ( l i s t I t e m ) = > { r e t u r n } ) ; r e t u r n ( ; } } / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - e x p o r t d e f a u l t A p p R o o t ; < l i k e y = { l i s t I t e m . i d } > { l i s t I t e m . n a m e } < b u t t o n o n C l i c k = { _ t h i s . r e m o v e I t e m < d i v > < u l > { i t e m H t m l } < / u l > < N e w I t e m F o r m / > < / d i v > ) AppRoot.jsx 37 / 40
38. NewItemForm.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 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 D i s p a t c h e r f r o m ' . . / d i s p a t c h e r / A p p D i s p a t c h e r ' ; / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - c l a s s N e w I t e m F o r m e x t e n d s R e a c t . C o m p o n e n t { c r e a t e I t e m ( e ) { e . p r e v e n t D e f a u l t ( ) ; l e t i d = g u i d ( ) ; l e t i t e m _ t i t l e = R e a c t D O M . f i n d D O M N o d e ( t h i s . r e f s . i t e m _ t i t l e ) . v a l u e . t r i m ( ) ; R e a c t D O M . f i n d D O M N o d e ( t h i s . r e f s . i t e m _ t i t l e ) . v a l u e = ' ' ; A p p D i s p a t c h e r . d i s p a t c h ( { a c t i o n : ' a d d - i t e m ' , n e w _ i t e m : { i d : i d , n a m e : i t e m _ t i t l e } } r e n d e r ( ) { r e t u r n } } / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - f u n c t i o n g u i d ( ) { f u n c t i o n s 4 ( ) { r e t u r n M a t h . f l o o r ( ( 1 + M a t h . r a n d o m ( ) ) * 0 x 1 0 0 0 0 ) . t o S t r i n g ( 1 6 ) . s u b s t r i r e t u r n s 4 ( ) + s 4 ( ) + ' - ' + s 4 ( ) + ' - ' + s 4 ( ) + ' - ' + s 4 ( ) + ' - ' + s 4 ( ) + s 4 ( ) + s 4 ( ) ; } / / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - e x p o r t d e f a u l t N e w I t e m F o r m ; < f o r m o n S u b m i t = { t h i s . c r e a t e I t e m . b i n d ( t h i s ) } > < i n p u t t y p e = " t e x t " r e f = " i t e m _ 38 / 40
39. References 1. A JavaScript library for building user interfaces | React 2. Getting Started | React 3. Building A Simple React Application Using The Flux Pattern: A Step-By-Step Guide 4. flux/examples/flux-todomvc 39 / 40
40.  END Eueung Mulyana http://eueung.github.io/js/react JS CodeLabs | Attribution-ShareAlike CC BY-SA 40 / 40