关于react.js:jsx学习笔记

什么是JSX？

1. 全称: JavaScript XML
2. react定义的一种相似于XML的JS扩大语法: JS + XML实质是React.createElement(component, props, …children)办法的语法糖
3. 作用: 用来简化创立虚构DOM
   1) 写法：var ele = <h1>Hello JSX!</h1>
   2) 留神1：它不是字符串, 也不是HTML/XML标签
   3) 留神2：它最终产生的就是一个JS对象
4. 标签名任意: HTML标签或其它标签
5. 标签属性任意: HTML标签属性或其它
6. 根本语法规定：
   1) 遇到 <结尾的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签须要特地解析
   2) 遇到以 { 结尾的代码，以JS语法解析: 标签中的js表达式必须用{ }蕴含
7. babel.js的作用：
   1) 浏览器不能间接解析JSX代码, 须要babel转译为纯JS的代码能力运行
   2) 只有用了JSX，都要加上type=”text/babel”, 申明须要babel来解决

JSX的语法规定

1.定义虚构DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.款式的类名指定不要用class，要用className。
4.内联款式，要用style={{key:value}}的模式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母：
(1).若小写字母结尾，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母结尾，react就去渲染对应的组件，若组件没有定义，则报错。