20210525_react_next.pdf

Transcript

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

   View Slide

2. 3FBDUͰͰ͖Δ͜ͱ
   
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. ಈతͳ஋ΛຒΊࠐΈ͍ͨ
   w ίϯϙʔωϯτʹຒΊࠐΉσʔλ͕ಈతͳ࣌͸

   Ҿ਺ͱͯ͠౉͠ɺड͚औͬͨ஋ΛຒΊࠐΉ
   
   ड͚औͬͨ஋Λ
   ຒΊࠐΉ
   ಈతͳ஋͸Ҿ਺Ͱ౉͢
   ಉ͡ίϯϙʔωϯτͰ΋
   දࣔ಺༰͕ҧ͏
   https://stackblitz.com/edit/aa-seminar-react-step3?file=src/components/ListItem/ListItem.js
   

   View Slide

7. ঢ়ଶͷมߋΛ؅ཧ͍ͨ͠
   w Ϣʔβͷૢ࡞ͳͲͰมԽ͢Δ஋Λอ͓͖͍࣋ͯͨ࣌͠͸

   VTF4UBUFͰ؅ཧ͢Δ͜ͱ͕Ͱ͖Δ
   
   ؅ཧ͢Δ஋ͷॳظ஋Λఆٛ
   ؅ཧ͢Δ஋Λߋ৽Ͱ͖Δ
   Ϣʔβͷૢ࡞ ͜͜Ͱ͸ΫϦοΫ
   ΛτϦΨʔʹ
   ؔ਺Λ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ
   https://stackblitz.com/edit/aa-seminar-react-step4?file=src/components/Counter/Counter.js
   

   View Slide

8. 3FBDUͷͦͷଞͷػೳ
   w ଞʹ΋3FBDU͕ఏڙ͢Δػೳ͸͋Δ͕

   ϝΠϯͲ͜Ζ͸͜Μͳͱ͜Ζ
   w ͦΕҎ֎͸֎෦ϥΠϒϥϦΛ࢖͏͔

   ७ਮͳ+BWB4DSJQUͱͯ͠ॲཧΛॻ͘
   
   ଞͷػೳ͸ެࣜΨΠυΛࢀߟʹ͍ͯͩ͘͠͞
   IUUQTKBSFBDUKTPSHEPDTIFMMPXPSMEIUNM
   

   View Slide

9. ७ਮͳ+BWB4DSJQUͰؤுΔྫ
   w "1*͔ΒσʔλΛऔಘͨ͠ΓσʔλΛૹ৴͢Δॲཧ͸

   ࣗલͰॻ͘ඞཁ͕͋Δ
   
   ௨৴ॲཧ
   ௨৴ॲཧͰऔಘͨ͠
   σʔλΛTFU͠ը໘ʹදࣔ
   https://stackblitz.com/edit/aa-seminar-react-step5?file=src/components/Articles/Articles.js
   

   View Slide

10. w ෳ਺ͷϖʔδͷΞϓϦΛ࡞Γ͍ͨ৔߹SFBDUSPVUFSͳͲͷ

    ϥΠϒϥϦΛ࢖͏ͷ͕ϕλʔ
    ֎෦ϥΠϒϥϦΛ࢖͏ྫ
    
    63-ʹԠͯ͡දࣔ͢Δ
    ίϯϙʔωϯτΛ੾Γସ͑Δ
    https://stackblitz.com/edit/aa-seminar-react-step6?file=src/routes/router.js
    

    View Slide

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

    ֎෦ϥΠϒϥϦΛ࢖͏͜ͱʹͳΔ
    
    

    View Slide

12. /FYUKTͰͰ͖Δ͜ͱ
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. ίϯϙʔωϯτͷྖҬΛ௒͑ͨܥ
    "1*ͷࣗಈੜ੒
    w BQJ഑ԼʹϑΝΠϧΛ࡞Δͱ+40/
    Λฦ͢ΤϯυϙΠϯτʹͳΔ
    ύϑΥʔϚϯε࠷దԽ
    w ը૾αΠζͷࣗಈ࠷దԽ
    w ϦϯΫͷࣗಈઌಡΈ
    
    443 4FSWFS4JEF3FOEFSJOH
    
    w αʔόαΠυͰ3FBDUίϯϙʔωϯ
    τΛੜ੒ͯ͠)5.-Λฦ͢͜ͱ͕Ͱ
    ͖Δ
    44( 4UBUJD4JUF(FOFSBUF
    
    w "1*ͳͲ͔Βऔಘͨ͠σʔλΛຒΊ
    ࠐΜͩঢ়ଶͷ)5.-Λੜ੒Ͱ͖Δ
    w ͍ΘΏΔ+BNTUBDLͰ࢖ΘΕΔ
    

    View Slide

17. /FYUKTͰͰ͖Δ͜ͱ
    w 3FBDUʹগ͠ϧʔϧ͕௥Ճ͞ΕΔ͜ͱͰઃఆָ͕ʹͳΔ
    w σΟϨΫτϦߏ੒ϕʔεͷϧʔςΟϯά
    w 5ZQF4DSJQU΍$44.PEVMFTͷઃఆ؆ུԽ
    w ίϯϙʔωϯτͷྖҬΛ௒͑ͨػೳ͕࢖͑Δ
    w "1*ͷੜ੒
    w 44344(
    
    

    View Slide

18. ·ͱΊ
    
    

    View Slide

19. ·ͱΊ
    w 3FBDU͸ίϯϙʔωϯτϥΠϒϥϦ

    ͳͷͰࣗલͰؤுΒͳ͍ͱ͍͚ͳ͍ͱ͜Ζ͕ଟ͍
    w /FYUKT͸3FBDUΑΓറΓ͕গ͠૿͑Δ෼ઃఆͳͲָ͕ʹͳΔ

    ίϯϙʔωϯτͷྖҬΛ௒͍͑ͨΖ͍Ζͳ͜ͱ͕Ͱ͖Δ
    w ϖʔδભҠͷ͋ΔΞϓϦͳΒ/FYUKT͸े෼༗༻
    w 443΍44(ͳͲ͚ͨ͠Ε͹/FYUKT͸ߋʹޮՌత
    
    

    View Slide