Reactとお友達になるには 基本構文（ES6含む）と State / Props を学ぶべきだった

10月25日 初心者歓迎！React初心者勉強会とLT大会にて使用した資料です。
デモは、以下のリンクからご覧いただけます。

- Stateless Functional Component と Class Component のサンプル
https://codesandbox.io/s/v0625qxoj3

- defaultProps を使った簡単なコンポーネント
https://codesandbox.io/s/4xo9wv0q4x

- setState を使って input に入力された値をリアルタイムで反映させる
https://codesandbox.io/s/6xq1ovor4k

Transcript

1. 3FBDUͱ͓༑ୡʹͳΔʹ͸
   جຊߏจʢ&4ؚΉʣͱ
   4UBUF
   
   1SPQT
   ΛֶͿ΂͖ͩͬͨ !ZVSJ@YYY
2. !ZVSJ@YYY
   ৗۭ࣌ෲ wϑϩϯτΤϯυΤϯδχΞ
   wࠓ೥݄ʹ্ژˍస৬
   wࠓ೥݄·Ͱ஍ํͷ੍࡞ձࣾͰXFCίʔμʔ
   wओʹ
   )5.-
   
   $44
   
   K2VFSZ
   w3FBDU
   ͸ݸਓతʹษڧͯͯ͠ࠓ΋ษڧத
   w࠷ۙ
   1ZUIPO
   ʹࠍΕͨ
4. 3FBDUʹର͢ΔΠϝʔδ w5-ͰΑ͘ݟΔ
   w3FBDU࢖͑͹K2VFSZ͍Βͳ͍ͬͯΑ͘ݟΔ
   wˢͦΜͳ͜ͱͳ͍ͬͯҙݟ΋Α͘ݟΔ
   w4JOHMF
   1BHF
   "QQMJDBUJPO
   ͱ͔ʹ޲͍ͯΔͷ͔ͳ
   wͳΜ͔Α͘෼͔Μͳ͍͚Ͳ೉ͦ͠͏
