ReasonReact

ReasonReact

  • Docs
  • Try
  • Examples
  • Community
  • Blog
  • Languages iconEnglish
    • 日本語
    • Español
    • Français
    • 한국어
    • Português (Brasil)
    • Русский
    • 中文
    • 繁體中文
    • Help Translate
  • GitHub

›Recipes & Snippets

Recipes & Snippets

  • A List of Simple Examples
  • Adding data-* attributes
  • Working with Optional Data
  • Render Props
  • Importing JS into Reason
  • Importing Reason into JS
  • ReasonReact using ReactJS
  • ReactJS using ReasonReact
  • Example Projects
  • GraphQL & Apollo
  • Styling: Tailwind CSS
Edit

ReasonReact using ReactJS

MyBanner.js:

var ReactDOM = require('react-dom');
var React = require('react');

var MyBanner = function(props) {
   if (props.show) {
    return React.createElement('div', null,
      'Here\'s the message from the owner: ' + props.message
    );
  } else {
    return null;
  }
};

module.exports = MyBanner;

MyBannerRe.re

/* ReactJS used by ReasonReact */
[@react.component] [@bs.module]
external make : (~show: bool, ~message: string) => React.element = "./MyBanner";
← Importing Reason into JSReactJS using ReasonReact →