ReactJS 15.x - JSX是什么,JSX编译器,JSX语法转成原生的JS语法

原创 2016年08月29日 01:02:18

JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰。那么也就是说,我们写一个XML标签,实质上就是在调用React.createElement这个方法,并返回一个ReactElement对象。
使用React,不一定非要使用JSX语法,可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX,因为JSX在定义类似HTML这种树形结构时,十分的简单明了。简明的代码结构更利于开发和维护。XML有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更易读。


JSX编译器会把JSX写的文档--------转成--------->JS标准语法的文档

JSX写的文档

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

JS标准语法的文档

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement('div', {className: "commentBox"},
        "Hello, world! I am a CommentBox."
      )
    );
  }
});
ReactDOM.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);


版权声明:本文为博主原创文章,未经博主允许不得转载。

React JSX编译为JavaScript

提示:本机电脑上需要安装nood.js环境   1、安装React-Tools   命令行:npminstall -g react-­tools 2、进入项目根目录,编译JSX文件 命令...
  • framic
  • framic
  • 2017年03月17日 10:44
  • 1450

reactJS - 03利用babel来”编译”我们的脚本文件

第一步 在终端下进入项目根目录,执行 npm init,一路回车下去 然后发现项目目录下多了一个”package.json”文件第二步 安装babel-clisudo npm install -...

2. React JSX语法及特点介绍

什么是JSX        JSX 是一种类 XML 语言,全称是 JavaScript XML 。React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高、语义更清晰、对 Rea...

Facebook前端框架React.js JSX语法基础

简介JSX为面书为react.js开发的一套语法糖,也是react.js的使用基础。 JSX即Javascript XML 相关资料 React.js官网 React JSFiddle Hello...

浅谈React的JSX语法(二)

1、JSX的新语法——展开属性 如果事先知道组件需要的全部props(属性),可以列出;但如果事先不知道要设置哪些 props,最好不要设置它,原因有两个: ① React不能检查属性类型,即使属性类...

React(2) JSX语法

React 入门-JSX 时间 2015-09-03 22:40:25  雨夜带刀's Blog 原文  http://stylechen.com/react-jsx.html 主题 R...

React学习笔记-模板、ReactDOM.render()、JSX语法

React 起源于 Facebook 的内部项目,他从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App ...

React Native入门学习笔记三(JSX语法)

参考示例: https://github.com/ruanyf/react-demosdemo2 简单数组遍历var names = ['Alice', 'Emily', 'Kate'];React...
  • xundh
  • xundh
  • 2016年06月23日 23:00
  • 6137

react与jsx语法介绍--先行篇

这段时间开始入坑react了,看了官网的jsx语法方面的介绍,恩,确实有点迷迷的,有幸见到一篇歪果仁写的比较详细的有关react和jsx的细节性知识点总结,特地粗略翻译了一下(英语略渣),也顺便加深我...

React高级教程(es6)——(1)JSX语法深入理解

简介:从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比...
  • liwusen
  • liwusen
  • 2016年11月28日 20:25
  • 1388
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ReactJS 15.x - JSX是什么,JSX编译器,JSX语法转成原生的JS语法
举报原因:
原因补充:

(最多只允许输入30个字)