React

Nesta seção, você encontra o passo a passo inicial para usar a biblioteca Beagle no React.

Configurações de uso

Depois que você terminar a instalação, é preciso configurar o Beagle para o uso no framework do React. Para isso, basta realizar os seguintes passos:

Passo 1: Configuração automática

Execute um dos comandos abaixo para gerar os arquivos que serão usados pela biblioteca Beagle. É possível executar o comando de acordo com seu gerenciador de pacotes:

**yarn

yarn beagle

**npm

beagle

Feito isso, o Beagle irá retornar uma pergunta.

Do you want to replace “app.tsx” content with the Beagle configuration (y or n)?

Você deseja substituir o conteúdo “app.tsx” pela configuração do Beagle?
Caso digite “y” a app.tsx do projeto será substituída por outra com a configuração do Beagle, caso digite “n” o arquivo não vai ser substituído e a configuração terá que ser feita manualmente.

Ao final deste processo, será gerado um novo arquivo em seu projeto:

  • beagle-service.ts

Passo 2: Criação do JSON de definição do layout

Para uma melhor experiencia o JSON deve ser criado por meio de um BFF, como configurar um BFF você encontra aqui, neste exemplo usaremos o JSON que está disponibilizado na URL http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/welcome:

{
    "_beagleComponent_": "beagle:container",
    "children": [
        {
            "_beagleComponent_":"beagle:text",
            "text":"Hello Beagle"
        },
       {
            "_beagleComponent_":"beagle:text",
            "style":{
              "padding":{
                "top":{
                  "value":10,
                  "type": "REAL"
                }
              }
            },
            "text":"Beagle is a cross-platform framework which provides usage of the server Driven UI concept,natively in iOS, Android and Web applications. By using Beagle, your team could easily change application's layout and data by just changing backend code"
        }
    ]
}

Passo 3: Configuração do Beagle Service

Depois de criado o seu JSON, a sua estrutura deve estar parecida com a imagem a seguir:

Abra agora o arquivo criado beagle-service.ts e verifique se o código está igual ao abaixo:

import { createBeagleUIService } from '@zup-it/beagle-react'

export default createBeagleUIService({
  baseUrl: "http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/",
  components: {}
})

Neste ponto da configuração podemos definir a baseUrl do servidor externo do Beagle.

Passo 4: Usando o BeagleRemoteView

Agora você precisa especificar, dentro da aplicação, o local em que os componentes serão renderizados. Para isso, a biblioteca do Beagle fornece o BeagleRemoteView e o BeagleProvider. Abra o arquivo do componente que você deseja renderizar o layout e altere para ficar como o exemplo a seguir, no route adicione o caminho relativo ao JSON remoto: /welcome.

import React from 'react';
import './App.css';
import { BeagleProvider, BeagleRemoteView } from '@zup-it/beagle-react';
import BeagleService from './beagle/beagle-service';

function App() {
  return (
    <BeagleProvider value={BeagleService}>
      <BeagleRemoteView route={'/welcome'} />
    </BeagleProvider>
  );
}

export default App;
  1. <BeagleProvider>: Responsável por prover para nossa aplicação o beagle-service criado no passo anterior contendo as configurações iniciais. Este é especificado na propriedade value;
  2. <BeagleRemoteView>: Responsável por renderizar o layout definido pelo JSON especificado pela propriedade route.

Exemplo prático

Testando o projeto

Para testarmos se a nossa configuração funcionou, você precisa executar um dos comandos abaixo para inicializar a aplicação:

yarn start
npm run start

Depois de finalizar o comando, acesse: localhost:3000. Você deverá ver a tela a seguir:


Última modificação 12/03/2021: Update react.md (#393) (0c880f9f)