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

ReactTutorial

taxio
September 01, 2018
53

 ReactTutorial

taxio

September 01, 2018
Tweet

Transcript

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

    w ૣ͍ Ὂ $ISPNFͷ7Τϯδϯ Ὂ ඇಉظܕΠϕϯτۦಈ Ὂ γϯάϧεϨου w ͿͬͪΌ͚ࠓ೔ͷ3FBDUͷ࿩ͱ͸ؔ܎ͳ͍Ͱ͢
 3FBDU͸ΫϥΠΞϯταΠυͰಈ͘ϥΠϒϥϦ͔ͩΒ !5
  2. /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
  3. w 'BDFCPPL &YQPOFOU (PPHMF 5JMEF͕த৺ͱͳͬͯ࡞ͬͨ
 OQNʹ୅ΘΔ1BDLBHF.BOBHFS w 'BTU SFMJBCMF BOETFDVSFEFQFOEFODZNBOBHFNFOU

    Ὂ Ұ౓Πϯετʔϧͨ͜͠ͱͷ͋Δύοέʔδ͸ϩʔΧϧʹΩϟογϡ͞Ε͍ͯΔ Ὂ ZBSOMPDLʹΑͬͯґଘؔ܎ͷ৴པੑΛ୲อ͍ͯ͠Δ Ὂ ίʔυ࣮ߦલʹΠϯετʔϧࡁΈͷύοέʔδͷ੔߹ੑΛݟ͍ͯΔ w OQNͱޓ׵ੑΛ࣋ͪͳ͕ΒɼΑΓ؆୯ʹύοέʔδ؅ཧ͕Ͱ͖Δ༏Ε΋ͷ Ὂ ͱ͍͏্͔Ґޓ׵ !9
  4. Ծ૝%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.
  5. !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 Ὂ ͍ΖΜͳ։ൃίʔυΛ٧ΊࠐΉ৔ॴ
  6. 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" } }⏎
  7. &$."4DSJQU w +BWB4DSJQUͷඪ४࢓༷ Ὂ ੈͷதͷϒϥ΢βͰ͸͜ͷ࢓༷ʹج͍ͮͨ+BWB4DSJQU͕ಈ͍͍ͯΔ Ὂ ຖ೥݄͘Β͍ʹϦϦʔε͞ΕΔ  Ὂ IUUQTHJUIVCDPNUDFDNB

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

    IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU 3FGFSFODFBSSPX@GVODUJPOT w ࣮ࡍʹॻ͘ͱ͖͸BSSPXؔ਺Ͱ౷Ұ͢Δͷ͕Φεεϝ Մಡੑ΋্͕Δ͠ !37
  9. 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;
  10. 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;
  11. 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
  12. 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;
  13. 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;
  14. 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;
  15. ࠓ೔࿩ͯ͠ͳ͍͜ͱ w'MVY3FEVY w5FTU GBDFCPPLKFTU  w%FQMPZ wSEQBSUZMJCSBSJFT w3PVUJOH wXJUI&MFDUSPO !67

    wXJUI5ZQF4DSJQU w4FSWFS4JEF3FOEFSJOH w1FSGPSNBODFUVOJOH w$44 w3FBDU/BUJWF w&UD