20210525_react_next.pdf

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͸ߋʹޮՌత