初心者に向けたサンプル付きReact入門と勉強法について

2018/04/23に【サポーターズ勉強会】React入門というイベントで登壇させていただいた時の資料です。

Transcript

1. 3FBDUೖ໳ 
   αϙʔλʔζ$P-BCษڧձ
   5BLFTIJNB
   /BIPLP
   
2. ࣗݾ঺հ ϥϯαʔζ
   -1'ࣄۀ෦
   ೥ଔͷ৽ଔ೥໨ͷΤϯδχΞ
   ࠷ۙ͸3FBDU
   $BLF1)1
   3BJMTͱࡶ৯ؾຯ
   ۂ໘σΟεϓϨΠಋೖ✨ ि຤ϑϦʔϥϯε࢝Ί·ͨ͠
   ࠷ۙ͸ࣗ࡞ΩʔϘʔυʹڵຯ͋Γ·͢
   3FBDUྺ͸೥Ҏ্ܦͪ·ͨ͠ ஛ౡ
   ࡊึࢠ
   !UBLFQP
3. -BODFST
5. ϝοηʔδ
6. ϓϩδΣΫτ؅ཧ
7. QPPL
8. QPPL ΋ͱ΋ͱ8FCͰ࡞͍ͬͯͨ
   $PSEPWBͷ্ʹ৐ͤͯ
   J04
   "OESPJEΞϓϦ΋ϦϦʔε
   ݱࡏ͸8FC
   J04
   "OESPJEͷ։ൃ·Δͬͱ3FBDUͰɻ
9. ໨࣍  3FBDU
   ͱ͸
   w 3FBDU
   w $PNQPOFOU
   w +49
    Α͘ฉ͘͜ΕγϦʔζ
    ษڧ๏
    ·ͱΊ w QSPQT
   ͱ
   TUBUF
   w $PNQPOFOUϥΠϑαΠΫϧ
10. 3FBDUͱ͸ʁ
11. 3FBDUͱ͸ʁ w 'BDFCPPL
    ੡ͷΦʔϓϯιʔε
    w +BWB4DSJQU
    Ͱ6*Λ࡞ΔͨΊ͚ͩͷϥΠϒϥϦ
    w .7$Ͱ͍͏7JFXͷΈʹಛԽ͍ͯ͠Δ
    w $PNQPOFOU
    Λͭ͘Δ͚ͩ
    w σʔλͷྲྀΕ͸୯Ұํ޲
    w Ծ૝%0.ͰॲཧΛߦ͏
12. ར༻͍ͯ͠Δاۀ
13. $PNQPOFOU ࠶ར༻Մೳͳύʔπ
    ࣗ෼Ͱࣗ෼ͷঢ়ଶΛ؅ཧ
    جຊతʹ$PNQPOFOUΛ࡞ͬͯ૊Έ߹Θͤͯ
    ΞϓϦέʔγϣϯΛ࡞͍ͬͯ͘
    +49Λ࢖ͬͨΓͯ͠هड़
14. +49 ͜Ε΋'BDFCPPL੡
    +BWB4DSJQUͷߏจதʹ
    9.-෩ͷ΋ͷΛͦͷ··ॻ͚Δ
    )5.-ͱࣅ͍ͯΔͷͰ
    ඇΤϯδχΞͰ΋Θ͔Γ΍͍͢ʂ
    
15. $PNQPOFOUͷαϯϓϧ
16. +49͸)5.-ͬΆ͍
17. QSPQTͱTUBUF QSPQT
    $PNQPOFOU
    ੜ੒࣌ʹ਌͔Β౉͞ΕΔΦϒδΣΫτ
    $PNQPOFOU
    ͕ը໘͔Βഉআ͞ΕΔ·Ͱෆมͷ஋
    *NNVUBCMF
    Ͱ͋Γ֎෦ͱͷΠϯλʔϑΣʔεͷ໾ׂ
    TUBUF
    ಈతʹ஋ΛมԽͤ͞ΒΕΔΦϒδΣΫτ
    $PNQPOFOU
    ಺Ͱอ࣋
