ReactJS с Django Элементы отображаются как текст

Я пытаюсь получить элементы внутри моего div, но они отображаются как текст, а не Элементы. Я использую Django в качестве back-end и ReactJS в качестве импорта ссылок в моем HTML шаблоне на front-end.

мой шаблон выглядит следующим образом:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin</script>
</head>
<body>
        <div id ="form-container">
            
        </div>

    <!-- Bootstrap JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
        <script src="{% static '/js/login.js' %}"></script>
</html>

и мой файл react JS выглядит следующим образом:

const hello = ('<h1>test</h1>');
const root = ReactDOM.createRoot(document.getElementById("form-container"));
root.render(hello);

Попробовал удалить ' ' или скобки, но не получается, в консоли браузера отображается недопустимый синтаксис.

Добавление бабеля в голову

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" crossorigin></script>

Измените определяющий тип скрипта следующим образом

 <script src="{% static '/js/login.js' %}" type="text/babel"></script>

Заставляет его работать.

Вернуться на верх