React初学者が知らない コンポーネント分割テクニック

We Are JavaScripters! @29th【初心者歓迎LT大会】

https://wajs.connpass.com/event/119722/

Transcript

1. Reactॳֶऀ͕஌Βͳ͍
 ίϯϙʔωϯτ෼ׂςΫχοΫ ࠜ؛ప໵
2. ࣗݾ঺հ • ࠜ؛ప໵ • ϥϯαʔζגࣜձࣾ • ৽نࣄۀ • ओʹϑϩϯτ·ΘΓ୲౰ • ڵຯؔ৺ • React, Vue.js, TypeScript • αʔόʔϨε
3. Reactίϯϙʔωϯτͱ͸
4. Reactίϯϙʔωϯτͱ͸ • HTMLͷಠࣗλάͷΑ͏ʹ࢖͑Δύʔπ • σβΠϯ΍ಈ࡞ΛΧϓηϧԽ
5. ͚ͩͲഁ୼΋͠΍͍͢
6. ഁ୼ͨ͠ίϯϙʔωϯτ
7. ഁ୼ͨ͠ίϯϙʔωϯτ
8. ഁ୼ͨ͠ίϯϙʔωϯτ
9. ഁ୼ͨ͠ίϯϙʔωϯτ
   
   
10. ͋ͬͱ͍͏ؒʹഁ୼
11. ίϯϙʔωϯτΛ࡞Δͱ͖ʹҙ͍ࣝͯ͠Δ͜ͱ • ڞ௨ԽͰ͖Δͱ͜ΖΛݟམͱ͞ͳ͍ • ͨͱ͑͹ϨΠΞ΢τɼϚ΢εϗόʔ࣌ͷಈ࡞, ΫϦοΫ࣌ͷಈ࡞ • ίϯϙʔωϯτʹ֊૚Λ΋ͨͤΔ • ෼ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom) • ࠶ར༻ՄೳͰػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule) • ػೳ͕ݻఆԽ͞Εͨ୯Ґ(Organism) • ґଘੑΛແ࣮ͨ͘͠૷
13. ෼ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)ʹ෼ׂ
14. ෼ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)ʹ෼ׂ
15. ෼ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)ʹ෼ׂ
16. ػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule)ʹ෼ׂ
17. Moleculeʹ෼ׂͰ͖Δͱ͜Ζߟ͑Δ
18. ػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule)ʹ෼ׂ
19. ػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule)ʹ෼ׂ
20. ػೳ͕ݻఆԽ͞Εͨ୯Ґ(Organism)ʹ෼ׂ
21. ίϯϙʔωϯτΛ࡞Δͱ͖ʹҙ͍ࣝͯ͠Δ͜ͱ • ڞ௨ԽͰ͖Δͱ͜ΖΛݟམͱ͞ͳ͍ • ͨͱ͑͹ϨΠΞ΢τɼϚ΢εϗόʔ࣌ͷಈ࡞, ΫϦοΫ࣌ͷಈ࡞ • ίϯϙʔωϯτʹ֊૚Λ΋ͨͤΔ • ෼ׂෆՄೳͳ࠷খݶͷ୯Ґ • ࠶ར༻ՄೳͰػೳ͕ݻఆԽ͠ͳ͍୯Ґ • ػೳ͕ݻఆԽ͞Εͨ୯Ґ • ґଘੑΛແ࣮ͨ͘͠૷
22. Thank you!
23. ࢀߟॻ੶ • Atomic Design ݎ࿚Ͱ࢖͍΍͍͢UIΛޮ཰ྑ͘ઃܭ͢Δ ޒ౻༎య(2018) ٕज़ධ࿦ࣾ