[Hyperapp] Render Text with JSX in Hyperapp
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的更多相关文章
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- vue render函数使用jsx语法 可以使用v-model语法 vuex实现数据持久化
render函数使用jsx语法: 安装插件 transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化 安装插 ...
- [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 ...
- render函数之jsx应用
一.模板缺陷(模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余) <level :type="1">哈哈</level> <level :ty ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- 在vue中使用jsx语法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...
- React实践debug:JSX输出的限制(存疑)
今天在练习React构建组件的时候遇到一个问题. 由于文档中反复提倡将组件尽可能按功能单位分解复用.在练习用React做一个todolist时候,我把todolist分解成两部分: class Tod ...
- vue中使用jsx
vue中使用jsx 为什么需要使用jsx呢?这个需要搞清楚 其实vue官方也说了,对于那些非常多v-if v-else的情况,就可以尝试使用render函数或者jsx,不过render函数写简单的结构 ...
- Multi-line NSAttributedString with truncated text
http://stackoverflow.com/questions/7611816/multi-line-nsattributedstring-with-truncated-text/1017279 ...
随机推荐
- 双向链表的实现与操作(C语言实现)
双向链表也叫双链表,是链表的一种,它的每一个数据结点中都有两个指针,分别指向直接后继和直接前驱.所以,从双向链表中的随意一个结点開始,都能够非常方便地訪问它的前驱结点和后继结点. 单链表的局限 1.单 ...
- POJ 1811
使用Pollard_rho算法就可以过了 #include <iostream> #include <cstdio> #include <algorithm> #i ...
- 经验之谈—OAuth授权流程图
事实上我们在开发中,常常须要解决获得用户的一些特定的数据,比方:能够选择使用微博登陆.使用QQ登陆等等.然后我们间接的获得用户的头像.昵称等信息.这些都涉及到OAuth授权的内容 OAuth授权有这么 ...
- Android编程获取手机型号,本机电话号码,sdk版本号及firmware版本号号(即系统版本号号)
Android开发平台中,可通过TelephonyManager 获取本机号码. TelephonyManager phoneMgr=(TelephonyManager)this.getSystemS ...
- TCO 2015 2D
250分题:给一段仅仅有'0','1'构成的字符串,然后给出串上平衡点的定义:在串上找到某个点(位置是p),这个点将串分成左右两部分(能够为空),左右分别计算字符的值的和,假设左边有字符是'1',那么 ...
- Java线程池原理与架构分析
/** * 一.线程池:提供了一个线程队列,队列中保存着所有等待状态的线程.避免了创建与销毁额外开销,提高了响应速度 * 二.线程池的体系结构 * java.util.concurrent.Execu ...
- POJ 1128 Frame Stacking 拓扑排序+暴搜
这道题输出特别坑.... 题目的意思也不太好理解.. 就解释一下输出吧.. 它让你 从下往上输出. 如果有多种情况,按照字典序从小往大输出... 就是这个多种情况是怎么产生的呢. 下面给一组样例. 很 ...
- POJ 3628 01背包 OR 状压
思路: 1.01背包 先找到所有奶牛身高和与B的差. 然后做一次01背包即可 01背包的容积和价格就是奶牛们身高. 最后差值一减输出结果就大功告成啦! 2. 搜索 这思路很明了吧... 搜索的确可以过 ...
- ASP.NET MVC+Bootstrap分页Helper
<div class="pagination"> <ul> //************分页HTML********* </ul> </d ...
- com.sun.jdi.internalException:Unexpected JDWP Error:103////Method threw 'java.lang.IllegalArgumentEx
retrofit2+RxJava2 的一些坑 今天开发新项目,本着积极向上的学习态度,经过多番考虑我决定使用retrofit2 + RxJava2来做为我的网络请求......神说:你的想法非常好 先 ...