[](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-reasonml)

Download the example [or clone the repo](https://github.com/zeit/next.js):

curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-reasonml

cd with-reasonml

Install it and run:

npm install

npm run dev

Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

now

This example features:

* An app that mixes together JavaScript and ReasonML components and functions

* An app with two pages which has a common Counter component

* That Counter component maintain the counter inside its module. This is used primarily to illustrate that modules get initialized once and their state variables persist in runtime

{

"name": "with-reasonml",

"sources": ["components", "pages"],

"bs-dependencies": ["reason-react"],

"reason": { "react-jsx": 2 },

"package-specs": ["commonjs"]

}

let component = ReasonReact.statefulComponent "Counter";

let make _children => {

...component,

initialState: fun () => 0,

render: fun self => {

let countMsg = "Count: " ^ (string_of_int self.state);

let onClick _evt {ReasonReact.state} => ReasonReact.Update (state + 1);

<div>

<p> (ReasonReact.stringToElement countMsg) </p>

<button onClick=(self.update onClick)> (ReasonReact.stringToElement "Add") </button>

</div>

}

};

let component = ReasonReact.statelessComponent "Header";

let styles = ReactDOMRe.Style.make

marginRight::"10px"

();

let make _children => {

...component,

render: fun _self => {

<div>

<a href="/" style=styles> (ReasonReact.stringToElement "Home") </a>

<a href="/about" style=styles> (ReasonReact.stringToElement "About") </a>

</div>

}

};