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

ReasonML et React Native

ReasonML et React Native

Un peu de pratique pour voir comment utiliser React Native via ReasonML et les différences avec l'utilisation via JavaScript.

- http://reasonml.github.io
- https://bucklescript.github.io
- https://reasonml.github.io/reason-react/
- https://reasonml-community.github.io/reason-react-native/

Maxime Thirouin

June 18, 2019
Tweet

More Decks by Maxime Thirouin

Other Decks in Programming

Transcript

  1. @MoOx
    Reason React Native
    1

    View Slide

  2. @MoOx
    2
    https://moox.io/
    @MoOx
    Maxime Thirouin
    • PostCSS
    • cssnext
    • Phenomic
    • …
    Known for its contributions to…
    putaindecode.io

    View Slide

  3. @MoOx
    3

    View Slide

  4. @MoOx
    C'est qui Reason(ML)
    et qu'est ce qu'il fait là?
    4
    Previously in React Toulouse…

    View Slide

  5. @MoOx
    5
    add(1, 1); // 2
    add(1, "1"); // "11"
    add(1, null); // 1
    add(1, undefined); // NaN

    JS

    View Slide

  6. @MoOx
    6

    JS JS

    View Slide

  7. @MoOx
    7
    • ESLint?
    • Flow?
    • TypeScript?

    View Slide

  8. @MoOx
    8

    View Slide

  9. @MoOx
    9

    View Slide

  10. @MoOx
    1. A language
    2. A syntax
    3. A compiler
    4. An ecosystem
    10
    RE

    View Slide

  11. @MoOx
    RE
    11
    JS
    BuckleScript

    View Slide

  12. @MoOx
    12
    Creator of React
    Jordan Walke wrote the
    first React prototype in
    SML
    & ReasonML
    Ocaml friend

    View Slide

  13. @MoOx
    13

    View Slide

  14. @MoOx
    React Native?
    14

    View Slide

  15. @MoOx
    15
    JS

    View Slide

  16. @MoOx
    bs-react-native
    16

    View Slide

  17. @MoOx
    17
    bs-react-native

    View Slide

  18. @MoOx
    18

    View Slide

  19. @MoOx
    Reason React Native
    19

    View Slide

  20. @MoOx
    reason-react-native
    20

    View Slide

  21. @MoOx
    21
    JS

    View Slide

  22. @MoOx
    22
    RE

    View Slide

  23. @MoOx
    Zero-cost
    23
    bs-react-native View vs reason-react-native View
    bs-react-native Style vs reason-react-native Style
    bs-react-native Platform vs reason-react-native Platform
    reason-react-native

    View Slide

  24. @MoOx
    Wanna try?
    24
    npm install -g react-native-cli
    react-native init MyApp --template reason
    Cd MyApp
    yarn add bs-platform --dev
    react-native run-ios
    reason-react-native

    View Slide

  25. @MoOx
    25
    reason-react-native 0.x.*
    should work with
    react-native@^0.x.*.
    reason-react-native

    View Slide

  26. @MoOx
    SHOWTIME
    26
    reason-react-native

    View Slide

  27. @MoOx
    https://reasonml-
    community.github.io/
    reason-react-native/en/
    docs/cheatsheet/
    https://reasonml-community.github.io/
    reason-react-native/en/docs/
    cheatsheet/
    27
    reason-react-native

    View Slide

  28. @MoOx
    28
    Questions ?
    https://moox.io/
    @MoOx
    Maxime Thirouin

    View Slide