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

const ele = <h1>This is sample JSX</h1>;

上面的代码片段有点像 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'``````;

import ReactDOM from 'react-dom'``````;

const name = "Learner"``````;

const element = <h1>Hello,

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

ReactDOM.render(

element,

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

);

|

**输出： **

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

javascript

|

import React from 'react'``````;

import ReactDOM from 'react-dom'``````;

let i = 1;

const element = <h1>{ (i == 1) ? 'Hello World!' : 'False!' } < /h1>;

ReactDOM.render(

element,

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

);

|

**输出： **

在上面的示例中，检查变量 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 React from 'react'``````;

import ReactDOM from 'react-dom'``````;

const element = <div><h1 className = "hello"``````>Hello Geek</h1>

<h2 data-sampleAttribute=``````"sample"``````>Custom attribute</h2>< /div>;

ReactDOM.render(

element,

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

);

|

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

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

const ele =

Hello!

;

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

const ele =

Hello!

;

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

javascript

|

import React from 'react'``````;

import ReactDOM from 'react-dom'``````;

const element = <div>

<h1>This is Heading 1 < /h1>

<h2>This is Heading 2</h2 >

<h3>This is Heading 3 < /h3>   

</div > ;

ReactDOM.render(

element,

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

|

输出：

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

javascript

|

import React from 'react'``````;

import ReactDOM from 'react-dom'``````;

const element = <div><h1>Hello World !</h1>

{/ * This is a comment in JSX * /}

</div>;

ReactDOM.render(

element,

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

|

参考：