ReasonReact

ReasonReact

  • Docs
  • Try
  • Examples
  • Community
  • Blog
  • Languages iconEnglish
    • 日本語
    • Español
    • Français
    • 한국어
    • Português (Brasil)
    • Русский
    • 中文
    • 繁體中文
    • Help Translate
  • GitHub

›Core

Getting Started

  • What & Why
  • Installation
  • Intro Example

Core

  • Components
  • JSX
  • Event
  • Style
  • Router
  • ReactDOM
  • Refs in React
  • Testing components

Hooks

  • useState
  • useReducer
  • useEffect
  • Custom Hooks

ReactJS Idioms Equivalents

  • Invalid Prop Name
  • Props Spread
  • Component as Prop
  • Ternary Shortcut
  • Context
  • Error boundaries

FAQ

  • I'm Having a Type Error
  • I Really Need Feature X From ReactJS
  • I want to create a DOM element without JSX
Edit

ReactDOM

ReasonReact's ReactDOM module is called ReactDOM. The module exposes helpers that work with familiar ReactJS idioms:

  • ReactDOM.querySelector : string => option(Dom.element)
  • ReactDOM.Client.createRoot : Dom.element => Client.root
  • ReactDOM.Client.render : (Client.root, React.element) => unit
  • ReactDOM.Client.hydrateRoot : (Dom.element, React.element) => Client.root
  • ReactDOM.createPortal : (React.element, Dom.element) => React.element
  • ReactDOM.unmountComponentAtNode : Dom.element => unit

More info about ReactDOM module can be found in the interface file: ReactDOM.rei or in the official react-dom documentation.

Usage

In React 18, the ReactDOM.render function is replaced by ReactDOM.Client.render.

let element = ReactDOM.querySelector("#root");
switch (element) {
| None => Js.log("#root element not found");
| Some(element) => {
  let root = ReactDOM.Client.createRoot(element);
  ReactDOM.Client.render(<Greeting name="John" />, root);
}
}

Hydration

Hydration is the process of converting a static HTML page into a dynamic React app.

let element = ReactDOM.querySelector("#root");
switch (element) {
| None => Js.log("#root element not found");
| Some(element) => {
  /* root is a ReactDOM.Client.root and used to render on top of the existing HTML
     with ReactDOM.Client.render or unmount, via ReactDOM.Client.unmount. */
  let _root = ReactDOM.Client.hydrateRoot(<Greeting name="John" />, element);
  ();
}
}

ReactDOMServer

ReasonReact's equivalent of ReactDOMServer from react-dom/server exposes

  • renderToString : React.element => string
  • renderToStaticMarkup : React.element => string

More info about ReactDOMServer can be found in the official React documentation.

← RouterRefs in React →
  • ReactDOMServer