react universal app
1.0.0
react-universal-app es una biblioteca que permite la construcción de una aplicación de una sola página con componentes React Universal y React Router.
Los objetivos de react-universal-app son muy simples:
Sencillez
react-universal-app proporciona 2 componentes React:
También proporciona una única API de recolección de datos. Esta API de recolección de datos se define junto a sus rutas.
Flexibilidad
react-universal-app no hace mucho.
Le brinda un par de componentes React para representar sus rutas, y no le obliga a renderizar o hidratar su aplicación de una manera particular. ¡Puedes renderizar como quieras!
Le brinda una única API de recolección de datos, que se define en sus rutas. Esto significa que puede construir los componentes de su aplicación de todos modos que desee, y sus componentes React son solo componentes React.
Para comenzar rápidamente, vea las aplicaciones de ejemplo. Estas aplicaciones dan un ejemplo de cómo puede crear una aplicación utilizando react-universal-app .
Alternativamente, siga los pasos a continuación para comenzar.
npm install react-universal-app react A continuación se proporciona información sobre cómo configurar el enrutamiento y la obtención de datos en su aplicación React principal. Una vez que haya configurado sus rutas, puede pasarlas para reaccionar componentes que react-universal-app proporciona la representación del lado del servidor y la hidratación del lado del cliente.
react-universal-app utiliza React Router 4, que es una gran base para servir páginas como componentes y proporcionar configuración de ruta. Para definir sus rutas, cree una configuración de ruta y expórtelas.
Nota: react-universal-app actualmente solo admite un solo nivel de enrutamiento superior.
// ./app/routes.js
import Home from './components/Home' ;
const routes = [
{
path : '/' ,
exact : true ,
component : Home ,
} ,
] ;
export default routes ; // ./app/components/Home.js
const Home = ( ) => (
< div >
< h1 > Home! </ h1 >
</ div >
)
export default Home ; react-universal-app proporciona un getInitialData muy familiar para la obtención de datos, que se define en la configuración de la ruta.
Esto proporciona una clara separación de las preocupaciones y el agnosticismo entre la configuración de la ruta/recuperación de datos y componentes. Sus componentes React son solo componentes React, y puede intercambiar componentes por las rutas tanto como desee.
Esto tiene un beneficio implícito de reducir la barrera de entrada para el desarrollo para los nuevos desarrolladores React, ya que el flujo de datos en la aplicación es claro y definido.
await getInitialData(ctx): { data } getInitialData es una función asincrónica opcional que se define en la configuración de una ruta. Esta API se utiliza para obtener datos de una API externa, o simplemente devolver algunos datos iniciales al componente de una ruta basado en alguna otra variable.
Se pasa un objeto ctx a getInitialData , que incluye:
match - React Router's Match Object En el servidor, getInitialData se llama explícitamente a través de loadInitialData (ver más abajo), con la respuesta pasada al componente del servidor.
En el cliente, se llama internamente y los datos devueltos se pasan al componente definido de la ruta. En el cliente, react-universal-app tiene 3 estados en el ciclo de vida de getInitialData que se pasan al componente de la ruta:
loading ( boolean ): loading será true si getInitialData aún no ha respondido, probablemente porque está ocupado buscando en su API. De lo contrario, es falsedata ( object ): una vez que react-universal-app tenga sus datos, se pasará en el accesorio data . De lo contrario, es nullerror ( Error ): si el proceso para obtener sus datos iniciales arroja un error, se pasará a su componente para manejar. De lo contrario, es null // app/routes.js
import Home from './components/Home' ;
const routes = [
{
path : '/' ,
exact : true ,
component : Home ,
getInitialData : await ( ctx ) => {
return { title : 'Home!' } ; ;
} ,
} ,
] ;
export default routes ; // app/components/Home.js
const Home = ( { loading , error , data } ) => {
if ( loading ) return 'Loading...'
if ( error ) return 'Oh no, something went wrong!'
if ( data ) {
return (
< div >
< h1 > { data . title } </ h1 >
</ div >
)
}
} ;
export default Home ; react-universal-app admite el enrutamiento parametrizado desde react-router . Como la obtención de datos se define en la ruta, el enrutamiento parametrizado es muy fácil y se puede manejar muy limpiamente.
// ./app/routes.js
import Home from './components/Home' ;
const routes = [
{
path : '/:id' ,
exact : true ,
component : Home ,
getInitialProps : await ( { match } ) => {
const { id } = match . params ;
const response = await fetch ( `/someApi/ ${ id } ` ) ;
const apiResponse = await response . json ( ) ;
return { title : 'Home!' , apiResponse } ; ;
} ,
} ,
] ;
export default routes ; // ./app/components/Home.js
const Home = ( { loading , error , data } ) => {
if ( loading ) return 'Loading...'
if ( error ) return 'Oh no, something went wrong!'
if ( data ) {
const { title , apiResponse } = data ;
return (
< div >
< h1 > { title } </ h1 >
{
apiResponse . map ( ( { title , description } ) => (
< div >
< h2 > { title } </ h2 >
< p > { description } </ p >
</ div >
) )
}
</ div >
)
}
} ;
export default Home ; Para representar su aplicación en un servidor, react-universal-app le proporciona un componente React ( ServerApp ) y una API de búsqueda de datos ( loadInitialData ). react-universal-app podría obtener los datos iniciales internamente para usted si fuera más obstinado. Sin embargo, react-universal-app no hace ninguna suposición sobre cómo o dónde representará su aplicación React en el servidor, ¡por lo que no puede! Lea el cliente para un claro ejemplo de por qué no.
¡Luego, eche un vistazo a los métodos de ReactDOMServers para representar una aplicación React en un servidor!
loadInitialData es una función asincrónica opcional que coincide con la ruta en función de la URL aprobada, las llamadas getInitialData y devuelve la respuesta. Si la ruta no tiene una getInitialData , se devolverá un objeto vacío. Toma los siguientes argumentos:
url ( string ) - un objeto de URL node.js httproutes ( array ) - Rutas de enrutador ReactUn componente React que representa una ruta con algunos datos iniciales. Puede tomar los siguientes accesorios:
routes ( array ) - Rutas de enrutador Reactdata ( object ): datos iniciales opcionales de loadInitialData que se pasa al componente de la rutalocation es clave, que puede pasar un objeto similar a URL de nodo.js http Para hidratar su aplicación React en un cliente, react-universal-app proporciona un componente React llamado ClientApp . Luego debe llamar al método hydrate de react-dom .
La aplicación del lado del cliente necesita acceso a los datos que se usaron para representar la aplicación en el servidor, por lo que debe inyectarse en el documento HTML que el servidor envolvió la aplicación React Rendered y enviada al cliente. Estos datos podrían estar dentro de una etiqueta script , que inyecta los datos en el objeto window global, como así:
< script >
window.__APP_DATA__ = data;
</ script > ¡Luego, eche un vistazo a los métodos de ReactDOM para hidratar una aplicación React en un cliente!
Un componente React que representa sus rutas y aplicación en el cliente. Toma los siguientes accesorios:
routes ( array ) - Rutas de enrutador Reactdata ( object ): datos iniciales opcionales de loadInitialData que se pasa al componente de la ruta
