Componentes de React y cómo estilizarlos

[♪ música tocando ♪] Hola a todos, soy Jemima y hoy voy a hablarles sobre el estilo de los componentes de React. Esta es una charla rápida, así que nos moveremos rápido. Básicamente, esta charla va a ser como uno de esos artículos de Buzzfeed que dicen 'Probé cinco métodos diferentes de estilo con React para que no tengas que hacerlo tú'. Básicamente, cuando comencé a trabajar con el estilo en los componentes de React, solía encontrarme con un montón de errores molestos, como anidar componentes en otro componente y luego el estilo se sobrescribe, o tener problemas de diseño al intentar colocar un componente fijo en un contenedor flexible y que no encaje en el flujo, o tener que empezar a descubrir cómo nombrar componentes y subcomponentes. O tener que ser muy específico al seleccionar tus elementos. Así que básicamente tenía todos estos problemas y buscaba un método de estilo que fuera fácil de usar y aprender porque era como cambiar de cómo se estiliza en HTML a cómo se estiliza en React, y necesitaba algo que fuera similar para mí, algo que me ayudara a mantener la estructura de archivos y la estructura del código, algo que fuera optimizado porque, por supuesto, el rendimiento es importante, y algo que pudiera ser utilizado en varios componentes y que fuera escalable. Así que estos son los métodos que he probado a lo largo del tiempo. Estilo en línea, hojas de estilo CSS y CSS en JS. Así que vamos a ver cada uno de ellos rápidamente y ver qué son. Para el estilo en línea, eso es simplemente poner el método de estilo en los elementos como un atributo. Lo uso principalmente para anular estilos existentes porque el estilo en línea tiene una especificidad muy alta, y para pasar propiedades como props, como cuando necesitas establecer una imagen de fondo como una prop, es realmente genial para eso. Con las hojas de estilo CSS, eso son tus archivos CSS, tus módulos CSS y tus preprocesadores, y las hojas de estilo de Tailwind, pero no era realmente CSS en JS, solo lo mantuve aquí. Vi a alguien en Twitter llamarlo CSS en HTML, lo cual creo que es muy acertado. Así que sí, así es como tienes tus archivos CSS regulares y luego puedes usarlos para, realmente me gustan los archivos CSS porque son muy útiles para colocar las hojas de estilo directamente con los elementos en los que estás trabajando, así que es genial para la colocación y es más fácil saber dónde hacer los cambios que necesitas. Para manejar el estilo global, simplemente puedes pasar un método global para seleccionar todos los elementos y pasarlos a tu app.js y es genial. Para el estilo anidado, si estás usando preprocesadores, puedes incluir los nombres de estilo en el anidamiento global del nombre del componente, y eso realmente evita todo el problema de sobrescritura con el que me encontraba antes. Así que eso es genial. Tailwind es algo con lo que comencé a trabajar recientemente y tal vez sea solo yo personalmente, pero no me gustó, porque me llevó dos días descubrir cómo configurarlo, pero lo incluí aquí por el bien de la intuición. Básicamente, Tailwind funciona con utilidades, las utilidades son como nombres de clase preexistentes que ya tienen todas estas propiedades, así que no tienes que definirlas, por ejemplo, py2 sería una propiedad de relleno superior e inferior de lo que definas que sea el 2, por ejemplo, podría ser un REM. Tailwind es realmente bueno si tienes un sistema de diseño en varios proyectos, por ejemplo, si trabajas con una empresa que utiliza el mismo sistema de diseño en varios proyectos, puedes definir todas esas propiedades como tu margen o tu relleno o tus colores en tu archivo Tailwind.config.js y puedes importarlo en varios proyectos y es genial. CSS en JS, cuando escuché por primera vez sobre CSS en JS pensé, ¿CSS y JavaScript? Eso es ridículo, y ahora pienso, ¿por qué no está todo en JavaScript? Esto es lo mejor que hay. Así que he trabajado con Style Components y Emotion, no he trabajado con JSS, pero lo incluí aquí porque pensé que el nombre era muy acertado porque CSS y JS. Los Style Components son, básicamente, como plantillas literales. Sabes, tienes tus propiedades CSS y las pasas como una plantilla literal. Son realmente geniales porque te brindan todos los beneficios del estilo en línea, pero también como los archivos CSS porque tienes acceso a los pseudo selectores, tienes acceso al estilo global, puedes establecer elementos temáticos, simplemente los Style Components son realmente útiles. Son realmente poderosos cuando se trata de estilizar. Y lo mismo ocurre con Emotion, la mayoría de las bibliotecas de CSS en JS admiten específicamente Style Components. Otra razón por la que me encantan los Style Components es porque realmente te ayudan con la accesibilidad. Muchas veces puedes definir los elementos utilizando la etiqueta semántica, como el nombre del elemento semántico, y se renderizará de manera semántica, lo cual es genial. Otra cosa realmente genial de los Style Components es esta cosa llamada polimorfismo, que es simplemente una forma elegante de hacer que un elemento se vea como otro elemento.

