JSX 代表什么？

Question

JSX 代表什么？

我指的是 JSX，它被定义为对 ECMAScript 的类似 XML 的语法扩展，它随着 ReactJS 的日益流行而变得非常流行。

Answer 1

JSXJavaScript 代表语法 extension.It 类似于 XML。您可以在 React 中使用简单的 JSX 语法转换。

Answer 2

JSX 代表 JavaScript XML。对于 React，它是对元素和组件的类似 XML 代码的扩展。根据 React 文档和您提到的：

JSX is a XML-like syntax extension to ECMAScript without any defined semantics

从上面的引用中，您可以看到 JSX 没有定义语义，它只是 JavaScript 的扩展，允许编写类似 XML 的代码以实现简单和优雅，并且然后你将 JSX 转换为纯 JavaScript 函数调用 React.createElement。根据 React 教程：

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant.

Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression.

JSX 中的任何代码都被转换为普通代码 JavaScript/ECMAScript。考虑一个名为 Login 的组件。现在我们用 JSX 渲染它：

<Login foo={...} bar={...} />

如您所见，JSX 只允许您使用类似于 XML 的标签语法，代表 React 中的组件和元素。它被转换成纯 JavaScript:

React.createElement(Login, { foo: ..., bar: ... });

你可以阅读更多at the docs。

Answer 3

JSX - JavaScript 语法扩展将 XML 语法添加到 JavaScript

的预处理器步骤

Answer 4

JSX 代表 Javascript，语法 XML 类似于

 eg.
<div>
</div>
or <td>
</td>

与 XML 格式相同，将其放入 class 中的 return 形式定义

Answer 5

JSX 代表 JavaScript XML (eXtensible Markup L语言).

JSX是JavaScript.

中语法糖的例子之一

语法糖是编程语言中的语法，旨在使内容更易于阅读或表达。

使用 JSX 编写的组件:

const MyComponent = () => { 
  return <div> 
    <p>This is not HTML...!</p> 
    <p>Wait...Is this JavaScript?</p> 
    <p>No, What the hell is this?</p> 
    <p>This is JSX.</p> 
  </div> 
}

如果我们不想使用 JXS 那么上述代码片段的相应代码将如下所示。

const MyComponent = () => { 
  return React.createElement("div", null, React.createElement("p", null, "This is not HTML...!"), React.createElement("p", null, "Wait...Is this JavaScript?"), React.createElement("p", null, "No, What the hell is this?"), React.createElement("p", null, "This is JSX.")); 
};

阅读更多：

Syntactic sugar - Wikipedia

Introducing JSX – React

Answer 6

根据React Doc ：

const element = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是字符串也不是 HTML。

称为JSX，是对JavaScript

的语法扩展

JSX 所做的是生成 React“元素”。 但是如何呢？

在幕后，JSX 由名为 Babel 的 JavaScript 编译器编译并转换为 vanilla javascript

这是 React 中使用 JSX 的 class 组件：

class Hello extends React.Component {
  render() {
    return <div>Bonjour {this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="momo" />,
  document.getElementById('root')
);

这是没有 JSX 的相同 class 组件：

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Bonjour ${this.props.name}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {name: 'momo'}, null),
  document.getElementById('root')
);

如你所见，每个 JSX 只是对 React.createElement() 的调用所以无论你能用 JSX 做什么，你都可以用普通的 JavaScript 来完成。但是为了使代码更简单，最好使用 JSX

JSX 代表什么？

What does JSX stand for?

javascript

reactjs

react-jsx