・ReasonReactとは ・Stateless componentとStateful componentのAPI ・Stateless componentの例 ・Stateful componentの例 ・Router ・Routerの例
ReasonReactͱReactͷAPIͷҧ͍Roppongi.js #42018.6.26tipo159
View Slide
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
ReactͷAPIͱͷओͳҧ͍• Stateless componentͱStateful componentͷAPI͕ҟͳΔ• ঢ়ଶཧAPI͕Έࠐ·Ε͍ͯΔ• Router͕Έࠐ·Ε͍ͯΔ3
Stateless componentͱStateful componentͷAPI• Stateless component: ReasonReact.statelessComponent()• Stateful component: ReasonReact.reducerComponent()• ίϯϙʔωϯτΫϥεͰͳ͘ɼϨίʔυ(΄΅ΠϛϡʔλϒϧͳObject)4
Stateless componentͷྫlet component = ReasonReact.statelessComponent(“Greeting”);/* ଐੑϥϕϧҾͳͷͰɼઌ಄ʹ~Λ͚Δ *//* ༻͠ͳ͍ύϥϝʔλͷઌ಄ʹ_Λ͚Δ */let make = (~name, _children) => {...component, /* ςϯϓϨʔτͷσϑΥϧτΛ͜͜ʹల։ */render: _self => { ReasonReact.string(name)} };+49Ͱ༻5
Stateful componentͷྫ(1/3)/* ঢ়ଶͷએݴ */type state = {count: int,show: bool,};/* ΞΫγϣϯͷએݴ */type action =| Click| Toggle;/* ίϯϙʔωϯτςϯϓϨʔτͷએݴ */let component = ReasonReact.reducerComponent(“Example”);6
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
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
Router• ઃܭඪ• γϯϓϧͰബ͍• طଘίʔυʹ؆୯ʹՃՄೳ• ߴੑೳͰখ͍͞• ओͳAPI• ReasonReact.Router.push(string): ৽͍͠ύεΛड͚औΓURLΛΞοϓσʔτ• ReasonReact.Router.watchUtl(f): URLͷมԽΛΥονɽαϒεΫϦϓγϣϯτʔΫϯΛฦ͢ɽURL͕มΘΔͱɼReasonReact.Router.urlϨίʔυΛҾʹίʔϧόοΫΛݺͼग़͢• ReasonReact.Router.unwatchUrl(watcherID): URLΥονΛதࢭ9
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
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