Использование React в многостраничном приложении

Я играю с React, и до сих пор мне это очень нравится. Я создаю приложение с NodeJS и хотел бы использовать React для некоторых интерактивных компонентов в приложении. Я не хочу делать это одностраничным приложением.

Я еще ничего не нашел в Интернете, которые отвечают на следующие вопросы:

Как разбить или объединить мои компоненты React в многостраничном приложении?

В настоящее время все мои компоненты находятся в одном файле, хотя я никогда не загружаю их в некоторых разделах приложения.

До сих пор я пытаюсь использовать условные операторы для рендеринга компонентов, ища идентификатор контейнера, в котором будет реагировать React. Я не уверен на 100%, что лучшие практики с React. Это выглядит примерно так.

if(document.getElementById('a-compenent-in-page-1')) {
    React.render(
        <AnimalBox url="/api/birds" />,
        document.getElementById('a-compenent-in-page-1')
    );
}

if(document.getElementById('a-compenent-in-page-2')) {
    React.render(
        <AnimalBox url="/api/cats" />,
        document.getElementById('a-compenent-in-page-2')
    );
}

if(document.getElementById('a-compenent-in-page-3')) {
    React.render(
        <AnimalSearchBox url="/api/search/:term" />,
        document.getElementById('a-compenent-in-page-3')
    );
}

Я все еще читаю документацию и еще не нашел того, что мне нужно для многостраничного приложения.

Спасибо заранее.

ОТВЕТЫ

Ответ 1

В настоящее время я занимаюсь чем-то похожим.

Приложение не является полноценным приложением React, я использую React для динамических вещей, таких как CommentBox, который является autark. И может быть включен в любой точке со специальными параметрами.

Однако все мои вспомогательные приложения загружаются и включаются в один файл all.js, поэтому он может кэшироваться браузером на разных страницах.

Когда мне нужно включить приложение в шаблоны SSR, мне просто нужно включить DIV с классом "__react-root" и специальным идентификатором (имя отображаемого приложения React)

Логика действительно проста:

import CommentBox from './apps/CommentBox';
import OtherApp from './apps/OtherApp';

const APPS = {
  CommentBox,
  OtherApp
};

function renderAppInElement(el) {
  var App = APPS[el.id];
  if (!App) return;

  // get props from elements data attribute, like the post_id
  const props = Object.assign({}, el.dataset);

  ReactDOM.render(<App {...props} />, el);
}

document
  .querySelectorAll('.__react-root')
  .forEach(renderAppInElement)

<div>Some Article</div>
<div id="CommentBox" data-post_id="10" class="__react-root"></div>

<script src="/all.js"></script>

Edit

Так как веб-пакет прекрасно поддерживает разделение кода & LazyLoading, я подумал, что имеет смысл включить пример, где вам не нужно загружать все приложения в один пакет, а разбивать их и загружать по требованию.

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

const apps = {
  'One': () => import('./One'),
  'Two': () => import('./Two'),
}

const renderAppInElement = (el) => {
  if (apps[el.id])  {
    apps[el.id]().then((App) => {
      ReactDOM.render(<App {...el.dataset} />, el);
    });
  }
}

Ответ 2

Вы можете указать несколько точек входа для приложения в файле webpack.config.js:

var config = {
  entry: {
    home: path.resolve(__dirname, './src/main'),
    page1: path.resolve(__dirname, './src/page1'),
    page2: path.resolve(__dirname, './src/page2'),
    vendors: ['react']
  },
 output: {
    path: path.join(__dirname, 'js'),
    filename: '[name].bundle.js',
    chunkFilename: '[id].chunk.js'
  },
}

то вы можете иметь в своей папке src три разных html файла с соответствующими js файлами (пример для страницы 1):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page 1</title>
</head>
<body>
  <div id="app"></div>
  <script src="./vendors.js"></script>
  <script src="./page1.bundle.js"></script>
</body>
</html>

Файл JavaScript:

import React from 'react'
import ReactDom from 'react-dom'
import App from './components/App'
import ComponentA from './components/ReactComponentA'
ReactDom.render(<div>
                  <App title='page1' />
                  <ReactComponentA/>
                 </div>, document.getElementById('app'))

Различные компоненты React могут быть загружены для каждой отдельной страницы.

Ответ 3

Я создаю приложение с нуля и учусь по ходу дела, но я думаю, что вы ищете React-Router. React-Router сопоставляет ваши компоненты с конкретными URL-адресами. Например:

render((
    <Router>
        <Route path="/" component={App}>
            <Route path="api/animals" component={Animals}>
               <Route path="birds" component={Birds}/>
               <Route path="cats" component={Cats}/>
            </Route>
        </Route>
        <Route path="api/search:term" component={AnimalSearchBox}>
    </Router>
), document.body)

В случае поиска термин "доступен" как свойство в AnimalSearchBox:

componentDidMount() {
    // from the path '/api/search/:term'
    const term = this.props.params.term
}

Попробуйте. Это руководство - то, что ставит меня выше всего с точки зрения моего понимания этой и других смежных тем.

Исходный ответ:

Я нашел свой путь здесь в поисках того же ответа. Посмотрите, этот пост вдохновляет вас. Если ваше приложение чем-то похоже на мое, оно будет иметь области, которые очень мало меняются и изменяются только в основной части. Вы можете создать виджет, в обязанности которого входит рендеринг другого виджета в зависимости от состояния приложения. Используя потоковую архитектуру, вы могли бы отправлять действие навигации, которое изменяет состояние, в которое включается ваш виджет тела, эффективно обновляя только тело страницы.

Это подход, который я пытаюсь сейчас.

Ответ 4

Используете ли вы CMS? Они, как правило, любят изменять URL-адреса, которые могут нарушить ваше приложение.

Другой способ - использовать React Habitat.

С его помощью вы можете зарегистрировать компоненты и автоматически получить доступ к dom.

Пример

Зарегистрировать компонент (ы):

container.register('AnimalBox', AnimalBox);
container.register('AnimalSearchBox', AnimalSearchBox);

Затем они доступны в вашем доме следующим образом:

<div data-component="AnimalBox"></div>

<div data-component="AnimalSearchBox"></div>

Вышеуказанное будет автоматически заменено вашими реактивными компонентами.

Затем вы можете автоматически передавать свойства (или реквизиты) своим компонентам:

<div data-component="AnimalBox" data-prop-size="small"></div>

Это откроет size как опору для вашего компонента. Существуют дополнительные параметры для передачи других типов, таких как json, array, ints, float и т.д.

Ответ 5

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

Как упомянул @Cocomico, вы можете указать несколько точек входа для приложения в файле webpack.config.js. Если вы ищете простую настройку Webpack (основанную на идее множественных точек входа), которая позволяет добавлять компоненты React на статические страницы, вы можете рассмотреть возможность использования этого: https://github.com/przemek-nowicki/multi-page-app-with-react