Notas sobre el desarrollo - enchufin/el-brases-menu GitHub Wiki

Configuración de Alias

Para configurar los Alias en el proyecto y evitar estar poniendo las rutas relativas

ejecuta

pnpm install vite-tsconfig-paths --save-dev

configura vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@hooks': '/src/hooks',
      '@components': '/src/components',
      '@contexts': '/src/contexts',
      '@data': '/src/data',
      '@assets': '/src/assets',
    },
  },
});

Alternativa

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@componentes': path.resolve(__dirname, './src/componentes'),
      '@hooks': path.resolve(__dirname, './src/hooks')
    }
  }
});

En el caso de que ESLint no reconoce variables globales de Node.js ( error '__dirname' is not defined ) puede ser debido a que no tengas correctamente instalado las dependencias globales pnpm install globals --save-dev o posibles dependencias faltantes pnpm add -D @vitejs/plugin-react vite.

si persiste reinstala las dependencias

rm -rf node_modules
pnpm install --force

Estructura de archivo

Orden recomendado en archivos:

Imports
Componente
PropTypes
defaultProps
Export

Estructura de directorios

tanto components como hooks tienen un index.js con el que poder importar todas las funciones de un directorio en una misma línea

Nota: al utilizar un index.js para importar los componentes o funciones del directorio se han de importar entre llaves { ... }

ejermplo:

import { usePrecios, useLanguage, useGrupo } from '@hooks';

eliminando la necesidad de importar uno a uno

ejemplo:

import usePrecios from '@hooks/usePrecios';
import useLanguage from '@hooks/useLanguage';
import useGrupo from '@hooks/useGrupo';

Uso de PropTypes para validación y manejo seguro de props

instalar las dependencias

pnpm install prop-types

ejemplo en el componente GrupoHeader

import PropTypes from 'prop-types';

const GrupoHeader = ({ nombre, mensaje }) => {
  return (
    <div className="grupo-header">
      <h2>{nombre}</h2>
      {mensaje && <p className="mensaje">{mensaje}</p>}
    </div>
  );
};

// Validación de tipos y requerimientos
GrupoHeader.propTypes = {
  nombre: PropTypes.string.isRequired, // Obligatorio
  mensaje: PropTypes.string // Opcional
};

// Valores por defecto
GrupoHeader.defaultProps = {
  mensaje: ''
};

export default GrupoHeader;

ejemplo de uso del componente

// Correcto
<GrupoHeader 
  nombre="Almuerzos" 
  mensaje="Horario: 9:00 - 12:00" 
/>

// Correcto (sin mensaje)
<GrupoHeader nombre="Bebidas" />

// ❌ Error en consola (nombre requerido)
<GrupoHeader mensaje="Promoción especial" />

Alternativa sin ProTypes

 const GrupoHeader = ({ nombre, mensaje = '' }) => {
  /* ... */
};

// se pierde la validación de tipos ⚠️