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 uma transição perfeita de uma ideia ou design concluído no Sketch ou Figma para um código perfeito que não tem nada a ver com o código espaguete difícil de manter que um conversor básico 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– se você tiver um arquivo de design existente criado usando o kit de IU Indigo.Design para Sketch, você pode usá-lo como um ponto de partida para seus aplicativos. Uma maneira ainda melhor seria obter nosso sistema Indigo.Design, que inclui plugins para publicar seu design, kits de IU e arquivos de design de amostra e, uma vez pronto, basta usar o plugin Figma / Sketch para publicar seu design no App Builder. Mas você pode ler mais sobre isso nas seções abaixo.
O Figma Indigo.Design UI Kit para Material mapeia para nosso conjunto de ferramentas Ignite UI for React UI para simplificar seu processo de geração de código React. Dessa forma, você pode facilmente transformar todos os arquivos de design estáticos em aplicativos interativos e responsivos com componentes de UI reais, branding e estilo. Mas como você começa com isso?
Etapa 1: Baixando e instalando o plugin Figma— seja na página Download Assets ou por meio dos links diretos para o Figma UI Kit, Plugin for Figma eSample Apps
Etapa 2: Criando um aplicativo no App Builder
Etapa 3: Escolha de temas e cores – cinco paletas com dez variações de cores disponíveis
Etapa 4: Manipulando ativos e enviando-os ao 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.
Aqui estão as etapas para converter Sketch em código pronto para produção.
Etapa 1: clique em Novo aplicativo no menu principal App Builder
Etapa 2: Arraste seu arquivo Sketch para “Criar a partir de um design existente” e escolha importar um design.
Etapa 3: Revise o design no aplicativo IDE da nuvem no App Builder do Sketch
Etapa 4: revise ou baixe seu código React
Mas este é apenas um rápido resumo dos passos. Para um guia mais detalhado, visite a página de ajuda inicial Sketch to code.
Você também pode assistir ao vídeo a seguir para ver as etapas em ação.
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 aplicativo predefinidos ou modelos em branco ou importe arquivos de design existentes do kit de interface do usuário Indigo.Design para Sketch, usando os plug-ins Figma / Sketch para integração perfeita. App Builder permite atualizações em tempo real do código React e do modelo de aplicativo, permitindo que você visualize, baixe e modifique o código gerado conforme necessário e publique diretamente no GitHub. Esta plataforma garante um processo de integração tranquilo e desenvolvimento de aplicativo eficiente, com todos os aplicativos de amostra totalmente exportáveis para React.
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.
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.
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.
