React之JSX语法及非DOM操作属性（二）
# 一、JSX是什么
- 一个语法或者说是语法糖
- 基于
ECMAScript一种新的特性 - 一种定义带属性（
DOM节点）树结构（DOM结构）的语法
JSX不是
- 一门新的语言
XML或者HTML- 一种限制，可以不使用
JSX
# 二、JSX的特点
- 类
XML语法，易于接受 - 增强
JS语义，在js中编辑HTML - 结构清晰
- 抽象程度高（核心）：避免手
动DOM操作，跨平台 - 代码模块化
# 三、JSX语法
/*
JSX（javaScriptXML）语法入门：
1、不是一门语言，是一个语法或者说是语法糖
2、JSX标签其实就是HTML标签，只不过在javascript中这些标签的时候，
不使用“”,遇到HTML标签（以<开始），就用HTML规则解析，遇到代码块
（以{开始），就用javascript规则解析
3、JSX语法浏览器无法解析，需要使用插件将其转化为js代码
4、代码更加直观
*/
/*
1、首字母必须大写
2、驼峰命名
3、使用className与htmlFor代替class和for
4、组件与组件之间是可以嵌套的
5、在JSX语法中只能使用求值表达式，不能使用语句
6、只有一个顶层标签
*/
var Demo = React.createClass({
change:function (){
return 'demo'
},
handleClick:function(){
alert(1)
},
render: function(){
// this指向整个（当前的组件）组件
return <div className="demo" onClick={this.handleClick}>这是一个{this.change()}</div>
}
})
// console.log(Demo)
ReactDOM.render(<Demo />,document.getElementById('app'))
@前端进阶之旅: 代码已经复制到剪贴板
# 四、JSX的注释
- 在
JSX语法中，添加注释需要写在{ }中 - 可以使用多行注释与单行注释
var HelloWorld = React.createClass({
render:function(){
// 现在这里是属于js的部分,不属于JSX语法的部分
return (
<div className="box" // class名字
>
{/*这是一个标题*/}
<h1 className="title">Hello World</h1>
{/*这是说明*/}
<p>你好世界！</