18. QSPQTΛ࢖ͬͨαϯϓϧ
19. -JTU*UFN$PNQPOFOU
20. "QQ$PNQPOFOU
21. ͜Μͳ෩ʹ΋͔͚·͢
22. TUBUFΛ࢖ͬͨαϯϓϧ
23. ͭ͘Γ ࣮ࡍʹΧ΢ϯτͤ͞Δ஋ΛTUBUFͰ࣋ͨͤΔ
    TUBUF͸ಈతʹ஋ΛมԽͤ͞ΒΕΔͷͰ
    ϘλϯΛԡͨ࣌͠ʹTUBUFͷ஋ΛมԽͤ͞Δ
24. "QQ$PNQPOFOU
25. $PNQPOFOUͷϥΠϑαΠΫϧ $PNQPOFOUʹ͸ϥΠϑαΠΫϧϝιου͕͋Δ
    Ϛ΢ϯτΞϯϚ΢ϯτ͞ΕΔͱ͖΍ɺ
    1SPQT͕มԽ͢Δͱ͖ͳͲͷλΠϛϯάͰݺ͹Ε Δϝιου
    "1*Λݺͼ͍ͨ౳༻్ʹ߹Θͤͯ࢖͑Δ
26. IUUQTRJJUBDPNLBXBDIJJUFNTCGDGFBF
27. 3FBDUͱҰॹʹ
    Α͘ฉ͘ίϨ͸
28. ͜Εͳʹʁ w 3FEVY
    w ZBSO
    w #BCFM
    w XFC
    QBDL
    w qPX
    w $44
    .PEVMFT
29. 3FEVYʁ 3FBDU
    ͕ѻ͏
    TUBUF
    Λ
    Ұݩ؅ཧ͢ΔͨΊͷϑϨʔϜϫʔΫ
    ΞϓϦ͕େ͖͘ͳͬͯ
    $PNQPOFOU
    ಉ͕࢜ґଘ͋͠͏Α͏ʹͳΔͱ
    TUBUFͷ؅ཧΛ͢Δ͜ͱ͕େมʹͳΔ
    3FEVYΛ࢖͏͜ͱͰ3FBDUͷ$PNQPOFOUͰ͸
    TUBUFΛ؅ཧͤͣʹQSPQT͚ͩΛ࢖͏Α͏ʹͰ͖Δ
30. ZBSOʁ ύοέʔδ؅ཧπʔϧ
    ϑϩϯτͰར༻͢ΔϥΠϒϥϦΛ
    QBDLBHFKTPOͱ͍͏ϑΝΠϧͰ؅ཧɻ
    3VCZͰ͍͏CVOEMFS
    ߴ଎ʂ
31. #BCFMʁ &$."4DSJQUͷτϥϯείϯύΠϥ
    3FBDU͸ੜ+4ͩͱ͠ΜͲ͍ͷͰ&4Ͱهड़
    ͨͩ͠&4
    +49͸ϒϥ΢βͰಈ͔ͳ͍ɻɻɻ
    &4ɺ+49
    
    &4ʹม׵ͯ͘͠ΕΔ
    
    
32. XFCQBDLʁ ΞηοτΛੜ੒͢ΔϏϧυπʔϧ
    ෳ਺ͷιʔεΛҰͭʹ·ͱΊΒΕΔ
    KT͚ͩͰͳ͘DTTͱ͔΋ѻ͑Δ
    #BCFM΋XFCQBDLͷϏϧυͰߦ͏
33. qPXʁ +BWBTDSJQU͸ಈతܕ෇͚ݴޠ
    ੩తܕνΣοΫΛͯ͘͠Εͯɺ
    ࣮ߦલʹܕΤϥʔΛݕग़Ͱ͖Δ
    6TFS
    ͳͲಠࣗʹܕ΋ఆٛͰ͖ΔͷͰ
    ίʔυ͕ϦʔμϒϧʹͳΔ
    
34. $44
    .PEVMFTʁ DTTΛ$PNQPOFOU͝ͱʹ࣋ͨͤΒΕΔπʔϧ
    Ϗϧυ࣌ʹিಥ͕ى͖ͳ͍Α͏ʹ
    ໊લ͕ࣗಈੜ੒͞ΕͯϚοϐϯάͯ͘͠ΕΔ
    #&.౳ͷ໋໊نଇͱ͔ߟ͑ͳͯ͘ྑ͍
    ίϯϙδγϣϯ΋࢖͑Δ
