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. &lt;监听器模式&gt;在C++ 与 Java 之间实现的差异

    前言: 关于各种语言孰优孰劣的讨论在软件界就是个没完没了的话题,今天我决定也来掺和下. 只是我想探讨的不是哪种语言的性能怎样,钱途怎样.而是站在语言本身特性的基础上中肯地比較探讨.由于如今工作用的是C ...

  2. Java多线程演示样例(模拟通话,sleep,join,yield,wait,notify,Semaphore)

    主线程等待子线程的多种方法 synchronized浅析 sleep 是静态方法,Thread.sleep(xx)谁调用谁睡眠. join 是合并方法.当前线程调用其它线程xx.join()则等到xx ...

  3. SVG中一些较为具体的文档

    绘制线头尾标记 http://tutorials.jenkov.com/svg/marker-element.html 微软关于svg的文档 http://msdn.microsoft.com/zh- ...

  4. Unity3D_c#脚本注意要点

    1. Inherit from MonoBehaviour 继承自MonoBehaviour All behaviour scripts must inherit from MonoBehaviour ...

  5. #定位系统性能瓶颈# perf

    perf是一个基于Linux 2.6+的调优工具,在liunx性能測量抽象出一套适应于各种不同CPU硬件的通用測量方法,其数据来源于比較新的linux内核提供的 perf_event 接口 系统事件: ...

  6. gwt学习资料

    学习资料: 2 3

  7. Anaconda安装及PyCharm环境配置

    1. Anaconda下载 Anaconda 官方下载链接: https://www.continuum.io/downloads 根据自己的系统选择下载32位还是64位. 2. 进入下载目录 如果没 ...

  8. layer-list

    <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android=" ...

  9. python 一句话输出26个英文字母

    chr(i) # return i character ord(c) # return integer >>> [chr(i) for i in range(97,123)] ['a ...

  10. Codeforces Round #499 (Div. 2) F. Mars rover_dfs_位运算

    题解: 首先,我们可以用 dfsdfsdfs 在 O(n)O(n)O(n) 的时间复杂度求出初始状态每个点的权值. 不难发现,一个叶子节点权值的取反会导致根节点的权值取反当且仅当从该叶子节点到根节点这 ...