Cómo usar Styled Components

Los programadores tenemos el desafío de hacer que nuestros códigos sean hermosos y fáciles de entender. Necesitan organizar la información y seguir estándares para que cualquiera pueda leer y comprender lo que está sucediendo. Esto es importante porque ayuda a que el código sea más eficiente, más fácil de mantener y de escalar. Los programadores experimentados lo saben y hacen todo lo posible para escribir código limpio, breve y fácil de entender.

Styled Components es una herramienta de estilo ampliamente utilizada en React que tiene como objetivo hacer que el estilo sea más simple y con más componentes. Muchos desarrolladores han comenzado a utilizar CSS en línea como alternativa al CSS normal, como Tailwind CSS, pero cuando utilizamos este enfoque para diseñar, hacemos que los archivos sean densos y difíciles de leer. En este contexto, el Styled Components surge como una solución a estos problemas, ofreciendo una forma sencilla e intuitiva de crear y gestionar estilos en aplicaciones React, sin alejarse demasiado de CSS, pero con características adicionales como variables, mixins y props condicionales.

¿Dónde y cómo utilizamos los Styled Components?

Los Styled Components son muy utilizados en diferentes áreas de la industria tecnológica, especialmente en el desarrollo web. Se han vuelto populares porque son fáciles de usar y permiten una división más clara de los componentes estilizados. Empresas como Netflix, Airbnb, GitHub y Slack son algunos ejemplos de organizaciones que utilizan Styled Components en sus aplicaciones, demostrando que es una tecnología solicitada y confiable.

Además, esta biblioteca ha sido cada vez más adoptada por desarrolladores independientes y equipos de desarrollo de todos los tamaños, convirtiéndose en una de las herramientas más utilizadas en la actualidad.

Vale resaltar también que los Styled Components permiten el uso de variables, funciones y otras características de JavaScript para crear estilos dinámicos y reutilizables. Esto también facilita el mantenimiento del código, ya que puede realizar cambios en estilos específicos sin tener que revisar toda la hoja de estilos del proyecto.

¿Qué herramientas traen los Styled Components?

Los Styled Components oferecen diversas ferramentas para diseñar nuestras páginas web. Con una sintaxis similar a CSS y características como componenteización, accesorios condicionales, estilos globales y extensión de estilo.

Uno de los mayores desafíos del programador es dividir y organizar los componentes de una manera que sea fácil de leer y, por lo tanto, fácil de mantener. Con el aumento de popularidad de React, han surgido varias soluciones a este problema, como CSS y JS. Sin embargo, este enfoque tiene algunas desventajas, como la dificultad de separar responsabilidades entre estilos y componentes, y la complejidad de trabajar con pseudoselectores y consultas de medios.

En este contexto, Styled Components surge como una solución a estos problemas, ofreciendo una forma intuitiva de crear y gestionar estilos en aplicaciones React. Al utilizar componentes con estilo, es posible definir estilos directamente en el componente React, lo que facilita la separación de responsabilidades. Además, es posible crear estilos condicionales basados ​​en los props de los componentes, lo que ofrece una gran flexibilidad a la hora de crear interfaces dinámicas e interactivas.

Otra ventaja de los Styled Components es la posibilidad de definir estilos globales para toda la aplicación, utilizando la herramienta createGlobalStyle. Esto facilita la estandarización y coherencia de nuestros componentes web, lo que resulta especialmente útil en proyectos de gran escala. Además, es posible extender estilos de un componente a otro, usando la propiedad extend de los Styled Components, lo que permite crear temas y estilos compartidos.

En resumen, Styled Components es una biblioteca extremadamente útil que ofrece varias herramientas para crear excelentes interfaces de usuario en aplicaciones React.

¿Cómo crear un proyecto de React usando componentes con estilo?

Asegúrate de tener npm instalado. npm es el administrador de paquetes de Node.js y se instala automáticamente con Node.js. Si no tienes Node.js instalado, puedes descargarlo gratis desde https://nodejs.org/.

Una vez que tengas Node.js en tu sistema, puedes usar npm para instalar Styled Components en tu proyecto React. Para hacer esto, abre la terminal de su sistema y navega hasta la carpeta de tu proyecto. Luego ejecuta el siguiente comando para inicializar un nuevo proyecto de React:

