¿Cuál es la mejor arquitectura del proyecto React? ¿Cómo se organizan los componentes, las hojas JSX comunes y los estilos?

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.

/ 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'.

Realizo la siguiente estructura de archivos antes de hacer una aplicación React. Yo uso Redux y React Router, así que tengan paciencia.

Create-React-App ya hace lo máximo por usted y realmente necesita crear muy pocos archivos y carpetas para continuar. Esto es para una aplicación de una sola página en React.

También uso Next.js para hacer que el servidor de varias páginas muestre React Applications, para lo cual uso una arquitectura diferente y mucho más simple.

root (nombre_proyecto) /
| –Src /
| –Reductores /
| –Index.js (para rootReducer)
| –ReducerSet1.js
| –ReducerSet2.js
| – … y así sucesivamente …
| –Acciones /
| –Index.js
| –Store /
| –Index.js
| –Componentes /
| –CompnonentName1.js
| –ComponentName1.css
| –ComponentName2.js
| –ComponentName2.css
| – … y así sucesivamente …
| –RutasScreen /
| –HomeScreen.js
| –HomeScreen.css
| –ScreenName1.js
| –ScreenName1.css
| –ScreenName2.js
| –ScreenName2.css
| – … y así sucesivamente …
| –App.js
| –Index.js
| –Público /
| –Index.html
| –Image1.jpg
| – … y otros archivos y activos ….
| – …… varios otros archivos y carpetas …