React入門

3FBDUೖ໳

3FBDUͱ͸ w %FDMBSBUJWF એݴత w $PNQPOFOU#BTFE ίϯϙʔωϯτϕʔε w
-FBSO0ODF 8SJUF"OZXIFSF Ͳ͜Ͱ΋࢖͑Δ 7JFXྖҬͷ+BWBTDSJQUϑϨʔϜϫʔΫ

%FDMBSBUJWF એݴత ϏϡʔͷඳըॲཧΛఆٛ͢ΔͷͰ͸ͳ͘ɺϏϡʔͷ༗ Γ༷Λએݴͱͯ͠ఆٛ͢Δɻ Ϗϡʔͷঢ়ଶมߋʹΑΔ͸࠶ϨϯμϦϯά͸3FBDU͕ ޮ཰తʹ࣮ߦɻ એݴͱͯ͠ͷϏϡʔ͸ίʔυ͔Β࣮ߦ࣌ͷಈ࡞͕༧ଌ ͠΍͘͢ɺσόοά΋༰қɻ

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

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

+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͸ ಠࣗλάͷΑ͏ͳ΋ͷ

)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

1SPQFSUZͱ4UBUF 1SPQFSUZ 4UBUF w ίϯϙʔωϯτͷҾ਺ w ஋͸มߋ͞Εͳ͍ w ίϯϙʔωϯτ͕಺෦ʹ อ࣋͢Δঢ়ଶ
w ஋͸มߋ͞ΕΔ

ίϯϙʔωϯτؒͷσʔλͷड͚౉͠ ਌͔Βࢠ ࢠ͔Β਌ 1SPQFSUZͱͯ͠౉͢ɻ ਌͕ࢠʹࣗΒͷ4UBUFΛૢ ࡞͢ΔϝιουΛ౉͢ɻ ࢠ͕਌ͷ4UBUFΛૢ࡞͢Δ ϝιουΛݺͼग़͢ɻ

ίʔυαϯϓϧ 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Λૢ࡞͢Δϝιου

ίʔυαϯϓϧ 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

+BWB4DSJQUΛֶͿ 3FBDU(SBQI2-ΞϓϦ։ൃक़ ຖिਫ༵೔ɿ ։࠵৔ॴɿ ࢀՃඅɿ ʙʢ։৔ʣ ΪʔΫΦϑΟεܙൺण ԁ IUUQTNFUFPSGBODPOOQBTTDPN

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

3FBDUɿ 3FEVYɿ (SBQI2-ɿ &4 શճ ɿ 7VFKTɿ /FYUKTɿ 3FBDU/BUJWFɿ 8FCQBDLɿ
IUUQCBTJDSFBDUBYMJHIUDPNIUNM IUUQCBTJDSFEVYBYMJHIUDPNIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNHSBQIRMIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNFTIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNWVFKTIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNOFYUKTIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNDSOBIUNM IUUQCBTJDXFCUFDIBYMJHIUDPNXFCQBDLIUNM ࣗशڭࡐ

React入門

React入門

yayamura

Other Decks in Programming

Featured

Transcript

3FBDUೖ໳

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

%FDMBSBUJWF એݴత ϏϡʔͷඳըॲཧΛఆٛ͢ΔͷͰ͸ͳ͘ɺϏϡʔͷ༗ Γ༷Λએݴͱͯ͠ఆٛ͢Δɻ Ϗϡʔͷঢ়ଶมߋʹΑΔ͸࠶ϨϯμϦϯά͸3FBDU͕ ޮ཰తʹ࣮ߦɻ એݴͱͯ͠ͷϏϡʔ͸ίʔυ͔Β࣮ߦ࣌ͷಈ࡞͕༧ଌ ͠΍͘͢ɺσόοά΋༰қɻ

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

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

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

)FMMP8PSME import React, { Component } from 'react'; import ReactDOM

1SPQFSUZͱ4UBUF 1SPQFSUZ 4UBUF w ίϯϙʔωϯτͷҾ਺ w ஋͸มߋ͞Εͳ͍ w ίϯϙʔωϯτ͕಺෦ʹ อ࣋͢Δঢ়ଶ

ίϯϙʔωϯτؒͷσʔλͷड͚౉͠ ਌͔Βࢠ ࢠ͔Β਌ 1SPQFSUZͱͯ͠౉͢ɻ ਌͕ࢠʹࣗΒͷ4UBUFΛૢ ࡞͢ΔϝιουΛ౉͢ɻ ࢠ͕਌ͷ4UBUFΛૢ࡞͢Δ ϝιουΛݺͼग़͢ɻ

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

ίʔυαϯϓϧ render() { const { message } = this.state; return

+BWB4DSJQUΛֶͿ 3FBDU(SBQI2-ΞϓϦ։ൃक़ ຖिਫ༵೔ɿ ։࠵৔ॴɿ ࢀՃඅɿ ʙʢ։৔ʣ ΪʔΫΦϑΟεܙൺण ԁ IUUQTNFUFPSGBODPOOQBTTDPN

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

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