Cada proyecto de desarrollo web es único, con necesidades y estilos particulares. En este post, te enseñaremos cómo crear un elemento personalizado en frontend para ejecutar diversas acciones propias de tu proyecto y estética.
¿Cómo crear un elemento personalizado en frontend?
Para enseñarte cómo crear un elemento personalizado en frontend, trabajaremos con un ejemplo. A continuación, crearemos un elemento de interfaz personalizado para que nos muestre los errores de nuestro proyecto. Este tipo de elementos son buenísimos para mejorar la experiencia de usuario, pues le dan feedback sobre la situación actual de la página web.
El primer paso para crear un elemento personalizado en frontend es crear un nuevo nodo HTML. Es decir, crear y ubicar un elemento en el árbol jerárquico del Document Object Model, también conocido como DOM. Para ello, basta con ir a nuestro index.html o al archivo HTML en el que queramos crear nuestro nodo e insertar la etiqueta deseada.
Teniendo en cuenta que despues de crear este nodo tendremos que llamarlo para modificarlo, es buena idea darle una propiedad ID o class que facilite su posterior selección. A continuación, te mostramos el div que hemos creado para nuestro ejemplo:
<div class=”notification”> <div>
Ahora, para crear un elemento personalizado en frontend, este nodo necesitará un código JavaScript que lo controle y determine la acción del HTML. Entonces, podríamos crear un nuevo archivo JS llamado NotificationController.
Nosotros hemos decidido crear este controlador usando clases, por lo que el constructor recibirá como parámetro el nodo HTML creado. Para ello, primero debemos pasarle el nodo al constructor desde nuestro index.js usando alguno de los métodos para seleccionar nodos del DOM. A continuación, verás las líneas introducidas en este index.js:
const notificationElement = document.querySelector (.notification)
new NotificationController (notificationElement);
Ahora, usando esta variable, podemos terminar nuestro controlador NotificationController. A continuación, puedes ver este elemento:
export class NotificationController {
constructor (notificationElement) {
this.notificationElement = notificationElement;
}
}
Ahora que hemos creado el controlador JavaScript, el siguiente paso para crear un elemento personalizado en frontend es determinar qué hace este elemento. En nuestro ejemplo, queremos mostrar un mensaje de error en el elemento. Para ello, podemos crear un método show dentro de la clase NotificationController. Este método se encargará de recibir el mensaje y pasarlo a la vista. Por ahora, el método se ve así:
show (message) {
}
El siguiente paso es determinar la vista que logrará crear un elemento personalizado en frontend. Siguiendo el patrón modelo vista controlador, este módulo es el encargado de interpretar y mostrar el resultado final al usuario. Entonces, podemos crear un archivo NotificaionView.js con el siguiente código:
export function notificationView (message) {
return
<p>${message}</p>
<button> X </button>
}
Como puedes ver, en las anteriores líneas de código hemos tomado el mensaje que nos pasa el controlador y lo hemos pintado dentro de un párrafo con un botón X.
Ahora, para poder crear un elemento personalizado en frontend que se vea por el navegador, debemos pasarle un message. Para ello, nos vamos a nuestro index.js, instanciamos el controlador y usamos su método show para pintar un mensaje.
A continuación, te mostramos las líneas de código que nos permiten probar nuestro elemento:
const notificationController = new NotificationController (noticiationElement);
notificationController.show (‘mensaje de ejemplo’);
El resultado de todos los anteriores pasos es un elemento simple por pantalla con el texto mensaje de ejemplo. Si quisiéramos ir un paso más allá, podríamos crear un archivo CSS para estilizar su contenido. Para ello, te recomendamos explorar nuestros posts sobre CSS en la sección desarrollo web de nuestro blog.
En resumen, para crear un elemento personalizado en frontend, hemos creado un nodo del DOM desde un archivo .html. Además, para facilitar su selección, le hemos dado una propiedad class. Luego, en el JavaScript que controla esta vista (index.js), seleccionamos este nodo e instanciamos un controlador pasándole ese nodo seleccionado. Este controlador se encarga de ejecutar algún código para pasar por el navegador. En este caso, simplemente toma una propiedad message y se la pasa a la vista usando el método show.
Ahora que sabes cómo crear un elemento personalizado en frontend, ¡es el momento de crear elementos en tus propios proyectos! Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar proyectos web con herramientas como React, JSX, HTML y CSS. ¿A qué esperas para dar el siguiente paso en tu aprendizaje? ¡Matricúlate ya!
