React y Tailwind para desarrollo web

Crear aplicaciones web es un trabajo muy demandado en la actualidad y saber cómo desarrollar proyectos en esta área de manera rápida y eficiente puede traerte una excelente fuente de ingresos. El programador frontend será el encargado de programar las interfaces, que es la capa de interacción del sistema con el usuario. Este proceso se puede realizar de diferentes formas, utilizando diferentes tecnologías, ya sea con JavaScript puro, CSS y HTML,o a través de librerías como React y frameworks CSS como Tailwind, de los cuales hablaremos en este artículo.

A través de React, es posible reutilizar fácilmente fragmentos de código, dentro de un solo proyecto o incluso entre diferentes proyectos, separándolos en componentes. Es una de las bibliotecas de JavaScript más populares en la actualidad y fue desarrollada inicialmente por Instagram, ahora propiedad de Facebook. La belleza de usar React es que los componentes se simplifican bastante, son solo funciones de JavaScript que devuelven HTML, formando una sintaxis llamada JSX.

Tailwind es un marco CSS que proporciona varias clases para crear sitios web hermosos y receptivos rápidamente. A diferencia de otros marcos como Bootstrap y Material que crean estilos para componentes como botones, menús desplegables y formularios, Tailwind adopta un enfoque más funcional, proporcionando clases que se pueden unir para construir los componentes.

Sin embargo, a medida que su interfaz crece en complejidad, Tailwind deja su HTML "contaminado" con información, por lo que la unión entre Tailwind y React es bastante ventajosa, ya que permitirá reducir la repetición de código al momento de crear los componentes que serán reutilizados.

Configurar React y Tailwind

Para iniciar el proyecto con React más rápido, usaremos vite, que es una biblioteca que facilita la construcción de aplicaciones web, básicamente lo que hace es servir los archivos localmente durante el desarrollo y crear un bundle con JavaScript, CSS y otros recursos para la producción. Para configurarlo, escribe el siguiente comando en la terminal:

Este comando iniciará el proyecto (para ejecutarlo, verifica si tienes Node y npm en tu equipo). Primero, pedirá que definas un nombre para el proyecto. Si ya creaste una carpeta para él, simplemente escribe un punto (.) para usar la carpeta actual. El segundo parámetro a elegir es el framework; selecciona React y luego JavaScript.

Luego de iniciar el nuevo proyecto React, instalaremos las dependencias necesarias con el siguiente comando:

Ahora, para poner el servidor a ejecutar durante el desarrollo, el comando que usaremos será éste:

Al ejecutar, ya podemos ver la aplicación funcionando al acceder a la dirección 127.0.0.1:5173 en el navegador. Con React configurado, ya podemos crear una aplicación web modificando los archivos dentro de las carpetas src y public.

Ahora solo configura Tailwind para estilizar la aplicación. Primero ejecutemos los siguientes comandos respectivamente para instalar las bibliotecas necesarias:

Hecho esto, actualicemos el archivo tailwind.config.cjs con el siguiente contenido, que permitirá la asociación con archivos tipo JSX que usa React:

En la carpeta src, dentro del archivo index.css, agregue estas líneas de código para importar las clases de Tailwind al principio:

Creamos un archivo llamado postcss.config.cjs dentro de la carpeta de inicio del proyecto y colocamos en él los complementos que queremos, Tailwind y el autoprefixer:

El postcss que configuramos por último es una herramienta que puede tomar un archivo CSS y convertirlo en un árbol con sintaxis abstracta, permitiendo así que sus interfaces se adapten a diferentes navegadores.

Llegados a este punto, ya tenemos configurado el ambiente para desarrollo con React y Tailwind. Ahora verifiquemos que la instalación de todo sea correcta para luego desarrollar un proyecto sencillo para ejercitar las habilidades con estas tecnologías.

Eliminar lo que está dentro de la carpeta assets en src, el archivo App.css y el contenido dentro del archivo App.jsx son un ejemplo que ya trae React por defecto, pero empezaremos desde el principio. Dentro de este último archivo, importa el módulo React y crea una constante que recibirá una función de tipo arrow llamada App, que devolverá un div simple y luego exportará esta función:

Ahora, dentro del div creamos una etiqueta h1 con el texto Hello World y el className será bg-black text-green-500:

Cuando lo ejecutes, verás una pantalla blanca en tu navegador con un cuadro negro en la parte superior y un texto verde escrito Hello World, lo que significa que todo está configurado y funcionando correctamente.

Esta función que creamos es un componente de React. El className que ponemos dentro de la etiqueta h1 es el mismo que el nombre de la clase que ponemos en HTML normalmente. La diferencia es que React tiene esta sintaxis para no confundir con crear una clase en JavaScript que utiliza la palabra reservada del lenguaje class.

Los parámetros que ponemos dentro del nombre de la clase para darle estilo al texto, el bg-black que viene de background-black y el text-green-500 que es para hacer que el texto sea verde, son las clases CSS de Tailwind y si usas VS Code como editor de código, puedes agregar la extensión Tailwind CSS IntelliSense para ver las muchas otras clases disponibles durante la programación, lo que facilita mucho el trabajo.

Crear el proyecto

