JSX、JSX的介绍、JSX特点、JSX的语法、XML基本语法

1、JSX的介绍

​ 什么是JSX：JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。

​ 在实际开发中，JSX 在产品****打包阶段****都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。官方定义是：类 XML 语法的 ECMAScript 扩展。

2、特点：

​ JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

​ 它是类型安全的，在编译过程中就能发现错误。

​ 使用 JSX 编写模板更加简单快速。

3、JSX的语法

​ JSX就是把html代码写在javascript中，那么，写在javascript中有啥要求（与原来在html中的区别），这就是jsx语法要说的内容。

​ 示例：

var msg="哥们！"

const element = <h1>Hello, world!{msg}</h1>     没有双引号，不是字符串

const List = () => (

​      <ul>

​        <li >list item</li>

​        <li>list item</li>

​        <li>list item</li>

​      </ul>  

  );   

XML基本语法

• 只能有一个根标签，养成外面加上圆括号的习惯。

• 标签要闭合（单边标签得有斜杠）

元素类型

• 小写首字母对应 HTML的标签，组件名首字母大写。

• 注释使用 / * 内容 */ html标签内注释｛/* 最外层有花括号*/｝

元素属性

• 内联样式的style：样式名以驼峰命名法表示, 如font-size需写成fontSize。默认像素单位是 px（px不用写）

  	let _style = { backgroundColor:"red" };
  	
  	ReactDOM.render(
  	    <h1 style={_style}>Hello, world!</h1>, 
  	    document.getElementById('box')
  	);
  

• 外部样式的class：HTML中曾经的 class 属性改为 className（因为class是js的关键字），外部样式时使用

  	ReactDOM.render(
  	    <h1  className="bluebg">Hello, world!</h1>,
  	    document.getElementById('box')
  	);
  

• for 属性改为 htmlFor（因为for是js的关键字）。（for属性在html标签中是扩充单选框|复选框的选择范围）

• 事件名用驼峰命名法。HTML是全小写（onclick），JSX中是驼峰(onClick)

javascript表达式

• 使用单花括号。

  react里没有vue中的指令，任何地方需要javascript的变量，表达式等等，只需要套上 单花括号就行。

  const element = <h1>Hello, {120+130}!</h1>
  const element = <h1>Hello, {getName("张三疯")}!</h1>
  <input type="text" value={val ? val : ""} />
  

  注意：单花括号里只能写表达式，不能写语句（如：if，for）

总结：

​ 对比原生，JSX相当于把原生里的html和javascript代码混写在一起，

​ vue中有很多的指令，react中只需要使用单花括号就行。