5. -FU`T
   $IBMMFOHF
6. ͍ΖΜͳਓͷαϯϓϧ
   ίʔυࣸܦ͠·ͬͨ͘ ΍ͬͯΈͨ͜ͱ
   ͦͷ
9. ढจ͔ͳʁ
10. ͳΜͰಈ͍ͯΔͷ͔Α͘෼͔Βͳ͍
11. ͦ΋ͦ΋
    3FBDUͬͯͳΜͳͷʁ ΍ͬͯΈͨ͜ͱ
    ͦͷ
12. w 7JSUVBM
    %0.Ͱද͕ࣔ͸΍͍
    w มߋ͕͋ͬͨࡍʹɺԾ૷%0.ͱ࣮%0.Λൺֱͯ͠ɺ ࠩ෼ͷΈ%0.ͷ࠶ߏஙΛͯ͘͠ΕΔ
    w ίϯϙʔωϯτΛఆٛͯ͠ɺͦΕΒΛ૊Έ߹Θͤͯ ը໘Λ࡞͍ͬͯ͘
    w +49࢖͏
13. ͳΔ΄ͲΘ͔ͬͨ
14. Ͳ͏ॻ͚͹͍͍͔෼͔Βͳ͍
15. ίʔυ͕ಡΊͳ͍
16. ͭΒ͍
19. ͦ΋ͦ΋
    ͳΜͰಡΊͳ͍ͷʁ ΍ͬͯΈͨ͜ͱ
    ͦͷ
20. ΋͔ͯ͠͠ɿ
    ߏจΛ͖ͪΜͱཧղ͍ͯ͠ͳ͍
21. +49ͱ͔&4ͱ͔
    ͍Ζ͍Ζࠞཚ͍ͯ͠Δ
22. DMBTT
    "QQ
    FYUFOET
    3FBDU$PNQPOFOU
    
    DPOTU
    -JTU*UFN
    
    QSPQT
    
    \
    ^
    GVODUJPO
    /BNF QSPQT
    WBS
    $POUBDUT
    
    3FBDUDSFBUF$MBTTʁ
23. ʮॻ͚͹෼͔ΔΑ͏ʹͳΔʯ
    ͱ৴͍ͯͨ͡
24. ʮߏจΛཧղ͢Δʯ
    ͱ͍͏جຊతͳ͜ͱʹࢸΔ·Ͱ
    ΋ͷ͍͕͔͔࣌ؒͬͨ͢͝
25. ൓লΛੜֶ͔͠Μͩ͜ͱ
26. جຊͱͳΔछྨͷߏจ͕͋Δ w4UBUFMFTT
    'VODUJPOBM
    $PNQPOFOU
    Λॻ͘ߏจ
    w$MBTT
    $PNQPOFOU
    Λॻ͘ߏจ
27. 4UBUFMFTT
    'VODUJPOBM
    $PNQPOFOU wجຊతʹίϯϙʔωϯτ͸͜ͷॻ͖ํΛ͢Δ
    wঢ়ଶͷ؅ཧ͸ߦΘͳ͍
    w਌͔Β
    QSPQT
    Λड͚औΔ
    wؔ਺ͷ໭Γ஋ʹ%0.Λॻ͘
28. 4UBUFMFTT
    'VODUJPOBM
    $PNQPOFOU Ҿ਺ͰQSPQTΛड͚औΔ GVODUJPO
    )FMMP QSPQT
    \
    
    
    SFUVSO
    
    
    
    
    
    EJW
    
    
    
    
    
    
    I)FMMP
    \QSPQTWBMVF^I
    
    
    
    
    EJW
    
    
    
    ^
    
    &4ɹΞϩʔؔ਺Ͱॻ͍ͨ৔߹
    DPOTU
    )FMMP
    
    QSPQT
    
    \
    
    
    SFUVSO
    
    
    
    
    
    EJW
    
    
    
    
    
    
    I)FMMP
    \QSPQTWBMVF^I
    
    
    
    
    EJW
    
    
    
    ^
29. 
    ͍Ζ͍Ζলུͨ͜͠͏͍͏ॻ͖ํ΋Ͱ͖Δ
    DPOTU
    )FMMP
    
    QSPQT
    
    EJWI)FMMP
    \QSPQTWBMVF^IEJW wؔ਺ͷத਎͕Ұจͷ৔߹ɺ\
    ^
    
    SFUVSO
    ΛলུͰ͖Δ
    wҾ਺͕Ұͭͷ৔߹ɺҾ਺ΛғΉ
    
    
    ͕লུͰ͖Δ
    ˞͜ΕΒ͸3FBDUʹݶͬͨ͜ͱͰ͸ͳ͘&4ͷ࢓༷ 4UBUFMFTT
    'VODUJPOBM
    $PNQPOFOU
30. $MBTT
    $PNQPOFOU w&4ͷ$MBTTߏจͰఆٛͰ͖Δ
    wঢ়ଶͷ؅ཧΛߦ͏
    wTUBUFΛ࣋ͯΔ
    wϥΠϑαΠΫϧϝιουΛ͍࣋ͬͯΔ
31. $MBTT
    $PNQPOFOU DMBTT
    )FMMP
    FYUFOET
    3FBDU$PNQPOFOU
    \
    
    
    SFOEFS
    \
    
    
    
    
    SFUVSO
    
    
    
    
    
    
    
    EJW
    
    
    
    
    
    
    
    
    I)FMMP
    \UIJTQSPQTWBMVF^I
    
    
    
    
    
    
    EJW
    
    
    
    
    
    
    
    ^
    ^
    3FBDU$PNQPOFOU
    Λܧঝͨ͠
    )FMMP
    ΫϥεΛఆٛ
32. 4UBUFMFTT
    'VODUJPOBM
    $PNQPOFOU
    ͱ
    $MBTT
    $PNQPOFOU
    ͷαϯϓϧ IUUQTDPEFTBOECPYJPTWRYPK
33. 4UBUFͱ1SPQT w ίϯϙʔωϯτ͕͍࣋ͬͯΔঢ়ଶ
    w Մม͢Δɺޙ͔ΒมߋͰ͖Δσʔλ
    w TFU4UBUF
    ϝιουͰߋ৽Λߦ͏͜ͱ͕Ͱ͖Δ
    w ίϯϙʔωϯτ࡞੒࣌ʹ
    UIJTTUBUF
    ΦϒδΣΫτʹ஋Λࢦఆ͓ͯ͘͠ͱɺ ଞͷϝιου͔Β
    UIJTTUBUF
    ͱͯ͠औಘͰ͖Δ 1SPQT 4UBUF w ਌ίϯϙʔωϯτ͔Β౉͞ΕΔϓϩύςΟ
    w Մม͠ͳ͍ɺޙ͔ΒมߋͰ͖ͳ͍σʔλʢಡΈऔΓઐ༻ʣ
    w UIJTQSPQT
    ΦϒδΣΫτʹΑͬͯࢀরͰ͖ΔɹFH
    UIJTQSPQTOBNF
34. IUUQTDPEFTBOECPYJPTYPXWRY
35. IUUQTDPEFTBOECPYJPTYRPWPSL
36. IUUQTDPEFTBOECPYJPTYRPWPSL ॳظ4UBUFΛઃఆ͢Δ
    w DMBTTʹ
    DPOTUSVDUPS
    ϝιουΛ௥Ճ
    w TVQFS QSPQT
    ϝιουΛݺͼग़͢
    w UIJTTUBUF
    ʹΦϒδΣΫτͱͯ͠ॳظͷ4UBUFͷ஋Λఆٛ wσϑΥϧτͰόΠϯυ͞Ε͍ͯͳ͍ͷͰඞཁ w ೖྗ͞Εͨ஋Λऔ͖ͬͯͯɺϦΞϧλΠϜʹ൓ө͍ͤͯ͞Δ
37. %&.0 w 4UBUFMFTT
    'VODUJPOBM
    $PNQPOFOU
    ͱ
    $MBTT
    $PNQPOFOU
    ͷαϯϓϧ
    https: //codesandbox.io/s/v0625qxoj3 w EFGBVMU1SPQT
    Λ࢖ͬͨ؆୯ͳίϯϙʔωϯτ
    https: //codesandbox.io/s/4xo9wv0q4x w TFU4UBUF
    Λ࢖ͬͯ
    JOQVU
    ʹೖྗ͞Εͨ஋ΛϦΞϧλΠϜͰ൓өͤ͞Δ
    https: //codesandbox.io/s/6xq1ovor4k
38. ·ͱΊ w ʮͳͥ෼͔Βͳ͍͔ʯΛ໌֬ʹ͢ΔɹFH
    ·ͣߏจ͕෼͔Βͳ͍
    w ʮશ෦Θ͔ΒΜʯͱ͍͏৔߹͸ɺখ͞ͳٙ໰ʹͳΔΑ͏ʹ෼ղ͍ͯ͘͠
    wެࣜυΩϡϝϯτಡΉʢॏཁʣ