JSX 可以在没有 Babel 的情况下运行吗？

Question

我刚刚学会了从头开始建立一个 React 项目。我只是想知道为什么 JSX 可以在没有转译器（Babel）的情况下运行？因为之前我认为我应该使用 Babel 在浏览器中运行 JSX。到目前为止，这是我的设置：

1. 反应17.0.2
2. ReactDOM 17.0.2
3. 包裹

应用程序.js

import React, { useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
   const [name, setName] = useState("");

   function changeNameHandler(e) {
      setName(e.target.value);
   }

   return (
      <div>
         <input type="text" value={name} onChange={changeNameHandler} />
         <h1>Your name is {name}</h1>
      </div>
   );
 };

ReactDOM.render(React.createElement(App), document.getElementById("app"));

Answer 1

React 不需要 babel，但该库是基于使用 ES6 javascript 语法的概念构建的。

然而，React 应用程序可以使用旧的 ES5 语法和 JSX 构建，这将消除对 Babel 的需求，但您将失去 ES6 的潜在优势。

因此，为了确保我们的 React Web 应用程序向后兼容当前和旧版浏览器或环境中的 JavaScript 版本，我们使用 Babel。