const element = <h1>Hello, world!</h1>;这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX， 一种 JavaScript 的语法扩展。元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
注意: 由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。
JSX 看起来类似 HTML ：
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘) );
可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，
实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。
ReactDOM.render( <div> <h1>菜鸟教程</h1> <h2>欢迎学习 React</h2> <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p> </div> , document.getElementById(‘example‘) );
ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById(‘example‘) );
注释需要写在花括号中：
ReactDOM.render( <div> <h1>菜鸟教程</h1> {/*注释...*/} </div>, document.getElementById(‘example‘) );
JSX 允许在模板中插入数组，数组会自动展开所有成员：
var arr = [ <h1>菜鸟教程</h1>, <h2>学的不仅是技术，更是梦想！</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById(‘example‘) );
原文：https://www.cnblogs.com/liufei1983/p/14500862.html