1 JSX 是一个表达式
JSX 是 JavaScript 的语法扩大，实质上是 React.createElement()办法的语法糖。
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用，所以它被看作一个表达式。
这意味着你能够在 if 语句和 for 循环的代码块中应用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：
function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>;}2 JSX 的属性
2.1 驼峰命名
JSX 是 JS 的扩大，所以应用驼峰命名来定义属性的名称，而不应用HTML 属性名称的命名约定
比方：
<div className="container"></div>上述 JSX 表达式中 class 写作 className
2.2 style 接管一个对象
style 接管一个对象，而不是字符串
比方：
let style = { width: "100px", height: "100px", background: "red"};ReactDOM.render( <div className="box" style={style}></div>, document.querySelector("#root")); 3 JSX 标签没有子元素
如果一个标签中没有内容，能够应用/>来闭合标签
比方：
const element = <img src={user.avatarUrl} />;4 JSX 避免注入攻打
能够平安地在 JSX 中插入用户输出内容
React DOM 在渲染所有输出内容之前，默认会进行本义。它能够确保在你的利用中，永远不会注入那些并非本人明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样能够无效地避免 XSS（cross-site-scripting, 跨站脚本）攻打。
5 惟一父元素
JSX 表达式必须有一个父元素
换句话说，上面的写法会报错
ReactDOM.render( <div className="box" style={style} /> <input type="text" />, document.querySelector("#root"));正确的写法：
ReactDOM.render( <div> <div className="box" style={style} /> <input type="text" /> </div>, document.querySelector("#root"));如果咱们不想让父元素被渲染在页面上，能够应用React.Fragment
React.Fragment 组件可能在不额定创立 DOM 元素的状况下，让 render() 办法中返回多个元素。
render() { return ( <React.Fragment> Some text. <h2>A heading</h2> </React.Fragment> );}也能够应用其简写语法 <></>，请参阅 React v16.2.0: Fragments 反对改良。
render() { return ( <> Some text. <h2>A heading</h2> </> );}公众号【前端嘛】发问答疑