Cheatsheet

EDIT

If you are not familiar with ReScript / Reason, be sure to check ReScript Overview to learn how to interop with JavaScript

JSX String

JavaScript JSX String

<Text>Hello, world!</Text>

Reason JSX String

<Text> "Hello, world!"->React.string </Text>

JSX Number (int)

JavaScript JSX Number (int)

<Text>42</Text>

Reason JSX Number (int)

<Text>
  42
  ->Js.Int.toString
  ->React.string
</Text>

JSX Number (float)

JavaScript JSX Number (float)

<Text>4.2</Text>

Reason JSX Number (float)

<Text>
  4.2
  ->Js.Float.toString
  ->React.string
</Text>

JSX Array (of string)

JavaScript JSX Array (of string)

{items.map((item, i) =>
  <Text key={i++item}>
    item
  </Text>
)}

Reason JSX Array (of string)

{items
->Belt.Array.mapWithIndex((item, index) =>
  <Text
    key=((index->Js.Int.toString)++item)>
    item->React.string
  </Text>
  )
->React.array}

JSX conditional string

JavaScript JSX conditional string

<Text>{condition && something}</Text>

Reason JSX conditional string

<Text>
  {
    condition ? something->React.string : React.null
  }
</Text>

JSX optional value

JavaScript JSX optional string

Assuming something is a string that can be undefined.

{
  something && <Text>{something.toUpperCase()}</Text>;
}

Reason JSX optional string

Recommended: Assuming something is an optional string.

{
  something
  ->Belt.Option.map(thing =>
    <Text>
      thing
      ->Js.String.toUpperCase
      ->React.string
    </Text>
  )
  ->Belt.Option.getWithDefault(React.null)
}

If you have to work with JavaScript/JSON: Assuming something is a JavaScript string that can be undefined.

{
  something
  ->Js.Nullable.toOption /* convert undefined || string  as option(string) */
  ->Belt.Option.map(thing =>
    <Text>
      thing
      ->Js.String.toUpperCase
      ->React.string
    </Text>
  )
  ->Belt.Option.getWithDefault(React.null)
}

React Native StyleSheet

JavaScript React Native StyleSheet

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  container: {
    maxHeight: 600,
    width: 800,
    justifyContent: "flex-start",
    alignItems: "center",
    margin: "auto",
  },
  cornerThing: {
    position: "absolute",
    top: 100,
    right: -20,
    transform: [{ rotate: "4deg" }],
  },
  text: {
    textTransform: "uppercase",
  },
});

console.log(StyleSheet.flatten([styles.container]));

Reason React Native StyleSheet

open ReactNative;

let styles =
  Style.(
  /* = open Style; just between ()*/
  /* this is useful since all units & style methods comes from Style module */
    StyleSheet.create({
      "container":
        viewStyle(
          ~maxHeight=600.->dp,
          ~width=80.->pct,
          ~justifyContent=`flexStart,
          ~alignItems=`center,
          ~margin=auto,
          (),
        ),
      "cornerThing":
        viewStyle(
          ~position=`absolute,
          ~top=100.->dp,
          ~right=(-20.)->dp,
          ~transform=[|rotate(~rotate=4.->deg)|],
          (),
        ),
      "text": textStyle(~textTransform=`uppercase, ()),
    })
  );

Js.log(StyleSheet.flatten([|styles##container|]));

Concatened styles

JavaScript Concatened styles

<View style={[styles.container, styles.containerAdditionalStyles]} />

Reason Concatened styles

<View
  style=Style.(array([|
    styles##container,
    styles##containerAdditionalStyles
  |]))
/>

Optional styles

JavaScript Optional styles

<View
  style={[
    styles.container,
    condition && styles.containerAdditionalStyles,
    condition2 && { width: 40 },
  ]}
/>

Reason Optional styles

<View
  style=Style.(arrayOption([|
    Some(styles##container),
    condition ? Some(styles##containerAdditionalStyles) : None,
    condition2 ? Some(viewStyle(~width=40.->dp, ())) : None,
  |]))
/>

Hello world

JavaScript Hello World

/* App.js */
import React, { Component } from "react";
import { Text, View } from "react-native";

export default class HelloWorld extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Text>Hello, {this.props.name || "world"}!</Text>
      </View>
    );
  }
}

Reason Hello World

/* App.re */
open Belt;
open ReactNative;

[@react.component]
let make = (~name=?) => {
  <View
    style=Style.(
      viewStyle(~flex=1., ~justifyContent=`center, ~alignItems=`center, ())
    )>
    <Text>
      {("Hello, " ++ name->Option.getWithDefault("world") ++ "!")
       ->React.string}
    </Text>
  </View>;
};

In case you missed it

•

•

•

•