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 things they are supposed to access.