React with Reason

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

Transcript

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

   View 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 Slide

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

   View 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 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 Slide

6. ©2018 Wantedly, Inc.
   ReasonReact
   

   View 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 Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View 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 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 Slide

14. ©2018 Wantedly, Inc.
    Enjoy
    

    View Slide