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/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>
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.
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.