$30 off During Our Annual Pro Sale. View Details »

今更聞けない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. Introduction •zuckey •developer at Yappli •React, PHP, Laravel •twitter: @zuckey_17

    •Podcastʮ͕͠ͳ͍ϥδΦʯύʔιφϦςΟʔ •https://shiganai.org
  2. 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Ҏ߱ͷ΋ͷΛϒϥ΢βʔͰಈ͘΋ͷʹτϥϯεύΠϧ
  3. Lifecycle Method •componentWillMount •ίϯϙʔωϯτ͕DOMπϦʔʹ௥Ճ͞ΕΔ௚લʹ1౓͚ͩݺ͹ΕΔ •ॳճඳը௚લͷfetchAPIͷϦΫΤετ͸ͪ͜Β •componentDidMount •ίϯϙʔωϯτ͕DOMπϦʔʹ௥Ճ͞Εͨ௚ޙʹ1౓͚ͩݺ͹ΕΔ •componentWillUpdate •props΍state͕มߋ͞ΕDOMπϦʔʹ൓ө͞ΕΔ௚લʹຖճݺ͹ΕΔ •componentDidUpdate

    •props΍state͕มߋ͞ΕDOMπϦʔʹ൓ө͞Εͨ௚ޙʹຖճݺ͹ΕΔ •ଞʹ΋༻్Ԡͯ͡LifecycleϝιουΛ࢖͏͜ͱ͕Ͱ͖Δ •ύϑΥʔϚϯενϡʔχϯάͷͨΊͷ
 shouldComponentUpdate •props͕৽͘͠มΘΔ࣌ʹΞφ΢ϯεతʹ͔ͭ͏ •componentWillRecieveProps
  4. ॳΊ·ͯ͠ͷޙʹ •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ͱ਌࿨ੑͷߴ͍ؔ਺ϥΠϒϥϦ