La última versión de App Builder trajo mejoras interesantes, siendo la más esperada React Code Generation. Y esta guía paso a paso le mostrará cómo generar código React listo para producción con unos pocos clics.
Zdravko Kolev
9min de lectura
La última versión de App Builder introdujo toneladas de mejoras emocionantes para el desarrollo de aplicaciones de bajo código, ¡pero la característica nueva más esperada entre ellas es React generación de código! Por fin puede producir código React de alta calidad con un solo clic directamente desde sus proyectos de App Builder con todos los datos e interacciones que necesite y sin gastos generales.
Esta poderosa función le permite pasar sin problemas de una idea o un diseño completo en Sketch o Figma a un código de píxeles perfectos que no tiene nada que ver con el código espagueti difícil de mantener que suele generar un convertidor básico de React a HTML o plataformas similares.
¿La nueva capacidad de React a HTML agiliza drásticamente el ciclo de desarrollo y el tiempo de comercialización? Absolutamente. Con él, puede aprovechar todo el potencial de la arquitectura basada en componentes de React, lo que garantiza que sus aplicaciones sean eficientes, fáciles de mantener y puedan escalar fácilmente.
Por lo tanto, incluso si usted y su equipo no tienen suficientes recursos (tiempo, habilidades, programadores), esta nueva función maximiza la productividad y le permite entregar aplicaciones de React de alta calidad dentro de plazos estrictos, al tiempo que minimiza los errores de codificación manual y fomenta la coherencia en todos los proyectos.
Para obtener instrucciones detalladas sobre cómo generar React código con App Builder, no dude en pasar a la sección dedicada haciendo clic aquí.
Esto es lo que leerá antes de ver algunos ejemplos de código React y los pasos para convertir React a HTML.
React generación de código es el proceso de creación automática de código repetitivo para proyectos React sin necesidad de escribir manualmente líneas de código. Al automatizar la creación de código repetitivo, puede centrarse en la implementación de características únicas y lógica empresarial, lo que acelera significativamente el ciclo de desarrollo de aplicaciones.
Con la capacidad de codificación React de App Builder, el código generado es editable, reutilizable y listo para producción. Esto permite modificaciones sencillas para que pueda cumplir con los requisitos específicos del proyecto más rápido. Una vez compilado en JavaScript o HTML, el código se ejecuta sin problemas en todos los navegadores web.
El uso de App Builder como su convertidor completo de React a HTML ofrece diferentes ventajas. Entre los más importantes se encuentran el aumento de la productividad, la reducción de la deuda tecnológica, el tiempo de comercialización más rápido y la retroalimentación en tiempo real. No es de extrañar que "el tamaño del mercado global de plataformas de desarrollo de aplicaciones low-code se estimó en USD 24.83 mil millones en 2023 y se prevé que crezca a una tasa de crecimiento anual compuesta (CAGR) del 22.5% de 2024 a 2030", como indica Grand View Research en su Informe de análisis de tendencias, participación y tamaño del mercado de plataformas de desarrollo de aplicaciones low-code.
Pero aquí hay otros beneficios significativos:
Hay tres formas en las que puede crear una nueva aplicación de React a través de la plataforma App Builder.
1. Aplicaciones de muestra: las aplicaciones de introducción lo ayudarán a explorar las aplicaciones creadas con App Builder y le permitirán modificarlas en su propio espacio de usuario. Son una buena fuente para obtener una vista previa del código React generado para una aplicación más grande sin tener que crear la aplicación desde cero.
Si usas App Builder por primera vez, te recomendamos que uses la opción de aplicación de ejemplo como punto de partida. Esta es la forma más rápida de incorporarse a las increíbles funciones de la herramienta y comenzar a construir su proyecto.
2. Diseños de aplicaciones: inicie una nueva aplicación desde cero, beneficiándose de diseños predefinidos. También encontrarás la opción de crear una aplicación basada en una plantilla en blanco desde aquí.
3. Importar diseño: si tiene un archivo de diseño existente creado con el kit de interfaz de usuario de Indigo.Design para Sketch, puede usarlo como punto de partida para sus aplicaciones. Una forma aún mejor sería obtener nuestro sistema Indigo.Design, que incluye complementos para publicar su diseño, kits de interfaz de usuario y archivos de diseño de muestra y, una vez listo, simplemente use el complemento Figma / Sketch para publicar su diseño en App Builder. Pero puedes leer más sobre esto en las secciones a continuación.
El kit de interfaz de usuario de Figma Indigo.Design para Material se asigna a nuestro conjunto de herramientas de interfaz de usuario Ignite UI for React para agilizar el proceso de generación de código React. De esta manera, puede convertir fácilmente todos los archivos de diseño estáticos en aplicaciones interactivas y receptivas con componentes de interfaz de usuario, marca y estilo reales. Pero, ¿cómo se empieza con ello?
Paso 1: Descargar e instalar el complemento de Figma, ya sea desde la página Descargar activos o a través de los enlaces directos para el kit de interfaz de usuario de Figma, complemento para Figma yaplicaciones de muestra
Paso 2: Creación de una aplicación en App Builder
Paso 3: Elección de temas y colores: cinco paletas con diez variaciones de color disponibles
Paso 4: Manejo de activos y envío de los mismos a App Builder (imágenes o ilustraciones)
Para obtener una visión más detallada de los pasos, puedes consultar nuestra página de ayuda dedicada al Figma plugin, que te guiará a través de todo el proceso de diseño a código.
Estos son los pasos para convertir Sketch en código listo para producción.
Paso 1: Haga clic en Nueva aplicación en el menú principal de App Builder
Paso 2: Arrastra tu archivo Sketch a la sección "Crear a partir de un diseño existente" y elige importar un diseño.
Paso 3: Revise el diseño en la aplicación IDE en la nube en App Builder desde Sketch
Paso 4: Revisa o descarga tu código de React
Pero esto es solo un resumen rápido de los pasos. Para obtener una guía más detallada, visita la página de ayuda inicial de Sketch al código.
También puede ver el siguiente video para ver los pasos en acción.
App Builder siempre muestra una aplicación web en ejecución activa tanto en la superficie de diseño como en la ventana de vista previa, donde se encuentra el código React. El código de React subyacente y el modelo de aplicación se actualizan en tiempo real a medida que se realizan cambios en la aplicación en la superficie de diseño.
Puede ver el código de la aplicación generado en cualquier momento en la ventana de vista previa, y también puede descargar la aplicación generada en cualquier momento como un repositorio completo de código de aplicación, que luego puede abrir en un editor de código de su elección o publicarlo directamente en GitHub. Compile y ejecute la aplicación que ha diseñado utilizando el App Builder localmente en su máquina y podrá realizar modificaciones adicionales en el código de React generado.
Echemos un vistazo a algunos ejemplos de aplicaciones creadas con App Builder apariencia. Ten en cuenta que todos ellos son 100% exportables a React.
Esta aplicación se utiliza para administrar los niveles de inventario y revisar los productos en stock. Para crearlo, habilitamos la navegación lateral personalizada para gráficos de enrutamiento y categorías para informar sobre el rendimiento. Otros componentes incluyen Avatar, Botón, Tarjeta, Casilla de verificación, Cuadrícula de datos, Menú desplegable, Icono, Grupo de entrada, Lista y Seleccionar.
Puede obtener una vista previa del código o experimentar la funcionalidad completa de la aplicación mediante el acceso de invitado.
Para este, utilizamos el panel de información general y los detalles del cliente con múltiples pestañas junto con componentes como Acordeón, Avatar, Botón, Botón de icono, Casilla de verificación, Ventana de diálogo, Desplegable, Panel de expansión, Cuadrícula de datos, Icono, Grupo de entrada, Lista, Barra de navegación, Cajón de navegación, Seleccionar y Diseño de pestaña.
Puede obtener una vista previa del código o experimentar la funcionalidad completa de la aplicación mediante el acceso de invitado.
Otro ejemplo de una aplicación de React es este panel de RRHH. Utilizamos el conjunto de herramientas de la interfaz de usuario de Ignite con componentes como un avatar, un gráfico de categorías, un botón de icono, un icono, una lista, una tarjeta y una cuadrícula de datos para que fuera de alto rendimiento y visualmente atractivo.
Puede obtener una vista previa del código o experimentar la funcionalidad completa de la aplicación mediante el acceso de invitado.
Para crear una nueva aplicación de React y beneficiarse de la generación instantánea de código React mediante App Builder, puede comenzar con aplicaciones de ejemplo. Para explorar y modificar aplicaciones prediseñadas, use diseños de aplicaciones predefinidos o plantillas en blanco o importe archivos de diseño existentes de Indigo.Design kit de interfaz de usuario para Sketch, use complementos de Figma / Sketch para una integración perfecta. App Builder permite actualizaciones en tiempo real del código React y el modelo de aplicación, lo que le permite ver, descargar y modificar el código generado según sea necesario y publicarlo directamente en GitHub. Esta plataforma garantiza un proceso de incorporación fluido y un desarrollo eficiente de aplicaciones, con todas las aplicaciones de muestra totalmente exportables a React.
Los CTO, CIO, líderes de equipos de desarrollo y otros ejecutivos de alto nivel deben tomar decisiones informadas a la hora de elegir entre el desarrollo de código bajo y el desarrollo tradicional. Y este artículo comparará estos dos enfoques, centrándose en diferentes compensaciones, ventajas, criterios y más.
¿Qué es la generación de código Blazor? ¿Cómo puedes aprovecharlo con un clic usando App Builder de código bajo? Encuentre las respuestas en esta guía paso a paso.
Lea esta guía paso a paso para aprender cómo generar código listo para producción en Angular con un solo clic y con poco código.
