dangdennis

/* This is a variant of type animal */
type animal =
  | Cat
  | Dog;

/* This is a record of type cat */
type cat = {
  name: string,
  species: animal, /* animal can be Cat or Dog */
};

dangdennis

/* You can pattern match against a variety of data types:
  tuples, arrays, variants, strings, etc.
*/

/* Define a laptop variant */
type laptop =
  | Macbook
  | Chromebook
  | Surface(string);

dangdennis

/* Like proptypes, you define your state type */
type state = {counter: int};

/* Define a Redux-like action variant here */
type action =
  | Count(int);

/* Define the reducer component */
let component = ReasonReact.reducerComponent("SomeStatefulComponent");

dangdennis

/* This is a variant of type animal */
type animal =
  | Cat
  | Dog;

/* This is a record of type cat */
type cat = {
  name: string,
  species: animal /* animal can be Cat or Dog */
  /* color: string */

dangdennis

/* 
1. Use stylesheets
BuckleScript provides escape hatches. 
You can run native Javascript code with [%bs.raw {| CODE GOES BETWEEN HERE |}] 
*/
[%bs.raw {|require('./index.css')|}];

/* 2. Use inline styles */
let styles = ReactDOMRe.Style.make(~backgroundColor="peach", ~width="500px", ());
<div style=styles />;

dangdennis

open Belt
/* This is a variant of type animal */
type animal =
  | Cat
  | Dog;

/* This is a record of type cat */
type cat = {
  name: string,
  species: animal /* animal can be Cat or Dog */

dangdennis

/*
 All functions in Reason are automatically curried
 Let's use List.map as an example
 Function signature: let map: ('a => 'b, list('a)) => list('b);
 */

let add5 = n => n + 5; /* callback func */
let add5ToList = List.map(add5);

let list = [1,2,3,4,5];

dangdennis

/*
     The pipe operator |> places the primary input in the LAST argument position
     Let's look at its use with List.map in a couple scenarios
 */
module Pipe = {
  let add5 = n => n + 5; /* callback func */
  let listPlus5 = [1, 2, 3, 4, 5] |> List.map(add5); /* [6,7,8,9,10] */

  /* Common ReasonReact recipe for mapping over React elements */
  let someMappedReasonElements =

dangdennis

/*
     The fast pipe operator -> places the primary input in the FIRST argument position
     Let's look at its use with Belt's List.map in a couple scenarios
 */
module FastPipe = {
  /* Recall Belt's List.map signature
     let map: (list('a), 'a => 'b) => list('b); */

  let add5 = n => n + 5; /* callback func */
  /* The list of integers are inserted as the first argument */

dangdennis

/* Using Belt API for familiarity */
open Belt;

/* Will return an array of posts */
let fakeRealApi = "https://jsonplaceholder.typicode.com/posts";

/* Defining types for the expected posts */
type post = {
  userId: int,
  id: int,