Organizar el código en una aplicación de React.js no solo es buena práctica, sino esencial para el mantenimiento y colaboración en proyectos de software. En esta guía, nos centraremos en cómo estructurar de manera efectiva componentes y archivos dentro de tu aplicación para que sea comprensible y manejable a largo plazo. ¡Acompáñame!
¿Por qué es importante la organización de carpetas en un proyecto?
Al inicio de un proyecto, es tentador mantener todos los archivos juntos en un desorden organizado. Sin embargo, a medida que el proyecto crece, esta estructura puede volverse inmanejable. La organización adecuada:
Facilita la colaboración: Un nuevo integrante entenderá rápidamente la estructura del proyecto.
Mejora el mantenimiento: Localizar y solucionar errores o agregar nuevas funcionalidades es más sencillo.
Refleja profesionalismo: Una estructura clara y ordenada destaca en revisiones de código o presentaciones ante talentos externos.
¿Cuáles son las principales filosofías para estructurar carpetas?
Existen varias estrategias para organizar un proyecto en React.js. A continuación, se presentan algunas de las más comunes y efectivas:
Divide por tipo de archivo:
Código JavaScript, hojas de estilo CSS, imágenes y otros, cada uno en su propia carpeta (p. ej., components, styles, images, utils).
Adecuada para proyectos pequeños, pero puede replicar el problema inicial en grandes proyectos.
Divide por funcionalidades:
Agrupa archivos relacionados por funcionalidad o sección de la aplicación dentro de su propia carpeta.
Ideal para grandes aplicaciones ya que cada carpeta contiene todos los recursos necesarios para una sección específica, desde scripts hasta estilos.
Ejemplo práctico en React.js
Supongamos que tenemos un botón createTodoButton en nuestra aplicación. Vamos a crear una estructura organizada para este componente:
// Antes estaba en el mismo nivel que otros archivos// createTodoButton.js// createTodoButton.css// Ahora se organiza dentro de su propia carpetacreateTodoButton/│ ├── index.js// Anteriormente createTodoButton.js│ └── createTodoButton.css
Consideraciones al actualizar imports
Mover archivos a nuevas carpetas puede complicar los imports iniciales. Por ejemplo, al mover createTodoButton.js a un nuevo directorio y cambiar su nombre a index.js, nos aseguramos de que:
Los archivos que importan usan la ruta de la carpeta sin especificar el archivo.
Asegurarse que el archivo principal interno sea index.js permite importaciones limpias y sin extensiones.
// Dado que el archivo es index.js, no necesitamos especificarlo
import CreateTodoButton from './createTodoButton';
¿Cómo adaptar la práctica a tus necesidades?
Cada proyecto es único y, aunque estas estrategias son efectivas, la elección depende de las necesidades particulares:
Proyectos pequeños: Puede que prefieras agrupar por tipos de archivo al inicio hasta que la estructura se vuelva inmanejable.
Proyectos grandes y colaborativos: Optar por la organización por funcionalidades es frecuentemente más limpio y más fácil para realizar mantenimiento continuo.
El enfoque al priorizar una estructura bien definida desde el principio resplandecerá a medida que tu proyecto crezca, mejorando tu eficiencia como profesional del desarrollo web y haciendo que tu código sea un ejemplo de limpieza y organización.
¡Sigue aprendiendo y mejorando tu flujo de trabajo! La organización es clave para lograr resultados excepcionales.
Por fin!!! Me estaba volviendo loco al ver esa carpeta src con todos esos archivos, parecía un carnaval xD
Los Dioses de la programación se congratulan al verte llegar a este punto.
Los Dioses del olimpo estan de nuestro lado 😎
A mi paz mental le gusta este tema ♥
Pensé que nunca llegaría esta clase jejeje
Mucho trabajo para llegar hasta aquí. Enhorabuena!
Un comando para que se cree la carpeta automaticamente con el nombre y luego lo guarde en la misma
#!/bin/bash# Obtener todos los nombres de archivo con extensión .tsxfiles=$(find .-type f -name "*.tsx")# Recorrer los nombres de archivo
for file in $files;do # Obtener el nombre del archivo sin la extensión .tsx filename=$(basename "$file".tsx) # Crear la carpeta con el mismo nombre
mkdir "$filename" # Mover el archivo a la carpeta
mv "$file""$filename/"done
echo "Se han creado las carpetas y se han movido los archivos .tsx."
Esto de carpetas debería hacerse a la vez que se crea el archivo, hacerlo al final quita tiempito:(
Pero así es como sucede en la vida real, David
Me esta pasando estoy trabajando en un proyecto de un ecommerce con la ultima version de next y mientras mas vistas o paginas se cree en la aplicación mas crece la app, en un curso de platzi aprendi que en un componente lo mejor seria tener un promedio de 100 lineas de código aproximadamente y lo mejor seria estructurar a criterio de uno.
Creo que hubiera sido mejor empezar desde cero con el código organizado por carpetas, así una persona que se esté iniciando en el mundo del desarrollo en React se turba menos. Ya a mi me estaba dando algo a ver todos esos archivos en la carpeta de src.
Creo que eso sería mejor practica que comenzar a lanzar todo en src, así esas personas ya van conociendo la estrucutra de un proyecto en React, como deberían de verse los components, los pages y más dentro de un proyecto en el mundo real.
En la versión anterior de este caso hubo principalmente dos recomendaciones:
No "obligarles" a crear componentes por su cuenta tan desde el principio
Organizar bien los archivos y carpetas desde el principio.
La primera recomendación la aplicamos, tenían toda la razón.
Pero la segunda después de mucha discusión decidimos que no. En la vida real no sucede así. La primera organización siempre es terrible y sobre todo no tiene consideraciones de cambios futuros / la normal evolución del proyecto. Es normal y muy importante saber reorganizar el proyecto una vez ya arrancado.
Por eso lo mantuvimos.
Igual me hubiera gustado que todo esté ordenado desde el principio, así concientizamos a la gente que no deben trabajar de manera desordenada. Con esto creamos una nueva raza de desarrolladores que a donde vayan si les toca arrancar un proyecto de cero lo hagan muy ordenados, con esto la cadena cada vez se hace más grande y todos somos felices viviendo en un mundo ordenado en donde el desorden en nuestros archivos de código no existe ni al principio de un proyecto ni al final. 💚 Nunca pares de ser Ordenado!!!
Organización de código en React.js
En la clase anterior, no se agregaron nuevas funcionalidades ni se solucionaron errores en la aplicación.
Se reorganizó una parte específica de la lógica de la aplicación: la persistencia de datos.
En esta clase, se continuará organizando el código, pero a un nivel más amplio, organizando todos los componentes en archivos y carpetas.
Importancia de la organización en React.js
Organizar el código es crucial para la mantenibilidad y claridad del proyecto.
Evitar tener todos los archivos mezclados en la misma carpeta, como en una única carpeta "src" con múltiples archivos de JavaScript, CSS, SVG, etc.
Crear más carpetas para organizar mejor la aplicación.
Beneficios de una buena estructura de carpetas
Facilita la incorporación de nuevos miembros al equipo.
Ayuda a cualquier evaluador, como un reclutador o manager, a entender mejor la anatomía y lógica del proyecto.
Mantiene el proyecto limpio y profesional.
Filosofías de organización en React.js
Organización por tipo de archivo:
Dividir la carpeta "src" en subcarpetas por tipo de archivo (componentes, estilos, imágenes, utilidades, etc.).
Funciona bien para proyectos pequeños, pero puede resultar en un problema similar si las subcarpetas se llenan de muchos archivos.
Organización por funcionalidad:
Crear una carpeta por cada funcionalidad o sección importante de la aplicación.
Dentro de cada carpeta, incluir todos los archivos relacionados con esa funcionalidad (JavaScript, CSS, imágenes, etc.).
Facilita mantener juntos los archivos relacionados y mejora la estructura del proyecto.
Ejemplo de organización por funcionalidad
Crear una carpeta específica para cada componente, como createTodoButton.
Dentro de createTodoButton, incluir createTodoButton.js, createTodoButton.css, y cualquier otro archivo relacionado.
Renombrar el archivo principal a index.js para simplificar los imports.
Prácticas recomendadas
Mantener una estructura coherente y clara en el proyecto.
Aprovechar los pequeños momentos para mejorar la organización del proyecto.
Ajustar los imports cuando se muevan archivos a nuevas carpetas.
Probar siempre la aplicación después de reorganizar para asegurarse de que todo sigue funcionando correctamente.
Pasos para reorganizar un componente
Crear una nueva carpeta para el componente.
Mover el archivo JavaScript del componente a la nueva carpeta y renombrarlo a index.js.
Mover el archivo CSS relacionado al mismo directorio.
Ajustar los imports en otros archivos para reflejar la nueva estructura.
Verificar que la aplicación funcione correctamente después de los cambios.
Conclusión
La organización del código no solo mejora la mantenibilidad del proyecto, sino que también refleja profesionalismo y atención al detalle.
Diferentes proyectos pueden requerir diferentes estructuras, pero es fundamental adoptar una filosofía de organización que facilite la colaboración y la escalabilidad.
Hasta ahora antes de ver este video estaba llevando esta organización!
La mía era esta, la cambiaré para tener otra perspectiva de orden...
Esta clase es perfecta porque habrá momentos en que llegaras a un proyecto y este TODO desorganizado ⁽ᵒʲᵃˡᵃ ⁿᵒ ᵗᵉ ᵖᵃˢᵉ ᵉˢᵒ⁾ esto dice lo importante que es organizar tu proyecto al principio.
Que bueno que llegue a esta clase! Que bonito se ve todo organizado.
Que lindo es el orden
Por más que le pongo index.js no me lo toma automático. Estoy ingresando algo mal?
Lo pude solucionar directamente poniendo la dirección completa peeero no se porqué no me lo toma.
Viendo tu screenshot veo que tu archivo se llama index.js.js, debería ser solo index.js.
La importancia de organizar archivos y carpetas O arquitectura de un proyecto.
Lo habia hecho antes porque me estresaba el desorden que habia, casualmente es como la que Juan utilizó, si ustedes lo organizaron de otra manera que creen que es mejor, me gustaria verla
Que arquitecturas se pueden usar en react?
Recuerda que estructura de archivos y carpetas !== arquitectura
Te agradezco por llegar a esto. Yo he trabajado usando NestJS para el backend y estoy bastante acostumbrado a su organización de carpetas (de hecho muy similar a la de Angular).
como lo veis???
Para que funcione el import desde App.js, ¿a los archivos se le tienen que poner index.js dentro de sus carpetas como una "convención más" o cualquier nombre en específico?
No, pueden tener cualquier nombre, esto nomás fue un atajo para no tener que cambiarles el nombre a pesar de cambiar la organización de carpetas.
Hola! quiero compartir con ustedes un proyecto propio de un restaurante realizado a partir de este curso... todas las observaciones son bienvenidas gracias
