React Basic Examples

Handson for Learning React Starter Kit Basic Examples

Transcript

1. 1 / 34 Starter Kit Basic Examples React Examples Eueung Mulyana https://eueung.github.io/112016/react-cont CodeLabs | Attribution-ShareAlike CC BY-SA
2. React Version: 15.4.1 Introduction to React already covered here: https://eueung.github.io/112016/react 2 / 34
3. 3 / 34 React Releases @github
4. Outline Starter Kit - Overview Basic Examples 4 / 34
5. Starter Kit Overview 5 / 34
6. 6 / 34 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
7. Basic Examples 7 / 34
8. 8 / 34 Basic Examples One HTML basic basic-jsx basic-jsx-harmony basic-click-counter (state) ber (react-dom- ber) One HTML + One JS basic-jsx-external (s r c / e x a m p l e . j s ) basic-jsx-precompile (b u i l d / e x a m p l e . j s ) HTML+JS+package.json (npm) basic-commonjs (b u n d l e . j s )
9. 9 / 34 < ! 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 = " h t t p s : / / g i t h u b . c o m / f a c e b o o k / r e a c t / " < 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 < / 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 > < 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 < / 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 c r i p t > < / b o d y > < / h t m l > HTML basic basic-jsx basic-jsx-harmony ber basic-click-counter
10. 10 / 34 < 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 + ' 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 A p p l i c a t i o n ( { . . . } ) i n R e a c t . r e n d e r 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 p p l i c a t i o 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 ( 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 ( ) - s t a r t } ) , 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 > basic Vanilla JS render this.props React.DOM.p()
11. 11 / 34 < 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 > < 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 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 + ' s e c o n d s . ' ; r e t u r n < p > { m e s s a g e } < / p > ; } } ) ; 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 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 } / > , 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 > basic-jsx JS+JSX Requires babel render this.props Element < p > Passing p r o p s . e l a p s e d
12. 12 / 34 < 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 > < 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 " > 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 $ { s e c o n d s } s e c o n d s . ` ; r e t u r n < p > { m e s s a g e } < / p > ; } } 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 ( < 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 } / > , 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 > basic-jsx- harmony ES2015+JSX Requires babel render this.props Element < p >
13. 13 / 34 basic
14. 14 / 34 basic-jsx
15. 15 / 34 basic-jsx- harmony
16. 16 / 34 < s c r i p t s r c = " . . / . . / b u i l d / r e a c t - d o m - f i b e r . j s " > < / s c r i p t > < s c r i p t > f u n c t i o n E x a m p l e A p p l i c a t i o n ( p r o p s ) { v a r e l a p s e d = M a t h . r o u n d ( 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 + ' 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 A p p l i c a t i o n ( { . . . } ) i n R e a c t . r e n d e r 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 p p l i c a t i o 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 F i b e r . 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 ( ) - s t a r t } ) , 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 > fiber basic with ber function vs. React.createClass() ReactDOMFiber vs. ReactDOM Ref: React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team. [ React Fiber ]
17. 17 / 34 fiber
18. 18 / 34 < 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 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 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 ( { c o u n t : t h i s . s t a t e . 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 ( < b u t t o n 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 b e r o f c l i c k s : { t h i s . s t a t e . c o u n t } < / b u t t o n > ) ; } } ) ; 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 ( ' c o n t a i n e r ' ) ) ; < / s c r i p t > basic-click- counter JS+JSX Requires babel this.state this.setState getInitialState render
19. 19 / 34 basic-click- counter
20. 20 / 34 basic-jsx- external JS+JSX Requires babel basic-jsx index.html example.js < 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 >
21. 21 / 34 basic-jsx- external
22. 22 / 34 basic-jsx- external r e a c t - 1 5 . 4 . 1 $ p y t h o n - m S i m p l e H T T P S e r v e r S e r v i n g H T T P o n 0 . 0 . 0 . 0 p o r t 8 0 0 0 . . . 1 2 7 . 0 . 0 . 1 - - [ 0 4 / D e c / 2 0 1 6 0 3 : 2 8 : 0 6 ] " G E T / e x a m p l e s / b a s i c - j s x - e x t e r n a l / H T T P / 1 . 1 " 2 0 0 - 1 2 7 . 0 . 0 . 1 - - [ 0 4 / D e c / 2 0 1 6 0 3 : 2 8 : 0 6 ] " G E T / e x a m p l e s / s h a r e d / c s s / b a s e . c s s H T T P / 1 . 1 " 2 0 0 - 1 2 7 . 0 . 0 . 1 - - [ 0 4 / D e c / 2 0 1 6 0 3 : 2 8 : 0 6 ] " G E T / b u i l d / r e a c t . j s H T T P / 1 . 1 " 2 0 0 - 1 2 7 . 0 . 0 . 1 - - [ 0 4 / D e c / 2 0 1 6 0 3 : 2 8 : 0 6 ] " G E T / b u i l d / r e a c t - d o m . j s H T T P / 1 . 1 " 2 0 0 - 1 2 7 . 0 . 0 . 1 - - [ 0 4 / D e c / 2 0 1 6 0 3 : 2 8 : 0 6 ] " G E T / e x a m p l e s / b a s i c - j s x - e x t e r n a l / e x a m p l e . j s H T T P / 1 . 1 " 2 0 0 -
23. 23 / 34 basic-jsx- precompile JS+JSX babel @dev NOT @browser basic-jsx index.html example.js < 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 >
24. 24 / 34 basic-jsx- precompile $ 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 v e r s i o n 6 . 1 8 . 0 ( b a b e l - c o r e 6 . 1 8 . 2 ) $ 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 r e a c t - 1 5 . 4 . 1 / 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 $ t r e e . | - - e x a m p l e . j s | - - i n d e x . h t m l | - - b u i l d | - - - e x a m p l e . j s
25. 25 / 34 basic-jsx- precompile Vanilla JS after Build Testing: HTTP Server NOT Required
26. 26 / 34 basic- commonjs JS+JSX react & babel @dev NOT @browser basic-jsx index.html index.js package.json < s c r i p t s r c = " b u n d l e . j s " > < / s c r i p t >
27. 27 / 34 basic- commonjs index.html index.js < ! 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 > < 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 , . . . < / 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 . . . < / p > < 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 > ' 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 + ' s e c o n d s . ' ; r e t u r n < p > { m e s s a g e } < / p > ; } } ) ; . . .
28. 28 / 34 basic- commonjs 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 " , " p r i v a t e " : t r u e , " 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 - 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 . / i n d e x . j s - t b a b e l i f y - o b u n d l e . j 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 " } }
29. 29 / 34 basic- commonjs b a s i c - c o m m o n j s $ n p m i n s t a l l b a s i c - c o m m o n j s $ n p m s t a r t > 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 @ s t a r t / h o m e / e m / b a s i c - c o m m o n j s > 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 7 2 1 6 4 1 b y t e s w r i t t e n t o b u n d l e . j s ( 2 . 1 8 s e c o n d s ) b a s i c - c o m m o n j s $ t r e e - L 1 . | - - b u n d l e . j s | - - i n d e x . h t m l | - - i n d e x . j s | - - n o d e _ m o d u l e s | - - p a c k a g e . j s o n
30. 30 / 34 basic- commonjs Vanilla JS after Build Everything Bundled Testing: HTTP Server NOT Required
31. 31 / 34 That's All for the basics ... we'll continue later ... piece of cake, no?
32. Refs 32 / 34
33. 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. acdlite/react- ber-architecture: A description of React's new core algorithm, React Fiber 4. Intro and Concept - Learning React 33 / 34
34. 34 / 34 END Eueung Mulyana https://eueung.github.io/112016/react-cont CodeLabs | Attribution-ShareAlike CC BY-SA