Por lo general, tiendo a adoptar un enfoque que intenta evitar la separación estricta por tipos:
./src
├── activos
├── componentes
Botón │ └──
│ ├── index.js
│ └── button.css
├── contenedores
├── escenas
│ └── Inicio
│ └── componentes
│ └── InicioComponente específico
├── tienda
│ ├── reducers.js
│ ├── usuarios
│ │ ├── index.js
│ │ └── actions.js
│ └── auth
│
└── utils
/bienes
Imágenes, fuentes, etc.
- ¿Por qué debemos hacer arquitectura?
- ¿Cuál es la historia de la arquitectura romana?
- ¿Dónde puedo encontrar arquitectos certificados y asequibles para dibujar edificios de almacenes comerciales en el Área de la Bahía?
- ¿Quién vive en una casa vieja en los Estados Unidos / Reino Unido / en cualquier lugar?
- ¿Qué son los softwares arquitectónicos?
/ componentes
Contiene todos los componentes funcionales que se comparten entre diferentes contenedores o escenas. Dentro de cada carpeta de componentes encontrará: index.js exportando el componente, .css (o .scss, .less, .js [si está utilizando CSS-in-JS], etc.) con sus estilos y cualquier otros archivos relacionados exclusivamente con el componente.
/ contenedores
Mantiene los componentes del contenedor que no son escenas. Estos componentes generalmente son reutilizables.
/ escenas (pantallas, rutas, páginas, etc.)
Componentes de contenedor que son páginas, es decir, que se están utilizando dentro de .
/ store (ignore si no usa Redux)
Protege todos los reductores, acciones y selectores agrupados por “modelo”. En cada carpeta “modelo” hay dos archivos: un index.js que exporta por defecto el reductor y utiliza exportaciones con nombre para los selectores; y actions.js desde donde se exportan todos los creadores de acciones relacionadas, thunks, sagas, etc. Este enfoque le facilita la búsqueda de los archivos que necesita actualizar, ya que la estructura coincide con su árbol de estado.
HOC
Estos componentes se colocan dentro de / componentes o / contenedores dependiendo de la categoría en la que se encuentren, pero usando camelCase para diferenciación (por ejemplo, withUserInfo).
En cuanto a compartir JSX, solo puedo decir que creo que no es recomendable. Sus componentes funcionales deben ser reutilizables (al menos dentro de su alcance) y también intentar hacer un buen uso de la composición.
Consejo: utilice el resolve.alias de webpack para crear alias para todas las carpetas de nivel superior para que sus importaciones sean más fáciles como import Button from 'components/Button'.