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

React with Reason

React with Reason

Introduction to Reason language with React using ReasonReact. I talk this in Roppongi.js #1.

Yuki YAMADA

March 20, 2018
Tweet

More Decks by Yuki YAMADA

Other Decks in Programming

Transcript

  1. ©2018 Wantedly, Inc.
    React with Reason
    Roppongi.js #1
    20.Mar.2018 - Yuki Yamada

    View full-size slide

  2. ©2018 Wantedly, Inc.
    Yuki Yamada
    @yamadayuki
    I’m an Engineer @ Wantedly
    I write JS, Golang, Ruby … etc.
    Now I focus on Machine Learning.

    View full-size slide

  3. ©2018 Wantedly, Inc.
    What is Reason / BuckleScript ?

    View full-size slide

  4. ©2018 Wantedly, Inc.
    Reason
    https://reasonml.github.io
    Reason have BuckleScript/OCaml
    backend. It gives OCaml a familiar syntax
    geared toward JavaScript programmers.
    Powerful, safe type inference means you
    rarely have to annotate types, but
    everything gets checked for you.

    View full-size slide

  5. ©2018 Wantedly, Inc.
    BuckleScript
    https://bucklescript.github.io
    BuckleScript makes OCaml compile to
    clean, readable and performant
    JavaScript code.
    - Sound type system
    - Strong type inference
    - Expressive type features

    View full-size slide

  6. ©2018 Wantedly, Inc.
    ReasonReact

    View full-size slide

  7. ©2018 Wantedly, Inc.
    ReasonReact
    Why & What
    ReasonReact is safer and simpler
    than the React Application
    implemented with vanilla JavaScript.
    And you can easily integrate with
    benefit from OCaml syntax and its
    functionality such as Variants and
    pattern matching.

    View full-size slide

  8. ©2018 Wantedly, Inc.
    ReasonReact Sample
    Simple Button component

    View full-size slide

  9. ©2018 Wantedly, Inc.
    ReasonReact Sample
    Button component (Solid / Ghost / Transparent)

    View full-size slide

  10. ©2018 Wantedly, Inc.
    ReasonReact Sample
    Button component (Solid / Ghost / Transparent)

    View full-size slide

  11. ©2018 Wantedly, Inc.
    ReasonReact Sample
    Button component (Solid / Ghost / Transparent)

    View full-size slide

  12. ©2018 Wantedly, Inc.
    ReasonReact
    State, Action and Reducer
    ReasonReact stateful components
    are like ReactJS stateful
    components, except with the
    concept of "reducer" (like Redux)
    built in.

    View full-size slide

  13. ©2018 Wantedly, Inc.
    ReasonReact
    Router
    ReasonReact has tiny router functions
    to use with ReasonReact.
    - The simplest, thinnest possible
    - Easily pluggable anywhere into
    your existing code
    - Performant and tiny

    View full-size slide

  14. ©2018 Wantedly, Inc.
    Enjoy

    View full-size slide