'ReactJS with Django Elements Displayed As Text

I try to get elements inside my div but they are displayed as text and not Elements. I use Django as the back-end and ReactJS as a link import in my HTML template on the front-end.

my template is like this:

{% 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
        <script src="{% static '/js/login.js' %}"></script>
</html>

and my react JS file is like this:

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

Have tried removing the ' ' or the parenthesis but can't get it shows invalid syntax in browser console.

javascripthtmlreactjsdjango


Solution 1:[1]

Adding babel to head

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

And Changing the defining type of the script like this

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

Gets it to work.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Empty

Related Questions