$30 off During Our Annual Pro Sale. View Details »

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の例

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