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