No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Refactorización de Componentes en React con BEM y Styled Components

8/19
Recursos

¿Cómo se aplica la metodología Venn en un proyecto de React?

La Metodología Venn se ha convertido en una herramienta esencial para ordenar y organizar proyectos de desarrollo web, contribuyendo a una mejor estructuración del código. En esta lección, se lleva esta metodología a un proyecto de React, incorporando también CSS en JS a través de Styled Components. Este enfoque no solo facilita el mantenimiento del código, sino que también mejora su legibilidad a largo plazo. El proyecto que se analiza es de un estudiante y se trabajó en mejorar su arquitectura utilizando este enfoque moderno.

¿Qué cambios se realizaron en el proyecto del estudiante?

Al aplicar la metodología Venn, se llevó a cabo una reestructuración significativa del código. Entre los cambios más destacados se encuentran los siguientes:

  • Creación de una carpeta específica para Components, que aloja los distintos componentes como Card, Header, Loading, y MyApp.
  • Implementación de Styled Components para manejar el CSS directamente dentro de los componentes de React.
  • Refactorización de los componentes, adoptando un enfoque sistemático para cambiar las clases y aplicar la arquitectura del estilo BEM combinado con Styled Components.

¿Cómo se estructuran los componentes utilizando Venn y Styled Components?

Para entender mejor la interacción entre Venn y Styled Components, observemos la nueva estructura del proyecto:

  • Bloques: Se identifican los componentes principales que se denominaron como bloques. Por ejemplo, Cart, Header y Pills.
  • Contenedor: Un contenedor que centraliza la vista de los bloques y elementos, facilitando así la importación y gestión de estos componentes.
  • Elementos: En esta sección se destacó un único elemento llamado Loader.

Dentro de cada bloque, la estructura interna se desarrolla de manera detallada para maximizar la organización y claridad. Cada componente tiene un índice principal y un archivo de estilo basado en Styled Components.

¿Cómo funcionan Styled Components junto con BEM en React?

Styled Components es una librería en React que permite escribir CSS desde JavaScript. Cuando se utiliza en conjunto con BEM (Block, Element, Modifier), la estructura del HTML se organiza de la siguiente manera:

.cart {
  &__header {
    // estilos para el header
  }
  &__figure {
    // estilos para la figura
  }
  &__title {
    // estilos para el título
  }
}

En esta estructura:

  • .cart se considera el bloque central.
  • &__header es un elemento hijo del bloque, al igual que &__figure y &__title.

Este sistema ayuda a evitar la confusión de nombres de clases y hace que el CSS sea más fácil de mantener.

¿Qué experiencia proporciona la combinación de BEM y Styled Components?

Usar BEM junto con Styled Components no solo optimiza visualmente el código, sino que también ofrece una experiencia de desarrollo mucho más clara y ordenada. El código resultante es limpio y muy comprensible, facilitando la lectura y la colaboración en equipo. Además, la combinación de estas herramientas fomenta una estructura consistente, un aspecto crucial a medida que los proyectos de React escalan en complejidad.

Si te entusiasma esta combinación y deseas adoptarla en tus proyectos, recuerda que la clave está en estructurar el código desde un inicio de manera modular y utilizando estas herramientas de manera eficiente. Si ya empleas alguna estrategia similar o tienes ideas nuevas para combinar BEM y Styled Components, ¡comparte tu experiencia y enriquece la comunidad con tus comentarios! Esto no solo mejora tus competencias, sino que también inspira a otros a seguir avanzando en el desarrollo web.

Aportes 10

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

No entendí una verg@, pero sé que mas adelante cuendo aprenda react voy a tener que volve a esta clasem de todas formas gracias jajaj

Nunca había visto ese modo de usar styled components, siempre lo hacía sobre el mismo componente y se ubicaba en la parte inferior, para facilitar la lectura del componente sobre los estilos, pero esta forma de exportar con Nombres de cada sección como un componente del bloque esta 🤯

Wow!!!, ahora entiendo por qué se usa esta configuración,
React + CSS in JS + SASS, al menos a en un contexto funcional, aunque aún me pregunto el porqué se usa Sass específicamente, en la ruta de react no recuerdo a ver visto el uso de style-components, solo me quedan dos cursos por terminar en la ruta, y empieza next.js.
Pero con los cursos ya hechos puedo entender como funcionan estos componentes.

Aún no he aprendido absolutamente nada de React pero el proyecto presentado me pareció muy bonito. Le doy mis felicitaciones a esa persona que lo haya creado ✨🤗
Estructura BEM : > \[ Block ] \[ Block ]\_\_\[ Element ] \[ Block ]--\[ Modifier ] \[ Block ]\_\_\[ Element ]--\[ Modifier ] \[ Block ]--\[ Modifier ] \[elemento]--\[modificador] BEM in Code . Reconocer quienes son los Bloques, Elementos . Modifcadores . Identificar : Cuantos Elementos tenemos y que modificadores existen en nuestro HTML. BEM Permite personalizar sus reglas y Nomenclaturas . BEM funciona identificando el bloque, el elemento y el modificador de un componente. \* Bloque es el contenedor principal del componente. \* Elemento son las partes internas que conforman el componente. \* Modificador son las variaciones del bloque o del elemento. BEM \_EG in HTML : Bloque: card, button, form, menu, header… Elemento: icon, text, item, image, input, button… Modificador: active, big, right, secondary, red… .button { ... } .button--active { ... } .button\_\_icon { ... } .button\_\_text { ... } Los guiones bajos (\_\_) se usan para separar el bloque del elemento, Los guiones medios (--) se usan para separar el bloque o el elemento del modificador. Lo más importante a la hora de usar una de estas nomenclaturas es ser consistente en todo el proyecto. Casos de USo BEM : Para tener un CSS más fácil de leer, entender, mantener y escalar. Para organizar las clases de CSS en módulos independientes. Para evitar selectores de CSS anidados.
Bueno, esto varia, pero en varios equipos es comun que la nomenclatura sea distinta. El componente raiz o aquel que engloba a todo se le llama Layout. Los blocks, que son componentes que contienen más componentes se les denomina Containers. Y lo que en ese caso son los elements, serian los Components tradicionales de React
muy confundido, no conocía eso de style components y he visto ya varios cursos de react acá en y en ninguno lo explican
* [GitHub - platzi/curso-arquitecturas-css-proyecto-3: 💚 Clon del proyecto de @raulow92 para refactorización y propósitos del curso.](https://github.com/platzi/curso-arquitecturas-css-proyecto-3) * [add: bem methodology & styled components by teffcode · Pull Request #1 · platzi/curso-arquitecturas-css-proyecto-3 · GitHub](https://github.com/platzi/curso-arquitecturas-css-proyecto-3/pull/1)

Definitivamente lo voy a aplicar en mis proyectos que realizó con React, me encantó!

Muy interesante conocer como aplicar BEM a nivel de componentes en React y como cambia al CSS tradicional