reactjs - omatidio - ojo simple

¿La mejor práctica para organizar cientos de componentes?

Question

Cuando tiene una gran aplicación que tiene cientos de componentes, parte de ella es muy compartida por otros, y parte de ella es simplemente un diseño o una vista simple. Entonces, ¿hay buenos consejos para organizar los componentes? por módulo? o por uso? o algunas otras políticas?

Answer 1

Es posible que desee considerar seguir el patrón de organización del sistema de archivos sugerido por BEM.

Un enfoque basado en componentes utilizado en la metodología BEM también determina la forma en que los proyectos BEM están organizados en un sistema de archivos. En BEM, no es solo la interfaz que se divide en componentes independientes, es decir, bloques, sino que la implementación de bloques también se divide en partes independientes, a saber, archivos.

Si no está familiarizado con BEM, aquí hay una breve introducción :

BEM - que significa bloque, elemento, modificador - es una metodología de denominación de front-end pensada por los chicos de Yandex. Es una manera inteligente de nombrar sus clases de CSS para darles más transparencia y significado a otros desarrolladores. Son mucho más estrictos e informativos, lo que hace que la convención de nomenclatura BEM sea ideal para equipos de desarrolladores en proyectos más grandes que pueden durar un tiempo.

Sus componentes Vue / React pueden mapearse uno a uno en bloques BEM que se guardan en carpetas individuales que contienen implementación JS, estilos CSS y plantillas relevantes.

blocks/
    input/
        input.css       # `input` block implementation in CSS technology
        input.js        # `input` block implementation in JavaScript technology
    button/
        button.css
        button.js
        button.png

A medida que su proyecto se vuelve más complejo, puede ser beneficioso almacenar modificadores y los elementos se encuentran en archivos separados y se agrupan en subdirectorios de bloques con el correspondiente nombre.

blocks/
    input/
        _type/                        # `type` modifier directory
            input_type_search.css     # Implementation of modifier `type` with value `search` in CSS technology
        __box/                        # `box` element directory
            input__box.css
        input.css
        input.js
    button/
        button.css
        button.js
        button.png

Answer 2

Personalmente, prefiero mantener agrupados los componentes de un solo uso en el mismo archivo. Mientras más componentes son buenos, más archivos pueden llevar a una depuración más difícil, ya que tienes que saltar constantemente entre ellos. Las estructuras de mi carpeta a menudo se ven así:

• Puntos de vista
  • Usuario
    • show.js (vista única que incluye componentes específicos de vista y componentes compartidos de referencias)
    • index.js
  • Widgets
    • _form.js (reutilizado solo dentro del contexto de widgets)
    • new.js
    • edit.js
• Componentes (reutilizados múltiples lugares en el sitio)
  • List.js
  • ListItem.js
  • Navbar.js
  • Footer.js

Answer 3

Creo un directorio por página, luego me AddButton con un componente por archivo (es decir, AddButton estaría en add_button.js.jsx ). Siempre tengo el componente de nivel superior para esa página con el sufijo de la aplicación.

• usuario
  • user_list.js.jsx
  • user_app.js.jsx
• tablero
  • dashboard_app.js.jsx
  • histogram.js.jsx
• analítica
• compartido
  • botones
    • add_button.js.jsx
    • reset_button.js.jsx
  • list.js.jsx
  • table.js.jsx

Esto se ha convertido en mi enfoque predeterminado para ir por un tiempo, curioso por ver cómo avanzan los demás.