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
   

   View Slide

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
   

   View Slide

3. ReactͷAPIͱͷओͳҧ͍
   • Stateless componentͱStateful componentͷAPI͕ҟͳΔ
   • ঢ়ଶ؅ཧAPI͕૊Έࠐ·Ε͍ͯΔ
   • Router͕૊Έࠐ·Ε͍ͯΔ
   3
   

   View Slide

4. Stateless componentͱStateful componentͷAPI
   • Stateless component: ReasonReact.statelessComponent()
   • Stateful component: ReasonReact.reducerComponent()
   • ίϯϙʔωϯτ͸ΫϥεͰ͸ͳ͘ɼϨίʔυ(΄΅Πϛϡʔλϒϧ
   ͳObject)
   4
   

   View Slide

5. Stateless componentͷྫ
   let component = ReasonReact.statelessComponent(“Greeting”);
   /* ଐੑ͸ϥϕϧҾ਺ͳͷͰɼઌ಄ʹ~Λ෇͚Δ */
   /* ࢖༻͠ͳ͍ύϥϝʔλͷઌ಄ʹ͸_Λ෇͚Δ */
   let make = (~name, _children) => {
   ...component, /* ςϯϓϨʔτͷσϑΥϧτΛ͜͜ʹల։ */
   render: _self => { ReasonReact.string(name)}
   };
   +49Ͱ࢖༻
   
   5
   

   View Slide

6. Stateful componentͷྫ(1/3)
   /* ঢ়ଶͷએݴ */
   type state = {
   count: int,
   show: bool,
   };
   /* ΞΫγϣϯͷએݴ */
   type action =
   | Click
   | Toggle;
   /* ίϯϙʔωϯτςϯϓϨʔτͷએݴ */
   let component = ReasonReact.reducerComponent(“Example”);
   6
   

   View Slide

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
   

   View Slide

8. 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
   

   View Slide

9. Router
   • ઃܭ໨ඪ
   • γϯϓϧͰബ͍
   • طଘίʔυʹ؆୯ʹ௥ՃՄೳ
   • ߴੑೳͰখ͍͞
   • ओͳAPI
   • ReasonReact.Router.push(string): ৽͍͠ύεΛड͚औΓURLΛΞοϓσʔτ
   • ReasonReact.Router.watchUtl(f): URLͷมԽΛ΢ΥονɽαϒεΫϦϓγϣ
   ϯτʔΫϯΛฦ͢ɽURL͕มΘΔͱɼReasonReact.Router.urlϨίʔυΛҾ
   ਺ʹίʔϧόοΫΛݺͼग़͢
   • ReasonReact.Router.unwatchUrl(watcherID): URL΢ΥονΛதࢭ
   9
   

   View Slide

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
    

    View Slide

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
    

    View Slide