Usando React en una aplicación de varias páginas

Después de de nuestra extensa selección de datos pudimos solucionar esta impedimento que suelen tener muchos lectores. Te compartimos la solución y deseamos resultarte de mucha ayuda.

Solución:

Actualmente, estoy haciendo algo similar.

La aplicación no es una aplicación React completa, estoy usando React para cosas dinámicas, como CommentBox, que es autárquico. Y se puede incluir en cualquier Punto con parámetros especiales.

Sin embargo, todas mis aplicaciones secundarias se cargan e incluyen en un solo archivo all.jspor lo que el navegador puede almacenarlo en caché en todas las páginas.

Cuando necesito incluir una aplicación en las plantillas SSR, solo tengo que incluir un DIV con la clase “__react-root” y una identificación especial (el nombre de la aplicación React que se representará)

La lógica es realmente simple:

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(, el);


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

---

Some Article

Editar

Dado que webpack es perfectamente compatible con la división de código y LazyLoading, pensé que tenía sentido incluir un ejemplo en el que no necesita cargar todas sus aplicaciones en un solo paquete, sino dividirlas y cargarlas a pedido.

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(, el);
    );
  

Puede proporcionar varios puntos de entrada para la aplicación en el archivo 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'
  ,

entonces puede tener en su carpeta src tres archivos html diferentes con sus respectivos archivos js (ejemplo para la página 1):

Archivo JavaScript:

import React from 'react'
import ReactDom from 'react-dom'
import App from './components/App'
import ComponentA from './components/ReactComponentA'
ReactDom.render(

                  
                  
                 
, document.getElementById('app'))

Luego se pueden cargar diferentes componentes de React para cada página individual.

Estoy creando una aplicación desde cero y estoy aprendiendo sobre la marcha, pero creo que lo que está buscando es React-Router. React-Router asigna sus componentes a URL específicas. Por ejemplo:

render((
    
        
            
               
               
            
        
        
    
), document.body)

En el caso de búsqueda, se puede acceder a ‘término’ como una propiedad en AnimalSearchBox:

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

Pruébalo. Este tutorial es el que me puso en la cima en términos de mi comprensión de este y otros temas relacionados.

---

La respuesta original sigue:

Encontré mi camino aquí buscando la misma respuesta. A ver si este post te inspira. Si su aplicación es como la mía, tendrá áreas que cambiarán muy poco y variarán solo en el cuerpo principal. Podría crear un widget cuya responsabilidad sea representar un widget diferente según el estado de la aplicación. Usando una arquitectura de flujo, puede enviar una acción de navegación que cambia el estado en el que se activa el widget de cuerpo, actualizando de manera efectiva solo el cuerpo de la página.

Ese es el enfoque que estoy intentando ahora.

Acuérdate de que puedes valorar este post si te fue de ayuda.

---

---

Utiliza Nuestro Buscador