JSX 如何在幕后工作？

学习 HTML 比包含状态、组件、事件等的 React 容易。因此，为了简化编码，React 引入了 JSX。它是一个 JavaScript 扩展，我们可以将有效的 JavaScript 对象嵌入到 HTML 元素中。 JSX 使代码更易于阅读和理解。通常，HTML 和 JavaScript 是分开编写的，但 react 会创建同时包含 HTML 和 JavaScript 的组件。因此，如果您熟悉 HTML，则可以使用 JSX 轻松修改代码。

const age = 20;
const ele = 
 I'm {age} years old 
;

JSX 如何在幕后工作：

大多数用户使用 JSX，因为它易于学习和实现，并且很容易发现错误。每当使用 JSX 编写代码时，babel 会将代码转编译为 JavaScript 代码。

JSX 转换为 JavaScript

创建一个反应应用程序

按照以下步骤创建反应应用程序：

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

npx create-react-app foldername

第2步：将目录更改为新创建的文件夹。

cd foldername

它创建了一个项目结构，如下所示：

项目结构

第 3 步：现在在index.js中，写下以下代码，并检查有 JSX 和没有 JSX 的代码。

用 JSX 编写的代码类似于以下代码：

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
  
const ele = ( 
  
 
    
 Welcome to GeeksforGeeks 
 
      
 Don't stop learning 
   
  
);
ReactDOM.render(ele, document.getElementById('root'));

不使用 JSX：使用 JSX编写的代码使用 babel 编译器转换为 react 代码，如下所示：

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
  
const ele = React.createElement(
    "div", { "class": "container" },
    React.createElement(
        "h1", { id: "h1" }, "Welcome to GeeksforGeeks"),
    React.createElement("p", null, "Don't stop learning"));
  
ReactDOM.render(ele, document.getElementById('root'));

运行应用程序的步骤：要运行应用程序，请输入以下命令。

npm start

输出：

两个代码都产生以下输出：