reason-react

ReasonReact

Come join us in Discord!

npm install --save reason-react

Usage

See https://github.com/chenglou/reason-react-example

Documentation

See https://reasonml.github.io/reason-react/

Contribute

git clone https://github.com/reasonml/reason-react.git
cd reason-react
npm install
npm start

Then add some files somewhere (don't forget to change bsconfig.json, if needed).

Changelog

0.1.4

Major update! Though this is 100% backward compatible, so no major version bump. We've revamped the whole API based on all you awesome folks' feedback, and we've provided a gradual migration path.

Requirements & Self-Congratulations

• New BuckleScript. bs-platform >=1.7.5
• This repo. reason-react >=0.1.4

Upon installing the new dependencies, your existing code still works. Isn't that great? You can incrementally convert things over. The old modules will stay around until the next or next next version. No rush!

ReactDOMRe, ReactDOMServerRe and ReactEventRe stay as-is. ReactRe is now deprecated (but again, is staying around) in favor of the new implementation, ReasonReact.

Small overview:

• No more modules/functors needed for the API (don't go crazy with the new function composition power please!)
• No more include
• 10-20% smaller code on average, both input and output
• Corner-cases with children and empty props mostly gone
• Unused props now warn

Forwarded Definitions

The following definitions are carried over from ReactRe into ReasonReact, unchanged. A simple search-and-replace fixes all of them:

• ReactRe.reactElement -> ReasonReact.reactElement
• like wise, reactClass
• reactRef, refToJsObj
• nullElement, stringToElement, arrayToElement
• createElement (if you recall, this isn't the pervasive ReactJS React.createElement). It's only used raw in escape hatch situations. If you've never used it: great!

JSX

Lowercase JSX <div> whatever </div> didn't change. Uppercase <Foo ref=a key=b bar=baz> hello goodbye </Foo> used to translate to Foo.createElement ref::a key::b bar::baz [hello, goodbye]. It now translates to ReasonReact.element ref::a key::b (Foo.make bar::baz [|hello, goodbye|]). We've pulled out ref and key into a dedicated call for good measures, and instead of using list as children, we now use array. More idiomatic ReactJS, list <-> array conversion churn.

To use the new JSX, change bsconfig.json's {"reason": {"react-jsx": true}} to {"reason": {"react-jsx": 2}}. Although you probably won't do that at the beginning, since that'd change all JSX in the whole project and cause type errors everywhere. Instead, keep your old bsconfig.json unchanged and for the JSX you'd like to selectively convert over, put a [@@@bs.config {jsx: 2}]; at the top of the file. Once you've converted everything over, switch to {"react-jsx": 2} in bsconfig.json and remove those @@@bs.config at the top of every file.

Alternatively, you can go straight to {"react-jsx": 2} in bsconfig.json, and put a [@@@bs.config {jsx: 1}] at the top of files where you'd like to use the old uppercase JSX transform.

Before starting the sections below, please briefly go through the new API on the documentation page.