React JSX语法简介

JSX语法

JSX语法介绍

JSX语法是一种特殊的js语法，是ECMAScript的扩展，可以让我们在js代码中使用html标签来编写结构，避免繁琐的React.createElement()操作。

PS:JSX是React.createElement()的语法糖，虽然看起来像HTML，但严格意义上来说它还是JS，这种特殊的JS浏览器无法识别，所以需要babel进行编辑，编辑后它最终会转化成React.Element()去创建js对象。

<script type="text/babel">
	ReactDOM.render( React.createElement("div", { className: "container" }, "创建虚拟节点"), 
	document.getElementById("app") ); 
</script>

使用JSX语法需要遵循以下规则

• 因为JavaScript代码与JSX代码并不兼容，凡是使用JSX的script标签都需要加上type=“text/babel”
• 在JSX代码中，同为js关键字的html属性不能直接使用
  例如：class->className; for->htmlFor
• 属性使用驼峰
  例如：tabindex->tabIndex; autofocus->autoFocus; onkeydown->onKeyDown
• 必须结束标签

<input type="text" />
<img src="logo.png" />

• style 属性的值接收一个对象，css 的属性必须为驼峰写法

<div style={{backgroundColor:"#f60"}}

• 花括号 {} 内为 js 表达式，不允许出现 var , let , const 等关键字
• 使用 js 语法注释（如{ /注释内容/ }， //注释内容 ）