A continuación, crearemos un proyecto que será una lista de tareas, donde podremos añadir nuevas, eliminarlas cuando se completen y también tendremos un contador que marcará cuántas faltan todavía.

Primero generaremos un nuevo archivo llamado todoList.jsx, un componente de React que comenzaremos a programar de la misma manera que App.jsx. Importaremos React, luego crearemos una constante que será una función de flecha y devolverá HTML, para luego exportar esta función.

Ésta recibirá una lista de tareas como parámetro, al tiempo que podemos hacer un mapa para generar un nuevo componente de tarea para cada elemento dentro de la lista:

Ten en cuenta que, para agregar código JavaScript en medio del HTML, es necesario ponerlo entre llaves y cada elemento en un mapa debe tener una propiedad clave, que será donde React se orientará cuando actualice los componentes. La propiedad de la tarea que pasamos es el elemento de lista respectivo que se usará para generar el texto.

Ahora crearemos el archivo Tarefa.jsx (Tarea.jsx en español) para generar el componente que importamos dentro de ToDoList.jsx. Se iniciará de la misma forma que los demás componentes, la diferencia es que el parámetro que la función recibirá los props y de ella accederemos a las propiedades que se pasaron que, en este caso, lo que queremos es el nombre de la tarea a incluir dentro de una etiqueta h3:

Hecho esto, ya tenemos el código para la lista y cada elemento dentro de la lista en componentes separados. A continuación, importamos este componente dentro del archivo App.jsx y programamos la lógica para generar la lista automáticamente.

Primero importamos la ToDoList y colocamos las etiquetas de contador, que serán un h2 con la cantidad de tareas a realizar, una entrada de texto para escribir una nueva tarea, un botón para agregar la tarea, otro para borrar la lista y, por último, vamos agregue la etiqueta de la lista de tareas.

Para hacer que un componente cambie sus datos, necesitamos usar funciones de React conocidas como hooks que actualizarán los datos. La primera que usaremos es useState, que recibe el estado inicial como parámetro y devuelve una lista que contiene el valor actual y una función para cambiar el estado.

Vamos a crear una constante que será la desestructuración de una lista que contendrá las variables tareas y setTarefas que será la función para modificar el estado, la cual estará definida para la función useState y dentro tendrá una lista de strings que será la de los valores padrón.

El valor de esta variable se pasará como propiedad del componente ToDoList para que cree la lista:

Luego necesitamos asignar la función para que el botón Borrar lista elimine las tareas que ya han sido completadas. Para esto, definiremos la propiedad onClick que recibirá una función arrow, la cual llamará a setTarefas para definir el valor de la variable tareas como una lista vacía:

Para crear el contador, simplemente reemplaza el cero en la etiqueta h2 con tarefas.length, recordando pasar el código JavaScript entre llaves para que la cantidad de tareas que aún deben completarse se muestre en la pantalla:

Ahora, para que esta sencilla aplicación esté lista, necesitamos una forma de pasar el valor que está en el campo de input a la lista de tareas. Para eso, usaremos otro hook de React llamado useRef, que sirve para crear una variable que no cambia cuando el componente se actualiza.

Comencemos importando useRef, luego crearemos una constante dentro de la función de la aplicación y luego pondremos este hook en el parámetro ref del input:

Ahora simplemente crea una función para agregar una nueva tarea y agrégala al botón en la propiedad onClick:

Esta función recibirá el evento, tomará el valor que está en la variable vinculada a la entrada, verificará que no esté vacía, unirá los elementos de la lista de tareas y agregará la nueva tarea al final, luego cambiará el valor input para null. Hecho esto, la parte funcional de la aplicación está lista y, al ejecutarla, puedes agregar nuevas tareas y limpiar la lista.

Finalmente, agrega los estilos que desees. A continuación, enumero algunas de las clases de Tailwind que se pueden usar para mejorar la parte visual de nuestra aplicación y un ejemplo de una de las formas en que se puede diseñar nuestra aplicación:

• bg-yellow-700 → color de fondo e intensidad.
• h-screen → cambiar la altura de un componente al tamaño de la pantalla.
• flex flex-col → configura el diseño para flexionar y ajustar los elementos en forma de columna.
• flex flex-row → configure el diseño para que se flexione y ajuste los elementos en forma de línea.
• flex items-center justify-center → Alinee los elementos en el centro vertical y horizontalmente.

En el archivo App.jsx se realizaron algunos cambios al agregar divs y nombres de clases:

En el archivo ToDoList.jsx, cambiamos el div a ul y agregamos el nombre de la clase:

En el archivo Tarefa.jsx, la etiqueta h3 se reemplazó por li y se agregaron las siguientes clases Tailwind:

Guardando todo y ejecutando, éste será el resultado que tendremos:

Conclusión

El uso conjunto de React y Tailwind CSS nos permite a los desarrolladores crear aplicaciones web rápidas y receptivas con un diseño consistente. La aplicación que desarrollamos en este artículo podría mejorarse agregando una conexión a una base de datos JavaScript para guardar tareas, agregando una forma de marcar tareas que ya se han completado y establecer fechas límite.

En conclusión, los enfoques complementarios de React y Tailwind CSS para crear interfaces de usuario y elementos de estilo los convierten en una excelente opción para cualquier proyecto de desarrollo web.

¡Hasta luego!