Как использовать React в нескольких местах на обычном веб-сайте

Question

У меня новый веб-сайт, который представляет собой не одностраничное приложение, а веб-сайт, созданный сервером (asp.net с использованием Umbraco CMS).Раньше я использовал Angular 1.x на своих веб-сайтах, что легко, потому что вы просто загружаете его с помощью тегов сценария, а код не компилируется.

Я недавно использовал React в SPA, начатых с create-Reaction-приложение, которое заботится о вас через webpack, babel и т. д. и производит один пакет.Однако я хочу использовать React в нескольких местах на сайте, таких как основной заголовок / меню, контактные формы и т. Д., Поэтому имеет смысл создавать несколько пакетов, хотя эти пакеты могут совместно использовать импорт (Moment.js, Formik и т. Д.).

На веб-сайте React есть инструкции, показывающие, как включить один скрипт и прикрепить его к элементу на вашем веб-сайте, но нет сложных примеров.

Итак, как мне настроить что-то, что будеттранспортировать все без дублирования кода в связках.Нужен ли какой-нибудь мастер-пакет, загруженный на все страницы и отдельные пакеты для таких вещей, как форма для связи?

Во-вторых, как мне все подключить?В SPA у вас просто есть корневой узел, и вы привязываете свое приложение к корневому узлу с помощью response-dom, но если у вас есть мини-части реагирующей функциональности, замусоренные в вашем приложении, тогда вам нужен какой-нибудь мастер-скрипт, чтобы связать все справильные элементы?

Любая помощь будет принята с благодарностью, даже если она просто направит меня в направлении какого-то типового проекта.

О, и я не заинтересован в том, чтобы на стороне сервера отображалось приложение Next JS или что-то в этом роде, я думаю, что это может оказаться слишком сложным для интеграции с CMS.

Answer 1

Я думаю, что вы можете сделать один пакет, рендеринг нескольких компонентов в разных местах.Я создал небольшой пример:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Body</h1>
    </div>
  );
}

function Footer() {
  return (
    <div className="App">
      <h1>Footer</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

const footerElement = document.getElementById("footer");
ReactDOM.render(<Footer />, footerElement);

Вы можете поиграть с ним в этом примере с песочницей.https://codesandbox.io/s/34nvv4nvy5

Answer 2

В дополнение к ответу выше вы можете исключить React, ReactDOM или / и React Router (и любые другие зависимости) из ваших пакетов и включить их на страницу, чтобы не связывать их X раз.Таким образом, вы можете иметь отдельные входные файлы для каждого приложения.

webpack.config.js

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
}

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js" integrity="sha256-JBRLQT7aJ4mVO0H2HRhGghv/K76c5WzE57wW0Flc6ZY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/cjs/react-dom.production.min.js" integrity="sha256-j2ERTIovDFVe0R+s0etuSiBQ2uxrNE6q0ow/rXxHvLA=" crossorigin="anonymous"></script>

Answer 3

Если вы хотите визуализировать элементы «за пределами» вашего root элемента реакции, тогда вы можете использовать реагировать на порталы .Мы тоже используем этот подход, и он идет хорошо.

Если вы все еще думаете, что хотите, чтобы несколько мини-приложений реагировали на одну и ту же страницу, вы можете общаться с ними с помощью ReactDOM.render.По сути, ReactDOM.render может вызываться несколько раз, он не будет заново монтировать все приложение, но вместо этого будет запускать обновления и переход в дерево реакции (аналогично обычному методу render компонентов).

На самом деле, я написал статью с руководством о том, как Интегрировать React с другими приложениями и фреймворками .

Я также пытался смоделировать этот подход на примере codeandbox

Надеюсь, это поможет.