$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

    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