Hyperapp is an ultra lightweight (1kb), minimal, functional, JavaScript library for building UIs. It comes with a VDOM engine and state management without any dependencies.

In this lesson, we learn how to use JSX with Hyperapp. By installing a Babel plugin, we can instruct it to transpile JSX to Hyperapp's h method for a better developer experience.

install:

npm i -D babel-plugin-transform-react-jsx

.babelrc file:

{
"plugins": [
["transform-react-jsx", { "pragma": "h" }]
],
"presets": [
"env"
]
}
import { h, app } from 'hyperapp'

const view = () => (
<div>
<h1>Hyperapp is sweet!</h1>
</div>
) const main = app({}, {}, view, document.body)

[Hyperapp] Render Text with JSX in Hyperapp的更多相关文章

  1. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  2. vue render函数使用jsx语法 可以使用v-model语法 vuex实现数据持久化

    render函数使用jsx语法: 安装插件  transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化 安装插 ...

  3. [React] Render Text Only Components in React 16

    In this session we create a comment component to explore how to create components that only render t ...

  4. render函数之jsx应用

    一.模板缺陷(模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余) <level :type="1">哈哈</level> <level :ty ...

  5. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  6. 在vue中使用jsx语法

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...

  7. React实践debug:JSX输出的限制(存疑)

    今天在练习React构建组件的时候遇到一个问题. 由于文档中反复提倡将组件尽可能按功能单位分解复用.在练习用React做一个todolist时候,我把todolist分解成两部分: class Tod ...

  8. vue中使用jsx

    vue中使用jsx 为什么需要使用jsx呢?这个需要搞清楚 其实vue官方也说了,对于那些非常多v-if v-else的情况,就可以尝试使用render函数或者jsx,不过render函数写简单的结构 ...

  9. Multi-line NSAttributedString with truncated text

    http://stackoverflow.com/questions/7611816/multi-line-nsattributedstring-with-truncated-text/1017279 ...

随机推荐

  1. 双向链表的实现与操作(C语言实现)

    双向链表也叫双链表,是链表的一种,它的每一个数据结点中都有两个指针,分别指向直接后继和直接前驱.所以,从双向链表中的随意一个结点開始,都能够非常方便地訪问它的前驱结点和后继结点. 单链表的局限 1.单 ...

  2. POJ 1811

    使用Pollard_rho算法就可以过了 #include <iostream> #include <cstdio> #include <algorithm> #i ...

  3. 经验之谈—OAuth授权流程图

    事实上我们在开发中,常常须要解决获得用户的一些特定的数据,比方:能够选择使用微博登陆.使用QQ登陆等等.然后我们间接的获得用户的头像.昵称等信息.这些都涉及到OAuth授权的内容 OAuth授权有这么 ...

  4. Android编程获取手机型号,本机电话号码,sdk版本号及firmware版本号号(即系统版本号号)

    Android开发平台中,可通过TelephonyManager 获取本机号码. TelephonyManager phoneMgr=(TelephonyManager)this.getSystemS ...

  5. TCO 2015 2D

    250分题:给一段仅仅有'0','1'构成的字符串,然后给出串上平衡点的定义:在串上找到某个点(位置是p),这个点将串分成左右两部分(能够为空),左右分别计算字符的值的和,假设左边有字符是'1',那么 ...

  6. Java线程池原理与架构分析

    /** * 一.线程池:提供了一个线程队列,队列中保存着所有等待状态的线程.避免了创建与销毁额外开销,提高了响应速度 * 二.线程池的体系结构 * java.util.concurrent.Execu ...

  7. POJ 1128 Frame Stacking 拓扑排序+暴搜

    这道题输出特别坑.... 题目的意思也不太好理解.. 就解释一下输出吧.. 它让你 从下往上输出. 如果有多种情况,按照字典序从小往大输出... 就是这个多种情况是怎么产生的呢. 下面给一组样例. 很 ...

  8. POJ 3628 01背包 OR 状压

    思路: 1.01背包 先找到所有奶牛身高和与B的差. 然后做一次01背包即可 01背包的容积和价格就是奶牛们身高. 最后差值一减输出结果就大功告成啦! 2. 搜索 这思路很明了吧... 搜索的确可以过 ...

  9. ASP.NET MVC+Bootstrap分页Helper

    <div class="pagination"> <ul> //************分页HTML********* </ul> </d ...

  10. com.sun.jdi.internalException:Unexpected JDWP Error:103////Method threw 'java.lang.IllegalArgumentEx

    retrofit2+RxJava2 的一些坑 今天开发新项目,本着积极向上的学习态度,经过多番考虑我决定使用retrofit2 + RxJava2来做为我的网络请求......神说:你的想法非常好 先 ...