react.jsにてHelloWorldがでてこない汗

<!DOCTYPE html>
<html>
    <head>
        <title>react.js practice</title>
        <script src="https://fb.me/react-0.13.3.js"></script>
        <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
    </head>
<body>
<div id="content"></div>

<script>
var HelloWorld = React.createClass({
  render: function() {
    return (
      <p className="hello">Hello!World!</p>
    );
  }
});

React.render(
  <HelloWorld />,
  document.getElementById('content')
);
</script>
</body>
</html>

consoleを調べてみると15行目(<p className=~~の行)でUncaught SyntaxError: Unexpected token < とエラーが出ます。scriptタグにtype = "text/babel"などを足しても結果が同じです。何が違うのでしょうか？？

s8_chu

2017/02/25 00:40

こちら(https://teratail.com/questions/67053)も同じ質問に見えますが、解決したのでしょうか？

行動規範の内容に同意します

回答1件

このようにしてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>react.js practice</title>
6    <script src="https://fb.me/react-0.13.3.js"></script>
7    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
8</head>
9<body>
10<div id="content"></div>
11<script type="text/jsx">
12    var HelloWorld = React.createClass({
13        render: function () {
14            return (
15                    <p className="hello">Hello!World!</p>
16            )
17        }
18    });
19    React.render(
20            <HelloWorld />,
21        document.getElementById('content')
22    );
23</script>
24</body>
25</html>