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ධ
    ධ㛛

    View full-size slide

  2. React.jsබ
    බᘧ
    ᘧWeb䝃
    䝃䜲
    䜲䝖

    ⏬ീᘬ⏝ඖ䠄2020ᖺ5᭶14᪥᫬Ⅼ䠅䠖https://ja.reactjs.org/

    View full-size slide


  3. ᝟ሗ
    ሗ㔞
    㔞ከ
    ከ䛩
    䛩䛞

    View full-size slide

  4. JSX䛸
    䛸䛛
    䛛≧
    ≧ែ
    ែ䛸
    䛸䛛
    䛛䝺
    䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾
    䜾䛸
    䛸䛛
    䛛䛺
    䛺䜣
    䜣䛾
    䛾䛣
    䛣䛸
    䛸䛛
    䛛䛥
    䛥䛳
    䛳䜁
    䜁䜚

    View full-size slide

  5. React.js䛸
    䛸䛿
    䛿䠛


    䜒䛖
    䛖ᑡ
    ᑡ䛧
    䛧䚸
    䚸䛛
    䛛䜣
    䜣䛯
    䛯䜣
    䜣䛻

    View full-size slide

  6. 䝴䞊䝄䜲䞁䝍䞊䝣䜵䞊䝇ᵓ⠏䛾䛯䜑䛾JavaScript
    䝷䜲䝤䝷䝸
    䛂≧ែ䛃䛾ኚ᭦䜢䝖䝸䜺䞊䛻䚸
    View䜢෌䝺䞁䝎䝸䞁䜾䠄෌ᥥ⏬䠅䛧䚸
    ືⓗ䛷䝸䝑䝏䛺UI䜢ᐇ⌧䛩䜛
    React.js䛸
    䛸䛿

    View full-size slide

  7. React䜢
    䜢౑
    ౑䛖
    䛖䝯
    䝯䝸
    䝸䝑
    䝑䝖

    ● 䝕䞊䝍䛾ኚ᭦䜢ඖ䛻View䠄DOM䠅䜢⏕ᡂ䚸ືⓗ
    䛺UI䜢స䜜䜛
    ○ ᕪศ䜢᳨▱䚸㛵㐃䛩䜛㒊ศ䛰䛡䜢ຠ⋡ⓗ䛻᭦᪂
    ● HTML/CSS䛸JavaScript䜢䜎䛸䜑䛶᭩䛡䜛
    ○ ᚑ᮶䛾䜘䛖䛻㟼ⓗ䝨䞊䝆䛸ືⓗ䝻䝆䝑䜽䜢ศ䛡䜛ᚲせ䛜䛺䛔
    ● ୍ᗘᏛ⩦䛩䜜䜀䚸䛹䛣䛷䜒౑䛘䜛
    ○ 䝰䝞䜲䝹(ReactNative)䚸䝕䝇䜽䝖䝑䝥(Electron)
    Web䚸VR(React 360)

    View full-size slide


  8. ᮏ᪥
    ᪥䛾
    䛾䜻
    䜻䞊
    䞊䝽
    䝽䞊
    䞊䝗

    ● JSX䠋䝖䝷䞁䝇䝟䜲䝹
    ● 䝁䞁䝫䞊䝛䞁䝖
    ● ≧ែ䠄state, props)
    ● 䝺䞁䝎䝸䞁䜾
    ● 䝷䜲䝣䝃䜲䜽䝹䝯䝋䝑䝗

    View full-size slide


  9. 㡰␒
    ␒䜢
    䜢㏣
    ㏣䛳
    䛳䛶
    䛶ㄝ
    ㄝ᫂

    View full-size slide

  10. HTML䝷䜲䜽䛺䝔䞁䝥䝺䞊䝖䜢JavaScript䛾୰䛻᭩䛡䜛
    React䛾
    䛾᭩
    ᭩䛝
    䛝᪉

    JSX䠄
    䠄JavaScriptᵓ


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

    View full-size slide

  11. JSX䛿HTML䛷䜒JavaScript䛷䜒䛺䛔䛯䜑䚸
    ᐇ㝿䛻䝤䝷䜴䝄䛷ື䛛䛩㝿䛻䛿

    䝖䝷
    䝷䞁
    䞁䝇
    䝇䝟
    䝟䜲
    䜲䝹
    䝹䛜ᚲせ
    → JSX䛷᭩䛛䜜䛯ᘧ䜢⏕䛾JavaScript䛸䛧䛶ኚ᥮

    䛯䛰
    䛰䛧

    View full-size slide

  12. React䛿
    䛿䛹
    䛹䛖
    䛖䜔
    䜔䛳
    䛳䛶

    HTML䜢
    䜢⏕
    ⏕ᡂ
    ᡂ䛧
    䛧䛶
    䛶䛔
    䛔䜛
    䜛䛾
    䛾䠛

    View full-size slide


  13. ௬᝿
    ᝿DOM䜢ᵓ⠏䛩䜛䛣䛸䛷
    Web䝨䞊䝆䠄HTML䠅䜢⾲⌧

    View full-size slide

  14. ᐇ㝿䛻Web䝨䞊䝆䛻⾲♧䛥䜜䜛䛣䛸䛾䛺䛔
    ௬᝿䛾DOM
    → ᚑ᮶䛾Web䝨䞊䝆䛰䛸⏬㠃䜢ኚ᭦䛩䜛䛾䛻⾲♧䛥䜜䛶䛔䜛HTML(DOM)䜢
    ┤᥋᭩䛝᥮䛘䛯䜚䛩䜛䛾䛷䝟䝣䜷䞊䝬䞁䝇䛜ᝏ䛔

    ௬᝿
    ᝿DOM䛸
    䛸䛿
    䛿䠛

    View full-size slide

  15. 1. React䛜グ㏙䛥䜜䛯

    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖䜢ᇶ䛻௬
    ௬᝿
    ᝿DOM䜢
    䜢ᵓ
    ᵓ⠏

    2. ௬
    ௬᝿
    ᝿DOM䛛䜙HTML䜢⏕ᡂ
    3. HTML䛜Web䝨䞊䝆䜢⾲⌧

    View full-size slide


  16. 䛭䛖
    䛖䛔
    䛔䛘
    䛘䜀
    䜀䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖䛳
    䛳䛶
    䛶䠛

    View full-size slide

  17. component
    ྡモྍ⟬ྡモ
    a ᵓᡂせ⣲䠈ᡂศ 䛊of䛋.
    b䛊ᶵᲔ䞉䝇䝔䝺䜸䛺䛹䛾䛋ᵓᡂ㒊ศ䠈䝁䞁䝫(䞊䝛䞁䝖) 䛊of䛋.

    View full-size slide

  18. UI䜢⊂❧䛧䛯෌฼⏝䛷䛝䜛㒊ရ䛻ศ๭䛧䛯䜒䛾
    ௵ព䛾䝕䞊䝍䜢ཷ䛡ྲྀ䜚䚸
    Reactせ⣲䠄⏬㠃ୖ䛻⾲♧䛧䛯䛔䜒䛾䠅䜢㏉䛩
    React䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖

    㛵ᩘ䝁䞁䝫䞊䝛䞁䝖䛾౛ 䜽䝷䝇䝁䞁䝫䞊䝛䞁䝖䛾౛

    View full-size slide

  19. సᡂ䛧䛯䝁䞁䝫䞊䝛䞁䝖䛿䚸ᐃ⩏䛧䛯ྡ⛠䜢౑䛔䚸䠍䛴䛾
    Web䝟䞊䝒䛸䛧䛶෌฼⏝䛷䛝䜛

    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖䜢
    䜢⤌
    ⤌䜏
    䜏ྜ
    ྜ䜟
    䜟䛫
    䛫䜛

    JavaScript䛷స䜙䜜䛯䝁
    䞁䝫䞊䝛䞁䝖䜢
    HTML䝍䜾䛾䜘䛖䛻
    ౑⏝䛷䛝䜛

    View full-size slide


  20. 䛣䛣
    䛣䛷
    䛷䝸
    䝸䝬
    䝬䜲
    䜲䞁
    䞁䝗


    䝕䞊
    䞊䝍
    䝍䛾
    䛾ኚ
    ኚ᭦
    ᭦䜢


    ඖ䛻
    䛻View䠄
    䠄DOM䠅
    䠅䜢
    䜢⏕
    ⏕ᡂ


    䛧䛶
    䛶䛔
    䛔䜛

    View full-size slide


  21. 䛷䛿
    䛿䚸


    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖䛾


    䝕䞊
    䞊䝍
    䝍⟶
    ⟶⌮
    ⌮᪉
    ᪉ἲ
    ἲ䛿
    䛿䠛

    View full-size slide


  22. 䝕䞊
    䞊䝍
    䝍䚷
    䚷䠙
    䠙䛂
    䛂≧
    ≧ែ
    ែ䛃

    䛸䛧䛶䚸
    䝁䞁䝫䞊䝛䞁䝖䛜ಖᣢ

    View full-size slide

  23. ≧ែ䠄State䠅䛿䚸䝁䞁䝫䞊䝛䞁䝖⮬㌟䛜
    ಖᣢ䛩䜛䝕䞊䝍䛾䛣䛸
    setState(䈜1)
    䝯䝋䝑䝗䜢౑䛔䚸
    ≧ែ䠄state䠅䛾୰㌟䜢᭦᪂䛧䛶䛔䛟
    䈜1 hooks API䛷䛿useState

    ≧ែ
    ែ䠄
    䠄state䠅

    View full-size slide

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

    ≧ែ
    ែ䛾
    䛾ཷ
    ཷ䛡
    䛡Ώ
    Ώ䛧
    䛧䠄
    䠄props䠅

    Props
    State

    ぶ䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖 Ꮚ
    Ꮚ䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖

    ぶ䛻Ώ䛥䜜䛯
    State䛿Ꮚ䛾୰
    䛷props䛸䛧䛶
    ౑䜟䜜䜛

    View full-size slide


  25. 䛯䛸
    䛸䛘
    䛘䜀

    View full-size slide

  26. e.g.) ≧
    ≧ែ
    ែ䜢
    䜢ᣢ
    ᣢ䛴
    䛴䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖

    View
    䐟State䛾ึᮇ್
    䚷countNum: 0
    →᭱ึ䛾View
    䛂⌧ᅾ䛾್䠖0䛃

    View full-size slide

  27. e.g.) ≧
    ≧ែ
    ែ䜢
    䜢ᣢ
    ᣢ䛴
    䛴䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖

    View
    䐠䝪䝍䞁䛜ᢲ䛥䜜䛯᫬䚸
    setState䛷≧ែ䛾୰䛾್䜢
    countNum + 1 䛻᭦᪂䛩䜛
    →View䛂⌧ᅾ䛾್䠖䠍䛃

    View full-size slide

  28. e.g. ) ≧
    ≧ែ
    ែ䛾


    ཷ䛡
    䛡Ώ
    Ώ䛧


    ぶ䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖


    Ꮚ䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖

    䚷䐟ぶ䛾State䛜
    䚷䐠Ꮚ䛻Ώ䛥䜜





    View full-size slide


  29. Ꮚ䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖

    䚷䐟ぶ䛾State䛜
    䚷䐠Ꮚ䛻Ώ䛥䜜
    䚷䐡props䛸䛧䛶
    䚷䐢View䜢⏕ᡂ








    e.g. ) ≧
    ≧ែ
    ែ䛾


    ཷ䛡
    䛡Ώ
    Ώ䛧


    ぶ䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖

    View full-size slide


  30. ぶᏊ
    Ꮚ㛵
    㛵ಀ
    ಀ䛳
    䛳䛶

    DOM䛻
    䛻䜒
    䜒䛒
    䛒䛳
    䛳䛯
    䛯䜘
    䜘䛽
    䛽䠛

    View full-size slide

  31. React䜒DOM䛸ྠ䛨
    䝒䝸䞊ᵓ㐀

    View full-size slide

  32. DOM䝒
    䝒䝸
    䝸䞊
    䞊ᵓ
    ᵓ㐀

    body
    header section
    nav table
    footer
    tr tr
    a
    td td td
    td
    a a

    View full-size slide

  33. React䝒
    䝒䝸
    䝸䞊
    䞊ᵓ
    ᵓ㐀

    body
    Header Content
    Nav Table
    Footer
    Tr Tr
    Link
    Td Td Td
    Td
    Item Item
    App
    (root䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖䠅


    䜂䛸
    䛸䛴
    䛴䜂
    䜂䛸
    䛸䛴
    䛴䛜


    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖

    View full-size slide

  34. Root䝁䞁䝫䞊䝛䞁䝖䛜䝕䞊䝍(state)䜢ಖᣢ䚸
    䛭䛾᝟ሗ䜢ᘬᩘprops䛸䛧䛶
    ୖ䛛䜙ୗ䛻୍᪉ྥ䛻ὶ䛧䛶䛔䛟
    React䛾
    䛾䝕
    䝕䞊
    䞊䝍
    䝍䛾
    䛾ὶ
    ὶ䜜

    View full-size slide

  35. 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䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖䠅

    䝟䝇
    䛧䜎䛩
    (ᮍ
    ᮍ䝻
    䝻䜾
    䜾䜲
    䜲䞁
    䞁)

    View full-size slide

  36. 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)
    (ᮍ
    ᮍ䝻
    䝻䜾
    䜾䜲
    䜲䞁
    䞁)

    View full-size slide

  37. 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!!
    (䝻
    䝻䜾
    䜾䜲
    䜲䞁
    䞁)

    View full-size slide


  38. 䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾
    䜾䛥
    䛥䜜
    䜜䜛
    䜛䝍
    䝍䜲
    䜲䝭
    䝭䞁
    䞁䜾

    䝁䞁䝫䞊䝛䞁䝖䛾ᣢ䛴䚸
    state䛛
    䛛props䠄
    䠄≧
    ≧ែ
    ែ䠅
    䠅䛜
    䛜ኚ
    ኚ᭦
    ᭦䛥
    䛥䜜
    䜜䛯
    䛯䛸
    䛸䛝

    → setState䜢䛝䛳䛛䛡䛻render()䛜ᐇ⾜䛥䜜䜛䠄෌䝺䞁䝎䝸䞁䜾䠅

    View full-size slide


  39. 䜒䛖
    䛖ᑡ
    ᑡ䛧
    䛧ゝ
    ゝ䛖
    䛖䛸

    View full-size slide


  40. ᭱ึ
    ึ䛾


    䝨䞊
    䞊䝆
    䝆⾲
    ⾲♧


    䠄䝺
    䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾
    䜾䠅


    ≧ែ
    ែ䛾
    䛾᭦
    ᭦᪂
    ᪂䐟


    䠄෌
    ෌䝺
    䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾
    䜾䠅





    㠀⾲
    ⾲♧


    䠄䝨
    䝨䞊
    䞊䝆
    䝆㑄
    㑄⛣
    ⛣䚸
    䚸䚷


    䚷䚷
    䚷᮲
    ᮲௳
    ௳⾲
    ⾲♧
    ♧➼
    ➼䠅


    ≧ែ
    ែ䛾
    䛾᭦
    ᭦᪂
    ᪂䐠


    䠄෌
    ෌䝺
    䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾
    䜾䠅


    ≧ែ
    ែ䛾
    䛾᭦
    ᭦᪂
    ᪂䐡


    䠄෌
    ෌䝺
    䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾
    䜾䠅

    䝁䞁䝫䞊䝛䞁䝖䛿䚸
    ᭱ึ䛾⾲♧ࠥ㠀⾲♧䛻䛺䜛䜎䛷䚸ఱᗘ䜒≧ែ䛾᭦᪂䛸䝺䞁䝎䝸䞁䜾䜢⾜䛖
    →䛣䜜䛜䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖䝷
    䝷䜲
    䜲䝣
    䝣䝃
    䝃䜲
    䜲䜽
    䜽䝹

    View full-size slide

  41. getDerivedStateFromProps
    shouldComponentUpdate
    render
    componentDidUpdate
    Mounting Updating Unmounting
    constructor
    render
    componentWillUnMount

    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖䝷
    䝷䜲
    䜲䝣
    䝣䝃
    䝃䜲
    䜲䜽
    䜽䝹

    componentDidMount
    Render

    䝇䝔
    䝔䞊
    䞊䝆

    Commit

    䝇䝔
    䝔䞊
    䞊䝆


    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖䛾
    䛾⏕
    ⏕ᡂ
    ᡂ 䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖
    䝖䛾
    䛾◚
    ◚Რ


    ᭱ึ
    ึ䛾


    䝨䞊
    䞊䝆
    䝆⾲
    ⾲♧


    䠄䝺
    䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾
    䜾䠅


    ≧ែ
    ែ䛾
    䛾᭦
    ᭦᪂
    ᪂䐟


    䠄෌
    ෌䝺
    䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾
    䜾䠅





    㠀⾲
    ⾲♧


    䠄䝨
    䝨䞊
    䞊䝆
    䝆㑄
    㑄⛣
    ⛣䚸
    䚸䚷


    䚷䚷
    䚷᮲
    ᮲௳
    ௳⾲
    ⾲♧
    ♧➼
    ➼䠅


    ≧ែ
    ែ䛾
    䛾᭦
    ᭦᪂
    ᪂䐠


    䠄෌
    ෌䝺
    䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾
    䜾䠅


    ≧ែ
    ែ䛾
    䛾᭦
    ᭦᪂
    ᪂䐡


    䠄෌
    ෌䝺
    䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾
    䜾䠅

    View full-size slide

  42. →䝷
    䝷䜲
    䜲䝣
    䝣䝃
    䝃䜲
    䜲䜽
    䜽䝹
    䝹䝯
    䝯䝋
    䝋䝑
    䝑䝗
    䝗䝯
    䝯䝋
    䝋䝑
    䝑䝗

    ● componentDidMount
    ● componentDidUpdate
    ● componentWillUnMount

    䛺䛹

    React䛾䝁䞁䝫䞊䝛䞁䝖䛿䛭䜜䛮䜜䝷䜲䝣䝃䜲䜽䝹䜢ᣢ䛱䚸
    䛭䜜䛮䜜䛾䝷䜲䝣䝃䜲䜽䝹䛾䝍䜲䝭䞁䜾䛷௵ព䛾ฎ⌮䜢ᐇ⾜䛩䜛䛣䛸䛜䛷䛝䜛

    View full-size slide


  43. 䜎䛸
    䛸䜑

    View full-size slide


  44. 䜻䞊
    䞊䝽
    䝽䞊
    䞊䝗

    ● JSX䠋
    䠋䝖
    䝖䝷
    䝷䞁
    䞁䝇
    䝇䝟
    䝟䜲
    䜲䝹

    ○ React䛿JSX䛷View䜢⾲⌧䚹䛭䜜䜢䝖䝷䞁䝇䝟䜲䝹䛧⏕䛾JavaScript䛻ኚ᥮
    ● 㛵
    㛵ᩘ
    ᩘ䛸
    䛸䝁
    䝁䞁
    䞁䝫
    䝫䞊
    䞊䝛
    䝛䞁
    䞁䝖

    ○ ௵ព䛾䝕䞊䝍䜢ཷ䛡ྲྀ䜚䚸Reactせ⣲䜢㏉䛩㛵ᩘ䛷Web䛾䝟䞊䝒䜢స䜛
    ● ≧
    ≧ែ
    ែ䠄
    䠄state, props)
    ○ ⮬ศ⮬㌟䛜ಖᣢ䛩䜛䝕䞊䝍䛜state䚹ぶ䛛䜙Ώ䛥䜜䜛䜒䛾䜢props䚹
    ● 䝺
    䝺䞁
    䞁䝎
    䝎䝸
    䝸䞁
    䞁䜾

    ○ 䝁䞁䝫䞊䝛䞁䝖䜢DOM䛻ᩚᙧ䛧ᥥ෗䛩䜛䛣䛸䚹≧ែ䛜᭦᪂䛥䜜䜛ᗘ⾜䜟䜜䜛
    ● 䝷
    䝷䜲
    䜲䝣
    䝣䝃
    䝃䜲
    䜲䜽
    䜽䝹

    ○ 䝁䞁䝫䞊䝛䞁䝖⏕ᡂࠥ◚Რ䜎䛷䛾ὶ䜜䚹ྛ䝍䜲䝭䞁䜾䛷౑䛘䜛䝯䝋䝑䝗䛜䛒䜛

    View full-size slide

  45. 䝴䞊䝄䜲䞁䝍䞊䝣䜵䞊䝇ᵓ⠏䛾䛯䜑䛾JavaScript
    䝷䜲䝤䝷䝸
    䛂≧ែ䛃䛾ኚ᭦䜢䝖䝸䜺䞊䛻䚸
    View䜢෌䝺䞁䝎䝸䞁䜾䠄෌ᥥ⏬䠅䛧䚸
    ືⓗ䛷䝸䝑䝏䛺UI䜢ᐇ⌧䛩䜛
    React.js䛸
    䛸䛿

    View full-size slide


  46. 䛒䜚
    䜚䛜
    䛜䛸
    䛸䛖
    䛖䛤
    䛤䛦
    䛦䛔
    䛔䜎
    䜎䛧
    䛧䛯

    View full-size slide