Los componentes son bloques de construcción fundamentales en el desarrollo de interfaces de usuario, permitiendo la creación de interfaces de usuario reutilizables. Estos elementos combinan el marcado HTML, CSS y JavaScript en unidades personalizadas y reutilizables para cualquier aplicación. Cada componente puede manejar su propio estado y propiedades, facilitando su gestión y reutilización.
De la misma forma que con las etiquetas HTML, es posible componer, ordenar y anidar componentes para diseñar páginas completas. A medida que un proyecto crece, se nota que muchos diseños se pueden construir mediante la reutilización de componentes que ya se escribieron, acelerando el desarrollo. Los componentes son una forma práctica de organizar el código de la interfaz de usuario y el marcado, incluso si algunos de ellos solo se utilizan una vez.
Declaración de Componentes en React
Debido a que React está creado bajo el lenguaje de programación JavaScript, este también depende de su sintaxis para construir y declarar sus componentes. Es por ello que existen actualmente formas de crear componentes, las cuales obedecen a las distintas versiones del Estándar ECMAScript.
Formas de Declaración según ECMAScript
ECMAScript 5 - createClass
Este fue el primer método que existió para crear componentes en React y, aunque ya está bastante anticuado, la realidad es que se puede encontrar mucho material en Internet que todavía utiliza este método. Es muy probable que ya no se trabaje con este método, sin embargo, no está de más mencionarlo. Lo primero que podemos ver, es que la clase se crea mediante la función React.createClass, el cual recibe un objeto que debe de tener al menos la función render. Adicionalmente, se pueden declarar los propTypes, defaultProps y el estado inicial del componente.
ECMAScript 6 - React.Component (Componentes de Clase)
Esta es una de las formas en que los componentes se crean mediante clases que extienden de React.Component. Este es el componente más recomendable cuando se trabaja con componentes con estado (Stateful), pues permite un mejor control sobre el componente. Cuando se declara una clase, es necesario crear el constructor que reciba los props, para después enviarlos a la superclase, de esta forma se inicia correctamente el componente. Los propTypes y defaultProps son declarados fuera de la clase.
Lea también: IVA 21% Excel
- Se definen como clases de JavaScript que extienden de React.Component.
- Se accede a las props mediante this.props.
- Los componentes de clases pueden manejar un estado interno usando this.state y actualizarlo mediante this.setState().
- Los componentes de clases tienen varios métodos del ciclo de vida, como componentDidMount, componentDidUpdate, y componentWillUnmount, entre otros. Estos métodos permiten realizar acciones específicas en diferentes etapas del ciclo de vida del componente, como inicialización, actualización y eliminación.
ECMAScript 6 - Function Component (Componentes Funcionales)
La siguiente forma que soporta ECMAScript 6, es la creación de componentes mediante funciones, y es recomendado únicamente para componentes sin estado (Stateless). Se observa que el componente se reduce a una arrow function, la cual recibe como parámetros las props. El cuerpo de la función es como el método render: se pueden crear variables, poner un poco de lógica y retornar un JSX. Adicionalmente, se pueden definir los propTypes y defaultProps por fuera de la función.
- Se definen como funciones de JavaScript.
- Antes de React 16.8, los componentes funcionales no tenían acceso directo al ciclo de vida y al estado interno. Con la introducción de Hooks, ahora pueden usar el estado y otras características previamente disponibles solo en componentes de clase.
- Las props pasan como argumentos a la función y se accede a ellas directamente.
- Los componentes funcionales utilizan el hook useEffect para lograr funcionalidades similares a los métodos del ciclo de vida de los componentes de clases.
- Pueden utilizar el hook useState para gestionar el estado interno del componente.
- Además de useEffect y useState, existen otros hooks como useContext o useReducer que brindan funcionalidades específicas sin necesidad de convertir el componente funcional en un componente de clase.
La tendencia actual se inclina hacia el uso de componentes funcionales gracias a los Hooks. Estos permiten manejar el estado y otros aspectos de los componentes sin la necesidad de usar clases. Las ventajas incluyen código más conciso, mejor legibilidad y facilidad de testing.
ECMAScript 7 - React.Component (Sintaxis Moderna)
La última forma disponible es utilizar las nuevas sintaxis de ECMAScript 7. Aunque todo apunta a que esta sea la mejor forma de declarar componentes, no es muy utilizada aún, debido a que ECMAScript 7 todavía se encuentra en desarrollo. Este método es muy parecido a la creación de componentes mediante React.Component en ES6, con la diferencia que es posible declarar el estado como una propiedad. Adicionalmente, se pueden declarar los defaultProps y propTypes dentro de la clase y marcarlos como static para poder ser accedidos desde fuera sin necesidad de crear una instancia.
Tipos de Componentes en React (Conceptos de la Comunidad)
A medida que nos sumergimos en el ecosistema de React, es común encontrarnos con términos como “Smart Components”, “Dumb Components”, “Pure Components”, etc. Aunque algunos términos no son conceptos oficiales o estándar en la documentación de React, son utilizados informalmente por la comunidad para describir ciertos comportamientos y patrones comunes en la construcción de aplicaciones. Hay otros “tipos” de componentes adicionales que se diferencian de acuerdo con ciertos aspectos como su comportamiento.
Stateful Component o Smart Component
Son todos los componentes que gestionan su propio estado.
Lea también: Guía IVA reducido
- Utilizan el estado interno (a través de useState o this.state en componentes de clase) para almacenar información temporalmente relevante.
- En algunos casos, contienen lógica de negocio de la aplicación. Esto puede incluir operaciones complejas, cálculos y toma de decisiones.
- Gestionan eventos y acciones del usuario.
Stateless Component, Dumb Component o Presentational Component
Los Stateless Components, también conocidos como Dumb Components o Presentational Components, son componentes que se centran principalmente en la presentación y no mantienen un estado interno.
- No mantienen un estado interno. Esto significa que no utilizan el Hook useState (en componentes funcionales) ni this.state (en componentes de clase) para almacenar información.
- Su responsabilidad principal es recibir datos a través de las props y renderizar la interfaz correspondiente. No están involucrados en la lógica de negocio o en la manipulación del estado de la aplicación.
- Son altamente reutilizables. Dado que no mantienen un estado interno y se centran en la presentación, pueden ser utilizados en múltiples lugares de la aplicación.
Pure Component
Este componente es una implementación de la clase PureComponent. Estos componentes realizan una comparación superficial (shallow comparison) de las props y el estado antes de decidir si deben volver a renderizarse.
- Implementan automáticamente la función shouldComponentUpdate con una comparación superficial de las props y el estado. Esto significa que si las props y el estado no han cambiado (según la comparación superficial), el componente no se volverá a renderizar, evitando renders innecesarios.
- Para que la comparación superficial funcione correctamente, las props y el estado deben mantenerse inmutables o no mutarán de manera destructiva. Es decir, al actualizar las props o el estado, se deben crear nuevas referencias en lugar de modificar las existentes. Esto asegura que la comparación superficial detecte correctamente los cambios.
Para obtener un comportamiento similar en los componentes funcionales, se puede utilizar React.memo. El componente funcional resultante tendrá un comportamiento similar al PureComponent original. PureComponent y React.memo son herramientas valiosas, pero deben utilizarse conscientemente y según las necesidades específicas de la aplicación. Antes de aplicar estas optimizaciones, es recomendable medir y perfilar el rendimiento de la aplicación para asegurarse de que se están abordando problemas reales.
HOC (Higher Order Component)
Un HOC, en términos sencillos, es un componente que envuelve a otro componente para proporcionarle funcionalidades adicionales.
- Un HOC toma un componente existente y envuelve su funcionalidad alrededor de él. Se puede pensar en ello como una capa adicional que mejora o modifica el comportamiento del componente original.
- El propósito principal de un HOC es reutilizar lógica o funcionalidades entre varios componentes. Se pueden encapsular ciertas funciones o estados compartidos en un HOC y aplicarlo a múltiples componentes, evitando así la duplicación de código.
Por ejemplo, si se necesita agregar la funcionalidad de rastreo de clics a ciertos componentes, se podría crear un HOC que añada esa funcionalidad al componente. Actualmente, el uso de custom hooks para reutilizar lógica entre componentes ha ganado muchísima popularidad. Sin embargo, esto no significa que los HOC hayan perdido completamente su relevancia. Ambos enfoques tienen sus casos de uso, y la elección entre ellos a menudo dependerá de las preferencias del equipo y de las necesidades específicas del proyecto.
Lea también: ¿Cómo localizar tus XML del SAT?
Estructura y Anidamiento de Componentes React
Los componentes son funciones regulares de JavaScript, por lo que se pueden tener múltiples componentes en el mismo archivo. Esto es conveniente cuando los componentes son relativamente pequeños o están estrechamente relacionados entre sí. Si un archivo se torna abarrotado, siempre se puede mover un componente a un archivo separado. El prefijo export default es parte de la sintaxis estándar de Javascript (no es específico de React) y permite marcar la función principal en un archivo para que luego se pueda importar en otros.
Una aplicación React comienza en un componente “root” (raíz). Normalmente, se crea automáticamente al iniciar un nuevo proyecto. La mayoría de las aplicaciones React usan componentes raíz, lo que significa que no solo se usarán componentes para piezas reutilizables como botones, sino también para piezas más grandes como barras laterales, listas y, en última instancia, ¡páginas completas!
Declaración y Creación de Componentes en Angular
Para crear componentes en Angular, la aplicación constará de dos componentes: el TaskComponent, que se encarga de mostrar una sola tarea con su id, title y status, y el TaskListComponent, que actúa como un contenedor para todas las tareas, manteniendo un array y mostrando cada una utilizando el TaskComponent.
Uso de Angular CLI para Crear Componentes
En Angular, se utiliza Angular CLI para crear componentes. Es necesario crear dos componentes, como el TaskComponent y el TaskListComponent. Para mantener la organización, se creará una carpeta separada para cada componente dentro del directorio src/app. Para generar un componente, se utiliza Angular CLI. Abra la terminal en VS Code y asegúrese de estar en la raíz del proyecto. Luego, ejecute el siguiente comando:
ng generate component task
O, una versión más corta:
ng g c task
Después de ejecutar el comando, se creará una nueva carpeta task dentro de src/app, que contendrá cuatro archivos:
- task.component.ts (la lógica del componente)
- task.component.html (la plantilla HTML)
- task.component.css (los estilos CSS)
- task.component.spec.ts (las pruebas unitarias)
Para el segundo componente, se ejecutaría un comando similar:
ng g c task-list
Esto generará una nueva carpeta task-list con archivos análogos. Estos archivos cumplen las mismas funciones que en el TaskComponent, pero ahora son para el segundo componente. En este punto, se tienen dos componentes separados con una estructura clara: TaskComponent, que gestiona la lógica y la plantilla para una sola tarea, y TaskListComponent, que administra toda la lista de tareas.
Angular Elements: Componentes Angular como Web Components
Angular Elements resuelve la problemática de la reutilización de código Angular en contextos donde no se hace uso de Angular y es la solución perfecta para incluir o actualizar funcionalidades incrustadas en el código heredado de nuestras aplicaciones. Angular Elements son componentes Angular convertidos en componentes web personalizados o más conocidos como Web Components.
¿Qué son los Web Components o Componentes Web?
Los Componentes Web son un conjunto de tecnologías que permiten crear elementos HTML reutilizables que encapsulan su propia estructura interna, separándola del resto del código, e incluyen a su vez sus propios elementos HTML, CSS y JavaScript. Con ellos podemos crear componentes universales dentro de nuestro ecosistema de aplicaciones y reutilizarlos según nuestras necesidades.
Los componentes web están compuestos por un conjunto de APIs que permiten crear nuevas etiquetas HTML personalizadas y reutilizables en aplicaciones web y se basan en cuatro especificaciones principales:
- Custom elements: es la especificación usada para diseñar y definir los nuevos tipos de elementos DOM personalizados, encapsulando contenido HTML, CSS y JavaScript.
- Shadow DOM: es la especificación JavaScript que define cómo se usan los estilos y el marcado de etiquetas de manera privada (ocultos en la sombra) del documento DOM principal.
- ES Modules: es la especificación que define la sintaxis de los módulos JavaScript, así como la reutilización de documentos JavaScript mediante la exportación de objetos, funciones o variables desde un archivo JavaScript.
- HTML templates: es la especificación que define cómo declarar fragmentos HTML que no se renderizan (no se cargan gráficamente) en la carga de la página, pero que se pueden reutilizar en tiempo de ejecución de manera explícita.
¿Qué es Angular Elements?
Angular Elements es básicamente un punto de unión entre los componentes Angular y la API de los elementos personalizados (custom elements). Con Angular Elements se obtiene todo el poder de Angular para crear componentes web. Los Angular Input se asignan a las propiedades, los Angular HostBinding se asignan a los atributos, los Angular Output se asignan a los eventos y los Angular Lifecycle hooks se asignan a los enlaces del ciclo de vida del elemento personalizado. Dada la flexibilidad de los Componentes Web, podemos usar Angular Elements en infinidad de escenarios como complemento en prácticamente cualquier tipo de aplicación.
Creación de un elemento personalizado con Angular Elements
Para la creación de un componente con Angular Elements, en primer lugar se crea la aplicación Angular. A continuación, se usa Angular CLI para configurar automáticamente el proyecto con el polyfill correcto: ng add @angular/elements. Luego, se puede crear el componente deseado o aprovechar uno existente, como el AppComponent, para el elemento. Se le agregan estilos básicos y se completa con una entrada y una salida, configurando finalmente el módulo principal para las pruebas.
Componentes Fundamentales en Android
Los componentes de la app son los componentes fundamentales de una aplicación para Android. Una aplicación para Android se compone de mucho más que solo código; abarca también la presentación de la aplicación y otros recursos definidos en XML. El sistema Android implementa el principio de privilegio mínimo y, de forma predeterminada, cada aplicación ejecuta su propio proceso de Linux. Los componentes son un punto de entrada a través del cual el sistema o un usuario pueden ingresar a la aplicación.
Tipos de Componentes de Aplicación Android
Actividades
Una actividad es el punto de entrada para interactuar con el usuario, presentando una pantalla con una interfaz de usuario. Por ejemplo, una aplicación de correo electrónico podría tener una actividad para mostrar la bandeja de entrada, otra actividad para redactar un correo electrónico y otra actividad para leer correos electrónicos. Se implementa una actividad como una subclase de la clase Activity.
Servicios
Un servicio es un componente que se ejecuta en segundo plano para realizar operaciones o trabajo para procesos remotos. Por ejemplo, podría recuperar datos de la red sin bloquear la interacción del usuario con una actividad. Se implementa un servicio como una subclase de Service y se usa la clase JobScheduler para programar acciones.
Receptores de Difusión (Broadcast Receivers)
Un receptor de emisión es un componente que solo sirve para alertar al usuario cuando ocurre un evento de transmisión. Por ejemplo, para alertar al usuario cuando ocurre un evento de transmisión. Cada transmisión se entrega como un objeto Intent.
Proveedores de Contenido (Content Providers)
Un proveedor de contenido administra un conjunto compartido de datos de aplicaciones a los que la aplicación puede acceder. Pueden ser identificados por un esquema de URI. Estos URI también ofrecen un modelo de seguridad importante y detallado, donde un URI puede ser bloqueado para que otras aplicaciones no puedan acceder libremente a él.
Activación y Manifiesto de Componentes Android
Cuando el sistema inicia un componente, inicia el proceso para esa aplicación (si aún no se está ejecutando) y crea una instancia de las clases necesarias para el componente. Las intents vinculan componentes entre sí durante el tiempo de ejecución. La tarea principal del manifiesto es informar al sistema sobre los componentes de la aplicación. Los componentes del manifiesto no son visibles para el sistema y, en consecuencia, no se pueden ejecutar. Para obtener más información sobre cómo estructurar el archivo de manifiesto de tu aplicación, consulta la Descripción general del manifiesto de la aplicación.
Declaración de Componentes en Power Apps
El marco de componentes de Power Apps permite a los desarrolladores profesionales y a los creadores de aplicaciones crear componentes de código para aplicaciones basadas en modelos y de lienzo. Estos componentes de código se utilizan para optimizar la experiencia de usuario de quienes trabajan con datos en formularios, vistas, paneles y pantallas de aplicaciones Canvas. A diferencia de los recursos web HTML, los componentes de código se representan como parte del mismo contexto y se cargan al mismo tiempo que cualquier otro componente.
Los desarrolladores pueden agrupar todos los archivos HTML, CSS y TypeScript en un único archivo de paquete de solución para moverse entre entornos. Los componentes de código que se conectan a servicios externos o datos directamente a través del cliente del navegador del usuario y no a través de conectores son premium. Los componentes de código que no se conectan a servicios o datos externos, cuando se usan en una aplicación que usa características estándar, la aplicación sigue siendo estándar y los usuarios finales necesitan al menos una licencia de Office 365.