在React.js中使用JSX

JSX就像具有JavaScript强大功能的模板语言一样。它有助于创建反应元素。它是JavaScript的扩展，包括UI元素。

示例

let message = <h1>Hello World </h1>;

h1标签是已知的html标签，但是使用jsx，我们创建了一个变量，其中包含带有hello world消息的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'的变量，该变量嵌在const welcomeMessage中的花括号中。

任何有效的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 !'
);