Here is a small overview of the ReasonReact API before we start. No worries if some of these are unfamiliar; the docs cover all of them.
/* file: Greeting.re */[@react.component]let make = (~name) => <button> {React.string("Hello "++ name++"!")} </button>;If you're writing your entire React app in Reason, you'll probably have aReactDOM.render in an index file. This is what that looks like in Reason:
/* file: Index.re */switch (ReactDOM.querySelector("#root")) {|Some(root) =>ReactDOM.render(<Greeting name="John" />, root)|None => ()}This is how you used to write this in plain JavaScript (index.js):
/* file: index.js */let root =document.getElementById("root");if (root !=null) { ReactDOM.render(<Greetingname="John" />, root);};It's easy to import a ReasonReact component into your existing app. After being transpiled to JS, all Reason components will have.js as extension by default and export a function component calledmake. You can change it withmodule_systems field inside amelange.emit stanza.
/* file: App.js */import { makeas Greeting }from"./Greeting.js";exportdefaultfunctionApp(){return (<div><Greetingname="Peter" /></div> );}Make sure you check outExamples for more!