Лучший способ визуализации компонентов React внутри шаблонов HTML?

Question

Лучший способ визуализации компонентов React внутри шаблонов HTML?

1

Я бы хотел использовать React с Django non Single Page App way - Django позаботится о маршрутизации и отображении HTML-шаблонов и обслуживании данных.

Реакция должна использоваться только для некоторых конкретных компонентов внутри HTML-страницы, например. (выпадающие списки, автозаполнение, модальные модели), в идеале возможность просто отбросить, например. div с классом внутри HTML и передать реквизиты для компонента React.

Какое лучшее - поддерживаемое, масштабируемое решение для этого?

martin_crd 22 июль 2018, в 01:33

Источник

Теги:

django

html

reactjs

webpack

serverside-rendering

2 ответа

Ещё вопросы

Grigorii Sokolik · Answer 1 · 2019-07-11T07-09-00.000Z

Смотрите пакет django-jsx, а также документ для рендеринга на стороне сервера. Я не специалист в области внешнего интерфейса, но когда я столкнулся с такой проблемой, мои друзья предложили мне isomorphic app with django and react Google isomorphic app with django and react.

Tadas Antanavicius · Answer 2 · 2018-07-22T02-44-00.000Z

Это, вероятно, не то, что вы хотите сделать, учитывая, что у React есть довольно устойчивая экосистема вокруг него для создания приложений с одной страницей (SPA). Вы должны уметь отделить свой сайт React от своего приложения Django. Тогда вы сможете выбросить свое приложение React на CDN исполнителя, вместо того, чтобы ваш сервер Django размещал каждого посетителя.

Но если вы настаиваете, самым простым способом было бы, вероятно, создать index.js & index.html на каждом маршруте Django. Другими словами, создайте отдельное приложение "React" на каждом маршруте, который Django будет выполнять, когда пользователи переходят к каждой конечной точке. Я видел это раньше. Он лагги и неэффективен (относительно SPA), но может быть сделан.

Если вы действительно собираетесь зайти так далеко, чтобы писать сырые HTML/CSS/JS и просто использовать React для бит и частей между ними, вы, вероятно, ReactDOM.render вызвать ReactDOM.render используя множество вторых аргументов (называемых container), а чем стандартный метод React-y для создания одного ReactDOM.render(<App/>, document.getElementById('root')); для всего приложения, чтобы вставить в шаблон barebones HTML.

Я заметил, что вы отметили свой вопрос с помощью рендеринга на стороне сервера. Если это по какой-то причине является жестким требованием, я бы рассмотрел использование next.js, оптимизированной для этого инфраструктуры Node.