反应JS | JSX 简介

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

const ele = 
This is sample 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';
import ReactDOM from 'react-dom';
 
const name = "Learner";
 
const element = 
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 = 
{ (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 = 
Hello Geek
            
Custom attribute
< /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 = 

                   
This is Heading 1 < /h1>
                   
This is Heading 2
                   
This is Heading 3 < /h3>   
                
 ;
ReactDOM.render(
    element,
    document.getElementById("root"));

输出：

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

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
 
const element = 
Hello World !
            {/ * This is a comment in JSX * /}
        
;
 
ReactDOM.render(
    element,
    document.getElementById("root"));

参考：

• https://reactjs.org/docs/introducing-jsx.html
• https://en.wikipedia.org/wiki/React_(JavaScript_library)#JSX