JSX 代表 JavaScript XML。它只是 JavaScript 的语法扩展。它允许我们直接在 React 中编写 HTML(在 JavaScript 代码中)。在 React 中使用 JSX 创建模板很容易，但它不是一种简单的模板语言，而是具有 JavaScript 的全部功能。
它比普通 JavaScript 更快，因为它在转换为常规 JavaScript 的同时执行优化。 React 没有将标记和逻辑分离在分离的文件中，而是为此目的使用组件。我们将在后续文章中详细了解组件。
句法：
const element = Welcome to GeeksforGeeks.
;JSX的特点：
- JSX 不是强制使用的，还有其他方法可以实现相同的目的，但使用 JSX 可以更轻松地开发 React 应用程序。
- JSX 允许在 { } 中编写表达式。表达式可以是任何 JS 表达式或 React 变量。
- 要插入一大段 HTML，我们必须将其写在括号中，即 ()。
- JSX 产生反应元素。
- JSX 遵循 XML 规则。
- 编译后，JSX 表达式成为常规的 JavaScript函数调用。
- JSX 使用驼峰命名法来命名 HTML 属性。例如，HTML 中的 tabindex 在 JSX 中用作 tabIndex。
JSX的优点：
- JSX 使在 React 中编写或添加 HTML 变得更加容易。
- JSX 可以轻松地将 HTML 标签转换为 React 元素。
- 它比普通的 JavaScript 更快。
- JSX 允许我们在不使用 appendChild() 或 createElement() 方法的情况下将 HTML 元素放入 DOM 中。
- 由于 JSX 是一个表达式，我们可以在 if 语句和 for 循环中使用它，将它分配给变量，接受它作为参数，或者从函数中返回它。
- JSX 可以防止 XSS(跨站点脚本)攻击，通常称为注入攻击。
- 它是类型安全的，大多数错误都可以在编译时发现。
JSX 的缺点：
- 如果 HTML 不正确，JSX 会抛出错误。
- 在 JSX 中，HTML 代码必须包含在一个顶级元素中，否则会报错。
- 如果 HTML 元素没有正确关闭 JSX 会报错。
例子 ：
index.js
import React from 'react';
import ReactDOM from 'react-dom';
const name = "Learner";
const element = Hello,
{ name }.Welcome to GeeksforGeeks.< /h1>;
ReactDOM.render(
element,
document.getElementById("root")
);
输出：
