Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

5f533aeab28ed4f70c26e336e71296f7?s=128

tipo159

June 26, 2018
Tweet

More Decks by tipo159

Other Decks in Programming

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