5

I'm active in the tag and really like the ability to create runnable React snippets with the Use BabelJS/ES2015 option.

However, when is run on a snippet containing JSX code it produces incorrectly-formatted output. Here's an example:

Valid, un-formatted code

class MyComponent extends React.Component {
    render() {

        return (
            <div>
              <h1>Title</h1>
            </div>
        );
    }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Incorrectly-formatted, 'Tidy' code

class MyComponent extends React.Component {
  render() {

    return ( <
      div >
      <
      h1 > Title < /h1> <
      /div>
    );
  }
}

ReactDOM.render( < MyComponent / > , document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Expected Result

class MyComponent extends React.Component {
  render() {

    return (
      <div>
        <h1>Title</h1>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

When the Use BabelJS/ES2015 option is selected, the JSX code should be interpreted as HTML and properly formatted. But as is cannot be used on snippets containing JSX.

Is there any plan to add support for JSX so it can be used with ?

1
  • I mean I get that there are there are varying opinions on what constitutes "correct" formatting, but the current formatter is just plain wrong.
    – zero298
    Commented Mar 28, 2019 at 13:06

0

You must log in to answer this question.

Browse other questions tagged .