ReactTutorial

Transcript

1. 3FBDUษڧձ
2. 5PQJD w /PEF
   OQN
   ZBSO
   w 3FBDU
   w 3FBDU
   5VUPSJBM
   w 4VNNBSZ !2
3. ௕ஸ৔ʹͳΓ·͕͢
 ؤுΓ·͠ΐ͏ʂʂ
4. 8IBU
   JT
   
   
   
   
   
   
   
   
   
   
   
   
   
   
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 /PEF
   1BDLBHF
   .BOBHFS
   w ϓϩδΣΫτ͝ͱʹґଘؔ܎Λ࡞੒͠ɼ
 OPEF@NPEVMFTҎԼʹ1BDLBHFΛΠϯετʔϧ͢Δ
   Ὂ ΋ͪΖΜάϩʔόϧʹΠϯετʔϧ΋Ͱ͖Δ
   w ։ൃʹ͚ͩඞཁͳύοέʔδΛ໌ࣔతʹ෼͚Δػೳ͕͋Δ
   w ґଘؔ܎͸QBDLBHFKTPOʹه࿥͞ΕΔ !8
9. w 'BDFCPPL
   &YQPOFOU
   (PPHMF
   5JMEF͕த৺ͱͳͬͯ࡞ͬͨ
 OQNʹ୅ΘΔ1BDLBHF
   .BOBHFS
   w 'BTU
   SFMJBCMF
   BOE
   TFDVSF
   EFQFOEFODZ
   NBOBHFNFOU
   Ὂ Ұ౓Πϯετʔϧͨ͜͠ͱͷ͋Δύοέʔδ͸ϩʔΧϧʹΩϟογϡ͞Ε͍ͯΔ
   Ὂ ZBSOMPDLʹΑͬͯґଘؔ܎ͷ৴པੑΛ୲อ͍ͯ͠Δ
   Ὂ ίʔυ࣮ߦલʹΠϯετʔϧࡁΈͷύοέʔδͷ੔߹ੑΛݟ͍ͯΔ
   w OQNͱޓ׵ੑΛ࣋ͪͳ͕ΒɼΑΓ؆୯ʹύοέʔδ؅ཧ͕Ͱ͖Δ༏Ε΋ͷ
   Ὂ ͱ͍͏্͔Ґޓ׵
   !9
10. #SFBL
    UJNF
 ؀ڥߏஙऴΘͬͯͳ͍ਓ͸ڭ͍͑ͯͩ͘͞
11. 8IBU
    JT
    3FBDU
12. 3FBDU w 'BDFCPPL੡ͷ7JFX༻ϥΠϒϥϦ
    Ὂ HJUIVCDPNGBDFCPPLSFBDU
    w Ծ૝%0.Λ༻͍ͨϦΞΫςΟϒͳ41"Λ࣮ݱՄೳ
    w ίϯϙʔωϯτࢦ޲
    Ὂ ύʔπͷ࠶ར༻ੑ͕ߴ͍ !12
13. 8IBU
    JT
    41"
14. 4JOHMF
    1BHF
    "QQMJDBUJPO w ϖʔδͷભҠແ͠ʹίϯςϯπΛ੾Γସ͑Δ͜ͱͰ
 69Λେ͖͘޲্ͤ͞Δ8FCΞϓϦέʔγϣϯΞʔΩςΫνϟ
    w ϖʔδͷ੾Γସ͑͸ΫϥΠΞϯτଆͰ%0.ૢ࡞Λߦ͏͜ͱͰ࣮ݱ͢Δ
    w )5.-͕ਖ਼ࣜϦϦʔε͞Εͨ͋ͨΓ͔Β׆ൃʹͳ͖ͬͯͨ !14
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
20. K2VFSZͰग़དྷΔʂ w ΋ͱ΋ͱ%0.ૢ࡞͕ಘҙͳK2VFSZΛ࢖͑͹41"͸࣮૷Մೳ !20
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.
    +4
    0CKFDU ࣮ࡍͷ%0.
26. ࣮ࡍ͸ͪΐͬͱҧ͏ w ֤ίϯϙʔωϯτͷঢ়ଶม਺͕มΘΔ͜ͱͰɼ
 ͦͷίϯϙʔωϯτ͕୲౰͍ͯ͠Δ%0.͕࠶ϨϯμϦϯά͞ΕΔ
    Ὂ ͪΌΜͱ෼ׂ͠ͳ͍ͱϐϯϙΠϯτͰมߋ͸Ͱ͖ͳ͍ !26
27. 3FBDU
    $PNQPOFOU
    -JGF$ZDMF w ग़య
    RJJUB!LBXBDIJ
    ͞Μͷهࣄ
    
    Ὂ ͜Ε͕Ұ൪෼͔Γ΍͍͢
    w ެࣜͷυΩϡϝϯτ΋ಡΈͳ͕ Βԡ͓͖͑ͯ͞·͠ΐ͏ !27
28. #SFBL
    UJNF
    ͔࣍ΒνϡʔτϦΞϧͰ͢
29. 3FBDU
    5VUPSJBM
