在 ReactJS 中使用 JSX 有什么好处？

JavaScript XML 或 JSX 是 JavaScript 语言语法的扩展。 React 库是为元素和组件编写类似 XML 的代码的扩展。 JSX 标签有标签名称、属性和子标签。

虽然 JSX 不是编写 React 应用程序的必需品，但它非常有益，因为它使 React 代码更简单、更优雅。

JSX 具有以下优点：

• JSX 帮助我们在编写大量代码时保持代码更简单和优雅。
• 根据 React 文档，大多数人发现在 JavaScript 代码中使用 UI 时，它作为视觉辅助很有帮助。
• JSX 还允许 React 显示更多有用的错误和警告消息。
• 如果熟悉 HTML，在构建 React 应用程序时使用 JSX非常容易
• 比普通 JavaScript 更快，因为它在转换为普通 JavaScript 时执行优化。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app example

• 第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

  cd example

• 第 3 步：创建一个名为 Components 的新文件夹并创建文件 Nojsx.js和Jsx.js 。

项目结构：项目结构将如下所示。

实现：在App.js、Nojsx.js和Jsx.js文件中写下以下代码。

App.js

import React from 'react';
  
import Jsx from './Components/Jsx' 
import Nojsx from './Components/Nojsx' 
  
export default function App() {
  return (
    

     
     
    
  );
}

Nojsx.js

import React from 'react'
  
const Nojsx = () => {
    return React.createElement(
        'div',
        {id:'Nojsx',className : 'GfgClass'},
        React.createElement('h1',null, 'Welcome to GFG')
    )
}
  
export default Nojsx

jsx.js

import React from 'react'
  
const Jsx = () => {
    return (
        

        
Welcome to GFG
        
    )
} 
  
export default Jsx

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

输出

结论：两个组件将产生相同的结果。我们可以得出结论，使用 JSX 编写组件代码比不使用 JSX 编写组件代码要简单得多。

参考： https://reactjs.org/docs/introducing-jsx.html