"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. but has failed to stop it. This is very likely to create a memory leak(c3p0在Spring管理中,连接未关闭导致的内存溢出)

    以下是错误日志信息: 严重: The web application [/news] registered the JDBC driver [com.mysql.jdbc.Driver] but fa ...

  2. 【技术贴】note8 N5100刷机 双清 落雨

    双清模式:开机键 + [音量+] + HOME键 刷机模式:开机键 + [音量- ]+ HOME键 1.双清步骤: 关机时.长按音量上键+home键+开机键,直到进入recovery模式,然后选择wi ...

  3. javascript mvc

    http://www.webjx.com/javascript/jsajax-15996.html http://blog.csdn.net/jjfat/article/details/7963608 ...

  4. Ubuntu使用wget下载jdk问题

    使用以下命令可下载成功,否则下载下来的可能是一个html文档. wget --no-cookies --no-check-certificate --header "Cookie:gpw_e ...

  5. WAF

    http://netsecurity.51cto.com/art/201010/231124.htm http://wenku.baidu.com/link?url=elrFtxPRcwJ5FjlXE ...

  6. 李洪强iOS开发Swift篇—07_函数

    李洪强iOS开发Swift篇—07_函数 一.函数的定义 (1)函数的定义格式 1 func 函数名(形参列表) -> 返回值类型 { 2 // 函数体... 3 4 } (2)形参列表的格式 ...

  7. just so you're clear

    The Google Resume的第一句话是: Just so you're clear: it was not my idea to give a talk to Microsoft Resear ...

  8. ruby Methods, Procs, Lambdas, and Closures

    define simple method定义简单方法 关键字def用于方法定义,在其后是方法名和可选的参数名列表,参数名列表会用一对圆括号括住.构成方法主体的代码放在参数列表之后,end用于结束方法定 ...

  9. 【HDOJ】3047 Zjnu Stadium

    带权并查集. /* 3047 */ #include <iostream> #include <string> #include <map> #include &l ...

  10. java学习之线程

    一.线程总述: 线程是java当中一个重要的内容,如果想说线程的话,那我们应该先来讲一下什么是进程. 进程:那么什么是进程呢,进程从字面上来理解就是,正在进行的程序.就比如说我们在windows当中打 ...