通过在线babel转换器,转换出jsx是如何变成js对象的

jsx文件

加入了正常的标签以及嵌套标签以及方法属性

function hello() {
click=()=>{
console.log("hello")
}
return <div>
<button onclick={this.click.bind(this)}>
helloWorld
</button>
</div>;
}

通过babel转换之后

"use strict";

function hello() {
click = function click() {
console.log("hello");
}; return React.createElement("div", null, React.createElement("button", {
onclick: this.click.bind(this)
}, "helloWorld"));
}

在线babel编辑器 测试

react中jsx文件是如何转换成js对象的的更多相关文章

  1. legend---八、php对象如何转换成js对象

    legend---八.php对象如何转换成js对象 一.总结 一句话总结:a.直接转换:b.通过json对象做中间桥梁 1.为什么传递给父亲构造函数的参数不能写默认值? 这里的第三行的比如$type不 ...

  2. python3.6 + selenium2.53.1 查询数据库并将返回的内容中每一行的内容转换成class对象

    环境: win10 python3.6 selenium2.53.1 准备工作:先安装pymysql python2.x链接数据库使用MySQLdb,而python3.x链接数据库使用pymysql ...

  3. WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片

    原文:WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片 1.图片文件转换成Visual对象 private Visual CreateVisual(string imag ...

  4. React中JSX的理解

    React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...

  5. ArcGIS中利用ArcMap将地理坐标系转换成投影坐标系(从WKID=4326到WKID=102100)

    原文:ArcGIS中利用ArcMap将地理坐标系转换成投影坐标系(从WKID=4326到WKID=102100) 对于非地理专业的开发人员,对与这些生涩的概念,我们不一定都要了解,但是我们要理解,凡是 ...

  6. Altium Designer 从导入DXF文件,并转换成板框

    大多数人都知道,PADS中导入DXF文件,然后转换成板框,是很方便的.AD也同样可以做到. PADS导入DXF见:http://www.cnblogs.com/craftor/archive/2012 ...

  7. C#将image中的显示的图片转换成二进制

    原文:C#将image中的显示的图片转换成二进制 1.将Image图像文件存入到数据库中 我们知道数据库里的Image类型的数据是"二进制数据",因此必须将图像文件转换成字节数组才 ...

  8. jQuery、JS读取xml文件里的内容(JS先通过document.implementation.createDocument方法将xml转换成document对象,jQuery将读取到的xml转成table)

    xml文件:test.xml <?xml version="1.0"?> <note> <to>George</to> <fr ...

  9. delphi 文件或目录转换成 TreeView

    //文件或目录转换成 TreeViewprocedure DirToTreeView(Tree: TTreeView; Directory: string; Root: TTreeNode; Incl ...

随机推荐

  1. 【零基础】神经网络优化之dropout和梯度校验

    一.序言 dropout和L1.L2一样是一种解决过拟合的方法,梯度检验则是一种检验“反向传播”计算是否准确的方法,这里合并简单讲述,并在文末提供完整示例代码,代码中还包含了之前L2的示例,全都是在“ ...

  2. 2018-2019-2 《网络对抗技术》Exp8 Web基础 Week11-12 20165233

    Exp8 Web基础 目录 一.基础问题 二.实验步骤 实验点一:Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. 实验 ...

  3. Beta冲刺(2/4)

    队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11990570.html 作业博客 : https://edu.cnblogs.com/campus/ ...

  4. IIS URL Rewriting and ASP.NET Routing

    IIS URL Rewriting and ASP.NET Routing With the release of the URL Rewrite Module for IIS and the inc ...

  5. node express返回json数据给前端

    请注意,使用res.json()的格式 1.前面不能添加  res.writeHead(200, {'content-type': 'text/plain;charset=utf-8'}); axio ...

  6. patch工具的使用

    1. 最简用法 patch -p1 < jello.patch

  7. Android插件化(三):OpenAtlas的插件重建以及使用时安装

    Android插件化(三):OpenAtlas的插件重建以及使用时安装 转 https://www.300168.com/yidong/show-2778.html    核心提示:在上一篇博客 An ...

  8. ISO/IEC 9899:2011 条款5——5.1.1 翻译环境

    5.1.1 翻译环境 5.1.1.1程序结构 1.一个C程序不需要一次全被翻译完.程序的文本被保存在本国际标准中被称作为源文件(或预处理文件)的单元里.一个源文件连同所有通过指示符#include所包 ...

  9. 015-命令行下载安装brew

    一.brew 1.安装Homebrew 安装命令: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/inst ...

  10. ES6深入浅出-2 新版函数:箭头函数 2 视频-2.视频 箭头函数杂谈

    杂谈coffeescript 箭头函数抄的是谁? coffeescript 双箭头的形式 箭头函数简洁的语法 数组内每一个值都平方一下 Map的写法 箭头函数的写法 平方后,每一个值再加1 numbe ...