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

ReactTutorial

taxio
September 01, 2018
32

 ReactTutorial

taxio

September 01, 2018
Tweet

Transcript

  1. 3FBDUษڧձ

  2. 5PQJD w /PEF OQN ZBSO w 3FBDU w 3FBDU5VUPSJBM w

    4VNNBSZ !2
  3. ௕ஸ৔ʹͳΓ·͕͢
 ؤுΓ·͠ΐ͏ʂʂ

  4. 8IBUJT

  5. /PEF w /PEF͸εέʔϥϒϧͳωοτϫʔΫΞϓϦέʔγϣϯΛߏங͢ΔͨΊʹઃܭ͞Εͨ
 ඇಉظܕͷΠϕϯτۦಈͷ+BWB4DSJQU؀ڥͰ͢ ެࣜ  w +BWB4DSJQUͱݴ͑͹ɼϒϥ΢βͰಈ͘ݴޠͩͬͨ Ὂ αʔόαΠυͰ΋+4͕ಈ͚͹։ൃָ͕ʹͳΔͷͰ͸ʁ/PEFര஀

    w ૣ͍ Ὂ $ISPNFͷ7Τϯδϯ Ὂ ඇಉظܕΠϕϯτۦಈ Ὂ γϯάϧεϨου w ͿͬͪΌ͚ࠓ೔ͷ3FBDUͷ࿩ͱ͸ؔ܎ͳ͍Ͱ͢
 3FBDU͸ΫϥΠΞϯταΠυͰಈ͘ϥΠϒϥϦ͔ͩΒ !5
  6. /PO#MPDLJOH*0 w ίʔϧόοΫΛఆٛ͢Δ͜ͱͰɼ
 ඇಉظʹλεΫΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ Ὂ /PEF͕γϯάϧεϨουͰ΋ૣ͍ཧ༝ !6 const fs =

    require('fs'); // blocks here until file is read const data = fs.readFileSync('/file.md'); console.log(data); // moreWork(); will run after console.log const fs = require('fs'); fs.readFile('/file.md', (err, data) => { if (err) throw err; console.log(data); }); // moreWork(); will run before console.log Blocking I/O Non-Blocking I/O
  7. /PEFΛࢧ͑Δ1BDLBHF.BOBHFS

  8. w /PEF1BDLBHF.BOBHFS w ϓϩδΣΫτ͝ͱʹґଘؔ܎Λ࡞੒͠ɼ
 [email protected]ҎԼʹ1BDLBHFΛΠϯετʔϧ͢Δ Ὂ ΋ͪΖΜάϩʔόϧʹΠϯετʔϧ΋Ͱ͖Δ w ։ൃʹ͚ͩඞཁͳύοέʔδΛ໌ࣔతʹ෼͚Δػೳ͕͋Δ w

    ґଘؔ܎͸QBDLBHFKTPOʹه࿥͞ΕΔ !8
  9. w 'BDFCPPL &YQPOFOU (PPHMF 5JMEF͕த৺ͱͳͬͯ࡞ͬͨ
 OQNʹ୅ΘΔ1BDLBHF.BOBHFS w 'BTU SFMJBCMF BOETFDVSFEFQFOEFODZNBOBHFNFOU

    Ὂ Ұ౓Πϯετʔϧͨ͜͠ͱͷ͋Δύοέʔδ͸ϩʔΧϧʹΩϟογϡ͞Ε͍ͯΔ Ὂ ZBSOMPDLʹΑͬͯґଘؔ܎ͷ৴པੑΛ୲อ͍ͯ͠Δ Ὂ ίʔυ࣮ߦલʹΠϯετʔϧࡁΈͷύοέʔδͷ੔߹ੑΛݟ͍ͯΔ w OQNͱޓ׵ੑΛ࣋ͪͳ͕ΒɼΑΓ؆୯ʹύοέʔδ؅ཧ͕Ͱ͖Δ༏Ε΋ͷ Ὂ ͱ͍͏্͔Ґޓ׵ !9
  10. #SFBLUJNF
 ؀ڥߏஙऴΘͬͯͳ͍ਓ͸ڭ͍͑ͯͩ͘͞

  11. 8IBUJT3FBDU

  12. 3FBDU w 'BDFCPPL੡ͷ7JFX༻ϥΠϒϥϦ Ὂ HJUIVCDPNGBDFCPPLSFBDU w Ծ૝%0.Λ༻͍ͨϦΞΫςΟϒͳ41"Λ࣮ݱՄೳ w ίϯϙʔωϯτࢦ޲ Ὂ

    ύʔπͷ࠶ར༻ੑ͕ߴ͍ !12
  13. 8IBUJT41"

  14. 4JOHMF1BHF"QQMJDBUJPO w ϖʔδͷભҠແ͠ʹίϯςϯπΛ੾Γସ͑Δ͜ͱͰ
 69Λେ͖͘޲্ͤ͞Δ8FCΞϓϦέʔγϣϯΞʔΩςΫνϟ w ϖʔδͷ੾Γସ͑͸ΫϥΠΞϯτଆͰ%0.ૢ࡞Λߦ͏͜ͱͰ࣮ݱ͢Δ w )5.-͕ਖ਼ࣜϦϦʔε͞Εͨ͋ͨΓ͔Β׆ൃʹͳ͖ͬͯͨ !14

  15. None
  16. ैདྷͷ8FCΞϓϦέʔγϣϯ !16 hoge.com Contents
 (html,js,css,img,etc...) hoge.com/about Contents (html,js,css,img,etc...)

  17. 41"ͷ8FCΞϓϦέʔγϣϯ !17 hoge.com hoge.com/about html +4 api/about jsonͱ͔ Contents
 (html,js,css,img,etc...)

  18. ͭ·Γ w ඞཁͳ৘ใ͚ͩαʔόʹ໰͍߹Θͤʹ͍͘ Ὂ ฦ͖ͬͯͨ৘ใΛݩʹ%0.Λ࠶ߏங  ͔͠΋ɼมߋ͕ඞཁͳͱ͜Ζ͚ͩϨϯμϦϯά w ࣮͸ࠓ೔དྷͨօ͞Μ΋ࣅͨΑ͏ͳ͜ͱΛͨ͜͠ͱ͕͋Δ͸ͣ !18

  19. None
  20. K2VFSZͰग़དྷΔʂ w ΋ͱ΋ͱ%0.ૢ࡞͕ಘҙͳK2VFSZΛ࢖͑͹41"͸࣮૷Մೳ !20

  21. None
  22. ΍ͬͺπϥ͍ w มߋύʔπ͕૿͑ͯ͘Δͱɼͦͷ؅ཧ͕πϥ͍ w ͦ΋ͦ΋σʔλΛ%0.Ͱอ͍࣋ͯ͠ΔͷͰ؅ཧ͕πϥ͍ w   !22

  23. 4P 3FBDU

  24. 3FBDUͷ͍͍ͱ͜Ζ w %0.Ͱ͸ͳ͘ϩδοΫଆͰঢ়ଶม਺Λอ࣋ Ὂ ঢ়ଶม਺ͷมߋΛݕ஌ͯ͠%0.ૢ࡞ w Ծ૝%0.Λ༻͍Δ͜ͱͰࠩ෼ϨϯμϦϯάΛ࣮ݱ w ύʔπ୯ҐͰίϯϙʔωϯτԽ͕༰қ Ὂ

    ࣮૷͠΍͢͞61ˢ Ὂ ࠶ར༻ੑ61ˢ !24
  25. Ծ૝%0. !25 <div> <div>3</div> <div className="items"> <div className="item"> Foo </div>

    <div className="item"> Bar </div> <div className="item"> Hoge </div> </div> </div> <div> <div>4</div> <div className="items"> <div className="item"> Foo </div> <div className="item"> Bar </div> <div className="item"> Hoge </div> <div className="item"> Piyo </div> </div> </div> <div> <div>4</div> <div class="items"> <div class="item"> Foo </div> <div class="item"> Bar </div> <div class="item"> Hoge </div> <div class="item"> Piyo </div> </div> </div> ݱࡏͷ%0. ৽͍͠%0. ࣮ࡍͷߋ৽ Ծ૝%0. +40CKFDU ࣮ࡍͷ%0.
  26. ࣮ࡍ͸ͪΐͬͱҧ͏ w ֤ίϯϙʔωϯτͷঢ়ଶม਺͕มΘΔ͜ͱͰɼ
 ͦͷίϯϙʔωϯτ͕୲౰͍ͯ͠Δ%0.͕࠶ϨϯμϦϯά͞ΕΔ Ὂ ͪΌΜͱ෼ׂ͠ͳ͍ͱϐϯϙΠϯτͰมߋ͸Ͱ͖ͳ͍ !26

  27. 3FBDU$PNQPOFOU-JGF$ZDMF w ग़యRJJUB!LBXBDIJ͞Μͷهࣄ Ὂ ͜Ε͕Ұ൪෼͔Γ΍͍͢ w ެࣜͷυΩϡϝϯτ΋ಡΈͳ͕ Βԡ͓͖͑ͯ͞·͠ΐ͏ !27

  28. #SFBLUJNF ͔࣍ΒνϡʔτϦΞϧͰ͢

  29. 3FBDU5VUPSJBM

  30. 5PEPΞϓϦ w νϡʔτϦΞϧΞϓϦͱ͍͑͹5PEPΞϓϦ Ὂ Ұཡදࣔ Ὂ EPOFͷτάϧ Ὂ ௥Ճ Ὂ

    DMFBS w ࠓճ$44͸Ұ੾΍Γ·ͤΜ !30
  31. 3FBDUΞϓϦͷ࡞੒ w ADSFBUFSFBDUBQQA Ὂ 3FBDUΞϓϦ࡞੒ʹ࠷௿ݶඞཁͳύοέʔδΛ·ͱΊͨςϯϓϨʔτΛ࡞੒ͯ͘͠ΕΔ Ὂ HJUIVCDPNGBDFCPPLDSFBUFSFBDUBQQ w ඞཁͳίϚϯυ͸QBDLBHFKTPOʹ͢Ͱʹఆٛ͞Ε͍ͯΔɽ Ὂ

    AZBSOTUBSUAͰϒϥ΢βʹελʔτϖʔδ্ཱ͕͕ͪΔ͸ͣɽ !31 > npm install -g yarn > create-react-app todoapp > cd todoapp > yarn start
  32. !32 ϓϩδΣΫτͷߏ଄ > tree -I node_modules . . "## README.md

    "## package.json "## public $ "## favicon.ico $ "## index.html $ %## manifest.json "## src $ "## App.css $ "## App.js $ "## App.test.js $ "## index.css $ "## index.js $ "## logo.svg $ %## registerServiceWorker.js %## yarn.lock w QVCMJD Ὂ ੩తϑΝΠϧΛஔ͘৔ॴ Ὂ NBOJGFTUKTPO͕ઃఆϑΝΠϧ w TSD Ὂ ͍ΖΜͳ։ൃίʔυΛ٧ΊࠐΉ৔ॴ
  33. SFBDUTDSJQUT w SFBDUTDSJQUT Ὂ GBDFCPPLDSFBUFSFBDUBQQSFBDU TDSJQUT Ὂ CBCFM΍XFCQBDL FTMJOUͳͲɼ։ൃʹ࢖༻ ͢ΔπʔϧΛ·ͱΊͨπʔϧ

    Ὂ FKFDUͰશ෦ͷґଘΛు͖ग़ͯ͠ফ͢͜ͱ͕ Ͱ͖Δ  ͱΓ͋͑ͣDSFBUFSFBDUBQQͰ࡞ͬͨޙɼ ΰϦΰϦΧελϚΠζ͕Ͱ͖Δ !33 > cat package.json { "name": "todoapp", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.4.2", "react-dom": "^16.4.2", "react-scripts": "1.1.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }⏎
  34. ςϯϓϨΛগ͠ಡΜͰΈΑ͏
 ղઆεϥΠυ࡞Δͷ͕ΊΜͲ͔ͬͨ͘͞

  35. 8IBUJT&$."4DSJQU

  36. &$."4DSJQU w +BWB4DSJQUͷඪ४࢓༷ Ὂ ੈͷதͷϒϥ΢βͰ͸͜ͷ࢓༷ʹج͍ͮͨ+BWB4DSJQU͕ಈ͍͍ͯΔ Ὂ ຖ೥݄͘Β͍ʹϦϦʔε͞ΕΔ  Ὂ IUUQTHJUIVCDPNUDFDNB

    w ADSFBUFSFBDUBQQAͰ͸σϑΥϧτͰ&$."4DSJQU &4 Ͱ
 ॻ͔ΕͨϓϩδΣΫτ͕ग़དྷ্͕Δ ͍ͭ·Ͱ&4ͳΜͩ  w จ๏ͷઆ໌͸͍Γ·͔͢ʁ !36
  37. BSSPXؔ਺ w &$."4DSJQU͔Β௥Ճ͞Εͨػೳ Ὂ ؔ਺Λ୹ॖͰ͖Δ Ὂ UIJTΛଋറͰ͖Δ w Ͳ͏͍͏͜ͱʁ Ὂ

    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU 3FGFSFODF[email protected] w ࣮ࡍʹॻ͘ͱ͖͸BSSPXؔ਺Ͱ౷Ұ͢Δͷ͕Φεεϝ Մಡੑ΋্͕Δ͠ !37
  38. #SFBLUJNF ͔࣍ΒίʔσΟϯάͰ͢

  39. $PEJOH
 HJUIVCDPNUBYJP3FBDU4UVEZ

  40. TSD"QQKT w .BJO$PNQPOFOU w SFOEFS ͰSFUVSO͍ͯ͠Δͷ͕ඳը͞ΕΔIUNMΈ͍ͨͳ ΋ͷ Ὂ ͜͜ʹଞͷ$PNQPOFOUΛ഑ஔ͢Δ͜ͱ͕Ͱ͖Δ w

    ·ͩ5PEP-JTUͷ$PNQPOFOUΛ࡞͍ͬͯͳ͍ͷͰɼ
 Τϥʔ͕ग़Δ !40 import React, {Component} from 'react'; import TodoList from './TodoList'; class App extends Component { constructor(props) { super(props); this.state = { todos: [ { id: 1, text: 'Hello, world', done: false, }, ], }; } render() { return ( <div> <h1>Todo App</h1> <TodoList todos={this.state.todos}/> </div> ); } } export default App;
  41. 4UBUF w ͦͷ$PNQPOFOUͷঢ়ଶม਺Λอ͍࣋ͯ͠Δ Ὂ ঢ়ଶม਺Λม͑Ε͹ɼͦΕʹԠͯ͡%0.΋࠶ϨϯμϦϯά͞ΕΔ Ὂ UIJTTFU4UBUF Λ࢖ͬͯॻ͖׵͑ͳ͍ͱ࠶ϨϯμϦϯά͞Εͳ͍ !41

  42. TSD5PEP-JTUKT w ਌$PNQPOFOU "QQKT ͔Βड͚औͬͨ
 UPEPϦετΛࢠίϯϙʔωϯτͷ5PEPʹ
 ͦΕͧΕड͚౉͍ͯ͠Δɽ !42 import React,

    {Component} from 'react'; import Todo from './Todo'; class TodoList extends Component { render() { const todos = this.props.todos.map(todo => ( <Todo key={todo.id} {...todo} /> )); return <ul>{todos}</ul>; } } export default TodoList;
  43. 1SPQT w 3FBE0OMZ w ਌$PNQPOFOU͔Βࢠ$PNQPOFOU΁ϓϩύςΟΛ౉͢ػೳ w ड͚औͬͨϓϩύςΟ͸QSPQTͷதʹೖ͍ͬͯΔ !43 class TodoList

    extends Component { render() { const todos = this.props.todos.map(todo => ( <Todo key={todo.id} {...todo} /> )); return <ul>{todos}</ul>; } } class App extends Component { ... render() { return ( <div className="app"> <h1>Todo App</h1> <TodoList todos={this.state.todos}/> </div> ); } } src/App.js src/TodoList.js
  44. TSD5PEPKT w 5PEPΛදࣔ͢Δ$PNQPOFOU w ΫϦοΫ͞ΕΔͱTUBUFͷEPOFΛ τάϧ͢Δ Ὂ TUBUF͕ߋ৽͞ΕΔͷͰɼ
 %0.΋࠶ϨϯμϦϯά͞ΕΔ !44

    import React, {Component} from 'react'; class Todo extends Component { constructor(props) { super(props); this.state = { done: this.props.done, }; } onClick() { this.setState({done: !this.state.done}); } render() { return ( <li onClick={(e) => this.onClick(e)} style={{textDecoration: this.state.done ? 'line-through' : 'none'}}> <p> {this.props.id}: {this.props.text} </p> </li> ); } } export default Todo;
  45. ಈ͖·͔ͨ͠ʁ

  46. /FYU
 50%0Λ௥Ճ͢Δ

  47. ํ਑  JOQVUͱCVUUPOΛ࣋ͭ'PSNDPNQPOFOUΛ࡞Δ  "QQͷTUBUFʹ௥Ճ͢ΔͨΊʹɼ"QQଆͰBEENFUIPEΛ࡞ͬͯ
 QSPQTܦ༝Ͱ'PSNʹ౉͢ !47

  48. TSD"QQKT w "QQͷTUBUFΛมߋͯ͠ࢠ$PNQPOFOUʹ ఻ൖ͍ͤͯ͘͞ Ὂ TUBUFมߋ༻ͷNFUIPEΛ'PSNTʹ౉͢ !48 class App extends

    Component { constructor(props) {...} addTodo(text) { const newTodo = { id: Math.max(...this.state.todos.map(obj => obj.id)) + 1, text, done: false, }; this.setState({ todos: [...this.state.todos, newTodo], }); } render() { return ( <div className="app"> <h1>Todo App</h1> <Forms addTodo={e => this.addTodo(e)}/> <TodoList /> </div> ); } } export default App;
  49. TSD'PSNTKT w JOQVUʹೖྗ͞ΕͨจࣈྻΛTUBUFʹඥ͚ͮΔͨ ΊʹPO$IBOHFͰTFU4UBUF͍ͯ͠Δ Ὂ BEEͷ͔࣌͠஋͕ඞཁͳ͍ͷͰɼ
 3FGTΛ࢖͏ͱ΋ͬͱεϚʔτʹॻ͚Δ Ὂ SFBDUKTPSHEPDTSFGTBOEUIFEPNIUNM Ὂ

    #VU⚠%POU0WFSVTF3FGT⚠ !49 import React, {Component} from 'react'; class Forms extends Component { constructor(props) { super(props); this.state = { text: '', }; } add() { this.props.addTodo(this.state.text); this.setState({text: ''}); } render() { return ( <div> <input type='text' onChange={(e) => this.setState({text: e.target.value})} value={this.state.text}/> <button onClick={() => this.add()}>Add</button> </div> ); } } export default Forms;
  50. ಈ͖·͔ͨ͠ʁ

  51. /FYU
 EPOFUSVFʹͳͬͨ50%0Λফ͢

  52. Ͳ͏΍ͬͯফ͢ʁ w EPOFͷঢ়ଶ͸5PEP$PNQPOFOU͕อ͍࣋ͯ͠Δ w "QQ$PNQPOFOUͰ࡟আϘλϯΛ࣮૷ͯ͠΋ɼݱঢ়EPOF͸ݕ஌Ͱ͖ͳ͍ Ὂ ͭ·Γɼࢠ$PNQPOFOU਌$PNQPOFOU΁ͷ఻ൖ͕ඞཁ Ὂ ਌͔ΒࢦఆͷJEΛ࣋ͭUPEPͷEPOFΛτάϧ͢ΔίʔϧόοΫΛ
 QSPQTܦ༝Ͱ౉͢

    !52
  53. -JWF$PEJOH εϥΠυ࡞Δͷ͕ΊΜͲ͔ͬͨ͘͞

  54. ͏ʔΜ

  55. $PNQPOFOUؒͷ΍ΓͱΓ w 3FBDU։ൃͰ໰୊ʹͳΓ͕ͪͳ$PNQPOFOUؒͰͷσʔλͷ΍ΓͱΓ w ΞϓϦͷ֊૚ߏ଄͕૿͑Δ΄ͲɼQSPQTͷόέπϦϨʔʹ Ὂ தؒͷ$PNQPOFOUͰ͸ͦͷQSPQTͷ಺༰Λඞཁͱͯ͠ͳ͍Մೳੑ΋ !55

  56. 4UPSF

  57. 8IBUJT4UPSF w άϩʔόϧͳ4UBUFͱ͍͏ೝࣝ ϚαΧϦ͸ࢭΊ͍ͯͩ͘͞  w 'MVY3FEVYΞʔΩςΫνϟ͕Ұൠత͕ͩɼ3FBDUW͔Β$POUFYUͱ ͍͏"1*͕ಋೖ͞ΕɼެࣜػೳͰ4UPSF͕࣮૷Ͱ͖ΔΑ͏ʹͳͬͨ Ὂ IUUQTSFBDUKTPSHEPDTDPOUFYUIUNM

    Ὂ ਖ਼͘͠͸ٖࣅ4UPSF 'MVYͷ֓೦ͳͷͰ  w ࠓճ͸$POUFYUͰ࣮૷ Ὂ 'MVY3FEVY͸·ͨผͷػձʹ !57
  58. -JWF$PEJOH εϥΠυ࡞Δͷ͕ΊΜͲ͔ͬͨ͘͞

  59. ಈ͖·͔ͨ͠ʁ

  60. ͞Βʹ޲͜͏΁1MVT6MUSB "1*Λୟ͍ͯඇಉظʹ4UBUFΛมߋ

  61. 'FUDI"1* w 9.-)UUQ3FRVFTUʹ୅ΘΔ"1* Ὂ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*'[email protected]"1* w 1SPNJTF͕ฦͬͯ͘ΔͷͰUIFODBUDI͕࢖͑Δ !61

  62. 1SPNJTF w ඇಉظॲཧͷ࠷ऴతͳ׬ྃ·ͨ͸ࣦഊΛද͢ΦϒδΣΫτ Ὂ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU(VJEF[email protected] w ίʔϧόοΫͷ੍ޚ͕ͱͯ΋௚ײతʹͳΔ w UIFOΛܨ͛Δ͜ͱͰ࿈ଓͯ͠ඇಉظॲཧͷ࣮ߦ͕ߦ͑Δ 1SPNJTFνΣʔϯ

    !62 doSomething() .then((result) => successCallback(result)) .catch((error) => failureCallback(error))
  63. -JWF$PEJOH εϥΠυ࡞Δͷ͕ΊΜͲ͔ͬͨ͘͞

  64. ಈ͖·͔ͨ͠ʁ

  65. νϡʔτϦΞϧऴྃʂ ͓ർΕ༷Ͱͨ͠ʂ

  66. 4VNNBSZ w 3FBDUΛ࢖͑͹ࣗ༝౓ͷߴ͍8FCΞϓϦέʔγϣϯΛ࡞Δ͜ͱ͕Ͱ͖Δʂ !66

  67. ࠓ೔࿩ͯ͠ͳ͍͜ͱ w'MVY3FEVY w5FTU GBDFCPPLKFTU  w%FQMPZ wSEQBSUZMJCSBSJFT w3PVUJOH wXJUI&MFDUSPO !67

    wXJUI5ZQF4DSJQU w4FSWFS4JEF3FOEFSJOH w1FSGPSNBODFUVOJOH w$44 w3FBDU/BUJWF w&UD
  68. ྑ͍3FBDUϥΠϑΛʂ