Una forma de hacer que un elemento se vea como otro elemento. Por ejemplo, aquí tengo un elemento div con estilo y un elemento de botón con estilo. Estoy pasando el elemento de botón a mi prop. Lo que va a suceder es que mis elementos, el elemento div con estilo, en realidad se renderizará como un elemento de botón. Esto es realmente útil cuando tienes, digamos, enlaces y botones que necesitan tener el mismo estilo, pero no quieres empezar a anular todo el estilo de los botones, puedes simplemente pasar el estilo de botón como enlace o pasar enlace como estilo de botón. Y el enlace se renderizará como un botón o el botón se renderizará como un enlace, dependiendo de cómo lo hayas configurado. Esta es una pequeña tabla que creé a partir de mi experiencia y mis preferencias. No estoy diciendo que este sea el mejor método en comparación con los demás. Es simplemente cómo los encontré. Según esta tabla, diría que mi método favorito es definitivamente los componentes de estilo, solo que fue un poco difícil para mí aprenderlo, ya sabes, tiene una curva de aprendizaje y no es muy fácil de configurar. Tienes que instalar muchas cosas. Tailwind fue mi menos favorito, no porque sea malo, sino porque simplemente no pude entenderlo. No pude descubrir cómo configurarlo. No pude descubrir cómo usarlo. Todavía tengo que buscar en Google cualquier propiedad que esté tratando de definir si estoy usando Tailwind. No conozco esas cosas de memoria. Pero sí, creo que sigue siendo un buen framework si eso es lo que te gusta. Por supuesto, cada uno de estos métodos se adapta a un tipo particular de proyecto. Si estás haciendo un proyecto a gran escala, es posible que desees usar componentes de estilo o archivos CSS porque puedes adjuntar varios archivos de esa manera. Si estás haciendo algo a pequeña escala, puedes quedarte con Tailwind, por ejemplo, porque de esa manera no necesitas empezar a pensar en nombres de clase y cosas así. Simplemente puedes pasar las utilidades. Así que todo depende de tus preferencias. Eso es todo. Como dije, una charla rápida para ustedes. Tengo diapositivas para esto. Estas son las diapositivas de la versión original de esta charla, que es mucho más larga e incluye puntos más específicos para cada método de estilización. Puedes verlas en mi sitio web jemimaabu.com/slides/styling-react. Así que puedes echarles un vistazo allí. También incluí algunos enlaces para obtener más información sobre los métodos de estilización en React, son realmente buenos y útiles, puedes consultarlos allí. Eso es todo por mi parte. Muchas gracias por escuchar. Si tienes alguna pregunta, creo que habrá una sesión de preguntas y respuestas con el presentador después de esto, o en mi caso, hay un espacio de asesoramiento, de cualquier manera, puedes contactarme allí. O puedes completar el formulario de contacto en mi sitio web jemimaabu.com, o enviarme un mensaje en Twitter o LinkedIn. Me encontrarás en línea en todas partes como jemimaabu. Gracias por escuchar y que disfrutes el resto de la charla. Adiós.