javascript - helmet - Usar React en una aplicación de varias páginas

react meta tags

Question

He estado jugando con React y hasta ahora me gusta mucho. Estoy creando una aplicación con NodeJS y me gustaría usar React para algunos de los componentes interactivos de la aplicación. No quiero que sea una aplicación de una sola página.

Todavía no he encontrado nada en la web que responda las siguientes preguntas:

¿Cómo divido o agrupo mis componentes React en una aplicación de varias páginas?

Actualmente, todos mis componentes están en un archivo, aunque es posible que nunca los cargue en algunas secciones de la aplicación.

Hasta ahora estoy tratando de usar sentencias condicionales para representar componentes buscando la ID del contenedor donde reaccionará React. No estoy 100% seguro de cuáles son las mejores prácticas con React. Se ve algo como esto.

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'')
    );
}

Todavía estoy leyendo la documentación y aún no he encontrado lo que necesito para una aplicación de varias páginas.

Gracias por adelantado.

Answer 1

¿Estás usando un CMS? A ellos les gusta cambiar las URL, lo que podría romper su aplicación.

Otra forma es usar algo como React Habitat .

Con él, puede registrar componentes y se exponen automáticamente al dom.

Ejemplo

Registrar componente (s):

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

Entonces están disponibles en tu dom así:

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

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

Lo anterior se reemplazará automáticamente con sus componentes de reacción.

Luego puede pasar automáticamente propiedades (o accesorios) a sus componentes también:

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

Esto expondrá el size como accesorio a su componente. Hay opciones adicionales para pasar otros tipos como json, array, ints, floats, etc.

Answer 2

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 autark. Y se puede incluir en cualquier punto con parámetros especiales.

Sin embargo, todas mis aplicaciones secundarias se cargan y se incluyen en un solo archivo all.js , por 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 un ID especial, (el nombre de la aplicación React que se procesará)

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(<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>

Editar

Dado que webpack admite perfectamente 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 bajo demanda.

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);
    });
  }
}

Answer 3

Editar: 01/11/2015

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

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)

En el caso de búsqueda, ''término'' es accesible como una propiedad en AnimalSearchBox:

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

Pruébalo. This tutorial es el que me coloca 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. Mira si this publicación te inspira. Si su aplicación es como la mía, tendrá áreas que cambian muy poco y varían solo en el cuerpo principal. Puede crear un widget cuya responsabilidad es representar un widget diferente según el estado de la aplicación. Con una arquitectura de flujo, puede enviar una acción de navegación que cambie el estado en el que se activa su widget de cuerpo, actualizando efectivamente el cuerpo de la página solamente.

Ese es el enfoque que estoy intentando ahora.

Answer 4

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):

<!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>

Archivo 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''))

Se pueden cargar diferentes componentes de React para cada página.

Answer 5

Sé que ha pasado un tiempo desde que se hizo esta pregunta, pero espero que esto ayude a alguien.

Como @Cocomico mencionó, podría proporcionar varios puntos de entrada para la aplicación en el archivo webpack.config.js. Si está buscando una configuración simple de Webpack (basada en la idea de múltiples puntos de entrada) que le permita agregar componentes React a páginas estáticas, puede considerar usar esto: https://github.com/przemek-nowicki/multi-page-app-with-react