Search code examples
javascripthtmlreactjsatom-editoratom-beautify

Atom Beautify plugin breaks my React html

When I am just typing this file, code works. When using Beautify plugin for Atom, code doesn't work.

I am trying to compare those files, but anyway cannot find my mistake.

Where can be a problem? May be Beautify blocks transpiler or something?

//This is unstyled and working version.

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>

  <title>React components</title>
</head>

<body>
  <div id='react-container'></div>
  <script type="text/babel">
              var MyComponent = React.createClass({
                  render() {
                      return <div>
                          <h1>{this.props.text}</h1>
                          <p>{this.props.children}</p>
                      </div>
                  }
              })
          ReactDOM.render(<div>
            <MyComponent text ="Hello World">My</MyComponent>
          <MyComponent text ="Hello World">Name is</MyComponent>
          <MyComponent text ="Hello World">Anatoly</MyComponent></div>,
        document.getElementById('react-container'))
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>

  <title>React components</title>
</head>

<body>
  <div id='react-container'></div>
  <script type="text/babel">
    var MyComponent = React.createClass({ render() { return
    <div>
      <h1>{this.props.text}</h1>
      <p>{this.props.children}</p>
    </div>
    } }) ReactDOM.render(
    <div>
      <MyComponent text="Hello World">My</MyComponent>
      <MyComponent text="Hello World">Name is</MyComponent>
      <MyComponent text="Hello World">Anatoly</MyComponent>
    </div>, document.getElementById('react-container'))
  </script>
</body>

</html>

Gist to that files

Solution

  • issue Screenshot

     <script type="text/babel">
    var MyComponent = React.createClass({ render() { return <div>
      <h1>{this.props.text}</h1>
      <p>{this.props.children}</p>
    </div>
    } }) 
    ReactDOM.render(<div>
      <MyComponent text="Hello World">My</MyComponent>
      <MyComponent text="Hello World">Name is</MyComponent>
      <MyComponent text="Hello World">Anatoly</MyComponent>
    </div>, document.getElementById('react-container'))
  </script>