Así es como se ven la mayoría de mis grandes aplicaciones de producción creadas con componentes con estilo:

 src ├── App │ ├── Header │ │ ├── Logo.js │ │ ├── Title.js │ │ ├── Subtitle.js │ │ └── index.js │ └── Footer │ ├── List.js │ ├── ListItem.js │ ├── Wrapper.js │ └── index.js ├── shared │ ├── Button.js │ ├── Card.js │ ├── InfiniteList.js │ ├── EmojiPicker │ └── Icons └── index.js

La carpeta de la App contiene todos los componentes específicos que conforman su aplicación más grande. (Puede estructurar eso por ruta en su aplicación real) Cada uno de esos componentes más grandes es una carpeta con un archivo index.js y un montón de componentes con estilo en archivos individuales.

Mientras construyo mi aplicación y noto que necesito un componente con estilo de un componente más grande en otro componente más grande, arrastro su archivo a la carpeta shared/ , actualizo todas las importaciones y ¡eso es todo! Con el tiempo, se shared/ se convierte en una biblioteca de patrones improvisada con todos los componentes que quiero/necesito reutilizar en toda mi aplicación.

Otra forma bastante común es tener archivos style.js en las carpetas de componentes que contienen todos los componentes con estilo de ese componente. La ventaja es que tiene menos archivos que se interponen en su camino, pero la desventaja es que es más difícil notar la duplicación y mover componentes a la carpeta compartida es más trabajo.

Personalmente, uso la primera versión la mayoría de las veces, pero probablemente sea solo una cuestión de gusto: ¡pruébelos y vea cuál le gusta más!

También puede probar Atomic Design para estructurar su aplicación. De esta manera podrá reutilizar sus componentes con estilo. Basado en la metodología de diseño atómico, organiza sus componentes en átomos, moléculas, organismos, páginas y plantillas.

Átomo

Un átomo es una etiqueta html nativa. Por ejemplo, un elemento de entrada puede ser un átomo

 const Input = props => <input {...props} />

Moléculas

grupo de átomos es una molécula. Por ejemplo:

 const Field = ({ label, ...inputProps }) => ( <Label> {label} <Input {...inputProps} /> </Label> )

Organismos

Organismo es un grupo de átomos, moléculas y/u otros organismos. Por ejemplo:

 const Form = (props) => ( <form {...props}> <Field label="Name" type="text" /> <Field label="Email" type="email" /> </form> )

Paginas

Una página es donde pondrás la mayoría de los organismos. Por ejemplo:

 const HomePage = () => ( <PageTemplate header={<Header />}> <Form /> </PageTemplate> )

Plantillas

Una plantilla es un diseño que se utilizará en las páginas. Por ejemplo:

 const PageTemplate = ({ header, children }) => ( <main> {header && <div>{header}</div>} {children} </main> )

ejemplo de Github

Hay un proyecto inicial de React en Github que utiliza la metodología de diseño atómico con integración de componentes con estilo. Aquí está el enlace .

La forma en que estoy organizando mi Proyecto con un componente con estilo es la siguiente:

 src ├── Layout │ ├── Header │ │ ├── Logo.jsx │ │ ├── styled.js │ │ ├── container.js │ │ └── index.js │ └── LeftPanel │ ├── LeftPanel.jsx │ ├── styled.js │ └── index.js └── index.js

Razonamiento:

• Cada carpeta es una función.
• Cada archivo dentro de una carpeta tiene una responsabilidad.
  • .jsx representan un componente de presentación.
  • styled.js son componentes con estilo. Administre solo el aspecto de los componentes. Además, cualquier archivo relacionado con el tema debe importarse aquí, como colores, estilos de borde, etc.
  • container.js Si usamos cualquier administración de estado, deberíamos tener un artefacto que conecte nuestros componentes con esa biblioteca. En este caso Redux.
  • index.js exporta lo que sea relevante.

La ventaja que veo con este enfoque es que está bastante claro dónde se deben realizar los cambios si decide usar otra biblioteca CSSinJS.

Espero que tenga sentido para alguien más.

¡Salud!