[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 ...
随机推荐
- [SharePoint][SharePoint Designer 入门经典]Chapter12 高级工作流
1.使用Visio2010创建工作流标志 2.使用Visio Graphic服务可视化一个运行的工作流 3.使用InfoPath2010修饰工作流表单 4.导出可重用的工作流
- Android开发之使用BroadcastReceiver实现开机自己主动启动(源码分享)
上一节已经介绍过BroadcastReceiver实现实时监听电量的功能,这节就来介绍一下假设实现开机自己主动启动的功能.这个比监听电量还简单不少 (1)在清单文件注冊权限 <uses-perm ...
- Hadoop Word Count程序
Hadoop Word Count程序 pom.xml文件: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns ...
- 23.QFile遍历
#include "mainwindow.h" #include <QApplication> #include <QDebug> #include < ...
- POJ 3185 DFS
好像可以用高斯消元??? 但是用搜索写 这题就很水了... // by SiriusRen #include <bitset> #include <cstdio> using ...
- StatusBarUtils工具类
import android.app.Activity; import android.app.Dialog; import android.content.Context; import andro ...
- Android 蓝牙4.0的连接和通讯
1.加入权限 <uses-sdk android:minSdkVersion=" android:targetSdkVersion="/> <uses-featu ...
- golang下使用ini配置文件(widuu/goini)
在“widuu/goini”基础上进行了修改,增加了其他数据类型配置值(string.int.int32.int64.[]int.[]string)的支持. 使用方法: ConfigCentor := ...
- hdu 3572 Task Schedule【 最大流 】
求出最大流,再判断是否满流 先不理解为什么要这样建图 后来看了这一篇题解 http://blog.csdn.net/u012350533/article/details/12361003 把0看做源点 ...
- 页面元素的定位:getBoundingClientRect()和document.documentElement.scrollTop
1.document.documentElement.getBoundingClientRect MSDN对此的解释是: Syntax oRect = object.getBoundingClient ...