JSX语法入门

JSX 入门

---

JSX并不是一门语言，仅仅是个语法糖，允许开发者在JavaScript中是写HTML语法，最后每个HTML标签都转化为JavaScript代码来运行。

1. 环境
2. 载入方式
3. 标签与HTML标签与ReactJS创建的组件类标签（首字母一定要大写） 
4. 转换解析器
   
   1. <h3>输入</h3> 转换成：
      React.createElement("h3","null","输入")，返回一个ReactElement对象

5. 执行JavaScript表达式

   1. var msg ="JSX语法学习"
      <h1>{msg}</h1> 转换成:
      React.createElement("h1","null","JSX语法学习")

6. 注释

   1. var msg = <h1 width ="10px" >JSX语法学习</h1>转换成:
      React.createElement("h1",{width:"10px"},"JSX语法学习")
      

7. 属性

   1. 单行注释： //
   2. 多行  / * .... * /

8. 延展属性 

   1. 使用ES6的语法：
      var props ={};
      props.foo ="1";
      props.bar ="1";
      <h1{...props} foo ="2">JSX语法学习</h1>转换成：
      React.crateElement("h1",React__spread({},props,{foo:"2"}),"JSX语法学习")

9. 自定义属性（HTML5给出了方案，凡是以data-开头的自定义属性，可渲染到页面）

10. 显示HTML----- 显示一段HTML的字符串，而不是HTML节点

    1. 借助一个属性 _html
       <div>{{_html:'<h1>JSX语法学习</h1>'}}</div>

11. 样式的使用

    1. style属性------ js对象
       {{}}
       外层按照JSX语法
       内层是JavaScript对象

12. 事件绑定

    1. 注意 ：onClik（驼峰）调用bind方法（设定作用域，参数）