1

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

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

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

1 ответ 1

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 не парсится)

8
  • снимаю шляпу и преклоняю голову перед теми, что не использует JSX) 25 авг 2020 в 4:46
  • Какой ужас (я про "html")
    – RavenTheX
    25 авг 2020 в 7:17
  • Вы не совсем поняли, я знаю как с реактом обращаться. У меня проблема в django - в идеале мне нужно не json запрашивать, а html. 25 авг 2020 в 8:21
  • @Михаил Игоревич, A какая в django проблема. В смысле переделывать много, и хочется шаблоны оставить? 25 авг 2020 в 8:29
  • @RavenTheX, а что с html? 25 авг 2020 в 8:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.