javascript JSX 与 ES6/ES2015

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32708020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 15:38:41  来源:igfitidea点击:

JSX vs ES6/ES2015

javascriptecmascript-6webstormreact-jsx

提问by konrad

In my project I'm using React and Babel so I use some ES6 features but mainly those used by React. Webstorm gives me the option to mark my syntax either as ES6 or JSX Harmony and I got confused.

在我的项目中,我使用 React 和 Babel,所以我使用了一些 ES6 特性,但主要是 React 使用的特性。Webstorm 为我提供了将语法标记为 ES6 或 JSX Harmony 的选项,但我感到困惑。

I think I know what ES6/ES2015 is and how to use it with a compiler, eg. Babel.

我想我知道 ES6/ES2015 是什么以及如何在编译器中使用它,例如。巴别塔。

The hard part id JSX/JSX Harmony. I know that React uses "JSX" but:

难点是 JSX/JSX Harmony。我知道 React 使用“JSX”,但是:

  1. Is this the same JSX as here? If not, which JSX is meant by JSX Harmony option in Webstorm?

  2. I've seen the compatibility page mentioned hereand know that JSX Transformer supports only small part of ES6 but also that apparently Babel supports JSX as an addition to ES6 support so JSX seems to be more than ES6 subset... If so, what features of JSX React or JSX Harmony are not part of ES6 specs?

  1. 这是与此处相同的 JSX吗?如果不是,Webstorm 中的 JSX Harmony 选项是指哪个 JSX?

  2. 我看过这里提到的兼容性页面,知道 JSX Transformer 只支持 ES6 的一小部分,但显然 Babel 支持 JSX 作为 ES6 支持的补充,所以 JSX 似乎不仅仅是 ES6 的子集......如果是这样,有什么特性JSX React 或 JSX Harmony 不是 ES6 规范的一部分?

EDIT:

编辑:

As for question 1 I'm getting sure, these are two completely different things. But what is JSX Harmony then?

至于问题 1,我很确定,这是两件完全不同的事情。但是什么是 JSX Harmony 呢?

EDIT 2:

编辑2:

To answer my own question, Webstorm JSX Harmony refers most probably to the syntax supported by React JSX Compiler with --harmonyflag on - adding a bit of ES6 support.

为了回答我自己的问题,Webstorm JSX Harmony 最有可能指的是 React JSX Compiler 支持的语法,并带有--harmony标记 - 添加了一些 ES6 支持。

采纳答案by Buzinas

  1. No, it's not the JSX you've mentioned. It's this one.

    JSX is a XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers.

  2. JSX doesn't intend to transpile the ES6 features to ES5, so, it only implements some of the most useful features to help with the templating code.

    If you want to use ES6 today, you must use Babel(preferred) or Traceurto transpile your code to ES5, and then you can use most of the features already available. If you want an even more powerful transpiler, that also has type definitions, you can take a look at Typescript.

  1. 不,这不是您提到的 JSX。就是这个

    JSX 是 ECMAScript 的类似 XML 的语法扩展,没有任何定义的语义。它不打算由引擎或浏览器实现。

  2. JSX 不打算将 ES6 特性转换为 ES5,因此,它只实现了一些最有用的特性来帮助模板代码。

    如果你今天想使用 ES6,你必须使用Babel(首选)或Traceur将你的代码转译为 ES5,然后你可以使用大部分已经可用的功能。如果你想要一个更强大的转译器,它也有类型定义,你可以看看Typescript

回答by slebetman

No, it's not the same jsx. There are two languages called JSX that I know of:

不,它不是同一个 jsx。我知道有两种称为 JSX 的语言:

  1. The templating language for React.js

  2. A statically typed programming language that compiles down to javascript.

  1. React.js 的模板语言

  2. 一种静态类型的编程语言,可编译为 javascript。

The two languages are as different as XML and C++.

这两种语言就像 XML 和 C++ 一样不同。

The JSX you're looking for is from here: https://github.com/facebook/reactand can be installed via npm from here: https://www.npmjs.com/package/react-tools

您正在寻找的 JSX 来自这里:https: //github.com/facebook/react,可以从这里通过 npm 安装:https://www.npmjs.com/package/react-tools

The JSX programming language will not compile React JSX templates.

JSX 编程语言不会编译 React JSX 模板。