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

React入門

9d137d2c4ef04b50113287a21a462e9b?s=47 yayamura
December 25, 2017

 React入門

9d137d2c4ef04b50113287a21a462e9b?s=128

yayamura

December 25, 2017
Tweet

Transcript

  1. 3FBDUೖ໳

  2. 3FBDUͱ͸ w %FDMBSBUJWF એݴత  w $PNQPOFOU#BTFE ίϯϙʔωϯτϕʔε  w

    -FBSO0ODF 8SJUF"OZXIFSF Ͳ͜Ͱ΋࢖͑Δ 7JFXྖҬͷ+BWBTDSJQUϑϨʔϜϫʔΫ
  3. %FDMBSBUJWF એݴత ϏϡʔͷඳըॲཧΛఆٛ͢ΔͷͰ͸ͳ͘ɺϏϡʔͷ༗ Γ༷Λએݴͱͯ͠ఆٛ͢Δɻ Ϗϡʔͷঢ়ଶมߋʹΑΔ͸࠶ϨϯμϦϯά͸3FBDU͕ ޮ཰తʹ࣮ߦɻ એݴͱͯ͠ͷϏϡʔ͸ίʔυ͔Β࣮ߦ࣌ͷಈ࡞͕༧ଌ ͠΍͘͢ɺσόοά΋༰қɻ

  4. $PNQPOFOU#BTFE ίϯϙʔωϯτϕʔε ΧϓηϧԽ͞Εͨίϯϙʔωϯτ͕ࣗ਎ͷঢ়ଶΛ؅ཧ͢ Δɻ ίϯϙʔωϯτ͸+BWBTDSJQUͰهड़͢ΔͷͰɺ)5.-ς ϯϓϨʔτͱ͸ҧ͍ɺ+BWBTDSJQUͷσʔλܗࣜ ਺஋ɾจ ࣈྻͱ͍ͬͨσʔλܕɺ഑ྻɾࣙॻ౳ ͕ͦͷ··࢖͑Δɻ

  5. -FBSO0ODF 8SJUF"OZXIFSF Ͳ͜Ͱ΋࢖͑Δ .PEFM΍$POUSPMMFS౳ͷ࿮૊ΈΛલఏͱ͠ͳ͍ͷͰऔ Γճ͕͠Α͘ɺଞͷ'8ͱͷ૊Έ߹Θͤࣗࡏɻ αʔόαΠυ OPEF Ͱ΋ಈ͖ɺωΠςΟϒΞϓϦ΋ ॻ͚Δ 3FBDU/BUJWF

    ɻ
  6. +49 import React, { Component } from 'react'; import ReactDOM

    from 'react-dom'; // ίϯϙʔωϯτ class App extends Component { render() { return <Hello />; } } // Stateless Functional Component const Hello = () => <div>Hello React!!!</div>; // initialize ReactDOM.render(<App/>, document.getElementById('app')); +BWBTDSJQU֦ுͷλάߏจɻ+BWB4DSJQUF9UFOUIJPO $PNQPOFOU͸ ಠࣗλάͷΑ͏ͳ΋ͷ
  7. )FMMP8PSME import React, { Component } from 'react'; import ReactDOM

    from 'react-dom'; // Component class App extends Component { render() { return <Hello />; } } // Stateless Functional Component const Hello = () => <div>Hello React!!!</div>; // initialize ReactDOM.render(<App/>, document.getElementById('app')); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React</title> </head> <body> <div id="app" /> </body> </html> JOEFYKTY JOEFYIUNM
  8. 1SPQFSUZͱ4UBUF 1SPQFSUZ 4UBUF w ίϯϙʔωϯτͷҾ਺ w ஋͸มߋ͞Εͳ͍ w ίϯϙʔωϯτ͕಺෦ʹ อ࣋͢Δঢ়ଶ

    w ஋͸มߋ͞ΕΔ
  9. ίϯϙʔωϯτؒͷσʔλͷड͚౉͠ ਌͔Βࢠ ࢠ͔Β਌ 1SPQFSUZͱͯ͠౉͢ɻ  ਌͕ࢠʹࣗΒͷ4UBUFΛૢ ࡞͢ΔϝιουΛ౉͢ɻ  ࢠ͕਌ͷ4UBUFΛૢ࡞͢Δ ϝιουΛݺͼग़͢ɻ

  10. ίʔυαϯϓϧ import React, { Component } from 'react'; import ReactDOM

    from 'react-dom'; // Parent Component class App extends Component { constructor() { super(); this.state = { messageBase: 'Hello React', message: 'Hello React!', count: 1, }; this.incrementCount = this.incrementCount.bind(this); this.decrementCount = this.decrementCount.bind(this); } // Handler incrementCount() { const { messageBase, count } = this.state; const nxCount = count + 1; this.setState({ ...this.state, // Spread Properties message: messageBase + '!'.repeat(nxCount), count: nxCount, }); } decrementCount() { const { messageBase, count } = this.state; const nxCount = count > 0 ? count - 1 : 0; this.setState({ ...this.state, message: messageBase + '!'.repeat(nxCount), count: nxCount, }); } ଓ͘ 4UBUFͷॳظԽ ࢠʹ౉͢4UBUFΛૢ࡞͢Δϝιου
  11. ίʔυαϯϓϧ render() { const { message } = this.state; return

    ( <div> <div>{message}</div> <PlusMinusButton plusMinus={'+'} changeCount={this.incrementCount} /> <PlusMinusButton plusMinus={'-'} changeCount={this.decrementCount} /> </div> ); } } // Child Component const PlusMinusButton = ({ plusMinus, changeCount }) => { return <button onClick={changeCount}>{plusMinus}</button>; }; // Initialization ReactDOM.render(<App/>, document.getElementById('app')); "QQͷଓ͖ 1SPQFSUZͷड͚౉͠ ਌͔Β౉͞ΕͨϝιουΛΠϕϯτϦεφʔͱͯ͠ొ࿥ ਌͔Β౉͞Εͨ PSΛϘλϯϥϕϧͱͯ͠ར༻ IUUQTHJUIVCDPNZULBZBNVSBTUBSUSFBDUTUBUF
  12. +BWB4DSJQUΛֶͿ 3FBDU(SBQI2-ΞϓϦ։ൃक़ ຖिਫ༵೔ɿ ։࠵৔ॴɿ ࢀՃඅɿ ʙʢ։৔ʣ ΪʔΫΦϑΟεܙൺण ԁ IUUQTNFUFPSGBODPOOQBTTDPN

  13. 5XJUUFSɿ (JU)VCɿ ϒϩάɿ !EBJ@TIJ IUUQTHJUIVCDPNEBJTIJ IUUQTNFEJVNDPN!EBJ@TIJ ओ࠵ऀ঺հ

  14. 3FBDUɿ 3FEVYɿ (SBQI2-ɿ &4 શճ ɿ 7VFKTɿ /FYUKTɿ 3FBDU/BUJWFɿ 8FCQBDLɿ

    IUUQCBTJDSFBDUBYMJHIUDPNIUNM IUUQCBTJDSFEVYBYMJHIUDPNIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNHSBQIRMIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNFTIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNWVFKTIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNOFYUKTIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNDSOBIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNXFCQBDLIUNM ࣗशڭࡐ