Jsx如何有效javascript？

Question

我使用 React 和 jsx。我的问题是 jsx 如何成为有效的 js 语法？我认为这可能是真的唯一方法是，反应编译所有文件并将 jsx(s) 转换为有效的 js。就像 C 预处理器对宏所做的那样。是真的吗？如果是这样，我们将 react 视为 js 库是否正确？我认为这是更高级别的图书馆。

如果没有，是谁做的？

Answer 1

JSX 只是 React.createElement 函数调用的语法糖，它由 Babel.

转译

作为开发人员，您可能不喜欢 React 元素的创建方式，因此 React 团队提供了 JSX 语法，它非常简单，您可以与 HTML 相关联。

没有人会阻止您使用React.createElement。但这会使您的代码过于臃肿。

举个例子，你决定使用 Raw React 那么你最终会如下所示。

const list =
  React.createElement('div', {},
    React.createElement('h1', {}, 'My favorite ice cream flavors'),
    React.createElement('ul', {},
      [
        React.createElement('li', { className: 'brown' }, 'Chocolate'),
        React.createElement('li', { className: 'white' }, 'Vanilla'),
        React.createElement('li', { className: 'yellow' }, 'Banana')
      ]
    )
  );

以上代码将按预期工作，但有一些限制：

不可读
不可维护

使用 JSX 语法后，您将不会遇到这些问题，如下所示使用 JSX。

<div>
  <h1>My favorite ice cream flavors</h1>
  <ul>
    <li className="brown">Chocolate</li>
    <li className="white">Vanilla</li>
    <li className="yellow">Banana</li>
  </ul>
</div>

你可以在babeljs.io

上看到它

如果您的组件是

import "./styles.css";

export default function App() {
  return (
    <div>
      <h1>Hello word</h1>
      <h2>I'm learning React</h2>
    </div>
  );
}

然后会被转译为

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = App;

require("./styles.css");

function App() {
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Hello word"), /*#__PURE__*/React.createElement("h2", null, "I'm learning React"));
}

Answer 2

JSX 是 not 一个有效的 JavaScript。

JSX 与 JavaScript 很相似。编译器 Babel 将 JSX 代码转换为有意义的 JavaScript 代码。使用 JSX 编译器，您可以将 JSX 表达式转换为对 React.createElement

的调用

JSX:

<p style={{color:'#000', background:'blue'}}>This is JSX</p>

已编译JavaScript:

"use strict";

/*#__PURE__*/
React.createElement("p", {
  style: {
    color: '#000',
    background: 'blue'
  }
}, "This is JSX");

大家可以一起玩看运行时编译here

Jsx如何有效javascript？

How Jsx is valid javascript?

javascript

jsx

reactjs