35. ͍Ζ͍Ζ঺հ͠·͕ͨ͠ ͱΓ͍͋͑ͣͬͺ͍͋ΔͷͰ
    ͜Μͳͷ͋ΔΜͩఔ౓Ͱ࠷ॳ͸ɻɻ
    DSFBUFSFBDUBQQ
    ΈͯΈͯ
    IUUQTHJUIVCDPNGBDFCPPLDSFBUFSFBDU BQQ
    
36. ͜Ε͚ͩͰ0,✨ 
    OQN
    JOTUBMM
    H
    DSFBUFSFBDUBQQ
    
    DSFBUFSFBDUBQQ
    NZ@BQQ
    
    DE
    NZ@BQQ
    
    OQN
    TUBSU
37. ษڧ๏
    
38. Θͨ͠ͷ3FBDUϨϕϧ ҰԠ΍ͬͱ೥ʹͳΓ·͢ɻ
    ࠷ॳ࢝Ίͨ͜Ζ
    +BWB4DSJQUࣗମ͋Μ·Γ৮ͬͨ͜ͱͳ͍
    ֮͑Δ͜ͱ͍Ζ͍Ζ͋Γ͗ͯ͢Θ͚Θ͔Μͳ͍
    ᤨຑ਄ൃ঱⚡
39. Α͏΍͘ɻ ·ͩ·ֶͩͿ͜ͱ͍Ζ͍Ζ͋Δ͚Ͳָ͍͠
    3FBDUωλͰϒϩάΛॻ͚ΔΑ͏ʹͳͬͨʂ
    Φʔϓϯιʔε͕ಡΊΔΑ͏ʹͳͬͨʂ
    044׆ಈ࢝Ίͯ3FBDUͷϥΠϒϥϦ࡞੒ͨ͠ΓͰ ͖ΔΑ͏ʹͳͬͨʂ
    ͸ͯϒ΍4/4Ͱ
    ٕज़ωλΛνΣοΫ͢Δश׳͕͍ͭͨʂ
40. ษڧ๏ ᶃ ެࣜνϡʔτϦΞϧ
    ᶄ νʔϜͰྠಡձ
    ᶅ Ұਓ3FBDUKT
    "EWFOU
    $BMFOEBS
    ᶆ Φʔϓϯιʔεʹίϛοτ
    ᶇ ΦʔϓϯιʔεΛಡΉ
    ᶈ ࣮຿Ͱͷ։ൃ
    ᶉ ࠷৽ٕज़ͷΩϟονΞοϓ
41. ·ͣ͸ެࣜνϡʔτϦΞϧ 3FBDUͷ֓ཁΛ͔ͭΈͭͭਐΊΔ
    αϯϓϧ͚ͩͰͳͪ͘ΐͬͱࣗ෼ͰΞϨϯδɻ
    3FEVY΋ಉ࣌ʹΠϯϓοτ͢Δඞཁ͕͋ͬͨͷͰ
    ಉ͘͡νϡʔτϦΞϧΛ΍ͬͯΈΔ
