Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
͍·͞Βฉ͚ͳ͍React @WEBΤϯδχΞษڧձ#03
Slide 2
Slide 2 text
Introduction •zuckey •developer at Yappli •React, PHP, Laravel •twitter: @zuckey_17 •Podcastʮ͕͠ͳ͍ϥδΦʯύʔιφϦςΟʔ •https://shiganai.org
Slide 3
Slide 3 text
React A JavaScript library for building user interfaces https://reactjs.org/
Slide 4
Slide 4 text
ࠓ͢͜ͱ •ReactΛcreate-react-appΛͬͯ৮ͬͯΈΔ •จ๏ͬ͘͟Γհ •ॳΊ·ͯ͠ͷޙͷτϐοΫհ
Slide 5
Slide 5 text
React •JavaScriptͰUIΛॻͨ͘ΊͷϥΠϒϥϦ •͋͘·ͰUIͳͷͰϨϯμϦϯάઌԿͰྑ͍ (ઐ༻ͷϥΠϒϥϦ͕ผʹ༻ҙ͞Ε͍ͯΔ) •DOM, Native, VR … ԻΛग़ྗ͍ͯ͠Δํ͍ͨΓ HTML, CSS iOS, Android VR etc…
Slide 6
Slide 6 text
ReactͷΠϝʔδ
DOMͰͳ͍ཁૉͷू·ΓΛ JSX(ޙग़)Ͱॻ͘ DOMͱͯ͠ϨϯμϦϯά
Slide 7
Slide 7 text
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Ҏ߱ͷͷΛϒϥβʔͰಈ͘ͷʹτϥϯεύΠϧ
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
JSΛॻ͘
Slide 10
Slide 10 text
index.js ReactͰߏஙͨ͠ԾతͳDOMπϦʔΛ DOMʹϨϯμϦϯά͍ͯ͠Δ
Slide 11
Slide 11 text
App.js JSX
Slide 12
Slide 12 text
JSX •React.createElement()ͷҥߏจ •
ͳͲɺHTMLϥΠΫͳXMLͰهड़ •classଐੑ͕classNameʹͳͬͨΓ •CSSΛJSΦϒδΣΫτͰॻ͍ͨΓ •React.render()ͱ͍͏Lifecycle MethodʹΑΓ มߋ͕React-DOMʹ௨ɺϨϯμϦϯά͞ΕΔ
Slide 13
Slide 13 text
App.js JSX
Slide 14
Slide 14 text
App.js ίϯϙʔωϯτ
Slide 15
Slide 15 text
ίϯϙʔωϯτπϦʔ ίϯϙʔωϯτͷπϦʔΛDOMʹϨϯμϦϯά
Slide 16
Slide 16 text
ίϯϙʔωϯτͱProps ଐੑΛܦ༝ͯ͠ ΛPropsͱͯ͢͜͠ͱ͕Ͱ͖Δ Props Props Props Props
Slide 17
Slide 17 text
State ʮDOMStateͷ ࣸ૾Ͱ͋Δʯ
Slide 18
Slide 18 text
Stateͷมߋ stateͷมߋsetState() ϝιουܦ༝ͰͷΈՄೳ
Slide 19
Slide 19 text
Lifecycle Method •Componentʹଟ͘ͷLifecycle Method͕ੜ͍͑ͯΔ •ҰϨϯμϦϯά͞ΕΔͱɺ setState৽ͨͳProps͕͔ΒΘ ͨ͞ΕΔͳͲʹΑͬͯ ද͖͕ࣔ͢มߋͨ࣌͠ ͳͲʹ͜ΕΒͷϝιου͕ൃՐ͢Δ cf: https://tylermcginnis.com/an-introduction-to-life-cycle- events-in-react-js/
Slide 20
Slide 20 text
Lifecycle Method cf: http://glassonion.hatenablog.com/entry/20120405/1333611664 cf: http://glassonion.hatenablog.com/entry/20120405/1333611664
Slide 21
Slide 21 text
Lifecycle Method •componentWillMount •ίϯϙʔωϯτ͕DOMπϦʔʹՃ͞ΕΔલʹ1͚ͩݺΕΔ •ॳճඳըલͷfetchAPIͷϦΫΤετͪ͜Β •componentDidMount •ίϯϙʔωϯτ͕DOMπϦʔʹՃ͞Εͨޙʹ1͚ͩݺΕΔ •componentWillUpdate •propsstate͕มߋ͞ΕDOMπϦʔʹө͞ΕΔલʹຖճݺΕΔ •componentDidUpdate •propsstate͕มߋ͞ΕDOMπϦʔʹө͞ΕͨޙʹຖճݺΕΔ •ଞʹ༻్Ԡͯ͡LifecycleϝιουΛ͏͜ͱ͕Ͱ͖Δ •ύϑΥʔϚϯενϡʔχϯάͷͨΊͷ shouldComponentUpdate •props͕৽͘͠มΘΔ࣌ʹΞφϯεతʹ͔ͭ͏ •componentWillRecieveProps
Slide 22
Slide 22 text
Lifecycle Method
Slide 23
Slide 23 text
ॳΊ·ͯ͠ͷޙʹ •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ͱੑͷߴ͍ؔϥΠϒϥϦ
Slide 24
Slide 24 text
·ͱΊ •ReactUIϥΠϒϥϦͰ͋Γɺ ఏڙ͞Ε͍ͯΔAPI͞΄Ͳଟ͘ͳ͍ •Ұ֮͑Δͱٸʹָ͘͠ͳΔ •·ͣখ͘͞ॻ͍ͯΈΔʂSPA͚͕ͩReact׆༻ ͡Όͳ͍ʂ •ٯʹݴ͏ͱଞͷϥΠϒϥϦͷબఆ͕ඞཁ •͜ͷ࿈ٳʹ৮ͬͯΈ͍͔͕ͯͰ͠ΐ͏͔ʁ
Slide 25
Slide 25 text
એ •https://shiganai.org •OSCA͞Μग़ԋ͞Ε͍ͯ·͢ •sp.6aʲήετ: OSCAʳָ͍͠SIerͷ৽OSରԠ •sp.6bʲήετ: OSCAʳָ͍͠ຊ൪ڥϖΞϦϦʔε