Slide 1
Slide 1 text
ReasonReactͱReactͷAPIͷҧ͍
Roppongi.js #4
2018.6.26
tipo159
Slide 2
Slide 2 text
ReasonReactͱ
• Facebook͕2017ʹެ։ͨ͠Reactͷ3FBTPOόΠϯσΟϯά
• ReasonOCamlΛJavaScript෩ͷγϯλοΫεʹͨ͠ݴޠͰɼJavaScriptʹτϥϯε
ύΠϧ͞ΕΔ
• Jordan Walkeɼ࠷ॳͷReactϓϩτλΠϓΛSMLͰ࡞͠ɼJavaScript
ʹҠ২
• SML(Standard ML)ɼOCamlͷݩʹͳͬͨݴޠ
• ML(Meta-Language)ɼࣗಈఆཧূ໌ܥͰূ໌ͷಓےΛؔͱͯ͠هड़͢ΔͨΊͷ
ϝλݴޠͱͯ͠։ൃ͞Εͨ
• ReasonͱReasonReactJordan Walke
• ML1973ʹ։ൃ։࢝ɼ1978ʹܕγεςϜΛՃɼSML1990ʹ༷ެ։ɼOCaml1996ʹެ։
• ࢀߟɿC1972ʹެ։
2
Slide 3
Slide 3 text
ReactͷAPIͱͷओͳҧ͍
• Stateless componentͱStateful componentͷAPI͕ҟͳΔ
• ঢ়ଶཧAPI͕Έࠐ·Ε͍ͯΔ
• Router͕Έࠐ·Ε͍ͯΔ
3
Slide 4
Slide 4 text
Stateless componentͱStateful componentͷAPI
• Stateless component: ReasonReact.statelessComponent()
• Stateful component: ReasonReact.reducerComponent()
• ίϯϙʔωϯτΫϥεͰͳ͘ɼϨίʔυ(΄΅Πϛϡʔλϒϧ
ͳObject)
4
Slide 5
Slide 5 text
Stateless componentͷྫ
let component = ReasonReact.statelessComponent(“Greeting”);
/* ଐੑϥϕϧҾͳͷͰɼઌ಄ʹ~Λ͚Δ */
/* ༻͠ͳ͍ύϥϝʔλͷઌ಄ʹ_Λ͚Δ */
let make = (~name, _children) => {
...component, /* ςϯϓϨʔτͷσϑΥϧτΛ͜͜ʹల։ */
render: _self =>
{ ReasonReact.string(name)}
};
+49Ͱ༻
5
Slide 6
Slide 6 text
Stateful componentͷྫ(1/3)
/* ঢ়ଶͷએݴ */
type state = {
count: int,
show: bool,
};
/* ΞΫγϣϯͷએݴ */
type action =
| Click
| Toggle;
/* ίϯϙʔωϯτςϯϓϨʔτͷએݴ */
let component = ReasonReact.reducerComponent(“Example”);
6
Slide 7
Slide 7 text
Stateful componentͷྫ(2/3)
let make = (~greeting, _children) => {
...component,
initialState: () => { count:0, show: true},
/* ঢ়ଶભҠ */
reducer: (action, state) =>
switch (action) {
| Click => ReasonReact.Update({...state, count: state.count + 1})
| Toggle => ReasonReact.Update({...state, show: ! state.show})
},
7
Slide 8
Slide 8 text
Stateful componentͷྫ(3/3)
render: self => {
let message =
“You;ve clicked this “ ++ string_of_int(self.state.count) ++ “ times”
self.send(Click))>
(ReasonReact.string(message))
self.send(Toggle))>
(ReasonReact.string(“Toggle greeting”))
(
self.state.show ?
ReasonReact.string(greeting) : ReasonReact.null
)
},
};
8
Slide 9
Slide 9 text
Router
• ઃܭඪ
• γϯϓϧͰബ͍
• طଘίʔυʹ؆୯ʹՃՄೳ
• ߴੑೳͰখ͍͞
• ओͳAPI
• ReasonReact.Router.push(string): ৽͍͠ύεΛड͚औΓURLΛΞοϓσʔτ
• ReasonReact.Router.watchUtl(f): URLͷมԽΛΥονɽαϒεΫϦϓγϣ
ϯτʔΫϯΛฦ͢ɽURL͕มΘΔͱɼReasonReact.Router.urlϨίʔυΛҾ
ʹίʔϧόοΫΛݺͼग़͢
• ReasonReact.Router.unwatchUrl(watcherID): URLΥονΛதࢭ
9
Slide 10
Slide 10 text
3PVUFSͷྫ(1/2)
let component = ReasonReact.reducerComponent(“TodoApp”);
let make = _children => {
...component,
reducer: (action, state) =>
switch (action) {
/* router actions */
| ShowAll => ReasonReact.Update({...state, nowShowing: AllTodos})
| ShowActive => ...
/* todo actions */
| ChangeTodo(text) => ...
|;
10
Slide 11
Slide 11 text
3PVUFSͷྫ(2/2)
didMount: self =>
let watcherID = ReasonReact.Router.watchUrl(url => {
switch (url.hash, MyAppStatus.isUserLoggedIn) {
| (“active”, _) => self.send(ShowActive)
| (“completed”, _) => self.send(ShowCompleted)
| (“shared”, true) => self.send(ShowShared)
| (“shared”, false) when isSpecialUser => …
| (“shared”, false) => ...
| _ => self.send(ShowAll)
}
}),
self.onUnmount(() => ReasonReact.Router.unwatchUrl(watvherID)));
},
render: ...
}
11