/src: Carpeta principal de tu código fuente./components: Aquí irán los componentes React reutilizables./pages: Cada página de tu aplicación./store: Gestión del estado con Rematch./models: Los modelos de Rematch que representan la lógica de negocio./services: Servicios para la comunicación con el backend./utils: Funciones de utilidad./styles: Estilos globales y configuraciones de Tailwind./public: Recursos públicos como imágenes y archivos estáticos.
Componentes Reutilizables: Por ejemplo, botones, tarjetas, formularios, etc. Estos deben ser lo más genéricos posible para facilitar su reutilización. Páginas: Cada página representa una vista completa (por ejemplo, Home, Productos, Clientes). Estas utilizarán los componentes reutilizables.
Modelos de Rematch: Cada modelo representa una parte lógica de tu negocio (por ejemplo, productos, usuarios). Aquí manejarás acciones y reducers. Comunicación con el Backend Servicios: Establece servicios para manejar la comunicación con el backend (APIs, autenticación, etc.).
Tailwind: Utiliza clases de Tailwind para mantener un diseño consistente. Puedes personalizar la configuración para adaptarla a tu branding.
Desacoplamiento: Mantén tu código desacoplado para facilitar el mantenimiento y la prueba de componentes individuales. Nomenclatura Consistente: Usa nombres claros y consistentes para componentes, funciones y variables. Documentación: Documenta los componentes y funciones importantes para que otros desarrolladores entiendan su propósito.
ESLint y Prettier: Para mantener el código limpio y siguiendo buenas prácticas. Herramientas de Testing: Considera usar Jest y React Testing Library para pruebas unitarias y de integración.
El store de Rematch se configura en store/index.js. Aquí se inicializa el store y se pueden agregar modelos.
Los modelos se definen en store/models. Cada modelo representa una parte del estado y contiene reducers para actualizar dicho estado.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent