2018-08-04.js-beer-bash.pdf

Transcript

1. react‑dnd + react‑easy‑state 2018‑08‑04 beer bash id: okamuuu
2. 自己紹介 はじめましてこんちには。
3. 今日話したいこと read‑dnd を使ってたら state の管理に困ったので試 しに react‑easy‑state を使ったらとてもいい感じで した。
4. react‑easy‑state(1) React は state が変化すると rerendering される。rerendering させるに は state を update する必要がある i m p o r t R e a c t , { C o m p o n e n t } f r o m ' r e a c t ' ; e x p o r t d e f a u l t c l a s s C o u n t e r e x t e n d s 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 = { c o u n t : 0 } ; } r e n d e r ( ) { r e t u r n ( < d i v > < d i v > { t h i s . s t a t e . c o u n t } < / d i v > < b u t t o n o n C l i c k = { ( ) = > 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 < / d i v > ) ; } }
5. react‑easy‑state(2) たまに state を component の外に配備したい時がある。 そういう時に便 利な module です。 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 { s t o r e , v i e w } f r o m ' r e a c t - e a s y - s t a t e ' ; c o n s t s t a t e = s t o r e ( { c o u n t : 0 } ) ; e x p o r t d e f a u l t v i e w ( ( ) = > ( < d i v > { s t a t e . c o u n t } < b u t t o n o n C l i c k = { ( ) = > s t a t e . c o u n t + = 1 } / > < / d i v > ) ) ;
6. react‑easy‑state(3) 複数の component で state を共有するときに便利 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 { s t o r e , v i e w } f r o m ' r e a c t - e a s y - s t a t e ' ; c o n s t s t a t e = s t o r e ( { c o u n t : 0 } ) ; c o n s t C o u n t = ( ) = > ( < d i v > { s t a t e . c o u n t } < / d i v > ) c o o n s t B u t t o n = ( ) = > ( < b u t t o n o n C l i c k = { ( ) = > s t a t e . c o u n t + = 1 } / > ) e x p o r t d e f a u l t v i e w ( ( ) = > ( < d i v > < C o u n t / > < B u t t o n / > < / d i v > ) ) ;
7. Demo 画面(storybook) https://okamuuu.github.io/demo‑react‑easy‑state ソー スコー ド clickable: https://github.com/okamuuu/demo‑react‑easy‑ state/blob/master/src/components/Game.js draggable: https://github.com/okamuuu/demo‑react‑easy‑ state/blob/master/src/components/Game2.js
8. react‑dnd の使い方 簡単に説明すると以下のようにして使います。 DragDropContext を DnD したい領域のコンポー ネントに注入する DropTarget を落としたい先のコンポー ネントに注入する DragSource をドラッグさせたいコンポー ネントに注入する 先ほどのソー スコー ドの例でいうと DragDropContext を Board に注入する DropTarget を Box に注入する DragSource を Piece に注入する
9. DragDropContext を Board に注入する i m p o r t { D r a g D r o p C o n t e x t , D r a g S o u r c e , D r o p T a r g e t } f r o m ' r e a c t - d n d ' ; i m p o r t H T M L 5 B a c k e n d f r o m ' r e a c t - d n d - h t m l 5 - b a c k e n d ' ; c o n s t D n d B o a r d = D r a g D r o p C o n t e x t ( H T M L 5 B a c k e n d ) ( B o a r d ) ;
10. DropTarget を Box に注入する c o n s t d r o p T a r g e t = { d r o p ( p r o p s , m o n i t o r ) { r e t u r n { } ; } , c a n D r o p ( p r o p s , m o n i t o r ) { r e t u r n t r u e ; } } ; c o n s t C o n n e c t e d T a r g e t = p r o p s = > { c o n s t { c a n D r o p , c h i l d r e n , c o n n e c t D r o p T a r g e t } = p r o p s ; r e t u r n ( < B o x { . . . p r o p s } i n n e r R e f = { i n s t a n c e = > c o n n e c t D r o p T a r g e t ( i n s t a ) } c o n s t D n d B o x = D r o p T a r g e t ( ' p i e c e ' , d r o p T a r g e t , ( c o n n e c t , m o n i t o r e t u r n { c o n n e c t D r o p T a r g e t : c o n n e c t . d r o p T a r g e t ( ) , c a n D r o p : m o n i t o r . c a n D r o p ( ) , } } ) ( C o n n e c t e d T a r g e t ) ;
11. DragSource を Piece に注入する c o n s t d r a g S o u r c e = { b e g i n D r a g ( p r o p s , m o n i t o r , c o m p o n e n t ) { r e t u r n { } ; } , e n d D r a g ( p r o p s ) { r e t u r n { } ; } } ; c o n s t C o n n e c t e d S o u r c e = p r o p s = > { c o n s t { c o n n e c t D r a g S o u r c e } = p r o p s ; r e t u r n ( < P i e c e { . . . p r o p s } i n n e r R e f = { i n s t a n c e = > c o n n e c t D r a g S o u r } c o n s t D n d P i e c e = D r a g S o u r c e ( ' p i e c e ' , d r a g S o u r c e , c o n n e c t = > ( { c o n n e c t D r a g S o u r c e : c o n n e c t . d r a g S o u r c e ( ) , } ) ) ( C o n n e c t e d S o u r c e ) ;
12. Dnd を注入した結果 callback 関数と state に scope の隔たりができている c o n s t d r o p T a r g e t = { d r o p ( p r o p s , m o n i t o r ) { c o n s t { p o s i t i o n } = p r o p s ; r e t u r n { } ; } , c a n D r o p ( p r o p s , m o n i t o r ) { r e t u r n t r u e ; } } ; c o n s t d r a g S o u r c e = { . . . } ; c l a s s G a m e e x t e n d s 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 = { p o s i t i o n : 0 } } }
13. react‑dnd + react‑easy‑state react‑easy‑state を使うと state を component の外に配置できる + i m p o r t { s t o r e , v i e w } f r o m ' r e a c t - e a s y - s t a t e ' ; + c o n s t s t a t e = s t o r e ( { p o s i t i o n : 0 } ) ; + c o n s t D n d B o a r d = D r a g D r o p C o n t e x t ( H T M L 5 B a c k e n d ) ( B o a r d ) ; c o n s t d r o p T a r g e t = { d r o p ( p r o p s , m o n i t o r ) { c o n s t { p o s i t i o n } = p r o p s ; + s t a t e . p o s i t i o n = p o s i t i o n ; r e t u r n { } ; } , - e x p o r t d e f a u l t G a m e ; + e x p o r t d e f a u l t v i e w ( G a m e ) ;
14. まとめ react‑easy‑state は小粒でもぴりりと辛い素敵なラ イブラリだと思います。
15. ご静聴ありがとうございました