react・JSXを外部ファイルで呼び出す方法

Question

以下のようにJSXを外部ファイルとして読み込みたいのですが、うまくいきません。

<!--jsxのファイルを外部ファイルとして読み込み-->
<script type="text/babel" src="test.jsx"></script>

以下のように公式サンプルのコンポーネントの外部ファイル読み込みには成功しました。

<!-- Load our React component. -->
<script src="like_button.js"></script>

よければテストコードもいただきたいです。

よろしくお願いいたします。

Answer 1

type="text/jsx"と書いて直接読み込むには、Babel本体のロードが必要です（公式）。

なお、実用的にはあまりおすすめできません。事前に通常のJavaScriptへ変換するフローを構築することをおすすめします。