"JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively."

Input:

React.createClass({
render: function(){
var style = {
backgroundColor: '#ccc',
color: blue
};
return (
<div >
<a href="#" style={style}/> {/*This is comment*/} Thisis message
{/*JSX don't have if else*/}
{i > 1 ? 'More than one' : 'one'}
{i>1&& 'More than one' }
</div>
)
}
})

output:

React.createClass({
render: function(){
var style = {
backgroundColor: '#ccc',
color: blue
};
return (
React.createElement("div", null,
React.createElement("a", {href: "#", style: style}), " ", /*This is comment*/" Thisis message",
/*JSX don't have if else*/
i > 1 ? 'More than one' : 'one',
i>1&& 'More than one'
)
)
}
})

[React] React Fundamentals: JSX Deep Dive的更多相关文章

  1. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  2. 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  3. React 学习(一) ---- React Element /组件/JSX

    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...

  4. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  5. react中的jsx详细理解

    这是官网上的一个简单的例子 const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>; ReactDO ...

  6. 学习React从接受JSX开始

    详情参考官方JSX规范 虽然JSX是扩展到ECMAScript的类XML语法,但是它本身并没有定义任何语义.也就是说它本身不在ECMAScript标准范围之内.它也不会被引擎或者浏览器直接执行.通常会 ...

  7. React.createElement 与 JSX

    DOM 向JSX的演进 网页由 DOM 元素构成.React DOM 并不是浏览器的 DOM,而React DOM 只是用来告诉浏览器如何创建 DOM 的方法.通常情况下,我们并不需要 React 就 ...

  8. 假如React没了JSX

    如题,想必React大家早已不陌生,而React里面的JSX都是玩的得心应手了,但是假如说React里面没有了React那会是一种什么样的情形呢,我们来简单的看一下. 首先我们来实现一个简单的list ...

  9. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

随机推荐

  1. 【Xamarin开发 Android 系列 3】循序渐进的学习顺序

    原文:[Xamarin开发 Android 系列 3]循序渐进的学习顺序 指定合理的学习步骤,将各个技术点进行强化.慢慢 的就从点到线 到面的飞跃,一切仅仅是时间问题,开始前,请记住,学习是最佳的投资 ...

  2. Android的十六进制颜色值

    [转自]: http://blog.csdn.net/fxtxz2/article/details/7598256 颜色和不透明度 (alpha) 值以十六进制表示法表示.任何一种颜色的值范围都是 0 ...

  3. C++类的大小

    C++类的大小   一个空类class A{};的大小为什么是1,因为如果不是1,当定义这个类的对象数组时候A objects[5]; objects[0]和objects[1]就在同一个地址处,就无 ...

  4. MySQL源码之mysqld启动

    启动mysqld,并进入listen阶段   函数调用栈: mysqld_main():        my_init();初始化变量,锁,错误串      my_thread_global_init ...

  5. HDU-1372 Knight Moves (BFS)

    Problem Description A friend of you is doing research on the Traveling Knight Problem (TKP) where yo ...

  6. Ubuntu全新系统一些配置

    0.安装JDK,http://www.oracle.com/technetwork/java/javase/downloads/index.html 1.安装Intellij IDEA,https:/ ...

  7. 如何从PDF文件中提取矢量图

    很多时候我们需要PDF文档中的插图,直接用pdf中的复制或者截屏软件只能提取位图格式的图片,放大缩小难免失真. 本文教大家一种一种从pdf中提取矢量图的方法. 工具软件: 1 adobe acroba ...

  8. Python手动构造Cookie模拟登录后获取网站页面内容

    最近有个好友让我帮忙爬取个小说,这个小说是前三十章直接可读,后面章节需要充值VIP可见.所以就需要利用VIP账户登录后,构造Cookie,再用Python的获取每章节的url,得到内容后再使用 PyQ ...

  9. Web---文件上传-用apache的工具处理、打散目录、简单文件上传进度

    我们需要先准备好2个apache的类: 上一个博客文章只讲了最简单的入门,现在来开始慢慢加深. 先过渡一下:只上传一个file项 index.jsp: <h2>用apache的工具处理文件 ...

  10. vijosP1038 添加括号

    vijosP1038 添加括号 链接:https://vijos.org/p/1038 [思路] 区间DP. 本题的关键在于如何输出解.对于求和表达式而言可以用一个p[][]记录决策然后递归输出,对于 ...