Reason

Reason is a programming language that compiles to JavaScript. It is a syntax extension and toolchain for OCaml, and is designed for building type-safe applications, with strong support for React via ReasonReact.

Usage

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "reason"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "reason"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "reason"
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "reason"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "reason"
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "reason"
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "reason"
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes
  template="reason"></live-codes>

<script type="module">
  import "livecodes/web-components";
</script>

Standard Library

Reason's standard library modules (e.g. Belt, Array, List) are available directly without explicit imports:

Example:

let doubled = [1, 2, 3]->Belt.List.map((n) => n * 2);
Js.log(doubled);

Module Imports

npm modules can be imported as described in the section about module resolution, using the [@bs.module] attribute:

Example:

[@bs.module "canvas-confetti"] external confetti: unit => unit = "default";
confetti();

ReasonReact

Reason has support for React via ReasonReact. Components use the [@react.component] decorator and leverage Reason's type system for props.

Example:

module App = {
  [@react.component]
  let make = (~name) => {
    let title = "Hello, " ++ name ++ "!"
    let (count, setCount) = React.useState(() => 0);

    <div className="container">
      <h1> {React.string(title)} </h1>
      <p> {React.string("You clicked " ++ string_of_int(count) ++ " times")} </p>
      <button onClick={_ => setCount(_ => count + 1)}>
        {React.string("Click me")}
      </button>
    </div>
  };
};

switch (ReactDOM.querySelector("#app")) {
| Some(root) => ReactDOM.render(<App name="ReasonReact" />, root)
| None => ()
};

warning

ReasonReact does not support React 19. Use an import map (in custom settings) to pin React to v18:

Custom Settings

{
  "imports": {
    "react": "https://esm.sh/[email protected]",
    "react/": "https://esm.sh/[email protected]/",
    "react-dom": "https://esm.sh/[email protected]"
  }
}

Language Info

Name

reason

Extensions

.re, .rei

Editor

script

Compiler

ReScript compiler (v9) (the last version with Reason syntax support)

Version

rescript: v9.1.2

Starter Template

https://livecodes.io/?template=reason

Links

• Reason
• ReasonReact
• ReScript