在React.js中使用JSX
JSX就像具有JavaScript强大功能的模板语言一样。它有助于创建反应元素。它是JavaScript的扩展，包括UI元素。
示例
let message = <h1>Hello World </h1>;
h1标签是已知的html标签，但是使用jsx，我们创建了一个变量，其中包含带有helloworld消息的h1标签。
jsx的用处
虽然使用jsx创建react元素不是强制性的。但是它明显吸引人，并且有助于轻松理解代码。React包含将UI逻辑和呈现逻辑保持在一起的概念。
我们可以构建不同的松耦合组件来分离关注点
Expression embedding :
let name = ‘Steve’;
const welcomeMessage = <h1>Welcome, {name} </h1>;
ReactDOM.render(
welcomeMessage,
document.getElementById(‘app’)
);在上面的示例中，name是一个值为'Steve'的变量，该变量嵌在constwelcomeMessage中的花括号中。
任何有效的JavaScript表达式（包括函数）都可以在jsx中使用花括号。示例：{5*5}将得出25
在jsx表达式中使用函数的示例-
function getFullName(customer) {
return customer.firstName + ' ' + customer.lastName;
}
const customer = {
firstName: 'Amit',
lastName: 'Sharma'
};
const welcomeCustomer = (
<h1>
Welcome, { getFullName(customer) } !
</h1>
);
ReactDOM.render(
welcomeCustomer,
document.getElementById('app')
);我们可以通过将多个jsx代码包装在方括号()中来添加代码。它还避免了自动分号插入的问题。编译时，jsx代码将转换为常规JavaScript。
JSX元素可以作为参数传递或从函数调用返回。它也可以在条件语句中使用。
jsx元素的属性
jsx元素上使用的属性名称遵循驼峰表示法。示例：用于添加css类的类名称属性被命名为className（由于class是JavaScript中的保留关键字，它使用className）
tabIndex-在常规html元素中，它将是tabindex，所有字符都小写，但是在jsx中，它将是tabIndex
我们可以使用字符串文字（例如className=“App”）或带花括号的jsx表达式className={Test}来给属性赋值
jsx元素可以包含子元素，如果为空，则可以用/>关闭。
JSX还可以通过在呈现之前将转义jsx表达式中嵌入的值转义来帮助进行跨站点脚本攻击(XSS)。
Babel将jsx编译为常规JavaScript代码。示例-
const message = (
<div className="welcome">
Welcome !
</div>
);将转换为-
const message = React.createElement(
'div',
{className: 'welcome'},
' Welcome !'
);