React入門

Transcript

1. 3FBDUೖ໳
2. 3FBDUͱ͸ w %FDMBSBUJWF એݴత
   w $PNQPOFOU#BTFE ίϯϙʔωϯτϕʔε
   w -FBSO
   0ODF
   8SJUF
   "OZXIFSF Ͳ͜Ͱ΋࢖͑Δ 7JFXྖҬͷ+BWBTDSJQUϑϨʔϜϫʔΫ
3. %FDMBSBUJWF એݴత ϏϡʔͷඳըॲཧΛఆٛ͢ΔͷͰ͸ͳ͘ɺϏϡʔͷ༗ Γ༷Λએݴͱͯ͠ఆٛ͢Δɻ
   Ϗϡʔͷঢ়ଶมߋʹΑΔ͸࠶ϨϯμϦϯά͸3FBDU͕ ޮ཰తʹ࣮ߦɻ
   એݴͱͯ͠ͷϏϡʔ͸ίʔυ͔Β࣮ߦ࣌ͷಈ࡞͕༧ଌ ͠΍͘͢ɺσόοά΋༰қɻ
4. $PNQPOFOU#BTFE ίϯϙʔωϯτϕʔε ΧϓηϧԽ͞Εͨίϯϙʔωϯτ͕ࣗ਎ͷঢ়ଶΛ؅ཧ͢ Δɻ
   ίϯϙʔωϯτ͸+BWBTDSJQUͰهड़͢ΔͷͰɺ)5.-ς ϯϓϨʔτͱ͸ҧ͍ɺ+BWBTDSJQUͷσʔλܗࣜ ਺஋ɾจ ࣈྻͱ͍ͬͨσʔλܕɺ഑ྻɾࣙॻ౳ ͕ͦͷ··࢖͑Δɻ
5. -FBSO
   0ODF
   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֦ுͷλάߏจɻ+BWB4DSJQU
   F9UFOUIJPO $PNQPOFOU͸
   ಠࣗλάͷΑ͏ͳ΋ͷ
7. )FMMP
   8PSME 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 ࣗशڭࡐ