react atomic design
1.0.0
Este es un modelo estándar con la metodología Atomic Design que utiliza algunas cosas interesantes, como Storybook, Flow y módulos CSS. Siéntete libre de probar, cambiar y adaptar todo.
Leer artículo completo
Popularmente conocido en el mundo del diseño, Atomic Design ayuda a construir sistemas de diseño consistentes, sólidos y reutilizables. Además, en el mundo de React, Vue y frameworks que estimulan la componenteización, Atomic Design se utiliza de forma inconsciente; pero cuando se utiliza de la manera correcta, se convierte en un poderoso aliado para los desarrolladores.
El nombre Atomic Design proviene de la idea de separar los componentes en átomos, moléculas, organismos, plantillas y páginas, como en la imagen de arriba. Pero ¿cuáles son las responsabilidades de cada parte separada?
Los átomos son los componentes más pequeños posibles, como botones, títulos, entradas o paletas de colores de eventos, animaciones y fuentes. Se pueden aplicar en cualquier contexto, globalmente o dentro de otros componentes y plantillas, además de tener muchos estados, como este ejemplo de botón: deshabilitado, flotante, diferentes tamaños, etc.
Son la composición de uno o más componentes de los átomos. Aquí comenzamos a componer componentes complejos y reutilizar algunos de esos componentes. Las moléculas pueden tener propiedades propias y crear funcionalidades mediante el uso de átomos, que por sí solos no tienen ninguna función o acción.
Los organismos son la combinación de moléculas que trabajan juntas o incluso con átomos que componen interfaces más elaboradas. En este nivel, los componentes comienzan a tener la forma definitiva, pero aún se asegura que sean lo suficientemente independientes, portátiles y reutilizables para ser reutilizables en cualquier contenido.
En este estado dejamos de componer componentes y comenzamos a establecer su contexto. Además, las plantillas crean relaciones entre los organismos y otros componentes a través de posiciones, ubicaciones y patrones de las páginas, pero no tienen ningún estilo, color o componente representado. Por eso parece una estructura alámbrica.
Las páginas son las partes de navegación de la aplicación y es donde se distribuyen los componentes en una plantilla específica. Los componentes obtienen contenido real y están conectados con toda la aplicación. En esta etapa, podemos probar la eficiencia del sistema de diseño para analizar si todos los componentes son lo suficientemente independientes o si necesitamos dividirlos en partes más pequeñas.
Cuando empezamos a utilizar Atomic Design dentro de React tuvimos que ajustar algunas reglas de la metodología para asegurar que los componentes fueran reutilizados tanto como fuera posible, que fueran stateless, sin estilos de posiciones y márgenes muy específicos para evitar efectos secundarios en el proceso. páginas de aplicación.
Entonces, con cada nuevo componente nos preguntamos: "¿Son estos componentes lo suficientemente genéricos como para evitar la especificidad y/o la repetición de código en cualquier contexto en el que se utilicen?"
Entonces pudimos escribir algunas reglas:
| Guion | Descripción |
|---|---|
$ yarn start | Inicie un servidor de paquete web simple |
$ yarn dev | Crear un servidor para desarrollo en el puerto 5000 |
$ yarn storybook | Iniciar Storybook con las historias importadas |
$ yarn flow | Validar los tipos de flujo |
@danilowoz
@dleitee
MIT
