For example, we want to use moment.js inside our ReasonML code.

What we can do is create a module file:

//Moment.re

type tt;

external momentWithDate : Js.Date.t => tt = "moment" [@@bs.module];

external format : tt => string => string = "" [@@bs.send];

Using it inside component:

/* This is the basic component. */
let component = ReasonReact.statelessComponent "Page"; /* Your familiar handleClick from ReactJS. This mandatorily takes the payload,
then the `self` record, which contains state (none here), `handle`, `reduce`
and other utilities */
let handleClick _event _self => Js.log "clicked!"; let momentNow = Moment.momentWithDate(Js.Date.make()); /* `make` is the function that mandatorily takes `children` (if you want to use
`JSX). `message` is a named argument, which simulates ReactJS props. Usage: `<Page message="hello" />` Which desugars to `ReasonReact.element (Page.make message::"hello" [||])` */
let make ::message ::times _children => {
...component,
render: fun self =>
<div onClick=(self.handle handleClick)>
(ReasonReact.stringToElement message)
(ReasonReact.stringToElement times)
(ReasonReact.stringToElement (Moment.format momentNow "dddd"))
</div>
};

[REASONML] Using Javascript npm package from REASON的更多相关文章

  1. Angular Npm Package.Json文件详解

    Angular7 Npm Package.Json文件详解   近期时间比较充裕,正好想了解下Angular Project相关内容.于是将Npm官网上关于Package.json的官方说明文档进行了 ...

  2. [WASM Rust] Create and Publish a NPM Package Containing Rust Generated WebAssembly using wasm-pack

    wasm-pack is a tool that seeks to be a one-stop shop for building and working with Rust generated We ...

  3. Node.js NPM Package.json

    章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json Nod ...

  4. [Node.js] Configuring npm package.json scripts

    With a node package manager's (npm) package.json script property, you can preconfigure common tasks ...

  5. [NPM + React] Prepare a Custom React Hook to be Published as an npm Package

    Before we publish our package, we want to make sure everything is set up correctly. We’ll cover vers ...

  6. npm & package.json & directories & files

    npm & package.json & directories & files package.json https://docs.npmjs.com/files/packa ...

  7. npm package.json属性详解

    概述 本文档是自己看官方文档的理解+翻译,内容是package.json配置里边的属性含义.package.json必须是一个严格的json文件,而不仅仅是js里边的一个对象.其中很多属性可以通过np ...

  8. npm package.json配置整理

    通过npm init 创建 package.json文件 参数: name:项目名字 version: 版本号 description: 项目介绍 main: 项目的入口文件 scripts: npm ...

  9. 极简 Node.js 入门 - 1.4 NPM & package.json

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

随机推荐

  1. 学习参考《Python基础教程(第3版)》中文PDF+英文PDF+源代码

    python基础教程ed3: 基础知识 列表和元组 字符串 字典 流程控制 抽象(参数 作用域 递归) 异常 魔术方法/特性/迭代器 模块/标准库 文件 GUI DB 网络编程 测试 扩展python ...

  2. CSU 1374 Restore Calculation 数位DP

    题意: 给你三个数A, B, C(没有前导0),但是其中某些位不知道. 问A+B=C成立有多少种情况. 思路: 从最后一位往前推,枚举A, B的每一种情况,考虑进位和不进位两种情况. 代码: #inc ...

  3. 【AHOI2013】【BZOJ3238】差异

    Description Input 一行,一个字符串S Output 一行.一个整数.表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...

  4. 线程池系列一:线程池作用及Executors方法讲解

    线程池的作用: 线程池作用就是限制系统中执行线程的数量.     根据系统的环境情况,可以自动或手动设置线程数量,达到运行的最佳效果:少了浪费了系统资源,多了造成系统拥挤效率不高.用线程池控制线程数量 ...

  5. 流水线技术原理和Verilog HDL实现

    所谓流水线处理,如同生产装配线一样,将操作执行工作量分成若干个时间上均衡的操作段,从流水线的起点连续地输入,流水线的各操作段以重叠方式执行.这使得操作执行速度只与流水线输入的速度有关,而与处理所需的时 ...

  6. springboot 统一管理异常信息

    新建ResponseEntityExceptionHandler的继承类:(依然,需要入口类扫描) /** * @author sky * @version 1.0 */ @ControllerAdv ...

  7. web.config添加identity impersonate="true"导致拒绝访问

    例:<identity impersonate="tr" userName="AD\name" password="word"/> ...

  8. 遇到的兼容性bug

    1.(IE6):ie6环境下,通过设置z-index:999:无效果: 原因:IE6下,决定层级高低的不是当前的父标签,而是整个DOM tree(节点树)的第一个relative属性的父标签. 解决办 ...

  9. 【Uva 10723】Cyborg Genes

    [Link]: [Description] 给你两个串s1,s2; 让你生成一个串S; 使得s1和s2都是S的子列; 要求S最短; 求S的不同方案个数; [Solution] 设两个串的长度分别为n1 ...

  10. 将yyyyMMdd格式的字符串转成日期DateTime格式

    1.DateTime dt= DateTime.ParseExact("20110720", "yyyyMMdd", Thread.CurrentThread. ...