42. νʔϜͰྠಡձ ։ൃνʔϜΈΜͳ΄΅3FBDUॳ৺ऀ
    0`3FJMMZͷೖ໳3FBDUΛ࢖༻ͯ͠ྠಡձ
    ղઆ͢ΔਓΛճ͠ͳ͕Βຖ೔෼ؒ
    νʔϜؒͷ஌ࣝڞ༗΍໨ઢ߹ΘͤΛͨ͠
43. Ұਓ3FBDUKT
    "EWFOU
    $BMFOEBS ˏLPCB͞ΜʹΑΔ2JJUBͷΞυϕϯτΧϨϯμʔ
    جຊతͳͱ͜Ζ͕׬݁ʹॻ͔Ε͍ͯΔ
    ಡΉ͚ͩͰͳ͘ɺ٧·ͬͨͱ͖ʹௐ΂Δͷʹศར
    ಛʹϥΠϑαΠΫϧͷͱ͜Ζ͸
    ৗʹݟ͑Δͱ͜Ζʹஔ͍͓ͯ͘ͱΑ͍͔΋
44. Φʔϓϯιʔεʹίϛοτ ։ൃͨ͠ιʔεΛΦʔϓϯιʔεϥΠϒϥϦԽ
    ະϚʔδ͕ͩػೳ௥ՃͷίϛοτΛࢼΈͨ
    ֎͔Βίʔυ͕ݟΒΕΔɺ࢖ΘΕΔ͔΋͠Εͳ͍ ۓுײΛ࣋ͬͯͰ͖ͯྑ͔ͬͨ
45. ΦʔϓϯιʔεΛಡΉ ΦʔϓϯιʔεԽ͞Ε͍ͯΔίʔυΛಡΉ
    ࣮ࡍʹ࢖͍ͬͯΔϥΠϒϥϦΛݟΔͱಈ͖΋Θ͔ Δ͠ྑ͍
    ࠷ॳ͸ܰΊͷ΋ͷ΍ελʔ͕ଟ͍ਓؾͷ΋ͷΛ
    ͓͢͢Ί͸.BUFSJBM6*
    
46. ࣮຿Ͱͷ։ൃ ݁ہ࣮ફ͕Ұ൪
    ࣮຿ʹݶΒͣखΛಈ͔ͯ͠ݟΔ͜ͱ͕େࣄ
    ϨϏϡʔͰࢦఠΛ΋Β͑Δ
    ଞͷਓͷίʔυ΋ΈΕΔ
    ͭ·͍ͮͨ࣌ʹάάΔɺڭ͑ͯ΋Β͏
47. ࠷৽৘ใͷΩϟονΞοϓ ࠓ·Ͱଞݴޠ౳ֶͿ࣌͸ຊͱ͔͕΄ͱΜͲ
    Ͱ΋ϑϩϯτपΓͷਐԽͷεϐʔυ͕ૣ͍ͷͰ
    ৗʹΩϟονΞοϓ͢Δඞཁ͕͋Δ
    ͸ͯͿɺRJJUBɺ4/4౳Λຖ೔νΣοΫ
48. ϥϯαʔζΤϯδχΞϒϩά ։ൃϝϯόʔ͕ॻ͍ͨϒϩάެ։த
    w ϥϯαʔζྲྀ
    3FBDUKTSFEVY
    ΞϓϦ։ൃೖ໳
    w 3FBDU
    3FEVY
    Λ༻͍ͨ
    41"
    ৽نαʔϏεΛӡ ༻ͯ͠ಘͨ஌ݟͱ࣮૷ྫ
    w +BWB4DSJQUॳ৺ऀͷࢲ͕ɺ3FBDUº3FEVYʹΑΔ 41"։ൃͷҰһʹͳΔ·Ͱ
    ͳͲͳͲɻ
49. ·ͱΊ
50. ·ͱΊ 3FBDU͸ෑډߴͦ͏ʹࢥ͑Δ͚Ͳݪཧ͸؆୯
    $PNQPOFOUͷ૊Έ߹ΘͤͳͷͰɺ
    QSPQTͱTUBUFΛ͓͑͞Ε͹࡞ΕΔʂ
    ·ͣ͸ެࣜνϡʔτϦΞϧ͔Βɻ
    ͋ͱ͸౰ͨΓલ͚ͩͲ࣮ફ͕େࣄ
    ࠓ͸΋͏৘ใ΋ଟ͍ͷͰେৎ෉ʂ
51. ͍͞͝ʹ !UBLFQP ࠓճͷొஃࢿྉ΋Ζ΋Ζ
    UXJUUFS͔Β΋ྲྀͦ͏ͱࢥ͍ͬͯ·͢
    جຊ͸ɺ3FBDUΛ͸͡Ίͱͯ͠
    8FC·ΘΓͷ࠷৽هࣄ͍Ζ͍ΖγΣ Ξͯͭ͠Ϳ͍ͯ·͢ʂ
    ੋඇUXJUUFSϑΥϩʔ͍ͯͩ͘͠͞ ࣭໰౳΋ؾܰʹͲ͏ͧʙ
    ʂ
52. Ұॹʹָ͠Έ·͠ΐ͏
54. ࢀߟจݙ 3FBDUKTͱ͸
    IUUQRJJUBDPNLPCBJUFNTEDBGBCCG
    3FEVYೖ໳ʲμΠδΣετ൛ʳ෼Ͱཧղ͢Δ3FEVYͷجૅ
    IUUQRJJUBDPNLJJUBJUFNTBGCDGC