How can I parse JSX with attributes?

[kuu]

Sorry for using this issue for asking questions. But I don't understand how to parse JSX with attributes.

I wanted to write a babel plugin to transform JSX code. I can get an AST with the following code:

var babylon = require('babylon');
var code = '\
    <Outer>\
      <Inter />\
    </Outer>\
';
var ast = babylon.parse(code, {
  sourceType: 'module',
  plugins: ['jsx']
});

However, an error occurs with the following code:

var code = '\
    <Outer>\
      <Inter value=0 />\
    </Outer>\
';

The error is:

SyntaxError: JSX value should be either an expression or a quoted JSX text

Any suggestions?

[fkling]

Stack Overflow is a great place to ask usage questions. I this case I find the error pretty clear: 0 is not a valid value at that position. It would either be an expression ({0}) or quoted text ("0").

[kuu]

Thanks. Actually, I asked at SO first but didn't get any answer. But thank you. Now I understood.

[loganfsmyth]

@kuu Sorry you didn't get a quicker answer, tagging is important on SO since it is what people use to find things, make sure you read the description of a tag before using it . You originally used

• babel - You meant to use babeljs. The babel tag has the following description:

  Python internationalization library with an emphasis on web-based applications. For questions about the JavaScript library, please use [babeljs].

• jsx - You meant to use react-jsx, the jsx tag has the following description:

  JSX is an open source programming language, or an AltJS with classes and static types. The source code is compiled into JavaScript which is highly optimized.

Someone would have found it eventually, but if you expect quick answers people have to find your question first :)