Как из React получить страницу от Django?

Question

Есть сервер на Django, он и бекэнд, и рендерит (шаблонами) страницу. И есть задача - перевести фронт на React. Сейчас, для начала, у меня, казалось бы, простая подзадача:

отправить запрос django-серверу;
получить страницу (а в идеале конкретный элемент);
отрендерить его в React.

Возможно ли это?

Answer 1

Минимальный пример 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 не парсится)

БЛОГ НА HUSL

Как из React получить страницу от Django?

Ответы (1 шт):