Минимальный пример React-овской части ниже. На Django смотрите, как отдать json.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> fetch </title>
</head>
<body>
<div class="calcContainer"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
"use strict"
const { useEffect, useState } = React
const e = React.createElement
const FetchBackend = () => {
const [state, setState] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((json) => setState(json));
}, []);
return (
e("div",{},
e("h1",{}, "Server data fetching"),
state && state.map(({ id, name, email }) => (
e("div",{key:id}, "Name: "+name+" E-mail: "+email)
))
)
);
};
ReactDOM.render(e(FetchBackend), document.querySelector('.calcContainer'))
</script>
</body>
</html>
Если хочется оставить сделанные шаблоны:
Можно Реактом и хтмл запрашивать и вставлять.
Если вставлять целиком -- будет слетать фокус на инпутах, как минимум.
->
Можно распарсить хтмл, и сделать из него json, потом скормить реакту, который рекурсивно по нему пойдет и построит дерево.
Если в хтмл добавить key=...
, то фокус на инпутах даже не слетит.
->
Можно стделать промежуточный сервер, который парсит хтмл и делает diff структур (храня прошлый стейт), потом отсылает json diff на клиента, а клиент применяет его к своему дереву.
Так еще трафик экономится.
У меня сервер-центрик на scala, он сам json diff делает; это diff дерева к реакт-компонентам (html не парсится)