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

He estado jugando con React y hasta ahora realmente me gusta. Estoy construyendo una aplicación con NodeJS y me gustaría usar React para algunos de los componentes interactivos en toda la aplicación. No quiero convertirlo en una aplicación de una sola página.

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

¿Cómo puedo dividir o agrupar mis componentes React en una aplicación de varias páginas?

Actualmente, todos mis componentes están en un solo file, aunque 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 se representará 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 documentation y aún no he encontrado lo que necesito para una aplicación de varias páginas.

Gracias por adelantado.

Actualmente, estoy haciendo algo similar.

La aplicación no es una aplicación completa de React, estoy usando React para material dynamic, como CommentBox, que es autark. Y se puede include en cualquier punto con params especiales ..

Sin embargo, todas mis aplicaciones secundarias se cargan e incluyen en un solo file all.js , por lo que el browser puede almacenarlas en caching.

Cuando necesito include una aplicación en las templates SSR, solo tengo que include un DIV con la class "__react-root" y una identificación especial (el nombre de la aplicación React que se va a 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(<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> 

¿Qué piensas?

Editar: 01/11/2015

Estoy construyendo 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 el 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 parte superior en términos de mi comprensión de este y otros temas relacionados.

La respuesta original sigue:

Encontré mi path aquí buscando la misma respuesta. Vea si esta publicación lo inspira. Si su aplicación es como la mía, tendrá áreas que cambian muy poco y solo varía en el cuerpo principal. Puede crear un widget cuya responsabilidad es representar un widget diferente en function del estado de la aplicación. Al usar una architecture de flujo, puede enviar una acción de navigation que cambie el estado en que se enciende el widget de su cuerpo, actualizando efectivamente el cuerpo de la página solamente.

Ese es el enfoque que estoy intentando ahora.

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

luego puede tener en su carpeta src tres files html diferentes con sus respectivos files 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.

¿Estás usando un CMS? Tienden a gustar cambiar las URL que podrían romper su aplicación.

Otra forma es usar algo como React Habitat .

Con él, puede registrar componentes y se exponen automáticamente a la 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 será reemplazado automáticamente con sus componentes de reacción.

A continuación, puede pasar automáticamente properties (o accesorios) a sus componentes:

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

Esto expondrá el size como un apoyo para su componente. Hay opciones adicionales para pasar otros types como json, array's, ints, floats, etc.