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

今更聞けないReact

zuckey_17
October 07, 2017

 今更聞けないReact

初めてReact.jsを書く人向けにとりあえず書き始めるまでに覚えると良いこと、初めましての後にどういうことが待っているのかを話しました。

【リンク集】
React.js公式ページ
https://reactjs.org/

create-react-app
https://github.com/facebookincubator/create-react-app
https://qiita.com/chibicode/items/8533dd72f1ebaeb4b614

初めましての後に
- Webpack, babel
https://webpack.js.org/
https://babeljs.io

- TypeScript or FlowType
https://www.typescriptlang.org/
https://flow.org/

- react-router
https://reacttraining.com/react-router/

- redux
http://redux.js.org/

- immutable.js
https://facebook.github.io/immutable-js/

【宣伝】
しがないラジオWebページ
https://shiganai.org

zuckey_17

October 07, 2017
Tweet

More Decks by zuckey_17

Other Decks in Technology

Transcript

  1. ͍·͞Βฉ͚ͳ͍React
    @WEBΤϯδχΞษڧձ#03

    View full-size slide

  2. Introduction
    •zuckey
    •developer at Yappli
    •React, PHP, Laravel
    •twitter: @zuckey_17
    •Podcastʮ͕͠ͳ͍ϥδΦʯύʔιφϦςΟʔ
    •https://shiganai.org

    View full-size slide

  3. React
    A JavaScript library for building user interfaces

    https://reactjs.org/

    View full-size slide

  4. ࠓ೔࿩͢͜ͱ
    •ReactΛcreate-react-appΛ࢖ͬͯ৮ͬͯΈΔ
    •จ๏΋ͬ͘͟Γ঺հ
    •ॳΊ·ͯ͠ͷޙͷτϐοΫ঺հ

    View full-size slide

  5. React
    •JavaScriptͰUIΛॻͨ͘ΊͷϥΠϒϥϦ
    •͋͘·ͰUIͳͷͰϨϯμϦϯάઌ͸ԿͰ΋ྑ͍

    (ઐ༻ͷϥΠϒϥϦ͕ผʹ༻ҙ͞Ε͍ͯΔ)
    •DOM, Native, VR … Ի੠Λग़ྗ͍ͯ͠Δํ΋͍ͨΓ
    HTML, CSS
    iOS, Android
    VR
    etc…

    View full-size slide

  6. ReactͷΠϝʔδ






    DOMͰ͸ͳ͍ཁૉͷू·ΓΛ
    JSX(ޙग़)Ͱॻ͘
    DOMͱͯ͠ϨϯμϦϯά

    View full-size slide

  7. create-react-appʹΑΔReactͷ͸͡Ί͔ͨ
    •Node.jsΛΠϯετʔϧ (6.x ~)
    •create-react-app
    •$ npm install -g create-react-app
    •$ create-react-app { project name }
    •$ cd { project name }
    •$ npm start
    •※Babel
    •ECMAscript2015Ҏ߱ͷ΋ͷΛϒϥ΢βʔͰಈ͘΋ͷʹτϥϯεύΠϧ

    View full-size slide

  8. index.js
    ReactͰߏஙͨ͠Ծ૝తͳDOMπϦʔΛ

    DOMʹϨϯμϦϯά͍ͯ͠Δ

    View full-size slide

  9. JSX
    •React.createElement()ͷ౶ҥߏจ
    •ͳͲɺHTMLϥΠΫͳXMLͰهड़
    •classଐੑ͕classNameʹͳͬͨΓ
    •CSSΛJSΦϒδΣΫτͰॻ͍ͨΓ
    •React.render()ͱ͍͏Lifecycle MethodʹΑΓ

    มߋ͕React-DOMʹ௨஌ɺϨϯμϦϯά͞ΕΔ

    View full-size slide

  10. App.js
    ίϯϙʔωϯτ

    View full-size slide

  11. ίϯϙʔωϯτπϦʔ





    ίϯϙʔωϯτͷπϦʔΛDOMʹϨϯμϦϯά

    View full-size slide

  12. ίϯϙʔωϯτͱProps
    ଐੑΛܦ༝ͯ͠

    ஋ΛPropsͱͯ͠౉͢͜ͱ͕Ͱ͖Δ





    Props
    Props Props
    Props

    View full-size slide

  13. State
    ʮDOM͸Stateͷ
    ࣸ૾Ͱ͋Δʯ

    View full-size slide

  14. Stateͷมߋ
    stateͷมߋ͸setState()

    ϝιουܦ༝ͰͷΈՄೳ

    View full-size slide

  15. Lifecycle Method
    •Componentʹ͸ଟ͘ͷLifecycle
    Method͕ੜ͍͑ͯΔ
    •Ұ౓ϨϯμϦϯά͞ΕΔͱɺ

    setState΍৽ͨͳProps͕਌͔ΒΘ
    ͨ͞ΕΔͳͲʹΑͬͯ

    දࣔ͢΂͖஋͕มߋͨ࣌͠

    ͳͲʹ͜ΕΒͷϝιου͕ൃՐ͢Δ
    cf: https://tylermcginnis.com/an-introduction-to-life-cycle-
    events-in-react-js/

    View full-size slide

  16. Lifecycle Method
    cf: http://glassonion.hatenablog.com/entry/20120405/1333611664
    cf: http://glassonion.hatenablog.com/entry/20120405/1333611664

    View full-size slide

  17. Lifecycle Method
    •componentWillMount
    •ίϯϙʔωϯτ͕DOMπϦʔʹ௥Ճ͞ΕΔ௚લʹ1౓͚ͩݺ͹ΕΔ
    •ॳճඳը௚લͷfetchAPIͷϦΫΤετ͸ͪ͜Β
    •componentDidMount
    •ίϯϙʔωϯτ͕DOMπϦʔʹ௥Ճ͞Εͨ௚ޙʹ1౓͚ͩݺ͹ΕΔ
    •componentWillUpdate
    •props΍state͕มߋ͞ΕDOMπϦʔʹ൓ө͞ΕΔ௚લʹຖճݺ͹ΕΔ
    •componentDidUpdate
    •props΍state͕มߋ͞ΕDOMπϦʔʹ൓ө͞Εͨ௚ޙʹຖճݺ͹ΕΔ
    •ଞʹ΋༻్Ԡͯ͡LifecycleϝιουΛ࢖͏͜ͱ͕Ͱ͖Δ
    •ύϑΥʔϚϯενϡʔχϯάͷͨΊͷ

    shouldComponentUpdate
    •props͕৽͘͠มΘΔ࣌ʹΞφ΢ϯεతʹ͔ͭ͏
    •componentWillRecieveProps

    View full-size slide

  18. Lifecycle Method

    View full-size slide

  19. ॳΊ·ͯ͠ͷޙʹ
    •Webpack, Babel
    •https://webpack.js.org/
    •https://babeljs.io
    •࠷৽ͷ࢓༷ͰJSΛ͔͍ͯϒϥ΢βʹରԠͤ͞Δ
    •Ұ౓webpack.config.jsΛ͔͍ͯݟΔͱྑ͍͔΋
    •TypeScript or FlowType
    •https://www.typescriptlang.org/
    •https://flow.org/
    •JavaScriptʹ͸ͳ͍ܕఆٛΛར༻Մೳ
    •React-router
    •https://reacttraining.com/react-router/
    •SPAͷ୉ޣຯɺϋογϡΠϕϯτʹΑΓݟͨ໨Λมߋv4Ͱͷഁյతมߋʹ஫ҙ
    •Redux
    •http://redux.js.org/
    •େن໛ͳstate؅ཧΛ͢ΔͷʹσʔλͷྲྀΕΛ1ຊԽɺ·ͣ͸middlewareͳ͠Ͱ
    •Immutable.js
    •https://facebook.github.io/immutable-js/
    •Reactͱ਌࿨ੑͷߴ͍ؔ਺ϥΠϒϥϦ

    View full-size slide

  20. ·ͱΊ
    •React͸UIϥΠϒϥϦͰ͋Γɺ

    ఏڙ͞Ε͍ͯΔAPI͸͞΄Ͳଟ͘ͳ͍
    •Ұ౓֮͑Δͱٸʹָ͘͠ͳΔ
    •·ͣখ͘͞ॻ͍ͯΈΔʂSPA͚͕ͩReact׆༻
    ͡Όͳ͍ʂ
    •ٯʹݴ͏ͱଞͷϥΠϒϥϦͷબఆ͕ඞཁ
    •͜ͷ࿈ٳʹ৮ͬͯΈͯ͸͍͔͕Ͱ͠ΐ͏͔ʁ

    View full-size slide

  21. એ఻
    •https://shiganai.org
    •OSCA͞Μ΋ग़ԋ͞Ε͍ͯ·͢
    •sp.6aʲήετ: OSCAʳָ͍͠SIerͷ৽OSରԠ
    •sp.6bʲήετ: OSCAʳָ͍͠ຊ൪؀ڥϖΞϦϦʔε

    View full-size slide