（一）JSX是什么?
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
（二）使用 JSX
（1）注释写法
{/* 哈哈哈，你好 */}
（2）添加自定义属性
需要使用 data- 前缀。
<p data-myattribute = "hhhh">这是一个很不错的 JavaScript 库!</p>
（3）JSX 中不能使用 if else 语句，但是可以使用三元表达式
表达式写在花括号 {} 中
<p className="App-intro">{userName == ‘‘ ? ‘用户没有登录‘ : ‘用户名:‘ + userName}</p>
（4）React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px
var myStyle = { ???fontSize: 100, ???color: ‘#FF0000‘};ReactDOM.render( ???<h1 style = {myStyle}>哈哈哈</h1>, ???document.getElementById(‘example‘));
（5）属性绑定
<p><input type="button" value={userName} disabled={boolInput} /></p>
（6）JSX 允许在模板中插入数组，数组会自动展开所有成员
var arr = [ ?<h1>菜鸟教程</h1>, ?<h2>学的不仅是技术，更是梦想！</h2>,];ReactDOM.render( ?<div>{arr}</div>, ?document.getElementById(‘example‘));
（7）html展示
a：通过Unicode转码
b：通过 dangerouslySetInnerHTML 设置 html
（此方法可能会存在 XSS 攻击）
<p dangerouslySetInnerHTML = {{__html:html}}></p>React（三）JSX内置表达式
原文地址：https://www.cnblogs.com/yulingjia/p/9719624.html