Reason React provides comprehensive ReasonML/OCaml bindings for React.js, enabling developers to build React components with deeply integrated, strong, static type safety. It offers full React API coverage including components, hooks, events, DOM manipulation, and server-side rendering capabilities, designed for production use in large, mission-critical codebases.
opam install reason-reactreactjs-jsx-ppx preprocessor/* Import main React module */
open React;
/* Import specific modules */
module Router = ReasonReactRouter;
module DOM = ReactDOM;
module Event = ReactEvent;For specific functionality:
/* Component creation */
[@react.component]
let make = (~name: string) => {
<div> {React.string("Hello " ++ name)} </div>
}
/* DOM rendering */
ReactDOM.render(<App />, querySelector("#root"));
/* Event handling */
let handleClick = (event: ReactEvent.Mouse.t) => {
ReactEvent.Mouse.preventDefault(event);
/* handle click */
}/* Define a component with state and event handling */
[@react.component]
let make = (~initialCount: int=0, ()) => {
let (count, setCount) = React.useState(() => initialCount);
let increment = React.useCallback1(() => {
setCount(prev => prev + 1)
}, [||]);
let handleClick = (event: ReactEvent.Mouse.t) => {
ReactEvent.Mouse.preventDefault(event);
increment();
};
<div>
<p> {React.string("Count: " ++ string_of_int(count))} </p>
<button onClick=handleClick>
{React.string("Increment")}
</button>
</div>
}
/* Render to DOM */
let root = ReactDOM.querySelector("#root");
switch (root) {
| Some(element) => ReactDOM.render(<App />, element)
| None => ()
}Reason React is organized around several key modules:
Fundamental React functionality including elements, components, hooks, context, refs, and React primitives. Provides the foundation for all React development.
type element;
type component('props);
type ref('value) = {mutable current: 'value};
/* Element creation */
external string: string => element = "%identity";
external int: int => element = "%identity";
external float: float => element = "%identity";
external array: array(element) => element = "%identity";
[@bs.val] external null: element = "null";
/* Component functions */
[@bs.module "react"]
external createElement: (component('props), 'props) => element = "createElement";
[@bs.module "react"]
external cloneElement: (element, 'props) => element = "cloneElement";Complete hooks implementation including state, effects, memoization, and lifecycle hooks. Provides both standard and uncurried variants with dependency array support.
/* State hooks */
[@bs.module "react"]
external useState: ([@bs.uncurry] (unit => 'state)) => ('state, ('state => 'state) => unit) = "useState";
[@bs.module "react"]
external useReducer: ([@bs.uncurry] (('state, 'action) => 'state), 'state) => ('state, 'action => unit) = "useReducer";
/* Effect hooks with dependency variations */
[@bs.module "react"]
external useEffect: ([@bs.uncurry] (unit => option(unit => unit))) => unit = "useEffect";
[@bs.module "react"]
external useEffect1: ([@bs.uncurry] (unit => option(unit => unit)), array('a)) => unit = "useEffect";
/* Memoization hooks */
[@bs.module "react"]
external useMemo: ([@bs.uncurry] (unit => 'any)) => 'any = "useMemo";
[@bs.module "react"]
external useCallback: ([@bs.uncurry] ('input => 'output)) => callback('input, 'output) = "useCallback";Comprehensive DOM operations including rendering, hydration, portals, and a complete props system supporting all HTML, SVG, and accessibility attributes.
/* Core DOM functions */
[@bs.module "react-dom"]
external render: (React.element, Dom.element) => unit = "render";
[@bs.module "react-dom"]
external hydrate: (React.element, Dom.element) => unit = "hydrate";
[@bs.module "react-dom"]
external createPortal: (React.element, Dom.element) => React.element = "createPortal";
/* DOM utilities */
[@bs.val] [@bs.return nullable]
external querySelector: string => option(Dom.element) = "document.querySelector";Type-safe synthetic event system with 16 specialized event modules covering all React event types. Provides complete event property access with compile-time safety.
type synthetic('a);
module Synthetic = {
type t = synthetic(tag);
[@bs.get] external bubbles: synthetic('a) => bool = "bubbles";
[@bs.send] external preventDefault: synthetic('a) => unit = "preventDefault";
[@bs.send] external stopPropagation: synthetic('a) => unit = "stopPropagation";
[@bs.get] external target: synthetic('a) => Js.t({..}) = "target";
};
module Mouse = {
type t = synthetic(tag);
[@bs.get] external clientX: t => int = "clientX";
[@bs.get] external clientY: t => int = "clientY";
[@bs.get] external button: t => int = "button";
};Built-in client-side routing solution with URL watching, navigation functions, and React hooks integration. Supports both imperative and declarative routing patterns.
type url = {
path: list(string),
hash: string,
search: string,
};
type watcherID;
/* Navigation */
let push: string => unit;
let replace: string => unit;
/* URL watching */
let watchUrl: (url => unit) => watcherID;
let unwatchUrl: watcherID => unit;
/* Hooks */
let useUrl: (~serverUrl: url=?, unit) => url;Type-safe CSS styling system with comprehensive support for CSS properties including CSS Grid, Flexbox, animations, and SVG. Provides compile-time validation of CSS values.
type t;
external make: (
~display: string=?,
~position: string=?,
~width: string=?,
~height: string=?,
~margin: string=?,
~padding: string=?,
~backgroundColor: string=?,
~color: string=?,
~fontSize: string=?,
~fontFamily: string=?,
unit
) => t;
external combine: (t, t) => t;Comprehensive testing utilities including component type checking, event simulation, DOM utilities, and container management for React component testing.
/* Test control */
let act: (unit => unit) => unit;
let actAsync: (unit => Js.Promise.t('a)) => Js.Promise.t(unit);
/* Component type checking */
[@bs.module "react-dom/test-utils"]
external isElement: 'element => bool = "isElement";
[@bs.module "react-dom/test-utils"]
external isDOMComponent: 'element => bool = "isDOMComponent";
module Simulate = {
[@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
external click: Dom.element => unit = "click";
[@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
external change: Dom.element => unit = "change";
};Class-based error boundary component for catching and handling React errors. Provides fallback UI rendering and error information access.
type info = {componentStack: string};
type params('error) = {
error: 'error,
info: info,
};
[@react.component]
let make: (~children: React.element, ~fallback: params('error) => React.element) => React.element;Server-side rendering utilities for generating HTML strings from React elements, supporting both standard and static markup generation.
[@bs.module "react-dom/server"]
external renderToString: React.element => string = "renderToString";
[@bs.module "react-dom/server"]
external renderToStaticMarkup: React.element => string = "renderToStaticMarkup";/* Fundamental React types */
type element;
type component('props);
type componentLike('props, 'return) = 'props => 'return;
/* Reference types */
type ref('value) = {mutable current: 'value};
/* Callback types */
type callback('input, 'output) = 'input => 'output;
/* Context types */
module Context = {
type t('props);
};
/* Event types */
type synthetic('a);
/* Style types */
type style = ReactDOMStyle.t;
/* Router types */
type url = {
path: list(string),
hash: string,
search: string,
};
/* Error boundary types */
type info = {componentStack: string};
type params('error) = {
error: 'error,
info: info,
};