Slide 1
Slide 1 text
3FBDUೖ
Slide 2
Slide 2 text
3FBDUͱ
w %FDMBSBUJWF એݴత
w $PNQPOFOU#BTFE ίϯϙʔωϯτϕʔε
w -FBSO0ODF
8SJUF"OZXIFSF Ͳ͜Ͱ͑Δ
7JFXྖҬͷ+BWBTDSJQUϑϨʔϜϫʔΫ
Slide 3
Slide 3 text
%FDMBSBUJWF એݴత
ϏϡʔͷඳըॲཧΛఆٛ͢ΔͷͰͳ͘ɺϏϡʔͷ༗
Γ༷Λએݴͱͯ͠ఆٛ͢Δɻ
Ϗϡʔͷঢ়ଶมߋʹΑΔ࠶ϨϯμϦϯά3FBDU͕
ޮతʹ࣮ߦɻ
એݴͱͯ͠ͷϏϡʔίʔυ͔Β࣮ߦ࣌ͷಈ࡞͕༧ଌ
͘͢͠ɺσόοά༰қɻ
Slide 4
Slide 4 text
$PNQPOFOU#BTFE ίϯϙʔωϯτϕʔε
ΧϓηϧԽ͞Εͨίϯϙʔωϯτ͕ࣗͷঢ়ଶΛཧ͢
Δɻ
ίϯϙʔωϯτ+BWBTDSJQUͰهड़͢ΔͷͰɺ)5.-ς
ϯϓϨʔτͱҧ͍ɺ+BWBTDSJQUͷσʔλܗࣜ ɾจ
ࣈྻͱ͍ͬͨσʔλܕɺྻɾࣙॻ
͕ͦͷ··͑Δɻ
Slide 5
Slide 5 text
-FBSO0ODF
8SJUF"OZXIFSF Ͳ͜Ͱ͑Δ
.PEFM$POUSPMMFSͷΈΛલఏͱ͠ͳ͍ͷͰऔ
Γճ͕͠Α͘ɺଞͷ'8ͱͷΈ߹Θͤࣗࡏɻ
αʔόαΠυ OPEF
Ͱಈ͖ɺωΠςΟϒΞϓϦ
ॻ͚Δ 3FBDU/BUJWF
ɻ
Slide 6
Slide 6 text
+49
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// ίϯϙʔωϯτ
class App extends Component {
render() {
return ;
}
}
// Stateless Functional Component
const Hello = () =>
Hello React!!!
;
// initialize
ReactDOM.render(, document.getElementById('app'));
+BWBTDSJQU֦ுͷλάߏจɻ+BWB4DSJQUF9UFOUIJPO
$PNQPOFOU
ಠࣗλάͷΑ͏ͳͷ
Slide 7
Slide 7 text
)FMMP8PSME
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// Component
class App extends Component {
render() {
return ;
}
}
// Stateless Functional Component
const Hello = () =>
Hello React!!!
;
// initialize
ReactDOM.render(,
document.getElementById('app'));
React
JOEFYKTY JOEFYIUNM
Slide 8
Slide 8 text
1SPQFSUZͱ4UBUF
1SPQFSUZ 4UBUF
w ίϯϙʔωϯτͷҾ
w มߋ͞Εͳ͍
w ίϯϙʔωϯτ͕෦ʹ
อ࣋͢Δঢ়ଶ
w มߋ͞ΕΔ
Slide 9
Slide 9 text
ίϯϙʔωϯτؒͷσʔλͷड͚͠
͔Βࢠ ࢠ͔Β
1SPQFSUZͱͯ͢͠ɻ ͕ࢠʹࣗΒͷ4UBUFΛૢ
࡞͢ΔϝιουΛ͢ɻ
ࢠ͕ͷ4UBUFΛૢ࡞͢Δ
ϝιουΛݺͼग़͢ɻ
Slide 10
Slide 10 text
ίʔυαϯϓϧ
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Λૢ࡞͢Δϝιου
Slide 11
Slide 11 text
ίʔυαϯϓϧ
render() {
const { message } = this.state;
return (
);
}
}
// Child Component
const PlusMinusButton = ({ plusMinus, changeCount }) => {
return {plusMinus};
};
// Initialization
ReactDOM.render(, document.getElementById('app'));
"QQͷଓ͖
1SPQFSUZͷड͚͠
͔Β͞ΕͨϝιουΛΠϕϯτϦεφʔͱͯ͠ొ
͔Β͞Εͨ PSΛϘλϯϥϕϧͱͯ͠ར༻
IUUQTHJUIVCDPNZULBZBNVSBTUBSUSFBDUTUBUF
{message}
Slide 12
Slide 12 text
+BWB4DSJQUΛֶͿ
3FBDU(SBQI2-ΞϓϦ։ൃक़
ຖिਫ༵ɿ
։࠵ॴɿ
ࢀՃඅɿ
ʙʢ։ʣ
ΪʔΫΦϑΟεܙൺण
ԁ
IUUQTNFUFPSGBODPOOQBTTDPN
Slide 13
Slide 13 text
5XJUUFSɿ
(JU)VCɿ
ϒϩάɿ
!EBJ@TIJ
IUUQTHJUIVCDPNEBJTIJ
IUUQTNFEJVNDPN!EBJ@TIJ
ओ࠵ऀհ
Slide 14
Slide 14 text
3FBDUɿ
3FEVYɿ
(SBQI2-ɿ
&4 શճ
ɿ
7VFKTɿ
/FYUKTɿ
3FBDU/BUJWFɿ
8FCQBDLɿ
IUUQCBTJDSFBDUBYMJHIUDPNIUNM
IUUQCBTJDSFEVYBYMJHIUDPNIUNM
IUUQCBTJDXFCUFDIBYMJHIUDPNHSBQIRMIUNM
IUUQCBTJDXFCUFDIBYMJHIUDPNFTIUNM
IUUQCBTJDXFCUFDIBYMJHIUDPNWVFKTIUNM
IUUQCBTJDXFCUFDIBYMJHIUDPNOFYUKTIUNM
IUUQCBTJDXFCUFDIBYMJHIUDPNDSOBIUNM
IUUQCBTJDXFCUFDIBYMJHIUDPNXFCQBDLIUNM
ࣗशڭࡐ