为什么浏览器不能读取 JSX？

React 是一个用于创建 Web 应用程序的 JavaScript 库。 React 使用JSX ，它允许我们在 HTML 元素中编写 JavaScript 对象。 JSX 既不是字符串也不是 HTML。它是 JavaScript 的语法扩展。 JSX 使代码简单易懂。

const num = 20 + 30;
const ele = 
{num} is 50
;

JSX 不是有效的 JavaScript，因为它们嵌入在 HTML 元素中。由于 JSX 是 HTML 和 JavaScript 的组合，因此浏览器不支持它。因此，如果任何文件包含 JSX 文件，Babel transpiler 会将 JSX 转换为 JavaScript 对象，从而成为有效的 JavaScript。因此，浏览器理解代码并执行。浏览器无法读取 JSX，因为浏览器引擎没有固有的实现来读取和理解它们。 JSX 并非旨在由引擎或浏览器实现，它旨在被各种转译器用来将这些 JSX 转换为有效的 JavaScript 代码。

让我们看看浏览器如何运行 JSX 以及它如何转换为 JavaScript。为了运行 JSX 创建一个反应应用程序。

创建反应应用程序：

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

npx create-react-app foldername

第 2 步：使用以下命令将目录更改为新创建的文件夹。

cd foldername

项目结构：创建一个项目结构，如下图所示；

项目结构

第 3 步：现在，打开index.js并添加以下代码。这段代码是用 JSX 编写的。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
  
const ele = ( 
    

    
 Never Stop Learning!!! 
     
 Because life never stops teaching 
 
    
 From GeeksforGeeks 
   
    
);
  
ReactDOM.render(ele, document.getElementById('root'));

说明：上面的代码使用 Babel 编译器转换成如下所示的 JavaScript，因为浏览器不支持 JSX，它会将 JSX 代码转换成 JavaScript。

第4步：下面显示的代码是JSX的转换代码，即JavaScript代码（没有JSX）。在index.js中添加以下代码，看看它是如何工作的。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
      
const ele = React.createElement("div", {
        className: 'page',
        style: { textAlign: 'center' }
    },
    React.createElement("h1", { id: 'head' }, "Never Stop Learning!!!"),
    React.createElement("h2", { style: { color: 'green' } }, 
                        "Because life never stops teaching"),
    React.createElement('p', null, "From GeeksforGeeks")
);
  
ReactDOM.render(ele, document.getElementById('root'));

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：两个代码给出相同的输出。因为它们是用 JSX 编写的相同代码，而另一个是 Converted JavaScript。