React 是一个用于构建用户界面的声明性、高效和灵活的 JavaScript 库。但不是使用常规的 JavaScript，React 代码应该用一种叫做 JSX 的东西来编写。  让我们看一个示例 JSX 代码： 

上面的代码片段有点像 HTML，它也使用了类似 JavaScript 的变量，但既不是 HTML 也不是 JavaScript，它是 JSX。JSX 基本上是常规 JavaScript 的语法扩展，用于创建 React 元素。然后将这些元素渲染到 React DOM。我们将在下一篇文章中详细了解渲染和 DOM。
**为什么选择 JSX？**

*   它比普通 JavaScript 更快，因为它在转换为普通 JavaScript 时执行优化。
*   它使我们更容易创建模板。
*   React 没有将标记和逻辑分隔在单独的文件中，而是为此目的使用了_组件。_我们将在后续文章中详细了解组件。

**在 JSX 中使用 JavaScript 表达式：**在 React 中，我们可以在 JSX 中使用普通的 JavaScript 表达式。要将任何 JavaScript 表达式嵌入到用 JSX 编写的代码中，我们必须将该表达式包装在花括号 {} 中。考虑下面的程序，写在**index.js**文件中： 

## javascript

| 

import React from‘react’```;

const name =“Learner”```;

{ name }.Welcome to GeeksforGeeks.< /h1>;```

element,```

);```

|

输出： 

在上面的程序中，我们嵌入了 javascript 表达式_const name = “Learner”; _在我们的 JSX 代码中。顶部有几行用于导入一些 React API，这些将在进一步的文章中解释。我们通过将除 if-else 语句之外的任何 JavaScript 表达式包装在花括号中来嵌入对 JSX 中的任何 JavaScript 表达式的使用。但是我们可以在 JSX 中使用条件语句代替 if-else 语句。下面是 JSX 中嵌入条件表达式的示例： 

javascript

|

import ReactDOM from‘react-dom’```;

const element =

{ (i == 1) ?‘Hello World!’:‘False!’} < /h1>;```

element,```

);```

|

输出： 

在上面的示例中，检查变量 i 的值是否为 1。因为它等于 1，所以字符串 ‘Hello World!‘ 返回到 JSX 代码。如果我们修改变量 i 的值，则将返回字符串 ‘False’。

JSX 中的属性： JSX 允许我们对 HTML 元素使用属性，就像使用普通 HTML 一样。但是，JSX 没有使用 HTML 的正常命名约定，而是使用驼峰式命名约定来表示属性。例如，HTML中的_class变成 JSX 中的__className_。这背后的主要原因是 HTML 中的某些属性名称（例如“类”）是 JavaScript 中的保留关键字。因此，为了避免这个问题，JSX 对属性使用驼峰式命名约定。我们还可以在 JSX 中使用自定义属性。对于自定义属性，此类属性的名称应以data-为前缀。在下面的示例中，我们为

标签 使用了一个名为data-sampleAttribute的自定义属性。

javascript

|

import ReactDOM from‘react-dom’```;

Custom attribute

< /div>;```

element,```

);```

|

指定属性值：JSX 允许我们以两种方式指定属性值： 

1. 至于字符串文字：我们可以使用引号将属性的值指定为硬编码字符串： 

const ele =

Hello!

;

1. 作为表达式：我们可以使用花括号 {} 将属性指定为表达式： 

const ele =

Hello!

;

在 JSX 中包装元素或子元素：考虑一次要渲染多个标签的情况。为此，我们需要将所有这些标记包装在父标记下，然后将此父元素呈现到 HTML。所有子标签都称为子标签或该父元素的子标签。  请注意，在下面的示例中，我们如何将 h1、h2 和 h3 标签包装在单个 div 元素下并将它们呈现为 HTML： 

javascript

|

import ReactDOM from‘react-dom’```;

This is Heading 1 < /h1>```

This is Heading 3 < /h3>   ```

ReactDOM.render(```

document.getElementById("root"));```

|

输出：

JSX 中的注释： JSX 允许我们使用注释，因为它允许我们使用 JavaScript 表达式。JSX 中的注释以/*开头，以*/结尾。我们可以在 JSX 中添加注释，方法是将它们包裹在花括号 {} 中，就像我们在表达式中所做的那样。下面的例子展示了如何在 JSX 中添加注释： 

javascript

|

import ReactDOM from‘react-dom’```;

{/ * This is a commentinJSX * /}```

ReactDOM.render(```

document.getElementById("root"));```

|

参考：