开发者学堂课程【React前端开发入门与实战：React 基础知识 —— JSX 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/365/detail/4355
React 基础知识 —— JSX
内容介绍：
一、JSX 概述
二、JSX 嵌入变量
三、JSX SPREAD
本节主要介绍 react 技术支持， jsx ，事件与传统事件不一样，状态和组合，表单特殊的地方，最后是它的 API 介绍。
一、JSX 概述
首先是 jsx,jsx 不是一种合法js语言，浏览器是不支持这样的语言，没有写 type 的话浏览器是不能运行的，这种语法是由于标签语法转换为标签应用。
1. 概述
类似 xml 的语法，用来描述组件树，组件可以互相嵌套，基于这一点发明了一种类似 xml 语法，用来生成一颗组件树：
<div classname="x ">
//有内容可以结束
<a href="#">#</a>
<component x="y">1</component>
</div>
//实质上它编译出的代码是一下这样的
React.createElement( 'div ' ,{className: 'x'
},[
React.createElement( 'a' ,{href : '#'},'#' )，React.createElement (Component,{x:'y'},1);
]);
注意和 html 语法不太一样，比如必须是驼峰命名,以及属性名不能和 js 关键字冲突,例如: className,readQnly 。
最终执行的是返回了一颗对象树的根结点，class 是不能用的，因为他是保留的关键字，所以要使用 className 代替。
组件命名必须是大写，大写的话是自定义组件，小写的是普通的 html 标签。
二、JSX 嵌入变量
Jsx 很重要的作用是嵌入到 javascript ，和一般的模板语言差不多，使用两个括号括起来
可以通过{变量名}来将变量的值作为属性值
var x = 'http : //www.alipay .com' ;
//ji
Var y = <a href= {x}target="_blank">
alipay. com</a>;
React.render(y，document.getElementById( ' container'));
代码运行结果：
生成链接，一点的话会跳转到页面
三、JSX SPREAD
很多时候我们从后端搞一个对象，批量渲染
可以用通过{ ...obj }来批量设置一个对象的键值对到组件的
属性，注意顺序
var × = "http : / / www.alipay. com ' ;
//把所有的键值对一起批量设置
var obj = {
href : "http:/ /www.taobao.com" ,
target: " _blank"
}
var y = <a {...obj} href= {x}>alipay. com</a> ;
React.rendercy，document.getElementById( ' container " ));
