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

/*
 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

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

/* 
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

/* 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

/* 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

/* 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

/* 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

module ChildComponent = {
  let component = ReasonReact.statelessComponent("ChildComponent");
  /* You must declare your props as labeled arguments with the ~ symbol */
  /* If I don't, compile error: It only accepts 1 argument; here, it's called with more. */
  let make = (~randomTextProp, _children) => {
    ...component,
    render: _self => <p> {ReasonReact.string(randomTextProp)} </p>,
  };
};

dangdennis

/* ReasonElements.re */

let component = ReasonReact.statelessComponent("ReasonElements");

let make = _children => {
  ...component,
  render: _self => {
    let someListOfReactElements = [<div />, <div />, <div />];
    let someArrayOfReactElements = Array.of_list(someListOfReactElements);
    let isNull = true;