Estoy tratando de construir un proyecto con una arquitectura híbrida con Django como Backend y React como Frontend. Para esto, uso Webpack y Babel para canalizar los archivos js a djangos static index-bundle.js. Sin embargo, me encontré con un problema que no entiendo. Aparentemente, no puedo importar otros componentes en mi archivo de reacción index.js. En cambio, el div raíz permanece vacío.
Mientras esto funciona y el texto es visible en el navegador...
ReactDOM.render( <h1> React in Django </h1> document.getElementById('root') );... importarlo desde otro componente no funciona (div "root" no tiene elementos internos)
ReactDOM.render( <App />, document.getElementById('root') ); class App extends Component { render() { return ( <h1>React in Django</h1> ) } }Al final, quiero tener el comportamiento de reacción "normal" dentro del proyecto django.
Gracias a las respuestas de @jkarttunen enEsta pregunta encontré la solución:
Resultó que el problema era que Babel y React 17 requieren la configuración "tiempo de ejecución": "automático".
{ "presets": [ "@babel/preset-env", ["@babel/preset-react", {"runtime": "automatic"}] ] }