これから始めるReact.js入門

HTML/CSS, JavaScript等勉強中の方に向けて作成したReactの概要を説明するスライドになります。

Mentaにてフロントエンドエンジニアを目指す方向けのレッスンを提供しております。
https://menta.work/plan/1608

Transcript

1. 䝗 䝗䜻 䜻䝳 䝳䝯 䝯䞁 䞁䝖 䝖䛰 䛰䛡 䛡䛷 䛷䛿 䛿䝢 䝢䞁 䞁䛸 䛸䛣 䛣䛺 䛺䛛 䛛䛳 䛳䛯 䛯ே ே䛾 䛾䛯 䛯䜑 䜑䛾 䛾 䛣 䛣䜜 䜜䛛 䛛䜙 䜙ጞ ጞ䜑 䜑䜛 䜛 React.jsධ ධ㛛 㛛
2. React.jsබ බᘧ ᘧWeb䝃 䝃䜲 䜲䝖 䝖 ⏬ീᘬ⏝ඖ䠄2020ᖺ5᭶14᪥᫬Ⅼ䠅䠖https://ja.reactjs.org/
4. ᝟ ᝟ሗ ሗ㔞 㔞ከ ከ䛩 䛩䛞 䛞
5. JSX䛸 䛸䛛 䛛≧ ≧ែ ែ䛸 䛸䛛 䛛䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䛸 䛸䛛 䛛䛺 䛺䜣 䜣䛾 䛾䛣 䛣䛸 䛸䛛 䛛䛥 䛥䛳 䛳䜁 䜁䜚 䜚
6. React.js䛸 䛸䛿 䛿䠛 䠛 䜒 䜒䛖 䛖ᑡ ᑡ䛧 䛧䚸 䚸䛛 䛛䜣 䜣䛯 䛯䜣 䜣䛻 䛻
7. 䝴䞊䝄䜲䞁䝍䞊䝣䜵䞊䝇ᵓ⠏䛾䛯䜑䛾JavaScript 䝷䜲䝤䝷䝸 䛂≧ែ䛃䛾ኚ᭦䜢䝖䝸䜺䞊䛻䚸 View䜢෌䝺䞁䝎䝸䞁䜾䠄෌ᥥ⏬䠅䛧䚸 ືⓗ䛷䝸䝑䝏䛺UI䜢ᐇ⌧䛩䜛 React.js䛸 䛸䛿 䛿
8. React䜢 䜢౑ ౑䛖 䛖䝯 䝯䝸 䝸䝑 䝑䝖 䝖 • 䝕䞊䝍䛾ኚ᭦䜢ඖ䛻View䠄DOM䠅䜢⏕ᡂ䚸ືⓗ 䛺UI䜢స䜜䜛 ◦ ᕪศ䜢᳨▱䚸㛵㐃䛩䜛㒊ศ䛰䛡䜢ຠ⋡ⓗ䛻᭦᪂ • HTML/CSS䛸JavaScript䜢䜎䛸䜑䛶᭩䛡䜛 ◦ ᚑ᮶䛾䜘䛖䛻㟼ⓗ䝨䞊䝆䛸ືⓗ䝻䝆䝑䜽䜢ศ䛡䜛ᚲせ䛜䛺䛔 • ୍ᗘᏛ⩦䛩䜜䜀䚸䛹䛣䛷䜒౑䛘䜛 ◦ 䝰䝞䜲䝹(ReactNative)䚸䝕䝇䜽䝖䝑䝥(Electron) Web䚸VR(React 360)
9. ᮏ ᮏ᪥ ᪥䛾 䛾䜻 䜻䞊 䞊䝽 䝽䞊 䞊䝗 䝗 • JSX䠋䝖䝷䞁䝇䝟䜲䝹 • 䝁䞁䝫䞊䝛䞁䝖 • ≧ែ䠄state, props) • 䝺䞁䝎䝸䞁䜾 • 䝷䜲䝣䝃䜲䜽䝹䝯䝋䝑䝗
10. 㡰 㡰␒ ␒䜢 䜢㏣ ㏣䛳 䛳䛶 䛶ㄝ ㄝ᫂ ᫂
11. HTML䝷䜲䜽䛺䝔䞁䝥䝺䞊䝖䜢JavaScript䛾୰䛻᭩䛡䜛 React䛾 䛾᭩ ᭩䛝 䛝᪉ ᪉ JSX䠄 䠄JavaScriptᵓ ᵓ ᩥ ᩥ䛾 䛾ᣑ ᣑᙇ ᙇ䠅 䠅䜢 ౑䛳䛶᭩䛛䜜䜛 JavaScript XML React䛿㛵ᩘ䛻Ώ䛩䝕䞊䝍䜢ኚ䛘䜛䛣䛸䛷䚸 䛭䛾㒔ᗘ䚸␗䛺䜛View(DOM䠅䛾⏕ᡂ䛜ྍ⬟
12. JSX䛿HTML䛷䜒JavaScript䛷䜒䛺䛔䛯䜑䚸 ᐇ㝿䛻䝤䝷䜴䝄䛷ື䛛䛩㝿䛻䛿 䝖 䝖䝷 䝷䞁 䞁䝇 䝇䝟 䝟䜲 䜲䝹 䝹䛜ᚲせ → JSX䛷᭩䛛䜜䛯ᘧ䜢⏕䛾JavaScript䛸䛧䛶ኚ᥮ 䛯 䛯䛰 䛰䛧 䛧
13. React䛿 䛿䛹 䛹䛖 䛖䜔 䜔䛳 䛳䛶 䛶 HTML䜢 䜢⏕ ⏕ᡂ ᡂ䛧 䛧䛶 䛶䛔 䛔䜛 䜛䛾 䛾䠛 䠛
14. ௬ ௬᝿ ᝿DOM䜢ᵓ⠏䛩䜛䛣䛸䛷 Web䝨䞊䝆䠄HTML䠅䜢⾲⌧
15. ᐇ㝿䛻Web䝨䞊䝆䛻⾲♧䛥䜜䜛䛣䛸䛾䛺䛔 ௬᝿䛾DOM → ᚑ᮶䛾Web䝨䞊䝆䛰䛸⏬㠃䜢ኚ᭦䛩䜛䛾䛻⾲♧䛥䜜䛶䛔䜛HTML(DOM)䜢 ┤᥋᭩䛝᥮䛘䛯䜚䛩䜛䛾䛷䝟䝣䜷䞊䝬䞁䝇䛜ᝏ䛔 ௬ ௬᝿ ᝿DOM䛸 䛸䛿 䛿䠛 䠛
16. 1. React䛜グ㏙䛥䜜䛯 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䜢ᇶ䛻௬ ௬᝿ ᝿DOM䜢 䜢ᵓ ᵓ⠏ ⠏ 2. ௬ ௬᝿ ᝿DOM䛛䜙HTML䜢⏕ᡂ 3. HTML䛜Web䝨䞊䝆䜢⾲⌧
17. 䛭 䛭䛖 䛖䛔 䛔䛘 䛘䜀 䜀䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䛳 䛳䛶 䛶䠛 䠛
18. component ྡモྍ⟬ྡモ a ᵓᡂせ⣲䠈ᡂศ 䛊of䛋. b䛊ᶵᲔ䞉䝇䝔䝺䜸䛺䛹䛾䛋ᵓᡂ㒊ศ䠈䝁䞁䝫(䞊䝛䞁䝖) 䛊of䛋.
19. UI䜢⊂❧䛧䛯෌฼⏝䛷䛝䜛㒊ရ䛻ศ๭䛧䛯䜒䛾 ௵ព䛾䝕䞊䝍䜢ཷ䛡ྲྀ䜚䚸 Reactせ⣲䠄⏬㠃ୖ䛻⾲♧䛧䛯䛔䜒䛾䠅䜢㏉䛩 React䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 㛵ᩘ䝁䞁䝫䞊䝛䞁䝖䛾౛ 䜽䝷䝇䝁䞁䝫䞊䝛䞁䝖䛾౛
20. సᡂ䛧䛯䝁䞁䝫䞊䝛䞁䝖䛿䚸ᐃ⩏䛧䛯ྡ⛠䜢౑䛔䚸䠍䛴䛾 Web䝟䞊䝒䛸䛧䛶෌฼⏝䛷䛝䜛 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䜢 䜢⤌ ⤌䜏 䜏ྜ ྜ䜟 䜟䛫 䛫䜛 䜛 JavaScript䛷స䜙䜜䛯䝁 䞁䝫䞊䝛䞁䝖䜢 HTML䝍䜾䛾䜘䛖䛻 ౑⏝䛷䛝䜛
21. 䛣 䛣䛣 䛣䛷 䛷䝸 䝸䝬 䝬䜲 䜲䞁 䞁䝗 䝗 䝕 䝕䞊 䞊䝍 䝍䛾 䛾ኚ ኚ᭦ ᭦䜢 䜢 ඖ ඖ䛻 䛻View䠄 䠄DOM䠅 䠅䜢 䜢⏕ ⏕ᡂ ᡂ 䛧 䛧䛶 䛶䛔 䛔䜛 䜛
22. 䛷 䛷䛿 䛿䚸 䚸 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䛾 䛾 䝕 䝕䞊 䞊䝍 䝍⟶ ⟶⌮ ⌮᪉ ᪉ἲ ἲ䛿 䛿䠛 䠛
23. 䝕 䝕䞊 䞊䝍 䝍䚷 䚷䠙 䠙䛂 䛂≧ ≧ែ ែ䛃 䛃 䛸䛧䛶䚸 䝁䞁䝫䞊䝛䞁䝖䛜ಖᣢ
24. ≧ែ䠄State䠅䛿䚸䝁䞁䝫䞊䝛䞁䝖⮬㌟䛜 ಖᣢ䛩䜛䝕䞊䝍䛾䛣䛸 setState(䈜1) 䝯䝋䝑䝗䜢౑䛔䚸 ≧ែ䠄state䠅䛾୰㌟䜢᭦᪂䛧䛶䛔䛟 䈜1 hooks API䛷䛿useState ≧ ≧ែ ែ䠄 䠄state䠅 䠅
25. 䠍䛴䛾䝁䞁䝫䞊䝛䞁䝖䛜ᣢ䛴䛂≧ែ䛃䜢 ู䛾䝁䞁䝫䞊䝛䞁䝖䛻Ώ䛧䛶฼⏝䛩䜛䛣䛸䜒ྍ⬟ ≧ ≧ែ ែ䛾 䛾ཷ ཷ䛡 䛡Ώ Ώ䛧 䛧䠄 䠄props䠅 䠅 Props State ぶ ぶ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 Ꮚ Ꮚ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 ぶ䛻Ώ䛥䜜䛯 State䛿Ꮚ䛾୰ 䛷props䛸䛧䛶 ౑䜟䜜䜛
26. 䛯 䛯䛸 䛸䛘 䛘䜀 䜀
27. e.g.) ≧ ≧ែ ែ䜢 䜢ᣢ ᣢ䛴 䛴䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 View 䐟State䛾ึᮇ್ 䚷countNum: 0 →᭱ึ䛾View 䛂⌧ᅾ䛾್䠖0䛃
28. e.g.) ≧ ≧ែ ែ䜢 䜢ᣢ ᣢ䛴 䛴䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 View 䐠䝪䝍䞁䛜ᢲ䛥䜜䛯᫬䚸 setState䛷≧ែ䛾୰䛾್䜢 countNum + 1 䛻᭦᪂䛩䜛 →View䛂⌧ᅾ䛾್䠖䠍䛃
29. e.g. ) ≧ ≧ែ ែ䛾 䛾 ཷ ཷ䛡 䛡Ώ Ώ䛧 䛧 ぶ ぶ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 Ꮚ Ꮚ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 䚷䐟ぶ䛾State䛜 䚷䐠Ꮚ䛻Ώ䛥䜜 䚷 䐟 䐟 䐠 䐠
30. Ꮚ Ꮚ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 䚷䐟ぶ䛾State䛜 䚷䐠Ꮚ䛻Ώ䛥䜜 䚷䐡props䛸䛧䛶 䚷䐢View䜢⏕ᡂ 䐟 䐟 䐠 䐠 䐡 䐡 䐢 䐢 e.g. ) ≧ ≧ែ ែ䛾 䛾 ཷ ཷ䛡 䛡Ώ Ώ䛧 䛧 ぶ ぶ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖
31. ぶ ぶᏊ Ꮚ㛵 㛵ಀ ಀ䛳 䛳䛶 䛶 DOM䛻 䛻䜒 䜒䛒 䛒䛳 䛳䛯 䛯䜘 䜘䛽 䛽䠛 䠛
32. React䜒DOM䛸ྠ䛨 䝒䝸䞊ᵓ㐀
33. DOM䝒 䝒䝸 䝸䞊 䞊ᵓ ᵓ㐀 㐀 body header section nav table footer tr tr a td td td td a a
34. React䝒 䝒䝸 䝸䞊 䞊ᵓ ᵓ㐀 㐀 body Header Content Nav Table Footer Tr Tr Link Td Td Td Td Item Item App (root䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䠅 䠅 䜂 䜂䛸 䛸䛴 䛴䜂 䜂䛸 䛸䛴 䛴䛜 䛜 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖
35. Root䝁䞁䝫䞊䝛䞁䝖䛜䝕䞊䝍(state)䜢ಖᣢ䚸 䛭䛾᝟ሗ䜢ᘬᩘprops䛸䛧䛶 ୖ䛛䜙ୗ䛻୍᪉ྥ䛻ὶ䛧䛶䛔䛟 React䛾 䛾䝕 䝕䞊 䞊䝍 䝍䛾 䛾ὶ ὶ䜜 䜜
36. State䛸 䛸Props Header Cont ent Nav Table Foot er Tr Tr Link Td Td Td Item Item Sign in Help Header䛻 䛻䛒 䛒䜛 䜛䚸 䚸Nav ⏝ ⏝䛾 䛾㓄 㓄ิ ิ䜢 䜢 䝟 䝟䝇 䝇䛧 䛧䜎 䜎䛩 䛩䟿 䟿 䠄 䠄䝞 䝞䜿 䜿䝒 䝒䝸 䝸䝺 䝺䞊 䞊䠅 䠅 Props (navs) Td App (root䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䠅 䠅 䝟䝇 䛧䜎䛩 (ᮍ ᮍ䝻 䝻䜾 䜾䜲 䜲䞁 䞁)
37. State䛸 䛸Props Header Cont ent Nav Table Foot er Tr Tr Link Td Td Td Item Item Header䛻 䛻䛒 䛒䜛 䜛䚸 䚸Nav ⏝ ⏝䛾 䛾㓄 㓄ิ ิ䜢 䜢 䝟 䝟䝇 䝇䛧 䛧䜎 䜎䛩 䛩䟿 䟿 䠄 䠄䝞 䝞䜿 䜿䝒 䝒䝸 䝸䝺 䝺䞊 䞊䠅 䠅 Props (navs) Td App (root䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䠅 䠅 䝟䝇 䛧䜎䛩 䝟䝇 䛧䜎䛩 Props (navs) Props (navs) ୰㌟䜢 Sign in 䛻䛧䜎䛩 ୰㌟䜢 Help 䛻䛧䜎䛩 Props (navs) (ᮍ ᮍ䝻 䝻䜾 䜾䜲 䜲䞁 䞁)
38. State䛸 䛸Props Header Nav Table Footer Tr Tr Link Td Td Td Item Item Props (navs) Td App (root䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䠅 䠅 ୰㌟䜢 Log out 䛻䛧䜎䛩 ୰㌟䛿 Help 䛾䜎䜎䛷䛩 React䛿 䛿䝕 䝕䞊 䞊䝍 䝍䛾 䛾 ኚ ኚ᭦ ᭦䜢 䜢᳨ ᳨▱ ▱䚸 䚸㛵 㛵㐃 㐃䛩 䛩䜛 䜛䝁 䝁 䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䛰 䛰䛡 䛡 䜢 䜢ຠ ຠ⋡ ⋡ⓗ ⓗ䛻 䛻᭦ ᭦᪂ ᪂䚸 䚸ᥥ ᥥ⏬ ⏬ Props (navs) Props (navs) 䝟䝇 䛧䜎䛩 䝟䝇 䛧䜎䛩 Log Out setState!! (䝻 䝻䜾 䜾䜲 䜲䞁 䞁)
39. 䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䛥 䛥䜜 䜜䜛 䜛䝍 䝍䜲 䜲䝭 䝭䞁 䞁䜾 䜾 䝁䞁䝫䞊䝛䞁䝖䛾ᣢ䛴䚸 state䛛 䛛props䠄 䠄≧ ≧ែ ែ䠅 䠅䛜 䛜ኚ ኚ᭦ ᭦䛥 䛥䜜 䜜䛯 䛯䛸 䛸䛝 䛝 → setState䜢䛝䛳䛛䛡䛻render()䛜ᐇ⾜䛥䜜䜛䠄෌䝺䞁䝎䝸䞁䜾䠅
40. 䜒 䜒䛖 䛖ᑡ ᑡ䛧 䛧ゝ ゝ䛖 䛖䛸 䛸
41. ᭱ ᭱ึ ึ䛾 䛾 䝨 䝨䞊 䞊䝆 䝆⾲ ⾲♧ ♧ 䠄 䠄䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐟 䐟 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 䞉 䞉 䞉 㠀 㠀⾲ ⾲♧ ♧ 䠄 䠄䝨 䝨䞊 䞊䝆 䝆㑄 㑄⛣ ⛣䚸 䚸䚷 䚷 䚷 䚷䚷 䚷᮲ ᮲௳ ௳⾲ ⾲♧ ♧➼ ➼䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐠 䐠 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐡 䐡 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 䝁䞁䝫䞊䝛䞁䝖䛿䚸 ᭱ึ䛾⾲♧ࠥ㠀⾲♧䛻䛺䜛䜎䛷䚸ఱᗘ䜒≧ែ䛾᭦᪂䛸䝺䞁䝎䝸䞁䜾䜢⾜䛖 →䛣䜜䛜䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䝷 䝷䜲 䜲䝣 䝣䝃 䝃䜲 䜲䜽 䜽䝹 䝹
42. getDerivedStateFromProps shouldComponentUpdate render componentDidUpdate Mounting Updating Unmounting constructor render componentWillUnMount 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䝷 䝷䜲 䜲䝣 䝣䝃 䝃䜲 䜲䜽 䜽䝹 䝹 componentDidMount Render 䝇 䝇䝔 䝔䞊 䞊䝆 䝆 Commit 䝇 䝇䝔 䝔䞊 䞊䝆 䝆 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䛾 䛾⏕ ⏕ᡂ ᡂ 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䛾 䛾◚ ◚Რ Რ ᭱ ᭱ึ ึ䛾 䛾 䝨 䝨䞊 䞊䝆 䝆⾲ ⾲♧ ♧ 䠄 䠄䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐟 䐟 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 䞉 䞉 䞉 㠀 㠀⾲ ⾲♧ ♧ 䠄 䠄䝨 䝨䞊 䞊䝆 䝆㑄 㑄⛣ ⛣䚸 䚸䚷 䚷 䚷 䚷䚷 䚷᮲ ᮲௳ ௳⾲ ⾲♧ ♧➼ ➼䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐠 䐠 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐡 䐡 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅
43. →䝷 䝷䜲 䜲䝣 䝣䝃 䝃䜲 䜲䜽 䜽䝹 䝹䝯 䝯䝋 䝋䝑 䝑䝗 䝗䝯 䝯䝋 䝋䝑 䝑䝗 䝗 • componentDidMount • componentDidUpdate • componentWillUnMount 䛺 䛺䛹 䛹 React䛾䝁䞁䝫䞊䝛䞁䝖䛿䛭䜜䛮䜜䝷䜲䝣䝃䜲䜽䝹䜢ᣢ䛱䚸 䛭䜜䛮䜜䛾䝷䜲䝣䝃䜲䜽䝹䛾䝍䜲䝭䞁䜾䛷௵ព䛾ฎ⌮䜢ᐇ⾜䛩䜛䛣䛸䛜䛷䛝䜛
44. 䜎 䜎䛸 䛸䜑 䜑
45. 䜻 䜻䞊 䞊䝽 䝽䞊 䞊䝗 䝗 • JSX䠋 䠋䝖 䝖䝷 䝷䞁 䞁䝇 䝇䝟 䝟䜲 䜲䝹 䝹 ◦ React䛿JSX䛷View䜢⾲⌧䚹䛭䜜䜢䝖䝷䞁䝇䝟䜲䝹䛧⏕䛾JavaScript䛻ኚ᥮ • 㛵 㛵ᩘ ᩘ䛸 䛸䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 ◦ ௵ព䛾䝕䞊䝍䜢ཷ䛡ྲྀ䜚䚸Reactせ⣲䜢㏉䛩㛵ᩘ䛷Web䛾䝟䞊䝒䜢స䜛 • ≧ ≧ែ ែ䠄 䠄state, props) ◦ ⮬ศ⮬㌟䛜ಖᣢ䛩䜛䝕䞊䝍䛜state䚹ぶ䛛䜙Ώ䛥䜜䜛䜒䛾䜢props䚹 • 䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾 ◦ 䝁䞁䝫䞊䝛䞁䝖䜢DOM䛻ᩚᙧ䛧ᥥ෗䛩䜛䛣䛸䚹≧ែ䛜᭦᪂䛥䜜䜛ᗘ⾜䜟䜜䜛 • 䝷 䝷䜲 䜲䝣 䝣䝃 䝃䜲 䜲䜽 䜽䝹 䝹 ◦ 䝁䞁䝫䞊䝛䞁䝖⏕ᡂࠥ◚Რ䜎䛷䛾ὶ䜜䚹ྛ䝍䜲䝭䞁䜾䛷౑䛘䜛䝯䝋䝑䝗䛜䛒䜛
46. 䝴䞊䝄䜲䞁䝍䞊䝣䜵䞊䝇ᵓ⠏䛾䛯䜑䛾JavaScript 䝷䜲䝤䝷䝸 䛂≧ែ䛃䛾ኚ᭦䜢䝖䝸䜺䞊䛻䚸 View䜢෌䝺䞁䝎䝸䞁䜾䠄෌ᥥ⏬䠅䛧䚸 ືⓗ䛷䝸䝑䝏䛺UI䜢ᐇ⌧䛩䜛 React.js䛸 䛸䛿 䛿
47. 䛒 䛒䜚 䜚䛜 䛜䛸 䛸䛖 䛖䛤 䛤䛦 䛦䛔 䛔䜎 䜎䛧 䛧䛯 䛯