今更聞けないReact

0892871036578feecfa18893d1062e6d?s=47 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

0892871036578feecfa18893d1062e6d?s=128

zuckey_17

October 07, 2017
Tweet

Transcript

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

  2. Introduction •zuckey •developer at Yappli •React, PHP, Laravel •twitter: @zuckey_17

    •Podcastʮ͕͠ͳ͍ϥδΦʯύʔιφϦςΟʔ •https://shiganai.org
  3. React A JavaScript library for building user interfaces
 https://reactjs.org/

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

  5. React •JavaScriptͰUIΛॻͨ͘ΊͷϥΠϒϥϦ •͋͘·ͰUIͳͷͰϨϯμϦϯάઌ͸ԿͰ΋ྑ͍
 (ઐ༻ͷϥΠϒϥϦ͕ผʹ༻ҙ͞Ε͍ͯΔ) •DOM, Native, VR … Ի੠Λग़ྗ͍ͯ͠Δํ΋͍ͨΓ HTML,

    CSS iOS, Android VR etc…
  6. ReactͷΠϝʔδ <div> <p> <div> <input> <p> <span> DOMͰ͸ͳ͍ཁૉͷू·ΓΛ JSX(ޙग़)Ͱॻ͘ DOMͱͯ͠ϨϯμϦϯά

  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Ҏ߱ͷ΋ͷΛϒϥ΢βʔͰಈ͘΋ͷʹτϥϯεύΠϧ
  8. None
  9. JSΛॻ͘

  10. index.js ReactͰߏஙͨ͠Ծ૝తͳDOMπϦʔΛ
 DOMʹϨϯμϦϯά͍ͯ͠Δ

  11. App.js JSX

  12. JSX •React.createElement()ͷ౶ҥߏจ •<h1></h1>ͳͲɺHTMLϥΠΫͳXMLͰهड़ •classଐੑ͕classNameʹͳͬͨΓ •CSSΛJSΦϒδΣΫτͰॻ͍ͨΓ •React.render()ͱ͍͏Lifecycle MethodʹΑΓ
 มߋ͕React-DOMʹ௨஌ɺϨϯμϦϯά͞ΕΔ

  13. App.js JSX

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

  15. ίϯϙʔωϯτπϦʔ <App> <TaskListItem> <TaskList> <Pagenator> <TaskForm> ίϯϙʔωϯτͷπϦʔΛDOMʹϨϯμϦϯά

  16. ίϯϙʔωϯτͱProps ଐੑΛܦ༝ͯ͠
 ஋ΛPropsͱͯ͠౉͢͜ͱ͕Ͱ͖Δ <App> <TaskListItem> <TaskList> <Pagenator> <TaskForm> Props Props

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

  18. Stateͷมߋ stateͷมߋ͸setState()
 ϝιουܦ༝ͰͷΈՄೳ

  19. Lifecycle Method •Componentʹ͸ଟ͘ͷLifecycle Method͕ੜ͍͑ͯΔ •Ұ౓ϨϯμϦϯά͞ΕΔͱɺ
 setState΍৽ͨͳProps͕਌͔ΒΘ ͨ͞ΕΔͳͲʹΑͬͯ
 දࣔ͢΂͖஋͕มߋͨ࣌͠
 ͳͲʹ͜ΕΒͷϝιου͕ൃՐ͢Δ cf:

    https://tylermcginnis.com/an-introduction-to-life-cycle- events-in-react-js/
  20. Lifecycle Method cf: http://glassonion.hatenablog.com/entry/20120405/1333611664 cf: http://glassonion.hatenablog.com/entry/20120405/1333611664

  21. Lifecycle Method •componentWillMount •ίϯϙʔωϯτ͕DOMπϦʔʹ௥Ճ͞ΕΔ௚લʹ1౓͚ͩݺ͹ΕΔ •ॳճඳը௚લͷfetchAPIͷϦΫΤετ͸ͪ͜Β •componentDidMount •ίϯϙʔωϯτ͕DOMπϦʔʹ௥Ճ͞Εͨ௚ޙʹ1౓͚ͩݺ͹ΕΔ •componentWillUpdate •props΍state͕มߋ͞ΕDOMπϦʔʹ൓ө͞ΕΔ௚લʹຖճݺ͹ΕΔ •componentDidUpdate

    •props΍state͕มߋ͞ΕDOMπϦʔʹ൓ө͞Εͨ௚ޙʹຖճݺ͹ΕΔ •ଞʹ΋༻్Ԡͯ͡LifecycleϝιουΛ࢖͏͜ͱ͕Ͱ͖Δ •ύϑΥʔϚϯενϡʔχϯάͷͨΊͷ
 shouldComponentUpdate •props͕৽͘͠มΘΔ࣌ʹΞφ΢ϯεతʹ͔ͭ͏ •componentWillRecieveProps
  22. Lifecycle Method

  23. ॳΊ·ͯ͠ͷޙʹ •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ͱ਌࿨ੑͷߴ͍ؔ਺ϥΠϒϥϦ
  24. ·ͱΊ •React͸UIϥΠϒϥϦͰ͋Γɺ
 ఏڙ͞Ε͍ͯΔAPI͸͞΄Ͳଟ͘ͳ͍ •Ұ౓֮͑Δͱٸʹָ͘͠ͳΔ •·ͣখ͘͞ॻ͍ͯΈΔʂSPA͚͕ͩReact׆༻ ͡Όͳ͍ʂ •ٯʹݴ͏ͱଞͷϥΠϒϥϦͷબఆ͕ඞཁ •͜ͷ࿈ٳʹ৮ͬͯΈͯ͸͍͔͕Ͱ͠ΐ͏͔ʁ

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