¿Conoces la herramienta classNames para React? El mundo de la programación hace mucho que ha dejado de ser solo líneas de código, navegadores y editores. Ya que este mundo está en constante crecimiento, existen infinidad de herramientas que simplifican nuestras acciones a la hora de crear un proyecto de programación. Algunas son librerías que nos permiten acceder a datos de estilo o simplificar llamadas HTTP, otras son herramientas dedicadas a ejecutar acciones específicas.
En el caso de este post, te enseñaremos qué es y cómo funciona la herramienta classNames para React, fundamental para la creación de clases complejas.
¿Qué es la herramienta classNames para React?
A diferencia de librerías como styled components, Axios y Request, que nos permiten acceder a datos para importar en nuestro proyecto, la herramienta classNames para React no es más que una ayuda para crear clases. Como puedes ver en la página oficial de classNames, esta es una herramienta simple de JavaScript que nos ayuda a componer clases de una manera más fácil.
Sin embargo, luego deberemos asociar estas clases a estilos, ya sea al cargar CSS a un componente React, al usar CSS Modules en React o al emplear la etiqueta style en React.
¿Cómo funciona la herramienta classNames para React?
Lo primero que debemos hacer antes de usar la herramienta classNames para React es instalarla en nuestro terminal. Para ello, utilizamos el código del paquete npm que encontramos en la página oficial de esta herramienta. Dicho código es el siguiente:
npm install classnames
Al igual que con otras herramientas, puedes copiar este código npm en tu terminal y darle a enter para instalar classNames. Una vez instalada, usamos npm start para arrancar nuestro proyecto de nuevo.
Entonces, para entender cómo funciona la herramienta classNames para React, supongamos que tenemos la siguiente function App:
function App () {
return (
<div className = ‘App’>
<TweetsPage>
<Button variant = “primary”>Primary</Button>
<Button>Normal</Button>
</div>
);
Como puedes ver en las líneas de código anteriores, esta función tiene una clase App. Ahora, supongamos que queremos concatenar una segunda clase en la clase App que depende de una variable containter y que, a su vez, tiene un estado que puede ser true o false. Con base a este estado queremos que, cuando container sea true, aplique el nombre de clase container a App. Sin embargo, cuando container sea false, queremos que no se aplique. Entonces, podríamos escribir una línea JavaScript como la siguiente:
<div className = {‘App ${container ? ‘container’ : ‘ ‘}’}>
Con esta línea de código estamos concatenando las dos clases en función de que la variable container sea verdadera o falsa. Cuando tenemos que empezar a trabajar con clases concatenadas y complejas, tarde o temprano veremos que se nos va de las manos. Aquí es donde entra en juego la herramienta classNames para React.
Por lo tanto, podemos importar la herramienta al inicio de nuestro archivo:
import classNames from ‘classnames’;
Ahora que tenemos importada la herramienta, podemos transformar nuestra concatenación de la siguiente manera:
<div className= {classNames (‘App, {container:container})}>
Podrás notar que el hecho de utilizar la herramienta classNames para React no hace que el código deje de ser JavaScript. Por ello, abrimos las llaves para, de esta forma, implementar código JS dentro de React. Para aprender más sobre este tema, te invitamos a leer nuestro post sobre abrir una ventana a JavaScript en React.
Podemos incluso simplificar aún más la línea de código anterior, pues cuando tenemos una variable que se llama igual que su clave, podemos simplemente insertar {container}. Por ello, la herramienta classNames para React nos permite transformar un código que puede volverse tedioso y largo en líneas de código muy simples.
Por lo tanto, puedes añadir todo tipo de clases a esta herramienta. Podrías añadir una clase wrapper y un string con varias clases, tal como ves en la siguiente línea de código:
<div className= {classNames (‘App, {container} ‘wrapper, [‘1’, ‘2’, ‘3’])}>
Ten presente que, como las llaves nos han abierto una ventana a JavaScript, también puedes usar la sintaxis y lógica de este lenguaje de programación dentro de classNames.
¿Te animas a seguir aprendiendo?
Después de leer este post, sabes exactamente qué es y cómo funciona la herramienta classNames para React, fundamental para crear clases más complejas en nuestros proyectos. Si quieres seguir aprendiendo sobre el mundo de la programación web y sus herramientas, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Allí aprenderás a dominar, entre muchas otras cosas, React, JavaScript, HTML y CSS para desarrollar todo tipo de proyectos de programación. ¿Te animas a seguir aprendiendo con nosotros? ¡Inscríbete ahora!
