Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

E4df3dc4c4648a31ac3682e3619df2bf?s=47 yurixxx8
October 25, 2017

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

E4df3dc4c4648a31ac3682e3619df2bf?s=128

yurixxx8

October 25, 2017
Tweet

More Decks by yurixxx8

Other Decks in Technology

Transcript

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

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

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

  5. -FU`T$IBMMFOHF

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

  7. None
  8. None
  9. ढจ͔ͳʁ

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

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

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

  13. ͳΔ΄ͲΘ͔ͬͨ

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

  15. ίʔυ͕ಡΊͳ͍

  16. ͭΒ͍

  17. None
  18. None
  19. ͦ΋ͦ΋ ͳΜͰಡΊͳ͍ͷʁ ΍ͬͯΈͨ͜ͱͦͷ

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

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

  22. DMBTT"QQFYUFOET3FBDU$PNQPOFOU  DPOTU-JTU*UFN QSPQT \^ GVODUJPO/BNF QSPQT  WBS$POUBDUT3FBDUDSFBUF$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)FMMPQSPQTEJWI)FMMP \QSPQTWBMVF^IEJW wؔ਺ͷத਎͕Ұจͷ৔߹ɺ\^ SFUVSOΛলུͰ͖Δ wҾ਺͕Ұͭͷ৔߹ɺҾ਺ΛғΉ  ͕লུͰ͖Δ ˞͜ΕΒ͸3FBDUʹݶͬͨ͜ͱͰ͸ͳ͘&4ͷ࢓༷ 4UBUFMFTT'VODUJPOBM$PNQPOFOU

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

  31. $MBTT$PNQPOFOU DMBTT)FMMPFYUFOET3FBDU$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ΦϒδΣΫτʹΑͬͯࢀরͰ͖ΔɹFHUIJTQSPQTOBNF
  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ެࣜυΩϡϝϯτಡΉʢॏཁʣ