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

by yurixxx8

Slide 1

Slide 1 text

3FBDUͱ͓༑ୡʹͳΔʹ͸ جຊߏจʢ&4ؚΉʣͱ 4UBUF1SPQTΛֶͿ΂͖ͩͬͨ !ZVSJ@YYY

Slide 2

Slide 2 text

!ZVSJ@YYYৗۭ࣌ෲ wϑϩϯτΤϯυΤϯδχΞ wࠓ೥݄ʹ্ژˍస৬ wࠓ೥݄·Ͱ஍ํͷ੍࡞ձࣾͰXFCίʔμʔ wओʹ)5.-$44K2VFSZ w3FBDU͸ݸਓతʹษڧͯͯ͠ࠓ΋ษڧத w࠷ۙ1ZUIPOʹࠍΕͨ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

3FBDUʹର͢ΔΠϝʔδ w5-ͰΑ͘ݟΔ w3FBDU࢖͑͹K2VFSZ͍Βͳ͍ͬͯΑ͘ݟΔ wˢͦΜͳ͜ͱͳ͍ͬͯҙݟ΋Α͘ݟΔ w4JOHMF1BHF"QQMJDBUJPOͱ͔ʹ޲͍ͯΔͷ͔ͳ wͳΜ͔Α͘෼͔Μͳ͍͚Ͳ೉ͦ͠͏

Slide 5

Slide 5 text

