Estructura de un proyecto React

🆕 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.tsx que /components/Login.tsx).
• Usa components/ solo para componentes reutilizables y atómicos.
• Mantén los hooks/ y utils/ 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/.