Intento obtener elementos dentro de mi div, pero se muestran como texto y no como elementos. Utilizo Django como back-end y ReactJS como enlace de importación en mi plantilla HTML en el front-end.
mi plantilla es así:
{% 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>y mi archivo JS de reacción es así:
const hello = ('<h1>test</h1>'); const root = ReactDOM.createRoot(document.getElementById("form-container")); root.render(hello);Intenté eliminar el ' ' o el paréntesis, pero no puedo obtenerlo, muestra una sintaxis no válida en la consola del navegador.
Añadiendo babel a la cabeza
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" crossorigin></script>Y cambiando el tipo de definición del script como este
<script src="{% static '/js/login.js' %}" type="text/babel"></script>Hace que funcione.