Saltar al contenido

Cómo organizar tu reacción + Redux Codebase

Reaccionar es uno de los marcos de referencia más inoportunos que existen. Desde la selección de los estados, el enrutamiento hasta la gestión de su estructura de código, React no proporciona inherentemente ninguna guía. Comparativamente, Angular provee una mejor comprensión de dónde y cómo los bloques de construcción deben ser colocados en el código. Esto pone a los desarrolladores de React en una posición difícil al comienzo de un proyecto. Independientemente de nuestra experiencia, a todos nos resulta extremadamente difícil formular la estructura perfecta del código base al principio de un nuevo proyecto.

En general, las estructuras de los proyectos React suelen evolucionar de manera iterativa junto con el alcance y la complejidad del proyecto. Cuando se añaden nuevas bibliotecas, como Redux y React Router, la estructura inicial debe ser refactorizada para acomodar la complejidad añadida. Con la presión de los plazos para la finalización del proyecto, la refactorización se queda atascada en los atrasos hasta que el proyecto es completamente insostenible.

Cómo organizar tu reacción + Redux Codebase
Cómo organizar tu reacción + Redux Codebase

En esta guía, exploraremos varias estructuras de directorios que se utilizan en aplicaciones de producción y analizaremos los pros y los contras de cada una. Es importante tener en cuenta que no hay una sola estructura que se ajuste universalmente a todos los proyectos. Dependiendo del tamaño, alcance, complejidad y aspectos futuros del proyecto, la estructura más adecuada varía. Por lo tanto, esta guía puede ayudar como punto de partida en la elección de la estructura inicial correcta para que la futura refactorización sea mínima.

Usemos un proyecto modelo para evaluar nuestras diferentes organizaciones de base de código. Estaremos viendo una base de código de un frontend de blog, donde tenemos las siguientes características:

1. Artículos (o entradas de blog), categorías y usuarios

2. Una página de inicio que muestra una lista de categorías y una lista de artículos

3. Una página de categoría que muestra información y artículos específicos de la categoría

Mientras que el conjunto de características parece simple a simple vista, la base de código real se extenderá a través de múltiples archivos y directorios. También asumimos que usamos Redux para manejar el estado de nuestra aplicación.