No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Organización de archivos y carpetas

15/34
Recursos

¿Cómo organizar el código en React.js?

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:

  1. 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.
  1. 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 carpeta
createTodoButton/
│   ├── 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.

Aportes 22

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

A mi paz mental le gusta este tema ♥

Pensé que nunca llegaría esta clase jejeje

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 .tsx
files=$(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:(

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.

## 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 1. Crear una nueva carpeta para el componente. 2. Mover el archivo JavaScript del componente a la nueva carpeta y renombrarlo a `index.js`. 3. Mover el archivo CSS relacionado al mismo directorio. 4. Ajustar los imports en otros archivos para reflejar la nueva estructura. 5. 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!

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

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 ![](https://static.platzi.com/media/user_upload/image-1bc49472-e890-4e8d-a604-338d900b3f25.jpg)
menos mal ya lo habia hecho sino que despelote

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).

Hola! quiero compartir con ustedes un proyecto propio de un restaurante realizado a partir de este curso... todas las observaciones son bienvenidas gracias link deploy <https://alejog1996.github.io/Dtravesia_menuPage/> link repositorio <https://github.com/AlejoG1996/Dtravesia_menuPage>
## 🏗️ **1. Organización básica (Flat Structure)** Ideal para proyectos pequeños o pruebas rápidas. cssCopyEdit`/src` ├── components/ ` │ ├── Button.jsx` ` │ ├── Navbar.jsx` ` │ ├── Card.jsx` ` │ ├── Footer.jsx` ✅ **Ventajas:** * Fácil de entender en proyectos pequeños. * Rápida configuración. ❌ **Desventajas:** * Se vuelve caótica a medida que el proyecto crece. * Dificulta la reutilización y mantenimiento. ## 📂 **2. Organización por tipo de componente** Separa componentes según su funcionalidad. bashCopyEdit/src ├── components/ ` │ ├── common/ # Componentes reutilizables` │ │ ├── Button.jsx │ │ ├── Card.jsx │ │ ├── Modal.jsx ` │ ├── layout/ # Componentes estructurales` │ │ ├── Navbar.jsx │ │ ├── Sidebar.jsx │ │ ├── Footer.jsx ` │ ├── pages/ # Componentes específicos de páginas` │ │ ├── Home.jsx │ │ ├── Dashboard.jsx ✅ **Ventajas:** * Más organizada que la estructura básica. * Permite reutilización de componentes. ❌ **Desventajas:** * Puede volverse confusa en proyectos muy grandes. ## 🏢 **3. Organización por features (Feature-Based)** Agrupa componentes por funcionalidades. bashCopyEdit/src ├── features/ ` │ ├── auth/ # Funcionalidad de autenticación` │ │ ├── Login.jsx │ │ ├── Register.jsx │ │ ├── authService.js ` │ ├── products/ # Funcionalidad de productos` │ │ ├── ProductList.jsx │ │ ├── ProductDetail.jsx │ │ ├── productService.js ` │ ├── cart/ # Funcionalidad del carrito` │ │ ├── Cart.jsx │ │ ├── cartService.js ✅ **Ventajas:** * Facilita el mantenimiento y escalabilidad. * Permite a diferentes equipos trabajar en módulos independientes. ❌ **Desventajas:** * Puede parecer excesiva para proyectos pequeños. ## ⚛️ **4. Organización basada en Atomic Design** Este enfoque se basa en la metodología **Atomic Design** de Brad Frost y separa componentes en cinco niveles: bashCopyEdit/src ├── components/ ` │ ├── atoms/ # Componentes más pequeños (botones, inputs, labels)` │ │ ├── Button.jsx │ │ ├── Input.jsx ` │ ├── molecules/ # Combinación de átomos (formularios, tarjetas)` │ │ ├── SearchBar.jsx │ │ ├── Card.jsx ` │ ├── organisms/ # Secciones completas (Navbar, Footer)` │ │ ├── Navbar.jsx │ │ ├── Sidebar.jsx ` │ ├── templates/ # Estructuras de páginas con placeholders` │ │ ├── DashboardTemplate.jsx ` │ ├── pages/ # Páginas finales` │ │ ├── Home.jsx │ │ ├── Profile.jsx ✅ **Ventajas:** * Extremadamente escalable y modular. * Facilita la reutilización de componentes pequeños. ❌ **Desventajas:** * Puede ser difícil de entender al inicio. * No siempre es necesaria en proyectos pequeños. ## 🔥 **5. Organización combinada (Escalable)** Una combinación de **Feature-Based + Atomic Design** para proyectos grandes. graphqlCopyEdit/src ` ├── components/ # Componentes reutilizables (Botones, Modales, Inputs)` │ ├── Button.jsx │ ├── Modal.jsx ` │ ├── Input`.jsx ` ├── features/ # Agrupa módulos específicos` │ ├── auth/ │ │ ├── Login.jsx │ │ ├── Register.jsx │ │ ├── authService.js │ ├── dashboard/ │ │ ├── Dashboard.jsx │ │ ├── DashboardCard.jsx ` ├── hooks/ # Custom Hooks` │ ├── useFetch.js │ ├── useAuth.js ` ├── pages/ # Páginas de la aplicación` │ ├── Home.jsx │ ├── Profile.jsx ` ├── services/ # Llamadas a API y lógica externa` │ ├── api.js │ ├── authService.js ✅ **Ventajas:** * Escalable y organizada. * Facilita la colaboración en equipo. * Mezcla lo mejor de varias metodologías. ❌ **Desventajas:** * Puede ser demasiado estructurada para proyectos pequeños. ## 🎯 **¿Cuál estructura usar?** Tamaño del proyectoRecomendación🔹 **Pequeño** (Landing page, demo)📂 **Flat Structure o por tipo**🔸 **Mediano** (Dashboard, app con autenticación)🏢 **Feature-Based**🔥 **Grande** (E-commerce, SaaS, ERP)⚛️ **Atomic Design + Feature-Based** ###
## ✨🦄No esperaba que habría una clase destinada a la organización de directorios ;-; Pero en lo personal me gusta bastante el orden, así que cuando empezó el curso y vi como se acumulaban los archivos en un solo lugar decidí agrupar los componentes en una carpeta llamada components y dentro de dicha carpeta, crear una carpeta para cada componente donde está el archivo .js y el archivo .css. Por ejemplo, para el componente CreateTodoButton, creé una carpeta llamada CreateTodoButton y dentro de ella, puse los archivos CreateTodoButton.js y CreateTodoButton.css. No sabía que llamando al archivo js como indexedDB.js, al llamarlo solo era necesario el nombre del directorio :D ![](https://static.platzi.com/media/user_upload/image-0d4d7096-a5a1-4f28-9a9e-b7e4669a7e7b.jpg)
Se ve mejor, la pregunta es ahora donde llevamos nuestro customhook? podríamos crear una carpeta helpers o donde podría ir?

Para ese caso veo como hacer un clon de todos en youtube con react, esto es un curso de como hacer un clon de “todos” en react, no de react en si mismo.

🔥 El orden profe, el orden… 😬

Después de 2 horas creando carpetas, ordenando archivos y cambiando todos los import que entraban en conflicto lo he logrado. ✨😃 Es entonces donde veo la importancia de ordenar todo desde un principio, no veo el porqué de no hacerlo, ya que este no es un proyecto de la vida real, es solo para aprender conceptos de React.
.

Mi lucha sería empezar un proyecto ordenando todo y no trabajando como si el orden no existiera, ese es el mensaje que quiero llevar al mundo, trabajen ordenados desde el principio no cuesta nada… No importa que sea un proyecto real o solo para practicar. Orden Orden Orden señor@s!!!

Fantástico.