React index.js в проекте Django не отображает импортированные компоненты
Я пытаюсь создать проект с гибридной архитектурой с Django в качестве Backend и React в качестве Frontend. Для этого я использую Webpack и Babel для передачи js файлов в djangos static index-bundle.js. Однако я столкнулся с проблемой, которую не могу понять. Очевидно, я не могу импортировать другие компоненты в файл index.js react. Вместо этого корневой div остается пустым.
Пока это работает и текст виден в браузере...
ReactDOM.render(
<h1> React in Django </h1>
document.getElementById('root')
);
... импорт из другого компонента не работает (div "root" не имеет внутренних элементов)
ReactDOM.render(
<App />,
document.getElementById('root')
);
class App extends Component {
render() {
return (
<h1>React in Django</h1>
)
}
}
В итоге я хочу иметь "нормальное" поведение react внутри проекта django.
Благодаря ответам @jkarttunen в Этот вопрос я нашел решение:
Оказалось, что проблема в том, что Babel и React 17 требуют настройки "runtime": "automatic".
{
"presets": [
"@babel/preset-env",
["@babel/preset-react", {"runtime": "automatic"}]
]
}