npx create-react-app my-styled-components-project

Una vez que hayas instalado Node.js en tu sistema, puedes usar npm para instalar Styled Components en tu proyecto React. Para hacer esto, abre la terminal de tu sistema y navega hasta la carpeta de tu proyecto. Luego ejecuta el siguiente comando para inicializar un nuevo proyecto de Node.js:

cd my-styled-components-project

npm install --save styled-components

Para demostrar el uso de componentes con estilo, crearemos una página de inicio de sesión. Primero cree un archivo llamado LoginComponents.js.

/components/LoginComponents.js

La primera línea importa la biblioteca de componentes con estilo. A continuación, se crean cuatro constantes utilizando la función con estilo. Cada constante representa un elemento diferente del formulario de inicio de sesión que estamos diseñando: el div que envuelve el formulario, el formulario en sí, el título del formulario, la entrada de inicio de sesión y el botón de inicio de sesión.

Dentro de cada constante hay una serie de propiedades CSS que se aplicarán al elemento correspondiente. Es posible utilizar propiedades CSS como en un archivo CSS tradicional, pero de una forma más modularizada y dinámica.

La constante LoginForm, por ejemplo, tiene fondo blanco (background-color: #fff), un espaciado interno de 40 pixels (padding: 40px), bordes redondos (border-radius: 5px) y sombra aplicada (box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2)). La constante LoginButton tiene un fondo azul claro (background-color: #008CBA), texto blanco (color: #fff), bordes redondos (border-radius: 5px) y un estilo diferente cuando se pasa el cursor sobre él (background-color: #006B8E).

Luego podemos usar estos componentes en otras páginas, teniendo nuestros componentes ya diseñados.

Primero, se crean constantes que definen el estilo de los elementos del formulario, como el div que rodea al formulario, el formulario en sí, el título, los campos de entrada y el botón de inicio de sesión. Estos componentes serán la base de nuestra página de inicio de sesión.

Entonces una función componente llamada Login, que devuelve la estructura HTML del formulario de inicio de sesión utilizando las constantes de estilo definidas previamente. En nuestro ejemplo no está funcionando de forma práctica, si quieres hacer algo más avanzado, te recomiendo iniciar sesión con una solicitud a una base de datos y agregar una función de navegación.

En resumen, el código crea un formulario de inicio de sesión con estilo utilizando la biblioteca Styled Components y lo pone a disposición como un componente reutilizable de React. Finalmente, cambia App.js y ejecuta el proyecto para ver los componentes en acción:

Este código es un ejemplo de cómo usar React Router para crear rutas en la aplicación. React Router es una biblioteca que le permite navegar entre diferentes páginas sin recargar la página completa, lo que hace que la experiencia del usuario sea más fluida y rápida.

En nuestro ejemplo, el componente Aplicación se define como una función que devuelve el componente BrowserRouter que envuelve una única ruta definida por el componente Ruta. Esta ruta se define con la ruta "/", lo que significa que el componente LoginPage se representará cuando el usuario acceda a la raíz del sitio.

Entonces, cuando el usuario accede a la página, React Router verifica la URL y, si coincide con la ruta definida en la Ruta, el componente LoginPage se representa en la página sin recargar toda la página.

Con esto, tenemos el proyecto funcionando y podemos aplicar y crear componentes ya diseñados que se pueden usar en varias otras páginas del mismo proyecto.

Conclusión

En resumen, Styled Components es una biblioteca que se utiliza en muchos proyectos y es muy útil para el estilo en componentes en aplicaciones React. Es muy similar a CSS y tiene varias características adicionales, además, se ha convertido en una de las herramientas más utilizadas en el desarrollo web.

Los desarrolladores de frontend completos deben conocer esta biblioteca y saber cómo usarla en sus proyectos, ya que la popularidad de Styled Components ha crecido rápidamente en los últimos años, siendo ampliamente utilizados en empresas de tecnología de todos los tamaños.

En resumen, Styled Components es una biblioteca que puede brindar gran productividad y eficiencia en el diseño de sus aplicaciones React, lo que la convierte en una herramienta indispensable para los desarrolladores frontend completos que buscan crear interfaces de usuario.