ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API

・ReasonReactとは
・Stateless componentとStateful componentのAPI
・Stateless componentの例
・Stateful componentの例
・Router
・Routerの例

Transcript

1. ReasonReactͱReactͷAPIͷҧ͍ Roppongi.js #4 2018.6.26 tipo159
2. ReasonReactͱ͸ • Facebook͕2017೥ʹެ։ͨ͠Reactͷ3FBTPOόΠϯσΟϯά
   • Reason͸OCamlΛJavaScript෩ͷγϯλοΫεʹͨ͠ݴޠͰɼJavaScriptʹτϥϯε ύΠϧ͞ΕΔ • Jordan Walke͸ɼ࠷ॳͷReactϓϩτλΠϓΛSMLͰ࡞੒͠ɼJavaScript ʹҠ২ • SML(Standard ML)͸ɼOCamlͷݩʹͳͬͨݴޠ • ML(Meta-Language)͸ɼࣗಈఆཧূ໌ܥͰূ໌ͷಓےΛؔ਺ͱͯ͠هड़͢ΔͨΊͷ ϝλݴޠͱͯ͠։ൃ͞Εͨ • ReasonͱReasonReact΋Jordan Walke • ML͸1973೥ʹ։ൃ։࢝ɼ1978೥ʹܕγεςϜΛ௥ՃɼSML͸1990೥ʹ࢓༷ެ։ɼOCaml͸1996೥ʹެ։ • ࢀߟɿC͸1972೥ʹެ։ 2
3. ReactͷAPIͱͷओͳҧ͍ • Stateless componentͱStateful componentͷAPI͕ҟͳΔ • ঢ়ଶ؅ཧAPI͕૊Έࠐ·Ε͍ͯΔ • Router͕૊Έࠐ·Ε͍ͯΔ 3
4. Stateless componentͱStateful componentͷAPI • Stateless component: ReasonReact.statelessComponent() • Stateful component: ReasonReact.reducerComponent() • ίϯϙʔωϯτ͸ΫϥεͰ͸ͳ͘ɼϨίʔυ(΄΅Πϛϡʔλϒϧ ͳObject) 4
5. Stateless componentͷྫ let component = ReasonReact.statelessComponent(“Greeting”); /* ଐੑ͸ϥϕϧҾ਺ͳͷͰɼઌ಄ʹ~Λ෇͚Δ */ /* ࢖༻͠ͳ͍ύϥϝʔλͷઌ಄ʹ͸_Λ෇͚Δ */ let make = (~name, _children) => { ...component, /* ςϯϓϨʔτͷσϑΥϧτΛ͜͜ʹల։ */ render: _self => <div> { ReasonReact.string(name)} </div> }; +49Ͱ࢖༻
   <Greeting name=“John” /> 5
6. Stateful componentͷྫ(1/3) /* ঢ়ଶͷએݴ */ type state = { count: int, show: bool, }; /* ΞΫγϣϯͷએݴ */ type action = | Click | Toggle; /* ίϯϙʔωϯτςϯϓϨʔτͷએݴ */ let component = ReasonReact.reducerComponent(“Example”); 6
7. 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
8. Stateful componentͷྫ(3/3) render: self => { let message = “You;ve clicked this “ ++ string_of_int(self.state.count) ++ “ times” <div> <button onClick=(_event => self.send(Click))> (ReasonReact.string(message)) </button> <button onClick=(_event => self.send(Toggle))> (ReasonReact.string(“Toggle greeting”)) </button> ( self.state.show ? ReasonReact.string(greeting) : ReasonReact.null ) </div> }, }; 8
9. Router • ઃܭ໨ඪ • γϯϓϧͰബ͍ • طଘίʔυʹ؆୯ʹ௥ՃՄೳ • ߴੑೳͰখ͍͞ • ओͳAPI • ReasonReact.Router.push(string): ৽͍͠ύεΛड͚औΓURLΛΞοϓσʔτ • ReasonReact.Router.watchUtl(f): URLͷมԽΛ΢ΥονɽαϒεΫϦϓγϣ ϯτʔΫϯΛฦ͢ɽURL͕มΘΔͱɼReasonReact.Router.urlϨίʔυΛҾ ਺ʹίʔϧόοΫΛݺͼग़͢ • ReasonReact.Router.unwatchUrl(watcherID): URL΢ΥονΛதࢭ 9
10. 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
11. 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