Need help with reason-react?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

reasonml
3.1K Stars 337 Forks MIT License 1.1K Commits 65 Opened issues

Description

Reason bindings for ReactJS

Services available

!
?

Need anything else?

Contributors list

ReasonReact - ReasonML / BuckleScript bindings for React.js

npm version npm PRs Welcome contributors discord twitter

ReasonReact is a safer, simpler way to build React components. You get a great type system with an even better developer experience. Why choose ReasonReact? Read more here

ReasonReact is just React.js under the hood. This makes it super easy to integrate with your current Next.js, Create React App, JavaScript, Flowtype or TypeScript project. Learn more about getting started here

Watch Ricky Vetter's Reason Conf talk, "Why React is Just Better in Reason" to learn more about how Facebook & Messenger are using ReasonReact

Watch Jordan Walke's Reason Conf talk, "React to the Future" to learn more about the future of ReasonML and React

Example

/* Greeting.re */

[@react.component] let make = (~name) =>

{React.string("Hello " ++ name)}

See all of our examples here. For a full application, check out reason-react-hacker-news.

Getting Started

BuckleScript is how your ReasonML code gets compiled to Javascript. Every project that uses BuckleScript will have a

bsconfig.json
file (the same way you'd have tsconfig.json in a Typescript project) with project specific settings.

You can install BuckleScript globally or keep it project specific by adding it as a

devDependency
:
yarn global add bs-platform

or npm

npm install --global bs-platform

If you install BuckleScript globally, you can quickly generate a ReasonReact project template (similar to

create-react-app
):
bsb -init my-react-app -theme react-hooks
cd my-react-app && npm install && npm start

in another tab

npm run server

If you're interested in adding ReasonReact to your current project, it's a simple 2 step process:

yarn add bs-platform --dev --exact

or npm

npm install bs-platform -D -S

Add the appropriate script tags to package.json:

"scripts": {
  "re:build": "bsb -make-world -clean-world",
  "re:watch": "bsb -make-world -clean-world -w"
}

Copy the

bsconfig.json
file from our docs located here

Then add some files somewhere (don't forget to change

bsconfig.json
, if needed).

Using Your Favorite Javascript Libraries

The same way that TypeScript has

type annotations
, we have
bindings
. Bindings are libraries that allow you to import a popular project (like lodash) or to import your own local file. ReasonReact is in fact an example of a binding!

Documentation

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

Contribute

We welcome all contributors! Anything from docs to issues to pull requests. Please help us :smile:

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

See the README inside

src
for more info!

Editor Support

Looking for syntax highlighting for your favorite editor? Check out ReasonML Editor Plugins

Friends of ReasonReact

  • genType - genType automatically generates bindings for your TypeScript / vanilla JS code.
  • reason-react-native - ReasonML / Bucklescript bindings for React Native. Allows you to use Reason to build an iOS, Android or Web app!
  • reasonml.org - An effort by the Reason Association to improve documentation for ReasonML & BuckleScript
  • redex.github.io - Find bindings for your favorite libraries here
  • ReasonTown Podcast - ReasonML Podcast
  • ReasonConf Youtube Reason Conf on Youtube

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.