既然JSX是JavaScript 的语法扩展，与JavaScript之间等价转换，那自然而然，我们可以在jsx中使用js语法。
1.JSX中的表达式
- JSX是支持表达式的，你只要使用一个大{ }括号，就可以使用表达式了。
我们把HelloWorld程序改写成使用表达式的。
const str = ',World'
function sayhi(name) {
return 'Hi,' + name;
}
const element = <h1>Hello{str}{sayhi('react')}</h1>;
ReactDOM.render(element, document.getElementById('root')); //Hello,WorldHi,react
2.JSX中的数组
-
JSX中的数组进行遍历时，需要加key属性，如果没有key虽然会出来效果，但是控制台会包错。key的作用是生成虚拟DOM时，需要使用key来进行标记,DOM更新时进行比较。
const arr = ['Hello', 'React']; const str1 = ( <div> {arr.map(function (name) { return ( <p key={name}>{name}</p> ) })} </div> ) ReactDOM.render( str1, document.getElementById('root')); //Hello //React -
JSX允许直接在模版插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员。
const arr=[ <h1 key="Hello">Hello</h1>, <h2 key="React">React</h2> ]; ReactDOM.render(<div>{arr}</div>, document.getElementById('root')); //Hello //React
3.JSX 属性
JSX 的标签同样可以拥有自己的属性：
const title = <h1 id="main">React Learning</h1>
- 但它和 HTML 又不是完全相同的，例如我们想要为 JSX标签添加 class 的时候需要换成className而不是class
const title = <h1 className="main">React Learning</h1>
- 因为 JSX 的特性更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。如常用的点击事件用onClick而不是onclick等。
4.JSX 嵌套
-
JSX 的标签也可以像 HTML 一样相互嵌套，一般有嵌套解构的 JSX 元素外面，我们习惯于为它加上一个小括号
const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> ); -
JSX 在嵌套时，最外层有且只能有一个标签，否则就会报错.
// 这是一个错误示例 const title = ( <h1 className="main">React Learning</h1> <p>Let's learn JSX</p> )
