0Pricing
React Academy · Lección

Estructura de carpetas y convenciones de nombres

Organice un proyecto de React con carpetas basadas en funcionalidades y nombres de archivo claros.

Estructura de carpetas y convenciones de nombres es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección explorará estructuras de carpetas habituales para proyectos de React, aprenderá convenciones de nombres para archivos y componentes y comprenderá cómo organizar el código a medida que crece el proyecto.

La estructura predeterminada

Un proyecto mínimo de Vite + React tiene `src/App.jsx` y `src/main.jsx`. Esto está bien para demostraciones pequeñas, pero no escala. A medida que agregue funcionalidades, cree carpetas específicas para mantener juntos los archivos relacionados.
src/
  main.jsx
  App.jsx
  index.css

Estructura basada en funcionalidades

Agrupe los archivos por funcionalidad en lugar de hacerlo por tipo. Cada carpeta de funcionalidad contiene su componente, estilos, pruebas y funciones auxiliares. Esto facilita agregar o eliminar una funcionalidad completa de una sola vez.
src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

Nombres de archivos de componentes

Asigne a los archivos de componentes nombres en **PascalCase** que coincidan con el nombre del componente: `UserCard.jsx`, `NavigationBar.jsx`. Lo habitual es tener un componente por archivo. Usar `.jsx` (o `.tsx`) indica a los editores que el archivo contiene JSX.

Nombres de archivos que no son componentes

Los hooks, las utilidades y las constantes usan **camelCase**: `useAuth.js`, `formatDate.js`, `apiClient.js`. Los archivos de prueba reflejan el nombre de su archivo fuente con `.test` o `.spec`: `useAuth.test.js`.

Archivos index para importaciones limpias

Agregar un `index.js` a una carpeta le permite importar desde la ruta de la carpeta en lugar de usar la ruta completa del archivo. Mantenga los archivos index únicamente como reexportaciones; no incluya lógica.
// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

Importaciones absolutas con alias de rutas

Configure un alias `@/` que apunte a `src/` en `vite.config.js` y `tsconfig.json`. Esto evita rutas relativas frágiles como `../../../../components/Button`.
// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

Componentes compartidos frente a componentes de funcionalidades

Coloque los componentes que se usan en una sola funcionalidad dentro de la carpeta de esa funcionalidad. Mueva un componente a `src/components/` solo cuando lo necesiten dos o más funcionalidades. Evite extraer componentes de forma prematura.

Archivos de constantes y configuración

Guarde las cadenas mágicas, las URL base de la API y los wrappers de las variables de entorno en `src/lib/constants.js` o `src/config.js`. Nunca distribuya cadenas `process.env.VITE_API_URL` por muchos archivos.
// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

Tipos e interfaces (TypeScript)

En los proyectos de TypeScript, coloque los tipos junto a la funcionalidad o el componente que los utiliza. Para los tipos compartidos por muchas funcionalidades, cree `src/types/` con un archivo por área del dominio.

Comprobación rápida

¿Cuál es la principal ventaja de una estructura de carpetas basada en funcionalidades frente a una estructura basada en tipos?

Resumen

Use carpetas basadas en funcionalidades, PascalCase para los archivos de componentes, camelCase para hooks y utilidades, reexportaciones mediante index.js para mantener las importaciones limpias y un alias de rutas como @/ para eliminar las rutas relativas largas.

Curso completado

¡Enhorabuena! Ha completado **React Strict Mode & Best Practices**. Ahora comprende el comportamiento de StrictMode, cómo escribir funciones de renderizado puras, cómo usar correctamente las keys y las refs, y cómo crear una estructura de carpetas escalable.

Preguntas frecuentes

¿La lección «Estructura de carpetas y convenciones de nombres» es gratis?

Sí — el texto completo de «Estructura de carpetas y convenciones de nombres» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Estructura de carpetas y convenciones de nombres»?

Organice un proyecto de React con carpetas basadas en funcionalidades y nombres de archivo claros. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Estructura de carpetas y convenciones de nombres»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Qué hace StrictMode
  2. Componentes puros y prevención de efectos secundarios en el renderizado
  3. Prácticas recomendadas para keys y refs
  4. Estructura de carpetas y convenciones de nombres
← Volver a React Academy