A versão mais recente do App Builder trouxe melhorias empolgantes, sendo a mais esperada React Code Generation. E este guia passo a passo mostrará como gerar código React pronto para produção com apenas alguns cliques.
Zdravko Kolev
9min de leitura
O último lançamento App Builder introduziu toneladas de melhorias interessantes para o desenvolvimento do seu aplicativo low-code, mas o recurso mais aguardado entre eles é React Code Generation! Você pode finalmente produzir código React de alta qualidade em um único clique diretamente dos seus projetos App Builder com todos os dados e interações que você precisa e sem custos indiretos.
Esse recurso poderoso permite que você faça a transição perfeita de uma ideia ou um design completo em Figma para um código que não tem nada a ver com o código espaguete difícil de manter que um conversor básico de React para HTML ou plataformas semelhantes normalmente geram.
O novo recurso React to HTML simplifica drasticamente o ciclo de desenvolvimento e o tempo de comercialização? Absolutamente. Com ele, você pode aproveitar todo o potencial da arquitetura baseada em componentes do React, garantindo que seus aplicativos sejam eficientes, sustentáveis e possam ser facilmente escalonados.
Portanto, mesmo que você e sua equipe não tenham recursos suficientes (tempo, habilidades, programadores), esse novo recurso maximiza a produtividade e permite que você entregue aplicativos React de alta qualidade dentro de prazos rigorosos, minimizando erros de codificação manual e promovendo consistência entre projetos.
Para obter instruções detalhadas sobre como gerar código React com App Builder, sinta-se à vontade para pular para a seção dedicada clicando aqui.
Veja o que mais você lerá antes de ver alguns exemplos de código React e as etapas para converter React em HTML.
React Code Generation é o processo de criação automática de código boilerplate para projetos React sem escrever linhas de código manualmente. Ao automatizar a criação de código repetitivo, você pode se concentrar na implementação de recursos exclusivos e lógica de negócios, acelerando significativamente o ciclo de desenvolvimento do aplicativo.
Com a capacidade React-to-code do App Builder, o código gerado é editável, reutilizável e pronto para produção. Isso permite modificações fáceis para que você possa atender a requisitos específicos do projeto mais rapidamente. Uma vez compilado em JavaScript ou HTML, o código roda perfeitamente em todos os navegadores da web.
Usar App Builder como seu conversor abrangente de React para HTML oferece diferentes vantagens. Entre as mais importantes estão o aumento da produtividade, redução da dívida tecnológica, tempo de comercialização mais rápido e feedback em tempo real. Não é nenhuma surpresa que “O tamanho do mercado global de plataformas de desenvolvimento de aplicativos de baixo código foi estimado em US$ 24,83 bilhões em 2023 e está projetado para crescer a uma taxa de crescimento anual composta (CAGR) de 22,5% de 2024 a 2030”, como a Grand View Research indica em seu Relatório de Análise de Tendências, Participação e Tamanho do Mercado de Plataformas de Desenvolvimento de Aplicativos de Baixo Código.
Mas aqui estão outros benefícios significativos:
Há três maneiras de criar um novo aplicativo React por meio da plataforma App Builder.
1. Aplicativos de exemplo– os aplicativos de introdução ajudarão você a explorar aplicativos criados usando App Builder e permitirão que você os modifique em seu próprio espaço de usuário. Eles são uma boa fonte para você visualizar o código React gerado para um aplicativo maior sem ter que criar seu aplicativo do zero.
Se você usar App Builder pela primeira vez, recomendamos usar a opção de aplicativo de amostra como ponto de partida. Esta é a maneira mais rápida de se familiarizar com os recursos incríveis da ferramenta e começar a construir seu projeto.
2. Layouts de aplicativo–comece um novo aplicativo do zero, beneficiando-se de layouts predefinidos. Você também encontrará a opção de criar um aplicativo com base em um modelo em branco aqui.
3. Importar design– esta opção permite que você use o Figma Indigo.Design UI Kit for Material, e é isso que demonstraremos nas etapas abaixo.
O Figma Indigo.Design UI Kit for Material é mapeado para nosso conjunto de ferramentas de interface do usuário Ignite UI for React para simplificar seu processo de geração de código React. Dessa forma, você pode transformar facilmente todos os arquivos de design estáticos em aplicativos interativos e responsivos com componentes de interface do usuário, marca e estilo reais.
Lembre-se de que o kit pode ser usado por todos os usuários Figma, independentemente do plano. No entanto, existem limitações para usuários gratuitos em comparação com usuários Pro – como usuário de conta gratuita, você não pode usar os componentes da biblioteca diretamente do painel Ativos. Portanto, você precisa copiar todos os componentes necessários do arquivo do kit de interface do usuário e colá-los no arquivo de projeto.
Passo 1: Baixando e instalando o plug-in Figma- você pode fazer isso na página Baixar ativos ou por meio dos links diretos para o Figma UI Kit, Plugin for Figma e Sample Apps
Passo 2: Criando uma duplicata do kit de interface do usuário da comunidade Figma.
Acesse a Comunidade do Figma e pesquise Indigo.Design Kit de interface do usuário para Material. Depois de duplicar o arquivo (selecionando Abrir no Figma), ele aparecerá na pasta Rascunhos.
Etapa 3: Movendo o arquivo para o espaço da equipe
Em seguida, use a seta de divisa ao lado do nome do arquivo para mover o arquivo de "Rascunhos" para o espaço da equipe.
Você notará que, logo abaixo do nome do arquivo, o nome do projeto em sua equipe para o qual você moveu o arquivo é exibido - por exemplo, "Teste".
Passo 4: Publicando a biblioteca e usando seus ativos
Depois que o arquivo for movido, vá para o painel Ativos. Clique no ícone Bibliotecas e você poderá publicar esse arquivo como uma biblioteca, que distribuirá todos os estilos, tipografia e componentes para o restante de sua equipe. A ativação é feita no ícone Ativos > Bibliotecas > botão Publicar.
Em seguida, abra o arquivo de design Figma onde deseja usar os componentes da biblioteca do UI Kit. Vá para o painel Ativos, clique no ícone Bibliotecas, navegue até Suas equipes, selecione a biblioteca desejada, clique em Adicionar ao arquivo e comece a usar os componentes.
Passo 5: Criando um aplicativo no App Builder
Passo 6: Escolhendo temas e cores – cinco paletas com dez variações de cores disponíveis
Passo 7: Manipulação de ativos e envio para App Builder (imagens ou ilustrações)
Para obter uma visão geral mais detalhada das etapas, você pode conferir nossa página de ajuda dedicada ao plugin Figma, que o guiará por todo o processo de design para código.
App Builder sempre exibe um aplicativo web em execução ao vivo tanto na superfície de design quanto na janela de visualização, onde o código React está localizado. O código React subjacente e o modelo de aplicativo são atualizados em tempo real conforme você faz alterações no aplicativo na superfície de design.
Você pode visualizar o código do aplicativo gerado a qualquer momento na janela de visualização, e também pode baixar o aplicativo gerado a qualquer momento como um repositório de código de aplicativo completo, que você pode então abrir em um editor de código de sua escolha ou publicá-lo diretamente no GitHub. Crie e execute o aplicativo que você projetou usando o App Builder localmente em sua máquina e você pode fazer modificações adicionais no código React gerado.
Vamos dar uma olhada em alguns exemplos de aplicativos criados com a aparência e comportamento App Builder. Tenha em mente que todos eles são 100% exportáveis para React.
Este aplicativo é usado para gerenciar níveis de inventário e revisar produtos em estoque. Para criá-lo, habilitamos a navegação lateral personalizada para roteamento e gráficos de categoria para relatar desempenho. Outros componentes incluem Avatar, Botão, Cartão, Caixa de seleção, Grade de dados, Menu suspenso, Ícone, Grupo de entrada, Lista e Selecionar.
Você pode visualizar o código ou experimentar a funcionalidade completa do aplicativo usando o acesso de convidado.
Para este, usamos o Painel de Visão Geral e os detalhes do cliente com várias guias, juntamente com componentes como Acordeão, Avatar, Botão, Botão de Ícone, Caixa de Seleção, Janela de Diálogo, Menu Suspenso, Painel de Expansão, Grade de Dados, Ícone, Grupo de Entrada, Lista, Barra de Navegação, Gaveta de Navegação, Selecionar e Layout de Guias.
Você pode visualizar o código ou experimentar a funcionalidade completa do aplicativo usando o acesso de convidado.
Outro exemplo de um aplicativo React é este painel de RH. Usamos o conjunto de ferramentas Ignite UI com componentes como Avatar, Category Chart, Icon Button, Icon, List, Card e Data Grid para torná-lo de alto desempenho e visualmente atraente.
Você pode visualizar o código ou experimentar a funcionalidade completa do aplicativo usando o acesso de convidado.
Para criar um novo aplicativo React e se beneficiar da geração instantânea de código React usando App Builder, você pode começar com aplicativos de amostra. Para explorar e modificar aplicativos pré-criados, use layouts de aplicativos predefinidos ou modelos em branco ou importe arquivos de design existentes com o kit de interface do usuário do Figma para integração perfeita. App Builder permite atualizações em tempo real para o código React e o modelo de aplicativo, permitindo que você exiba, baixe e modifique o código gerado conforme necessário e publique diretamente no GitHub. Essa plataforma garante um processo de integração tranquilo e um desenvolvimento eficiente de aplicativos, com todos os aplicativos de amostra totalmente exportáveis para React.
Katie Mikova
Ultima atualização:
CTOs, CIOs, líderes de equipe de desenvolvimento e outros executivos de alto nível devem tomar decisões informadas ao escolher entre o desenvolvimento low-code e o desenvolvimento tradicional. E este artigo comparará essas duas abordagens, concentrando-se em diferentes compensações, vantagens, critérios e muito mais.
Zdravko Kolev
Ultima atualização:
O que é Blazor geração de código? Como você pode aproveitá-lo em um clique usando App Builder low-code? Encontre as respostas neste guia passo a passo.
Jason Beres
Ultima atualização:
Leia este guia passo a passo para saber como gerar código pronto para produção no Angular com um único clique com pouco código.
