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

怖くないReact

391ed5f8562a797f010ec510b65075d7?s=47 Nokogiri
April 16, 2017

 怖くないReact

2017年4月19日 ReactHandon イベント向けのPPT

中で紹介しているレポジトリ
https://github.com/nokogiring/ReactLogoGenerator

391ed5f8562a797f010ec510b65075d7?s=128

Nokogiri

April 16, 2017
Tweet

More Decks by Nokogiri

Other Decks in Technology

Transcript

  1. ා͘ͳ͍React @nokogiri ॳ৺ऀ޲͚React ϋϯζΦϯ

  2. Nokogiri Job: SIer I — JS , Ruby ,Java and

    Design. ͸͡Ί·ͯ͠
  3. Nokogiri Job: SIer I — JS , Ruby ,Java and

    Design. ͸͡Ί·ͯ͠ https://nokogiring.github.io/
  4. ͱΓ͋͑ͣReactʹ৮ͬͯΈΔ ReactͷϝϦοτΛ஌Δ ≠DOMૢ࡞ͳJSΛ஌Δ ࠓ೔΍Γ͍ͨ͜ͱ

  5. ͱΓ͋͑ͣReactʹ৮ͬͯΈΔ ReactͷϝϦοτΛ஌Δ ≠DOMૢ࡞ͳJSΛ஌Δ ࠓ೔΍Γ͍ͨ͜ͱ ͳΜ͔೉ͦ͠͏ͱࢥ͍ͬͯΔ React΁ͷڪාΛऔΓআ͘

  6. ࠓ೔΍Βͳ͍͜ͱ ։ൃ؀ڥߏஙͷखॱ ES2015ͷઆ໌ ଞͷϥΠϒϥϦͱͷൺֱ jQueryσΟεΓ

  7. What’s React ?

  8. Facebook੡ͷJavascriptϥΠϒϥϦ એݴతɾίϯϙʔωϯτࢦ޲ɾҰ౓ֶͿͱͲ͜Ͱ΋ ͔͚Δ ʮԾ૷DOMʯʹΑΔߴ଎ͳϨϯμϦϯά What’s React ?

  9. Facebook੡ͷJavascriptϥΠϒϥϦ એݴతɾίϯϙʔωϯτࢦ޲ɾҰ౓ֶͿͱͲ͜Ͱ΋ ͔͚Δ ʮԾ૷DOMʯʹΑΔߴ଎ͳϨϯμϦϯά ͱʹ͔͘ྲྀߦͬͯΔ What’s React ?

  10. None
  11. Hello World

  12. // ೚ҙͷϑΥϧμʹҠಈ cd Desktop // Ϋϩʔϯ git clone https://github.com/nokogiring/ReactLogoGenerator.git //

    தʹҠಈ cd ReactLogoGenerator // ϞδϡʔϧͷΠϯετʔϧ npm i // Script࣮ߦ npm start Hello World https://github.com/nokogiring/ReactLogoGenerator
  13. Hello World ϒϥ΢βͰ http://localhost:3000 ʹΞΫηε

  14. ղઆ

  15. ~লུ~ <body> <div id="root"></div> <script src="./dist/bundle.js"></script> </body> ~লུ~ Hello World

    index.html
  16. // ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';

    import ReactDom from 'react-dom'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <div>Hello React World</div>, el ) Hello World src/index.js
  17. // ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';

    import ReactDom from 'react-dom'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <div>Hello React World</div>, el ) Hello World src/index.js จࣈΛม͑ͨΓɺଞͷλάʹஔ͖׵͑ͨΓͯ͠Έ·͠ΐ͏ɻ EJWλάͷதʹɺλάΛೖΕͯΈ·͠ΐ͏
  18. σΟϨΫτϦߏ੒ͱਐΊํ

  19. σΟϨΫτϦߏ੒ͱਐΊํ

  20. σΟϨΫτϦߏ੒ͱਐΊํ ׬੒඼ϑΥϧμ ࡞ۀ༻ϑΥϧμ ى఺ͱͳΔ+4 Θ͔Βͳ͚Ε͹ɺ׬੒඼Λݟ͍ͯͩ͘͞ɻ

  21. Hello World 2

  22. ίϯϙʔωϯτࢦ޲

  23. // ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';

    import ReactDom from 'react-dom'; // Hello WorldΛΠϯϙʔτ import HelloWorld from './HelloWorld/index'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <HelloWorld />, el ) Hello World 2 src/index.js )FMMP8PSMEϞδϡʔϧͷ Πϯϙʔτ ඳը͢Δର৅Λ )FMMP8PSMEʹมߋ
  24. // ToDo // divλάʹ main ͱ͍͏ΫϥεΛ௥Ճ͠·͠ΐ͏ // h1ʹΠϯϥΠϯελΠϧͰ color :

    tomato Λࢦఆ͠·͠ΐ͏ // JSX͸ಛผͳϧʔϧ͕͋Δɻ // class => className // for => htmlFor // ΠϯϥΠϯελΠϧ͸ style={{ xxxx: 'yyyyy' }} Ͱදݱ͠·͢ɻ <div> <h1>Hello World2</h1> </div> Hello World 2 src/HelloWorld/index.js
  25. Hello World 2 ϒϥ΢β͸JSΛߋ৽͢ΔͱࣗಈϦϩʔυ͠·͢ɻ ҎԼͷҎԼͷը໘͕ग़Ε͹OKͰ͢ɻ

  26. ιʔεΛ࢖ͬͯղઆ͠·͢ Hello World 2 src/HelloWorld/index.js

  27. Page

  28. // ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';

    import ReactDom from 'react-dom'; // PageΛΠϯϙʔτ import Page from './Page/index'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <Page />, el ) Page src/index.js 1BHFϞδϡʔϧͷ Πϯϙʔτ ඳը͢Δର৅Λ 1BHFʹมߋ
  29. Page ׬੒൛͸͜Μͳײ͡

  30. Page src/Page/index.js import React, { Component } from 'react'; //

    Todo1 // Header,Sidebar,Main,footerͷindex.jsΛΠϯϙʔτ͍ͯͩ͘͠͞ɻ
  31. Page src/Page/index.js // Todo2 // Header,Sidebar,Main,footerͷॱʹҎԼͷdivͷதʹίϯϙʔωϯτΛॻ͍͍ͯͩ͘͞ɻ // SidebarͱMainΛ"contents"ͱ͍͏ΫϥεͷdivλάͰғ͍ͬͯͩ͘͞ɻ <div> </div>

  32. Page src/Sidebar/Page/index.js const contentsList = ["News", "Blog", "SNS", "Recruit", "aaa",

    "bbb"]; let viewList = []; // Todo // contentsListͷཁૉ਺෼ viewListʹ <Item /> Λ֨ೲ͍ͯͩ͘͠͞ɻ // ͜ͷͱ͖ <Item title={ contentsListͷཁૉ } key={ contentsListͷཁૉ } /> // ͱ͍͏ܗͰɺtitleͱkeyʹcontentsListͷཁૉΛࢦఆ͍ͯͩ͘͠͞ɻ // ͜Ε͕Կ͔͸࣍ͷষͰઆ໌͠·͢ɻ return ( <div className="sidebar"> {viewList} </div> );
  33. JSϑΝΠϧΛ෼ׂ͢Δ͜ͱͰɺඞཁͳػೳຖʹϑΝ ΠϧΛ෼ׂͰ͖ΔΠϝʔδ͕Ͱ͖ͨ͸ͣ ֎ଆ͔Βύϥϝʔλͱͯ͠౉͢͜ͱ͕Ͱ͖Δ HTMLͱJS͕ີ݁߹ Page

  34. Props & State

  35. Props & State ࣮ԋ

  36. // ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';

    import ReactDom from 'react-dom'; // PropsStateΛΠϯϙʔτ import PropsState from './PropsState/index'; // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <PropsState defaultValue="Mastodon" />, el ) Props & State src/index.js 1SPQT4UBUFϞδϡʔϧͷ Πϯϙʔτ ඳը͢Δର৅Λ 1SPQT4UBUFʹมߋ EFGBVMU7BMVFΛઃఆ
  37. Props & State src/PropsState/index.js // Todo1 // textarea ͷ style

    ʹ textAreaStyle ΛదԠ͍ͤͯͩ͘͞͞ɻ // textarea ͷ value ʹ this.state.text ΛదԠ͍ͤͯͩ͘͞͞ɻ // textarea ͷ onChange ʹ this._setValue ΛదԠ͍ͤͯͩ͘͞͞ɻ // Todo2 // "จࣈ਺ɿ" ͷޙΖʹ this.state.count Λग़ྗ͍ͯͩ͘͠͞ɻ // "resultɿ" ͷޙΖʹ this.state.text Λग़ྗ͍ͯͩ͘͠͞ɻ return ( <div className="main"> <h1>Props State Counter</h1> <input type="textarea" /> <span> จࣈ਺ : </span> <p>result: </p> </div> );
  38. Props & State src/PropsState/index.js constructor(props) { super(props); this.state = {

    // Todo3 // textͷ஋Λ "" => this.props.defaultValue ʹมߋ͍ͯͩ͘͠͞ɻ // countͷ஋Λ 0 =>ɹthis.props.defaultValue.length ʹมߋ͍ͯͩ͘͠͞ɻ text: "", count: 0, } this._setValue = this._setValue.bind(this); }
  39. Props & State src/PropsState/index.js // Πϕϯτϋϯυϥʔ // ೖྗϑΟʔϧυͷ஋Λstateʹઃఆ͢Δ _setValue(e) {

    // Todo4 // text, countʹ textarea ͷೖྗจࣈྻͱ count ͷೖྗจࣈྻ਺ΛೖΕ͍ͯͩ͘͞ɻ // textareaͷೖྗจࣈྻ͸ e.target.value // textareaͷೖྗจࣈྻ਺͸ e.target.value.length // ͰऔಘͰ͖·͢ɻ this.setState({ text: "", count: 0, }) }
  40. ιʔεΛ࢖ͬͯղઆ͠·͢ Props & State src/PropsState/index.js

  41. Props => ֎෦͔Β౉͞ΕΔ஋
 Πϛϡʔλϒϧ(ޙͰมߋෆՄೳ) State => ίϯϙʔωϯτ಺෦Ͱ؅ཧ͢Δ஋
 ϛϡʔλϒϧ(ޙͰมߋՄೳ) Props &

    State
  42. PropsΛΠϯϙʔτ࣌ʹ౉͢͜ͱͰίϯϙʔωϯτ ͷதͰར༻Ͱ͖·͢ɻ React͕Stateͷ஋ͷมߋʹै͍ɺมߋલޙͷࠩ෼ ͚ͩΛ࠶ඳը͍ͯ͠·͢ɻ Props & State

  43. ReactDom.render( <div> <PropsState defaultValue="Mastodon" />, <PropsState defaultValue="Twitter" />, </div>, el

    ) Props & State src/index.js EJWͰғͬͯɺ 1SPQT4UBUFΛ̎ͭ࢖͏ EFGBVMU7BMVFΛมߋͯ͠ΈΔ
  44. LogoGenerator

  45. ίϯϙʔωϯτΛ·͕ͨͬͯ εςʔτΛड͚౉͢

  46. LogoGenerator ࣮ԋ

  47. // ΤϯτϦʔϙΠϯτʹͳΔjs // React + ReactDomΛར༻͢Δ import React from 'react';

    import ReactDom from 'react-dom'; // ίϯϙʔωϯτΛΠϯϙʔτ import LogoGenerator from './LogoGenerator/index' // HTMLͷdomʹ།ҰΞΫηε͢ΔՕॴ const el = document.getElementById('root') // htmlͷ#rootʹ࡞੒͞ΕͨDomΛඳը͍ͯ͠Δ ReactDom.render( <div> <LogoGenerator /> </div>, el ) LogoGenerator src/index.js 1SPQT4UBUFϞδϡʔϧͷ Πϯϙʔτ ඳը͢Δର৅Λ -PHP(FOFSBUPSʹมߋ
  48. LogoGenerator src/LogoGenerator/index.js // Todo1 // logo ͷதͷ <Message></Message>ίϯϙʔωϯτʹҎԼͷϓϩύςΟʹ؅ཧ͍ͯ͠Δ // ಉ໊ͷStateΛηοτ͍ͯͩ͘͠͞ɻ(ώϯτ

    hogehoge={this.state.hogehoge}) // backgroundColor // fontSize // fontfamily // textColor // Todo2 // <Message></Message>ίϯϙʔωϯτͷࢠͲ΋ͱͯ͠ // StateͰ؅ཧ͍ͯ͠Δ textValue ΛೖΕ͍ͯͩ͘͞ɻ // ࢠͲ΋(fugafuga)ʹड͚౉͢ํ๏͸<hogehoge>{this.state.fugafuga}</hogehoge> // hogehogeΫϥε͸ this.props.children ͰfugafugaΛड͚औΓ·͢ɻ // ϩΰ const logo = ( <Message> </Message> )
  49. LogoGenerator src/LogoGenerator/index.js Todo3 <Button>ίϯϙʔωϯτΛ࢖ͬͯɺϩΰΛ૷০͢ΔϘλϯΛ࡞੒͍ͯͩ͘͠͞ɻ {/*Todo3ɹPlease fill me !*/} ͱ͍͏ՕॴΛ͏Ί͍ͯͩ͘͞ɻ <Button>ίϯϙʔωϯτʹ͸ɺname,

    selectedName, handleClickΛϓϩύςΟͱͯ͠౉͍ͯͩ͘͠͞ɻ FontFamilyϘλϯͷ name ͸ names_FontFamily ͔Βऔಘ໊ͨ͠લΛઃఆ͍ͯͩ͘͠͞ɻ FontFamilyϘλϯͷ selectedName ͸ stateͷ fontfamily Λઃఆ͍ͯͩ͘͠͞ɻ FontFamilyϘλϯͷ handleClick ͸ this._selectFontFamily ͔Βऔಘ͍ͯͩ͘͠͞ɻ TextColorϘλϯͷ name ͸ names_textColor ͔Βऔಘ໊ͨ͠લΛઃఆ͍ͯͩ͘͠͞ɻ TextColorϘλϯͷ selectedName ͸ stateͷtextColor Λઃఆ͍ͯͩ͘͠͞ɻ TextColorϘλϯͷ handleClick ͸ this._selectTextColor ͔Βऔಘ͍ͯͩ͘͠͞ɻ BackGroundColorϘλϯͷ name ͸ names_FontFamily ͔Βऔಘ໊ͨ͠લΛઃఆ͍ͯͩ͘͠͞ɻ BackGroundColorϘλϯͷ selectedName ͸ stateͷ fontfamily Λઃఆ͍ͯͩ͘͠͞ɻ BackGroundColorϘλϯͷ handleClick ͸ this._selectBackGroundColor ͔Βऔಘ͍ͯͩ͘͠͞ɻ
  50. ιʔεΛ࢖ͬͯղઆ͠·͢ Props & State src/PropsState/index.js

  51. ؔ਺Λίϯϙʔωϯτʹpropsͱͯ͠౉͢͜ͱ͕Ͱ ͖·͢ɻstateͷ؅ཧ͸਌͕͍࣋ͬͯΔͷͰɺ਌ͷ stateΛߋ৽͢Δؔ਺ΛࢠͲ΋ʹ౉͢͜ͱͰɺ͜Ͳ ΋͕਌ͷstateΛߋ৽Ͱ͖·͢ɻ LogoGenerator

  52. ͝੩ௌ͋Γ͕ͱ͏ ͍͟͝·͍ͨ͠