30. 5PEPΞϓϦ w νϡʔτϦΞϧΞϓϦͱ͍͑͹5PEPΞϓϦ
    Ὂ Ұཡදࣔ
    Ὂ EPOFͷτάϧ
    Ὂ ௥Ճ
    Ὂ DMFBS
    w ࠓճ$44͸Ұ੾΍Γ·ͤΜ !30
31. 3FBDUΞϓϦͷ࡞੒ w ADSFBUFSFBDUBQQA
    Ὂ 3FBDUΞϓϦ࡞੒ʹ࠷௿ݶඞཁͳύοέʔδΛ·ͱΊͨςϯϓϨʔτΛ࡞੒ͯ͘͠ΕΔ
    Ὂ HJUIVCDPNGBDFCPPLDSFBUFSFBDUBQQ
    w ඞཁͳίϚϯυ͸QBDLBHFKTPOʹ͢Ͱʹఆٛ͞Ε͍ͯΔɽ
    Ὂ AZBSO
    TUBSUAͰϒϥ΢βʹελʔτϖʔδ্ཱ͕͕ͪΔ͸ͣɽ !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. 8IBU
    JT
    &$."4DSJQU
36. &$."4DSJQU w +BWB4DSJQUͷඪ४࢓༷
    Ὂ ੈͷதͷϒϥ΢βͰ͸͜ͷ࢓༷ʹج͍ͮͨ+BWB4DSJQU͕ಈ͍͍ͯΔ
    Ὂ ຖ೥݄͘Β͍ʹϦϦʔε͞ΕΔ
    Ὂ IUUQTHJUIVCDPNUDFDNB
    w ADSFBUFSFBDUBQQAͰ͸σϑΥϧτͰ&$."4DSJQU &4 Ͱ
 ॻ͔ΕͨϓϩδΣΫτ͕ग़དྷ্͕Δ
    ͍ͭ·Ͱ&4ͳΜͩ
    w จ๏ͷઆ໌͸͍Γ·͔͢ʁ !36
37. BSSPXؔ਺ w &$."4DSJQU͔Β௥Ճ͞Εͨػೳ
    Ὂ ؔ਺Λ୹ॖͰ͖Δ
    Ὂ UIJTΛଋറͰ͖Δ
    w Ͳ͏͍͏͜ͱʁ
    Ὂ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU 3FGFSFODFBSSPX@GVODUJPOT
    w ࣮ࡍʹॻ͘ͱ͖͸BSSPXؔ਺Ͱ౷Ұ͢Δͷ͕Φεεϝ
    Մಡੑ΋্͕Δ͠ !37
38. #SFBL
    UJNF
    ͔࣍ΒίʔσΟϯάͰ͢
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Λ࣋ͭ'PSN
    DPNQPOFOUΛ࡞Δ
     "QQͷTUBUFʹ௥Ճ͢ΔͨΊʹɼ"QQଆͰBEE
    NFUIPEΛ࡞ͬͯ
 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
    ⚠
    %POU
    0WFSVTF
    3FGT
    ⚠ !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. 8IBU
    JT
    4UPSF w άϩʔόϧͳ4UBUFͱ͍͏ೝࣝ
    ϚαΧϦ͸ࢭΊ͍ͯͩ͘͞
    w 'MVY3FEVYΞʔΩςΫνϟ͕Ұൠత͕ͩɼ3FBDU
    W͔Β$POUFYUͱ ͍͏"1*͕ಋೖ͞ΕɼެࣜػೳͰ4UPSF͕࣮૷Ͱ͖ΔΑ͏ʹͳͬͨ
    Ὂ IUUQTSFBDUKTPSHEPDTDPOUFYUIUNM
    Ὂ ਖ਼͘͠͸ٖࣅ4UPSF
    'MVYͷ֓೦ͳͷͰ
    w ࠓճ͸$POUFYUͰ࣮૷
    Ὂ 'MVY3FEVY͸·ͨผͷػձʹ !57
58. -JWF
    $PEJOH
    εϥΠυ࡞Δͷ͕ΊΜͲ͔ͬͨ͘͞
59. ಈ͖·͔ͨ͠ʁ
60. ͞Βʹ޲͜͏΁
    1MVT
    6MUSB
    "1*Λୟ͍ͯඇಉظʹ4UBUFΛมߋ
61. 'FUDI
    "1* w 9.-)UUQ3FRVFTUʹ୅ΘΔ"1*
    Ὂ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*'FUDI@"1*
    w 1SPNJTF͕ฦͬͯ͘ΔͷͰUIFODBUDI͕࢖͑Δ !61
62. 1SPNJTF w ඇಉظॲཧͷ࠷ऴతͳ׬ྃ·ͨ͸ࣦഊΛද͢ΦϒδΣΫτ
    Ὂ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU(VJEF6TJOH@QSPNJTFT
    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
    wSE
    QBSUZ
    MJCSBSJFT
    w3PVUJOH
    wXJUI
    &MFDUSPO !67 wXJUI
    5ZQF4DSJQU
    w4FSWFS
    4JEF
    3FOEFSJOH
    w1FSGPSNBODF
    UVOJOH
    w$44
    w3FBDU
    /BUJWF
    w&UD
68. ྑ͍3FBDUϥΠϑΛʂ