django上でreactがうまく読み込めない。Unexpected token '<'

Question

前提・実現したいこと

reactのtest.js(このJSはcomponentを引っ張り出すためのもの）からApp.jsを読み込みDjango上でJSXを表示したい。

発生している問題・エラーメッセージ

test.jsの最後のAppの指定の所で < がコードエラーになってしまう。
HTML上でのエラーメッセージ；　test.js:5 Uncaught SyntaxError: Unexpected token '<'

該当のソースコード

"test.js"
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('react-test'))   <-ここの< が読み取れない

試したこと

動作をチェックするため、適当なサイトからtest.js用のコードを拾ってきました。
まずdjango、reactの動作が正しく動いているか確認しました。
reactのtest.jsに直接commponentに書きたい内容を記述して、djangoで表示できるか確認　=> 結果：問題なく、表示された。

その際のコード

"base.html"
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script type="module" src="{% static 'trap/react/test.js' %}"></script>

"index.html"
{% extends 'trap/base.html' %}
・・・
<div id='react-test'></div>

"test.js"

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

上記のtest.jsに置き換えたら問題なく、LIKEボタンが表示されました。
なぜ、<のJSXでは表示できないのか。表示できる方法があるのか知りたいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

なぜ、<のJSXでは表示できないのか。

JSXはブラウザでは直接処理できません。事前にBabelなどでJavaScriptへ変換しておく必要があります。

Comments

[pero012]

ご回答ありがとうございます。遅くなりました。

いろいろ、調べてみたのですが、
WebPack等で一度ReactのJSをビルドしないといけない　という認識であってますでしょうか？

もし認識相違なければ、ビルド以外の方法で表示するすべはないのでしょうか？

[maisumakun]

> WebPack等で一度ReactのJSをビルドしないといけない　という認識であってますでしょうか？

そのとおりです。

> ビルド以外の方法で表示するすべはないのでしょうか？

いちおう、ブラウザ上で動的にBabelをかけることもできなくはないですが、実行コストやクロスドメインによる制約を考えると、実用的とは言い難いです。

[pero012]

なるほど。とてもよくわかりました。
毎回、作成したものをビルドするのか。。。。

試してみます。ありがとうございました。