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

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

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

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

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

version1-workspace

May 14, 2020
Tweet

More Decks by version1-workspace

Other Decks in Programming

Transcript

  1. 䝗 䝗䜻 䜻䝳 䝳䝯 䝯䞁 䞁䝖 䝖䛰 䛰䛡 䛡䛷 䛷䛿

    䛿䝢 䝢䞁 䞁䛸 䛸䛣 䛣䛺 䛺䛛 䛛䛳 䛳䛯 䛯ே ே䛾 䛾䛯 䛯䜑 䜑䛾 䛾 䛣 䛣䜜 䜜䛛 䛛䜙 䜙ጞ ጞ䜑 䜑䜛 䜛 React.jsධ ධ㛛 㛛
  2. JSX䛸 䛸䛛 䛛≧ ≧ែ ែ䛸 䛸䛛 䛛䝺 䝺䞁 䞁䝎 䝎䝸

    䝸䞁 䞁䜾 䜾䛸 䛸䛛 䛛䛺 䛺䜣 䜣䛾 䛾䛣 䛣䛸 䛸䛛 䛛䛥 䛥䛳 䛳䜁 䜁䜚 䜚
  3. React䜢 䜢౑ ౑䛖 䛖䝯 䝯䝸 䝸䝑 䝑䝖 䝖 • 䝕䞊䝍䛾ኚ᭦䜢ඖ䛻View䠄DOM䠅䜢⏕ᡂ䚸ືⓗ

    䛺UI䜢స䜜䜛 ◦ ᕪศ䜢᳨▱䚸㛵㐃䛩䜛㒊ศ䛰䛡䜢ຠ⋡ⓗ䛻᭦᪂ • HTML/CSS䛸JavaScript䜢䜎䛸䜑䛶᭩䛡䜛 ◦ ᚑ᮶䛾䜘䛖䛻㟼ⓗ䝨䞊䝆䛸ືⓗ䝻䝆䝑䜽䜢ศ䛡䜛ᚲせ䛜䛺䛔 • ୍ᗘᏛ⩦䛩䜜䜀䚸䛹䛣䛷䜒౑䛘䜛 ◦ 䝰䝞䜲䝹(ReactNative)䚸䝕䝇䜽䝖䝑䝥(Electron) Web䚸VR(React 360)
  4. ᮏ ᮏ᪥ ᪥䛾 䛾䜻 䜻䞊 䞊䝽 䝽䞊 䞊䝗 䝗 •

    JSX䠋䝖䝷䞁䝇䝟䜲䝹 • 䝁䞁䝫䞊䝛䞁䝖 • ≧ែ䠄state, props) • 䝺䞁䝎䝸䞁䜾 • 䝷䜲䝣䝃䜲䜽䝹䝯䝋䝑䝗
  5. HTML䝷䜲䜽䛺䝔䞁䝥䝺䞊䝖䜢JavaScript䛾୰䛻᭩䛡䜛 React䛾 䛾᭩ ᭩䛝 䛝᪉ ᪉ JSX䠄 䠄JavaScriptᵓ ᵓ ᩥ

    ᩥ䛾 䛾ᣑ ᣑᙇ ᙇ䠅 䠅䜢 ౑䛳䛶᭩䛛䜜䜛 JavaScript XML React䛿㛵ᩘ䛻Ώ䛩䝕䞊䝍䜢ኚ䛘䜛䛣䛸䛷䚸 䛭䛾㒔ᗘ䚸␗䛺䜛View(DOM䠅䛾⏕ᡂ䛜ྍ⬟
  6. React䛿 䛿䛹 䛹䛖 䛖䜔 䜔䛳 䛳䛶 䛶 HTML䜢 䜢⏕ ⏕ᡂ

    ᡂ䛧 䛧䛶 䛶䛔 䛔䜛 䜛䛾 䛾䠛 䠛
  7. 1. React䛜グ㏙䛥䜜䛯 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䜢ᇶ䛻௬

    ௬᝿ ᝿DOM䜢 䜢ᵓ ᵓ⠏ ⠏ 2. ௬ ௬᝿ ᝿DOM䛛䜙HTML䜢⏕ᡂ 3. HTML䛜Web䝨䞊䝆䜢⾲⌧
  8. సᡂ䛧䛯䝁䞁䝫䞊䝛䞁䝖䛿䚸ᐃ⩏䛧䛯ྡ⛠䜢౑䛔䚸䠍䛴䛾 Web䝟䞊䝒䛸䛧䛶෌฼⏝䛷䛝䜛 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䜢

    䜢⤌ ⤌䜏 䜏ྜ ྜ䜟 䜟䛫 䛫䜛 䜛 JavaScript䛷స䜙䜜䛯䝁 䞁䝫䞊䝛䞁䝖䜢 HTML䝍䜾䛾䜘䛖䛻 ౑⏝䛷䛝䜛
  9. 䛣 䛣䛣 䛣䛷 䛷䝸 䝸䝬 䝬䜲 䜲䞁 䞁䝗 䝗 䝕

    䝕䞊 䞊䝍 䝍䛾 䛾ኚ ኚ᭦ ᭦䜢 䜢 ඖ ඖ䛻 䛻View䠄 䠄DOM䠅 䠅䜢 䜢⏕ ⏕ᡂ ᡂ 䛧 䛧䛶 䛶䛔 䛔䜛 䜛
  10. 䛷 䛷䛿 䛿䚸 䚸 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁

    䞁䝖 䝖䛾 䛾 䝕 䝕䞊 䞊䝍 䝍⟶ ⟶⌮ ⌮᪉ ᪉ἲ ἲ䛿 䛿䠛 䠛
  11. 䝕 䝕䞊 䞊䝍 䝍䚷 䚷䠙 䠙䛂 䛂≧ ≧ែ ែ䛃 䛃

    䛸䛧䛶䚸 䝁䞁䝫䞊䝛䞁䝖䛜ಖᣢ
  12. 䠍䛴䛾䝁䞁䝫䞊䝛䞁䝖䛜ᣢ䛴䛂≧ែ䛃䜢 ู䛾䝁䞁䝫䞊䝛䞁䝖䛻Ώ䛧䛶฼⏝䛩䜛䛣䛸䜒ྍ⬟ ≧ ≧ែ ែ䛾 䛾ཷ ཷ䛡 䛡Ώ Ώ䛧 䛧䠄

    䠄props䠅 䠅 Props State ぶ ぶ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 Ꮚ Ꮚ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 ぶ䛻Ώ䛥䜜䛯 State䛿Ꮚ䛾୰ 䛷props䛸䛧䛶 ౑䜟䜜䜛
  13. e.g.) ≧ ≧ែ ែ䜢 䜢ᣢ ᣢ䛴 䛴䝁 䝁䞁 䞁䝫 䝫䞊

    䞊䝛 䝛䞁 䞁䝖 䝖 View 䐟State䛾ึᮇ್ 䚷countNum: 0 →᭱ึ䛾View 䛂⌧ᅾ䛾್䠖0䛃
  14. e.g.) ≧ ≧ែ ែ䜢 䜢ᣢ ᣢ䛴 䛴䝁 䝁䞁 䞁䝫 䝫䞊

    䞊䝛 䝛䞁 䞁䝖 䝖 View 䐠䝪䝍䞁䛜ᢲ䛥䜜䛯᫬䚸 setState䛷≧ែ䛾୰䛾್䜢 countNum + 1 䛻᭦᪂䛩䜛 →View䛂⌧ᅾ䛾್䠖䠍䛃
  15. e.g. ) ≧ ≧ែ ែ䛾 䛾 ཷ ཷ䛡 䛡Ώ Ώ䛧

    䛧 ぶ ぶ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 Ꮚ Ꮚ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 䚷䐟ぶ䛾State䛜 䚷䐠Ꮚ䛻Ώ䛥䜜 䚷 䐟 䐟 䐠 䐠
  16. Ꮚ Ꮚ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 䚷䐟ぶ䛾State䛜

    䚷䐠Ꮚ䛻Ώ䛥䜜 䚷䐡props䛸䛧䛶 䚷䐢View䜢⏕ᡂ 䐟 䐟 䐠 䐠 䐡 䐡 䐢 䐢 e.g. ) ≧ ≧ែ ែ䛾 䛾 ཷ ཷ䛡 䛡Ώ Ώ䛧 䛧 ぶ ぶ䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖
  17. React䝒 䝒䝸 䝸䞊 䞊ᵓ ᵓ㐀 㐀 body Header Content Nav

    Table Footer Tr Tr Link Td Td Td Td Item Item App (root䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䠅 䠅 䜂 䜂䛸 䛸䛴 䛴䜂 䜂䛸 䛸䛴 䛴䛜 䛜 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖
  18. 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䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䠅 䠅 䝟䝇 䛧䜎䛩 (ᮍ ᮍ䝻 䝻䜾 䜾䜲 䜲䞁 䞁)
  19. 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) (ᮍ ᮍ䝻 䝻䜾 䜾䜲 䜲䞁 䞁)
  20. 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!! (䝻 䝻䜾 䜾䜲 䜲䞁 䞁)
  21. 䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䛥 䛥䜜 䜜䜛 䜛䝍

    䝍䜲 䜲䝭 䝭䞁 䞁䜾 䜾 䝁䞁䝫䞊䝛䞁䝖䛾ᣢ䛴䚸 state䛛 䛛props䠄 䠄≧ ≧ែ ែ䠅 䠅䛜 䛜ኚ ኚ᭦ ᭦䛥 䛥䜜 䜜䛯 䛯䛸 䛸䛝 䛝 → setState䜢䛝䛳䛛䛡䛻render()䛜ᐇ⾜䛥䜜䜛䠄෌䝺䞁䝎䝸䞁䜾䠅
  22. ᭱ ᭱ึ ึ䛾 䛾 䝨 䝨䞊 䞊䝆 䝆⾲ ⾲♧ ♧

    䠄 䠄䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐟 䐟 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 䞉 䞉 䞉 㠀 㠀⾲ ⾲♧ ♧ 䠄 䠄䝨 䝨䞊 䞊䝆 䝆㑄 㑄⛣ ⛣䚸 䚸䚷 䚷 䚷 䚷䚷 䚷᮲ ᮲௳ ௳⾲ ⾲♧ ♧➼ ➼䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐠 䐠 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐡 䐡 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 䝁䞁䝫䞊䝛䞁䝖䛿䚸 ᭱ึ䛾⾲♧ࠥ㠀⾲♧䛻䛺䜛䜎䛷䚸ఱᗘ䜒≧ែ䛾᭦᪂䛸䝺䞁䝎䝸䞁䜾䜢⾜䛖 →䛣䜜䛜䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䝷 䝷䜲 䜲䝣 䝣䝃 䝃䜲 䜲䜽 䜽䝹 䝹
  23. getDerivedStateFromProps shouldComponentUpdate render componentDidUpdate Mounting Updating Unmounting constructor render componentWillUnMount

    䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䝷 䝷䜲 䜲䝣 䝣䝃 䝃䜲 䜲䜽 䜽䝹 䝹 componentDidMount Render 䝇 䝇䝔 䝔䞊 䞊䝆 䝆 Commit 䝇 䝇䝔 䝔䞊 䞊䝆 䝆 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䛾 䛾⏕ ⏕ᡂ ᡂ 䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖䛾 䛾◚ ◚Რ Რ ᭱ ᭱ึ ึ䛾 䛾 䝨 䝨䞊 䞊䝆 䝆⾲ ⾲♧ ♧ 䠄 䠄䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐟 䐟 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 䞉 䞉 䞉 㠀 㠀⾲ ⾲♧ ♧ 䠄 䠄䝨 䝨䞊 䞊䝆 䝆㑄 㑄⛣ ⛣䚸 䚸䚷 䚷 䚷 䚷䚷 䚷᮲ ᮲௳ ௳⾲ ⾲♧ ♧➼ ➼䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐠 䐠 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅 ≧ ≧ែ ែ䛾 䛾᭦ ᭦᪂ ᪂䐡 䐡 䠄 䠄෌ ෌䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾䠅 䠅
  24. →䝷 䝷䜲 䜲䝣 䝣䝃 䝃䜲 䜲䜽 䜽䝹 䝹䝯 䝯䝋 䝋䝑

    䝑䝗 䝗䝯 䝯䝋 䝋䝑 䝑䝗 䝗 • componentDidMount • componentDidUpdate • componentWillUnMount 䛺 䛺䛹 䛹 React䛾䝁䞁䝫䞊䝛䞁䝖䛿䛭䜜䛮䜜䝷䜲䝣䝃䜲䜽䝹䜢ᣢ䛱䚸 䛭䜜䛮䜜䛾䝷䜲䝣䝃䜲䜽䝹䛾䝍䜲䝭䞁䜾䛷௵ព䛾ฎ⌮䜢ᐇ⾜䛩䜛䛣䛸䛜䛷䛝䜛
  25. 䜻 䜻䞊 䞊䝽 䝽䞊 䞊䝗 䝗 • JSX䠋 䠋䝖 䝖䝷

    䝷䞁 䞁䝇 䝇䝟 䝟䜲 䜲䝹 䝹 ◦ React䛿JSX䛷View䜢⾲⌧䚹䛭䜜䜢䝖䝷䞁䝇䝟䜲䝹䛧⏕䛾JavaScript䛻ኚ᥮ • 㛵 㛵ᩘ ᩘ䛸 䛸䝁 䝁䞁 䞁䝫 䝫䞊 䞊䝛 䝛䞁 䞁䝖 䝖 ◦ ௵ព䛾䝕䞊䝍䜢ཷ䛡ྲྀ䜚䚸Reactせ⣲䜢㏉䛩㛵ᩘ䛷Web䛾䝟䞊䝒䜢స䜛 • ≧ ≧ែ ែ䠄 䠄state, props) ◦ ⮬ศ⮬㌟䛜ಖᣢ䛩䜛䝕䞊䝍䛜state䚹ぶ䛛䜙Ώ䛥䜜䜛䜒䛾䜢props䚹 • 䝺 䝺䞁 䞁䝎 䝎䝸 䝸䞁 䞁䜾 䜾 ◦ 䝁䞁䝫䞊䝛䞁䝖䜢DOM䛻ᩚᙧ䛧ᥥ෗䛩䜛䛣䛸䚹≧ែ䛜᭦᪂䛥䜜䜛ᗘ⾜䜟䜜䜛 • 䝷 䝷䜲 䜲䝣 䝣䝃 䝃䜲 䜲䜽 䜽䝹 䝹 ◦ 䝁䞁䝫䞊䝛䞁䝖⏕ᡂࠥ◚Რ䜎䛷䛾ὶ䜜䚹ྛ䝍䜲䝭䞁䜾䛷౑䛘䜛䝯䝋䝑䝗䛜䛒䜛