react universal app

REACT-UNIVERSAL-APP

react-universal-app é uma biblioteca que permite a construção de um aplicativo de uma página com componentes do React Universal e o roteador de reação.

Objetivos do projeto

Os objetivos do react-universal-app são muito simples:

• Simplicidade na construção de um spa com componentes do React Universal
• Flexibilidade na construção de um spa com componentes do React Universal

Simplicidade

react-universal-app fornece 2 componentes do React:

1. Para o servidor, basta passar alguns dados e rotas iniciais e renderizar a coisa
2. Para o cliente, basta passar os dados que você renderizou no saque e nas mesmas rotas que você passou para o componente do servidor e hidratar a coisa

Ele também fornece uma única API de busca de dados. Esta API de busca de dados é definida ao lado de suas rotas.

Flexibilidade

react-universal-app não faz muito.

Ele fornece alguns componentes do React para renderizar suas rotas e não o força a renderizar ou hidratar seu aplicativo de qualquer maneira específica. Você pode renderizar como quiser!

Ele fornece uma única API de busca de dados, definida em suas rotas. Isso significa que você pode criar seus componentes do aplicativo de qualquer maneira que desejar, e seus componentes do React são apenas componentes do React.

Começando

Para começar rapidamente, visualize os aplicativos de exemplo. Esses aplicativos fornecem um exemplo de como você pode criar um aplicativo usando react-universal-app .

Como alternativa, siga as etapas abaixo para começar.

Instalação

npm install react-universal-app react

App

A seguir, fornece informações sobre como configurar o roteamento e a busca de dados no seu aplicativo React principal. Depois de configurar suas rotas, você pode passá-las para reagir componentes que react-universal-app fornece para a renderização do servidor e a hidratação do lado do cliente.

Roteamento

react-universal-app usa o React Router 4, que é uma ótima base para servir páginas como componentes e fornecer configuração de rota. Para definir suas rotas, crie alguma configuração de rota e exportá -las.

NOTA: Atualmente, react-universal-app suporta apenas um único nível superior de roteamento.

 // ./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 ; 

Busca de dados

react-universal-app fornece um getInitialData muito familiar para busca de dados, que é definido na configuração de rota.

Isso fornece uma separação clara de preocupações e agnosticismo entre configuração de rotas/busca de dados e componentes. Seus componentes do React são apenas componentes do React e você pode trocar componentes nas rotas tanto quanto quiser.

Isso tem um benefício implícito de reduzir a barreira à entrada para o desenvolvimento de novos desenvolvedores do React, pois o fluxo de dados no aplicativo é claro e definido.

await getInitialData(ctx): { data }

getInitialData é uma função assíncrona opcional que é definida na configuração de uma rota. Esta API é usada para buscar dados de uma API externa ou apenas retornar alguns dados iniciais ao componente de uma rota com base em alguma outra variável.

Um objeto ctx é passado para getInitialData , que inclui:

• match - Objeto de correspondência do roteador React

No servidor, getInitialData é chamado explicitamente por você através loadInitialData (veja abaixo), com a resposta passada para o componente do servidor.

No cliente, ele é chamado internamente e os dados retornados são passados para o componente definido da rota. No cliente, react-universal-app possui 3 estados no ciclo de vida do getInitialData que são passados para o componente da rota:

• loading ( boolean ) - loading será true se getInitialData ainda não tiver respondido, provavelmente porque está ocupado buscando sua API. Caso contrário, é false
• data ( object )-Depois que react-universal-app tiver seus dados, eles serão passados no suporte data . Caso contrário, é null
• error ( Error ) - Se o processo para obter seus dados iniciais lançar um erro, ele será passado para o seu componente para manipular. Caso contrário, é 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 ; 

Roteamento parametrizado

react-universal-app suporta o roteamento parametrizado do react-router . À medida que a busca de dados é definida na rota, o roteamento parametrizado é uma brisa e pode ser tratado de maneira muito limpa.

 // ./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 ;

Servidor

Para renderizar seu aplicativo em um servidor, react-universal-app fornece um componente React ( ServerApp ) e uma API de busca de dados ( loadInitialData ). react-universal-app poderia buscar os dados iniciais internamente para você se fossem mais opinativos. No entanto, react-universal-app não faz nenhuma suposição sobre como ou onde você renderizará seu aplicativo React no servidor, por isso não pode! Leia o cliente para um exemplo claro de por que não.

Em seguida, dê uma olhada nos métodos do ReactDOMServers para renderizar um aplicativo REACT em um servidor!

Aguarda loadInitialData (URL, rotas): {data}

loadInitialData é uma função assíncrona opcional que corresponde à rota com base no URL passado, chama getInitialData e retorna a resposta. Se a rota não tiver um getInitialData , um objeto vazio será retornado. Leva os seguintes argumentos:

• url ( string ) - um objeto Node.js HTTP do tipo URL
• routes ( array ) - React Router Routas

Um componente React que renderiza uma rota com alguns dados iniciais. Pode levar os seguintes adereços:

• routes ( array ) - React Router Routas
• data ( object ) - Dados iniciais opcionais do loadInitialData que são passados para o componente da rota
• Todos os adereços do React Router do roteador de roteador - location é a chave, que você pode passar por um objeto Node.js Http URL

Cliente

Para hidratar seu aplicativo REACT em um cliente, react-universal-app fornece um componente React chamado ClientApp . Você deve então chamar o método hydrate do react-dom .

O aplicativo do lado do cliente precisa de acesso aos dados que foram usados para renderizar o aplicativo no servidor e, portanto, devem ser injetados no documento HTML em que o servidor envolveu o aplicativo renderizado React e enviado ao cliente. Esses dados podem estar dentro de uma etiqueta script , que injeta os dados no objeto window global, como assim:

 < script >
  window.__APP_DATA__ = data;
</ script >

Em seguida, dê uma olhada nos métodos do ReactDOM para hidratar um aplicativo React em um cliente!

Um componente React que renderiza suas rotas e aplicativos no cliente. Leva os seguintes adereços:

• routes ( array ) - React Router Routas
• data ( object ) - Dados iniciais opcionais do loadInitialData que são passados para o componente da rota
• Todos os adereços de navegação do roteador React