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

20210525_react_next.pdf

 20210525_react_next.pdf

26a00012c475c2380cd98cfe5e2e70ef?s=128

ozaki25

May 25, 2021
Tweet

Transcript

  1. 3FBDUͰͰ͖Δ͜ͱ /FYUKTͰͰ͖Δ͜ͱ 

  2. 3FBDUͰͰ͖Δ͜ͱ 

  3. 3FBDUΛ࢖͏ͱԿ͕Ͱ͖Δͷʁ w 6*ίϯϙʔωϯτΛ࡞Δ͜ͱ͕Ͱ͖Δ w 6*ίϯϙʔωϯτΛ૊Έ߹ΘͤͯΞϓϦΛ࡞Δ͜ͱ͕Ͱ͖Δ  ϝΠϯͷػೳ͸͜Ε͚ͩʂ ଞ͸͓·͚Έ͍ͨͳ΋ͷ Ͱ΋͓·͚͕ෳࡶͩͬͨΓ͢Δ

  4. 6*ίϯϙʔωϯτͱ͸ʁ w )5.-$44+BWB4DSJQUͷ͔ͨ·Γ  ίϯϙʔωϯτ͔ΒίϯϙʔωϯτΛݺͼग़ͨ͠Γ͢Δ ίϯϙʔωϯτΛ૊Έ߹ΘͤΔ͜ͱͰը໘Λ࡞Δ https://stackblitz.com/edit/aa-seminar-react-step2?file=src/App.js

  5. ίϯϙʔωϯτΛ࢖͏͚ͩʁ w ੩తͳϖʔδͰ͋Ε͹͜Ε͚ͩͰࡁΉ w ࣮ࡍ͸ಈతͳϖʔδ͕ଟ͍ͷͰ͜Ε͚ͩͰ͸෺଍Γͳ͘ͳΔ 

  6. ಈతͳ஋ΛຒΊࠐΈ͍ͨ w ίϯϙʔωϯτʹຒΊࠐΉσʔλ͕ಈతͳ࣌͸
 Ҿ਺ͱͯ͠౉͠ɺड͚औͬͨ஋ΛຒΊࠐΉ  ड͚औͬͨ஋Λ ຒΊࠐΉ ಈతͳ஋͸Ҿ਺Ͱ౉͢ ಉ͡ίϯϙʔωϯτͰ΋ දࣔ಺༰͕ҧ͏

    https://stackblitz.com/edit/aa-seminar-react-step3?file=src/components/ListItem/ListItem.js
  7. ঢ়ଶͷมߋΛ؅ཧ͍ͨ͠ w Ϣʔβͷૢ࡞ͳͲͰมԽ͢Δ஋Λอ͓͖͍࣋ͯͨ࣌͠͸
 VTF4UBUFͰ؅ཧ͢Δ͜ͱ͕Ͱ͖Δ  ؅ཧ͢Δ஋ͷॳظ஋Λఆٛ ؅ཧ͢Δ஋Λߋ৽Ͱ͖Δ Ϣʔβͷૢ࡞ ͜͜Ͱ͸ΫϦοΫ ΛτϦΨʔʹ

    ؔ਺Λ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ https://stackblitz.com/edit/aa-seminar-react-step4?file=src/components/Counter/Counter.js
  8. 3FBDUͷͦͷଞͷػೳ w ଞʹ΋3FBDU͕ఏڙ͢Δػೳ͸͋Δ͕
 ϝΠϯͲ͜Ζ͸͜Μͳͱ͜Ζ w ͦΕҎ֎͸֎෦ϥΠϒϥϦΛ࢖͏͔
 ७ਮͳ+BWB4DSJQUͱͯ͠ॲཧΛॻ͘  ଞͷػೳ͸ެࣜΨΠυΛࢀߟʹ͍ͯͩ͘͠͞ IUUQTKBSFBDUKTPSHEPDTIFMMPXPSMEIUNM

  9. ७ਮͳ+BWB4DSJQUͰؤுΔྫ w "1*͔ΒσʔλΛऔಘͨ͠ΓσʔλΛૹ৴͢Δॲཧ͸
 ࣗલͰॻ͘ඞཁ͕͋Δ  ௨৴ॲཧ ௨৴ॲཧͰऔಘͨ͠ σʔλΛTFU͠ը໘ʹදࣔ https://stackblitz.com/edit/aa-seminar-react-step5?file=src/components/Articles/Articles.js

  10. w ෳ਺ͷϖʔδͷΞϓϦΛ࡞Γ͍ͨ৔߹SFBDUSPVUFSͳͲͷ
 ϥΠϒϥϦΛ࢖͏ͷ͕ϕλʔ ֎෦ϥΠϒϥϦΛ࢖͏ྫ  63-ʹԠͯ͡දࣔ͢Δ ίϯϙʔωϯτΛ੾Γସ͑Δ https://stackblitz.com/edit/aa-seminar-react-step6?file=src/routes/router.js

  11. 3FBDUͰͰ͖Δ͜ͱ w ίϯϙʔωϯτΛ࡞ͬͯ૊Έ߹ΘͤͯΞϓϦΛ࡞Δ͜ͱ w ಈతͳΞϓϦΛ࡞ΔͨΊͷঢ়ଶ؅ཧͳͲ࠷௿ݶͷ͜ͱ w ͦΕҎ֎͸७ਮͳ+BWB4DSJQUͰ࣮૷͢Δ͔
 ֎෦ϥΠϒϥϦΛ࢖͏͜ͱʹͳΔ 

  12. /FYUKTͰͰ͖Δ͜ͱ 

  13. /FYUKTΛ࢖͏ͱԿ͕Ͱ͖Δͷʁ w 3FBDUΛ಺แͯ͠ΔͷͰ3FBDUͰͰ͖Δ͜ͱ͸Ͱ͖Δ w ઃఆͳ͠ͰࣗಈͰ΍ͬͯ͘ΕΔܥ w ίϯϙʔωϯτͷྖҬΛ௒͑ͨܥ 

  14. ઃఆͳ͠ͰࣗಈͰ΍ͬͯ͘ΕΔܥ w 8FCQBDLͷઃఆΛࣗ෼Ͱ΍Βͳͯ͘Α͍ w ֤छઃఆΛ؆୯ઃఆͳ͠Ͱ࢖͑Δ w 5ZQF4DSJQU w $44.PEVMFT w

    4BTT4$44 
  15. ઃఆͳ͠ͰࣗಈͰ΍ͬͯ͘ΕΔܥ w ϑΥϧμߏ੒͕ͦͷ··ϧʔςΟϯάʹͳΔ w SFBDUSPVUFS͕ෆཁ  63- ϑΝΠϧ VTFST QBHFTVTFSTJOEFYKT

    VTFSTOFX QBHFTVTFSTOFXKT VTFST QBHFTVTFST<JE>JOEFYKT VTFSTFEJU QBHFTVTFST<JE>FEJUKT
  16. ίϯϙʔωϯτͷྖҬΛ௒͑ͨܥ "1*ͷࣗಈੜ੒ w BQJ഑ԼʹϑΝΠϧΛ࡞Δͱ+40/ Λฦ͢ΤϯυϙΠϯτʹͳΔ ύϑΥʔϚϯε࠷దԽ w ը૾αΠζͷࣗಈ࠷దԽ w ϦϯΫͷࣗಈઌಡΈ

     443 4FSWFS4JEF3FOEFSJOH  w αʔόαΠυͰ3FBDUίϯϙʔωϯ τΛੜ੒ͯ͠)5.-Λฦ͢͜ͱ͕Ͱ ͖Δ 44( 4UBUJD4JUF(FOFSBUF  w "1*ͳͲ͔Βऔಘͨ͠σʔλΛຒΊ ࠐΜͩঢ়ଶͷ)5.-Λੜ੒Ͱ͖Δ w ͍ΘΏΔ+BNTUBDLͰ࢖ΘΕΔ
  17. /FYUKTͰͰ͖Δ͜ͱ w 3FBDUʹগ͠ϧʔϧ͕௥Ճ͞ΕΔ͜ͱͰઃఆָ͕ʹͳΔ w σΟϨΫτϦߏ੒ϕʔεͷϧʔςΟϯά w 5ZQF4DSJQU΍$44.PEVMFTͷઃఆ؆ུԽ w ίϯϙʔωϯτͷྖҬΛ௒͑ͨػೳ͕࢖͑Δ w

    "1*ͷੜ੒ w 44344( 
  18. ·ͱΊ 

  19. ·ͱΊ w 3FBDU͸ίϯϙʔωϯτϥΠϒϥϦ
 ͳͷͰࣗલͰؤுΒͳ͍ͱ͍͚ͳ͍ͱ͜Ζ͕ଟ͍ w /FYUKT͸3FBDUΑΓറΓ͕গ͠૿͑Δ෼ઃఆͳͲָ͕ʹͳΔ
 ίϯϙʔωϯτͷྖҬΛ௒͍͑ͨΖ͍Ζͳ͜ͱ͕Ͱ͖Δ w ϖʔδભҠͷ͋ΔΞϓϦͳΒ/FYUKT͸े෼༗༻ w

    443΍44(ͳͲ͚ͨ͠Ε͹/FYUKT͸ߋʹޮՌత