[REASONML] Using Javascript npm package from REASON
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的更多相关文章
- Angular Npm Package.Json文件详解
Angular7 Npm Package.Json文件详解 近期时间比较充裕,正好想了解下Angular Project相关内容.于是将Npm官网上关于Package.json的官方说明文档进行了 ...
- [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 ...
- Node.js NPM Package.json
章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json Nod ...
- [Node.js] Configuring npm package.json scripts
With a node package manager's (npm) package.json script property, you can preconfigure common tasks ...
- [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 ...
- npm & package.json & directories & files
npm & package.json & directories & files package.json https://docs.npmjs.com/files/packa ...
- npm package.json属性详解
概述 本文档是自己看官方文档的理解+翻译,内容是package.json配置里边的属性含义.package.json必须是一个严格的json文件,而不仅仅是js里边的一个对象.其中很多属性可以通过np ...
- npm package.json配置整理
通过npm init 创建 package.json文件 参数: name:项目名字 version: 版本号 description: 项目介绍 main: 项目的入口文件 scripts: npm ...
- 极简 Node.js 入门 - 1.4 NPM & package.json
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
随机推荐
- 学习参考《Python基础教程(第3版)》中文PDF+英文PDF+源代码
python基础教程ed3: 基础知识 列表和元组 字符串 字典 流程控制 抽象(参数 作用域 递归) 异常 魔术方法/特性/迭代器 模块/标准库 文件 GUI DB 网络编程 测试 扩展python ...
- CSU 1374 Restore Calculation 数位DP
题意: 给你三个数A, B, C(没有前导0),但是其中某些位不知道. 问A+B=C成立有多少种情况. 思路: 从最后一位往前推,枚举A, B的每一种情况,考虑进位和不进位两种情况. 代码: #inc ...
- 【AHOI2013】【BZOJ3238】差异
Description Input 一行,一个字符串S Output 一行.一个整数.表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...
- 线程池系列一:线程池作用及Executors方法讲解
线程池的作用: 线程池作用就是限制系统中执行线程的数量. 根据系统的环境情况,可以自动或手动设置线程数量,达到运行的最佳效果:少了浪费了系统资源,多了造成系统拥挤效率不高.用线程池控制线程数量 ...
- 流水线技术原理和Verilog HDL实现
所谓流水线处理,如同生产装配线一样,将操作执行工作量分成若干个时间上均衡的操作段,从流水线的起点连续地输入,流水线的各操作段以重叠方式执行.这使得操作执行速度只与流水线输入的速度有关,而与处理所需的时 ...
- springboot 统一管理异常信息
新建ResponseEntityExceptionHandler的继承类:(依然,需要入口类扫描) /** * @author sky * @version 1.0 */ @ControllerAdv ...
- web.config添加identity impersonate="true"导致拒绝访问
例:<identity impersonate="tr" userName="AD\name" password="word"/> ...
- 遇到的兼容性bug
1.(IE6):ie6环境下,通过设置z-index:999:无效果: 原因:IE6下,决定层级高低的不是当前的父标签,而是整个DOM tree(节点树)的第一个relative属性的父标签. 解决办 ...
- 【Uva 10723】Cyborg Genes
[Link]: [Description] 给你两个串s1,s2; 让你生成一个串S; 使得s1和s2都是S的子列; 要求S最短; 求S的不同方案个数; [Solution] 设两个串的长度分别为n1 ...
- 将yyyyMMdd格式的字符串转成日期DateTime格式
1.DateTime dt= DateTime.ParseExact("20110720", "yyyyMMdd", Thread.CurrentThread. ...