-FU`T$IBMMFOHF

Slide 6

Slide 6 text

͍ΖΜͳਓͷαϯϓϧ ίʔυࣸܦ͠·ͬͨ͘ ΍ͬͯΈͨ͜ͱͦͷ

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

ढจ͔ͳʁ

Slide 10

Slide 10 text

ͳΜͰಈ͍ͯΔͷ͔Α͘෼͔Βͳ͍

Slide 11

Slide 11 text

ͦ΋ͦ΋ 3FBDUͬͯͳΜͳͷʁ ΍ͬͯΈͨ͜ͱͦͷ

Slide 12

Slide 12 text

w 7JSUVBM%0.Ͱද͕ࣔ͸΍͍ w มߋ͕͋ͬͨࡍʹɺԾ૷%0.ͱ࣮%0.Λൺֱͯ͠ɺ ࠩ෼ͷΈ%0.ͷ࠶ߏஙΛͯ͘͠ΕΔ w ίϯϙʔωϯτΛఆٛͯ͠ɺͦΕΒΛ૊Έ߹Θͤͯ ը໘Λ࡞͍ͬͯ͘ w +49࢖͏

Slide 13

Slide 13 text

ͳΔ΄ͲΘ͔ͬͨ

Slide 14

Slide 14 text

Ͳ͏ॻ͚͹͍͍͔෼͔Βͳ͍

Slide 15

Slide 15 text

ίʔυ͕ಡΊͳ͍

Slide 16

Slide 16 text

ͭΒ͍

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

ͦ΋ͦ΋ ͳΜͰಡΊͳ͍ͷʁ ΍ͬͯΈͨ͜ͱͦͷ

Slide 20

Slide 20 text

΋͔ͯ͠͠ɿ ߏจΛ͖ͪΜͱཧղ͍ͯ͠ͳ͍

Slide 21

Slide 21 text

+49ͱ͔&4ͱ͔ ͍Ζ͍Ζࠞཚ͍ͯ͠Δ

Slide 22

Slide 22 text

DMBTT"QQFYUFOET3FBDU$PNQPOFOU DPOTU-JTU*UFN QSPQT \^ GVODUJPO/BNF QSPQT WBS$POUBDUT3FBDUDSFBUF$MBTTʁ

Slide 23

Slide 23 text

ʮॻ͚͹෼͔ΔΑ͏ʹͳΔʯ ͱ৴͍ͯͨ͡

Slide 24

Slide 24 text

ʮߏจΛཧղ͢Δʯ ͱ͍͏جຊతͳ͜ͱʹࢸΔ·Ͱ ΋ͷ͍͕͔͔࣌ؒͬͨ͢͝

Slide 25

Slide 25 text

൓লΛੜֶ͔͠Μͩ͜ͱ

Slide 26

Slide 26 text

جຊͱͳΔछྨͷߏจ͕͋Δ w4UBUFMFTT'VODUJPOBM$PNQPOFOUΛॻ͘ߏจ w$MBTT$PNQPOFOUΛॻ͘ߏจ

Slide 27

Slide 27 text

4UBUFMFTT'VODUJPOBM$PNQPOFOU wجຊతʹίϯϙʔωϯτ͸͜ͷॻ͖ํΛ͢Δ wঢ়ଶͷ؅ཧ͸ߦΘͳ͍ w਌͔ΒQSPQTΛड͚औΔ wؔ਺ͷ໭Γ஋ʹ%0.Λॻ͘

Slide 28

Slide 28 text

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 ^

Slide 29

Slide 29 text

͍Ζ͍Ζলུͨ͜͠͏͍͏ॻ͖ํ΋Ͱ͖Δ DPOTU)FMMPQSPQTEJWI)FMMP \QSPQTWBMVF^IEJW wؔ਺ͷத਎͕Ұจͷ৔߹ɺ\^ SFUVSOΛলུͰ͖Δ wҾ਺͕Ұͭͷ৔߹ɺҾ਺ΛғΉ ͕লུͰ͖Δ ˞͜ΕΒ͸3FBDUʹݶͬͨ͜ͱͰ͸ͳ͘&4ͷ࢓༷ 4UBUFMFTT'VODUJPOBM$PNQPOFOU

Slide 30

Slide 30 text

$MBTT$PNQPOFOU w&4ͷ$MBTTߏจͰఆٛͰ͖Δ wঢ়ଶͷ؅ཧΛߦ͏ wTUBUFΛ࣋ͯΔ wϥΠϑαΠΫϧϝιουΛ͍࣋ͬͯΔ

Slide 31

Slide 31 text

$MBTT$PNQPOFOU DMBTT)FMMPFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO EJW I)FMMP \UIJTQSPQTWBMVF^I EJW ^ ^ 3FBDU$PNQPOFOUΛܧঝͨ͠)FMMPΫϥεΛఆٛ

Slide 32

Slide 32 text

4UBUFMFTT'VODUJPOBM$PNQPOFOUͱ$MBTT$PNQPOFOUͷαϯϓϧ IUUQTDPEFTBOECPYJPTWRYPK

Slide 33

Slide 33 text

4UBUFͱ1SPQT w ίϯϙʔωϯτ͕͍࣋ͬͯΔঢ়ଶ w Մม͢Δɺޙ͔ΒมߋͰ͖Δσʔλ w TFU4UBUFϝιουͰߋ৽Λߦ͏͜ͱ͕Ͱ͖Δ w ίϯϙʔωϯτ࡞੒࣌ʹUIJTTUBUFΦϒδΣΫτʹ஋Λࢦఆ͓ͯ͘͠ͱɺ ଞͷϝιου͔ΒUIJTTUBUFͱͯ͠औಘͰ͖Δ 1SPQT 4UBUF w ਌ίϯϙʔωϯτ͔Β౉͞ΕΔϓϩύςΟ w Մม͠ͳ͍ɺޙ͔ΒมߋͰ͖ͳ͍σʔλʢಡΈऔΓઐ༻ʣ w UIJTQSPQTΦϒδΣΫτʹΑͬͯࢀরͰ͖ΔɹFHUIJTQSPQTOBNF

Slide 34

Slide 34 text

IUUQTDPEFTBOECPYJPTYPXWRY

Slide 35

Slide 35 text

IUUQTDPEFTBOECPYJPTYRPWPSL

Slide 36

Slide 36 text

IUUQTDPEFTBOECPYJPTYRPWPSL ॳظ4UBUFΛઃఆ͢Δ w DMBTTʹDPOTUSVDUPS ϝιουΛ௥Ճ w TVQFS QSPQT ϝιουΛݺͼग़͢ w UIJTTUBUFʹΦϒδΣΫτͱͯ͠ॳظͷ4UBUFͷ஋Λఆٛ wσϑΥϧτͰόΠϯυ͞Ε͍ͯͳ͍ͷͰඞཁ w ೖྗ͞Εͨ஋Λऔ͖ͬͯͯɺϦΞϧλΠϜʹ൓ө͍ͤͯ͞Δ

Slide 37

Slide 37 text

%&.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

Slide 38

Slide 38 text

·ͱΊ w ʮͳͥ෼͔Βͳ͍͔ʯΛ໌֬ʹ͢ΔɹFH·ͣߏจ͕෼͔Βͳ͍ w ʮશ෦Θ͔ΒΜʯͱ͍͏৔߹͸ɺখ͞ͳٙ໰ʹͳΔΑ͏ʹ෼ղ͍ͯ͘͠ wެࣜυΩϡϝϯτಡΉʢॏཁʣ