ReasonML Quick Start Guide

Component creation basics

Let's start by analyzing a simple stateless component. In App.re, let's render a <div /> element with some text:

let component = ReasonReact.statelessComponent("App");let make = _children => {  ...component,  render: _self => <div> {ReasonReact.string("hello world")} </div>,};

And in Index.re, render the component to a DOM element with an ID of "root":

ReactDOMRe.renderToElementWithId(<App />, "root");

Due to Reason's module system, we do not need an import statement in Index.re nor an export statement in App.re. Every Reason file is a module, and every Reason module is globally available. Later in this book, we will see how a module's implementation details can be hidden so that users of your component only access ...