JSX 运行 可以没有 Babel 吗?
Can JSX run without Babel?
我刚刚学会了从头开始建立一个 React 项目。我只是想知道为什么 JSX 运行 没有转译器(Babel)?因为之前我认为我应该使用 Babel 在浏览器中 运行ning JSX。到目前为止,这是我的设置:
- 反应 17.0.2
- ReactDOM 17.0.2
- 包裹
App.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"));
React 不需要 babel,但该库是基于使用 ES6 javascript 语法的概念构建的。
然而,React 应用程序可以使用旧的 ES5 语法和 JSX 构建,这将消除对 Babel 的需求,但您将失去 ES6 的潜在优势。
因此,为了确保我们的 React webapp 向后兼容 JavaScript 在当前和旧浏览器或环境中的版本,我们使用 Babel。
我刚刚学会了从头开始建立一个 React 项目。我只是想知道为什么 JSX 运行 没有转译器(Babel)?因为之前我认为我应该使用 Babel 在浏览器中 运行ning JSX。到目前为止,这是我的设置:
- 反应 17.0.2
- ReactDOM 17.0.2
- 包裹
App.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"));
React 不需要 babel,但该库是基于使用 ES6 javascript 语法的概念构建的。
然而,React 应用程序可以使用旧的 ES5 语法和 JSX 构建,这将消除对 Babel 的需求,但您将失去 ES6 的潜在优势。
因此,为了确保我们的 React webapp 向后兼容 JavaScript 在当前和旧浏览器或环境中的版本,我们使用 Babel。