En este post aprenderás a crear una estructura en React para tus proyectos, veremos una estructurara de directorios y archivos con su explicación y la vamos a extender a medida que añadamos componentes.
🆕 Crear un proyecto en react
Para mas detalle, puede ver el post de como instalar react.
npm create vite@latest
💻 Estructura de un proyecto
Al crear un proyecto con react, usando npm o vite, generara la siguiente estructura de archivos y carpetas que son los básicos para iniciar un proyecto de react:
nombre-del-proyecto/
├── node_modules/
├── public/
│ └── favicon.svg
├── src/
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md
⏺️ Raíz del proyecto
- node_modules/: Carpeta generada automáticamente por npm/yarn donde se almacenan todas las dependencias instaladas. ⚠️ No modificar manualmente.
- .gitignore: Lista de archivos y carpetas que no serán incluidos en el control de versiones de Git (e.g., node_modules, build).
- package.json: Archivo principal que contiene información sobre el proyecto (nombre, versión, dependencias, scripts, etc.). También define los paquetes necesarios para ejecutar la aplicación.
- README.md: Archivo de documentación del proyecto. Ideal para describir el propósito del proyecto, cómo instalarlo y cómo usarlo.
⏺️ Carpeta public/
Contiene archivos estáticos que serán accesibles directamente en la aplicación.
- index.html: Archivo principal HTML que se carga en el navegador. Aquí React inyecta la aplicación en el <div id="root"></div>.
- favicon.ico: Icono que aparece en las pestañas del navegador.
- Otros archivos estáticos como imágenes, manifestos, etc., pueden incluirse aquí.
⏺️ Carpeta src/
Esta es la carpeta principal donde se desarrolla la lógica de la aplicación.
- assets/: Carpeta opcional para almacenar recursos como imágenes, fuentes, o estilos globales.
- components/: Carpeta donde se crean los componentes reutilizables de la aplicación. Ejemplo: botones, encabezados, formularios.
- pages/: Carpeta opcional para almacenar las páginas principales de la aplicación (e.g., Home, About, Contact).
- App.js: Componente principal de la aplicación que organiza y renderiza otros componentes. Es el punto de entrada para definir la lógica de la aplicación.
- App.css: Archivo de estilos asociado al componente App.js.
- index.js: Punto de entrada principal de la aplicación. Aquí React renderiza el componente App en el DOM, utilizando ReactDOM.render() o createRoot().
- index.css: Estilos globales para toda la aplicación.
- App.test.js: Archivo de pruebas para el componente App. Usado para testear el comportamiento de la aplicación.
- reportWebVitals.js: Archivo opcional para medir el rendimiento de la aplicación. Es útil si planeas optimizar el rendimiento.
- setupTests.js: Archivo para configurar pruebas utilizando herramientas como Jest
- vite.config.js: Archivo de configuración de Vite.
🖥️ Ampliación de la estructura para proyectos más grandes
Cuando el proyecto crece, puedes agregar más carpetas:
src/
├── api/ # Llamadas a servicios o endpoints de tu backend
├── hooks/ # Custom hooks para manejar lógica reutilizable
├── contexts/ # Contextos de React (e.g., AuthContext, ThemeContext)
├── redux/ # Lógica de Redux si usas Redux como gestor de estado
├── utils/ # Funciones reutilizables como formateadores o validadores
└── styles/ # Estilos globales o configuraciones CSS/SASS
⏺️ Personaliza el proyecto react
Elimina archivos innecesarios: Limpia el directorio src para empezar con una base más limpia:
- Elimina: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.
- Limpia el contenido de App.js y App.css para mantener solo un div básico.
Estructura tu proyecto: Organiza tu código con carpetas como:
- components/: Componentes reutilizables.
- pages/: Vistas principales.
- utils/: Utilidades y funciones auxiliares.
- styles/: Archivos CSS o SASS.
📁 Estructura profesional para un proyecto React
my-app/
│
├── public/ # Archivos públicos como index.html, favicon, imágenes globales
│
├── src/ # Código fuente del proyecto
│ ├── assets/ # Imágenes, fuentes, íconos, etc.
│ │ ├── images/
│ │ └── fonts/
│
│ ├── components/ # Componentes reutilizables y pequeños
│ │ └── Button/
│ │ ├── Button.tsx
│ │ ├── Button.test.tsx
│ │ └── Button.module.css
│
│ ├── features/ # Features o módulos por dominio de negocio
│ │ └── auth/ # Ejemplo: autenticación
│ │ ├── components/ # Componentes relacionados solo con este módulo
│ │ ├── pages/ # Páginas específicas de este módulo
│ │ ├── authSlice.ts # Redux slice (opcional)
│ │ └── authService.ts
│
│ ├── hooks/ # Hooks personalizados
│ │ └── useAuth.ts
│
│ ├── layouts/ # Layouts generales (DashboardLayout, AuthLayout, etc.)
│ │ └── MainLayout.tsx
│
│ ├── pages/ # Páginas de alto nivel (con React Router o Next.js)
│ │ ├── Home.tsx
│ │ └── NotFound.tsx
│
│ ├── routes/ # Definición de rutas centralizadas
│ │ └── AppRoutes.tsx
│
│ ├── services/ # Lógica de acceso a APIs (fetch/axios)
│ │ └── api.ts
│
│ ├── store/ # Configuración del estado global (Redux/Zustand/etc.)
│ │ ├── store.ts
│ │ └── rootReducer.ts
│
│ ├── types/ # Tipos globales de TypeScript
│ │ └── user.ts
│
│ ├── utils/ # Funciones utilitarias y helpers
│ │ └── formatDate.ts
│
│ ├── App.tsx # Componente raíz
│ ├── main.tsx # Punto de entrada (ReactDOM)
│ └── index.css # Estilos globales
│
├── .env # Variables de entorno
├── .gitignore
├── tsconfig.json # Configuración de TypeScript
├── vite.config.ts # Configuración de Vite (si usas Vite)
├── package.json
└── README.md
🧠 Consejos adicionales
- Modulariza por dominio, no por tipo de archivo (mejor
/features/auth/Login.tsxque/components/Login.tsx). - Usa
components/solo para componentes reutilizables y atómicos. - Mantén los
hooks/yutils/pequeños y reutilizables. - Si usas i18n, crea una carpeta
locales/. - Si usas una librería de UI, como Shadcn o Material UI, puedes centralizar los estilos personalizados en
theme/.