[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 ...
随机推荐
- 【iOS开发-78】用代码实现UITabBarController+UINavigationController
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2Vpc3ViYW8=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- android优化 清除无效代码 UCDetector
android下优化 清除无效 未被使用的 代码 UCDetector 官方下载地址:http://www.ucdetector.org/index.html UCDetector 是 eclips ...
- UVa 170 - Clock Patience
题目:Clock Patience游戏,将52张扑克牌,按时钟依次分成13组(中心一组),每组4张全都背面向上, 从中间组最上面一张牌開始.翻过来设为当前值,然后取当前值相应组中最上面的背过去的牌翻过 ...
- 【Swift】学习笔记(六)——函数
函数 懂编程语言的来说这个是最主要的了,不论什么语言都有函数这个概念.函数就是完毕特定任务的独立代码块. 函数怎么创建: 1.创建一个无參无返回值的函数(实际上全部的函数都有返回值,这个函数返回vo ...
- java中文件路径读取
windows下 1)相对路径 public static final String TestDataExcelFilePath="src/omstestdata.xlsx"; 2 ...
- 为IT程序员量身定制的12个目标——很经典
对程序员们来说挑战自我非常重要,要么不断创新,要么技术停滞不前.新年伊始,我整理了12个月的目标,每个目标都是对技术或个人能力的挑战,而且可以年复一年循环使用. 01. 变得有耐心 02. 保持健康 ...
- jQuery插件开发的两种方法
1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); $. ...
- ORM框架——Dapper的应用
常见的ORM框架有EF,Dapper,NHibernate 参考:http://shuai7boy.iteye.com/blog/2357339 http://www.cnblogs.com/Sint ...
- layer.js漂亮的弹出框
它的官方网站:http://layer.layui.com/ 消息.确认框.ifame.自定义文本.旋转木马,都有按钮,是一款强大的js 弹出框: 以下为本人的简单介绍: layer.open({ t ...
- php语法学习:轻松看懂PHP语言
基础语法 开头结尾 PHP脚本以 "<?php " 开头以 "?>" 结尾 <!DOCTYPE html> <html>&l ...