19

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.

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

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

  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 here and 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?

EDIT:

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

EDIT 2:

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

Community
  • 1
  • 1
konrad
  • 1,664
  • 2
  • 17
  • 36
  • Both React JSX and full ES6 that is? - this was meant as an answer to a comment that for Webstorm JSX Harmony means both but that comment dissapeared. – konrad Sep 22 '15 at 03:50
  • 1
    "Harmony" was an old name for ES6, in case that helps. – Jeffrey Yasskin Sep 22 '15 at 04:08
  • So JSX Harmony would be ES6 + React JSX then, right? – konrad Sep 22 '15 at 04:11
  • To answer myself - probably no, that would probably be React JSX extension plus a handful of ES6 transforms as here (https://facebook.github.io/react/jsx-compiler.html). – konrad Sep 22 '15 at 04:35
  • @JeffreyYasskin: [not exactly, no](http://stackoverflow.com/q/21580428/1048572), though they were often interchangable in the past. – Bergi Sep 22 '15 at 17:33
  • Code completion or syntax highlighting doesn't work inside .html files. It only works for .js files after you have changed javascript language version to Jsx Harmony. Is there a workaround for .html files? – Merhawi Fissehaye Jul 29 '16 at 07:28

2 Answers2

13

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

  1. The templating language for React.js

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

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

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

The JSX programming language will not compile React JSX templates.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
slebetman
  • 109,858
  • 19
  • 140
  • 171
10

  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 Traceur to 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.

Buzinas
  • 11,597
  • 2
  • 36
  • 58
  • JSX in pt. 2 meaning JSX Compiler (https://facebook.github.io/react/jsx-compiler.html) with --harmony (ES6) flag on? That starts to make sense. – konrad Sep 22 '15 at 04:33
  • I've used TypeScript and liked it (syntactically it is to JavaScript what ActionScript3 was to ActionScript2 which is mostly a plus) but decided to try other things out and dive deeper into vanilla JS. I never used CoffeScript though - seems more pythonic from what I've seen so far. – konrad Sep 23 '15 at 21:39