Preguntas de entrevista frontend junior: React y herramientas

Introducción

Si ya puedes explicar los fundamentos de HTML, CSS y JavaScript, la siguiente capa en una entrevista frontend junior suele ser React, herramientas diarias, rendimiento, depuración, accesibilidad y pruebas básicas. Esta guía reúne 21 preguntas con puntos de respuesta que puedes practicar en voz alta y adaptar a tus propios proyectos.

Úsala como la parte 2 de la serie: primero asegura los fundamentos y después usa estas preguntas para demostrar cómo construyes, depuras, mides y mantienes una aplicación frontend. Para la base, lee la Parte 1: Fundamentos de HTML, CSS y JavaScript.

React & Frameworks (8 Preguntas)

33. ¿Qué es JSX y por qué lo usamos en React?

Respuesta: JSX (JavaScript XML) es una extensión de sintaxis para JavaScript que se parece a HTML y se utiliza para describir la estructura de la interfaz de usuario en React.

Ejemplo:

const element = <h1 className="title">Hola, {name}!</h1>;

// Se compila a:
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hola, ',
  name,
  '!'
);

Beneficios:

• Más legible e intuitivo que React.createElement()
• Se parece a HTML pero con toda la potencia de JavaScript
• Admite expresiones dentro de llaves {}
• Type-safe cuando se usa TypeScript
• Sintaxis familiar para los desarrolladores

Diferencias clave con HTML:

• Usar className en lugar de class
• Usar htmlFor en lugar de for
• Todos los atributos son camelCase (onClick, onChange)
• Debe cerrar todas las etiquetas (incluidas <img />, <br />)

Rareza: Común Dificultad: Fácil

34. Explica la diferencia entre props y state en React

Respuesta:

Props (Propiedades):

• Datos pasados DESDE el componente padre AL componente hijo
• De solo lectura (inmutable desde la perspectiva del hijo)
• Se utiliza para la configuración del componente
• Los cambios provienen de la renderización del padre

// Padre
function Parent() {
  return <Child name="Alice" age={25} />;
}

// Hijo
function Child({ name, age }) {
  return <p>{name} tiene {age} años</p>;
  // No se puede modificar name o age
}

State (Estado):

• Datos gestionados DENTRO de un componente
• Mutable (se puede cambiar con la función setter)
• Los cambios activan las re-renderizaciones
• Privado para el componente

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Contador: {count}
    </button>
  );
}

Diferencia clave: Props fluyen hacia abajo (padre a hijo), state es local al componente.

Rareza: Común Dificultad: Fácil

35. ¿Qué es el hook useState y cómo lo usas?

Respuesta: useState es un Hook de React que agrega gestión de estado a los componentes funcionales.

Sintaxis:

const [stateVariable, setStateFunction] = useState(initialValue);

Ejemplos:

// Contador simple
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
      <button onClick={() => setCount(0)}>Reiniciar</button>
    </div>
  );
}

// Estado del objeto
function Form() {
  const [user, setUser] = useState({ name: '', email: '' });
  
  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    });
  };
  
  return (
    <input name="name" value={user.name} onChange={handleChange} />
  );
}

// Inicialización diferida (cálculo costoso)
const [data, setData] = useState(() => {
  return expensiveComputation();
});

Puntos clave:

• Las actualizaciones de estado activan re-renderizaciones
• Las actualizaciones de estado son asíncronas
• Utiliza actualizaciones funcionales para el estado basado en el estado anterior: setCount(prev => prev + 1)

Rareza: Común Dificultad: Fácil-Medio

36. ¿Qué hace el hook useEffect? Explica el array de dependencias.

Respuesta: useEffect ejecuta efectos secundarios después de la renderización (obtención de datos, suscripciones, manipulación del DOM).

Sintaxis:

useEffect(() => {
  // Código del efecto secundario aquí
  
  return () => {
    // Limpieza (opcional)
  };
}, [dependencies]);

Comportamiento del array de dependencias:

// 1. Sin array de dependencias - se ejecuta DESPUÉS de CADA renderización
useEffect(() => {
  console.log('Se ejecuta en cada renderización');
});

// 2. Array vacío [] - se ejecuta UNA VEZ al montar el componente
useEffect(() => {
  console.log('Se ejecuta solo al montar el componente');
  fetchData();
}, []);

// 3. Con dependencias - se ejecuta cuando cambian las dependencias
useEffect(() => {
  console.log('Se ejecuta cuando cambia el contador');
  document.title = `Contador: ${count}`;
}, [count]);

Casos de uso comunes:

// Obtención de datos
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

// Event listeners (con limpieza)
useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  
  return () => window.removeEventListener('resize', handleResize);
}, []);

Rareza: Común Dificultad: Medio

37. ¿Cómo renderizas una lista de elementos en React? ¿Por qué necesitamos keys?

Respuesta:

Renderizar listas:

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Por qué las keys son importantes: Las keys ayudan a React a identificar qué elementos han cambiado, se han añadido o se han eliminado. Permiten actualizaciones eficientes al:

• Minimizar la manipulación del DOM
• Preservar el estado del componente
• Mantener la identidad adecuada del elemento
• Optimizar el algoritmo de reconciliación

Directrices para las keys:

// BUENO - IDs únicos y estables
items.map(item => <Item key={item.id} {...item} />)

// MALO - Índice del array (inestable cuando la lista cambia)
items.map((item, index) => <Item key={index} {...item} />)

// MALO - Las keys no únicas causan errores
items.map(item => <Item key={item.category} {...item} />)

Cuando el índice es aceptable: Listas estáticas que nunca se reordenan ni cambian.

Rareza: Común Dificultad: Fácil-Medio

38. ¿Qué es el DOM Virtual y por qué React lo usa?

Respuesta: El DOM Virtual es una representación ligera de JavaScript del DOM real que React mantiene en memoria.

Cómo funciona:

1. Renderización: React crea un árbol DOM Virtual cuando cambia el estado
2. Diff: React compara el nuevo DOM Virtual con la versión anterior (reconciliación)
3. Actualización: React calcula los cambios mínimos necesarios
4. Patch: React actualiza solo las partes modificadas del DOM real

Por qué es beneficioso:

• Rendimiento: La manipulación directa del DOM es lenta; React agrupa y minimiza las actualizaciones
• Eficiencia: Solo actualiza los elementos modificados, no todo el árbol
• Experiencia del desarrollador: Escribe código declarativo, React gestiona las actualizaciones eficientes
• Abstracción: El mismo código puede dirigirse a diferentes plataformas (React Native, VR)

Ejemplo:

// Tú escribes:
<div>{count}</div>

// Cuando el contador cambia de 0 a 1:
// React solo actualiza el nodo de texto, no todo el div

Nota: El React moderno (arquitectura Fiber) no compara literalmente dos DOM Virtuales, sino que utiliza un concepto similar con los nodos Fiber.

Rareza: Común Dificultad: Medio

39. ¿Cómo manejas los formularios en React?

Respuesta:

Componentes controlados (recomendado): Los valores de los elementos del formulario están controlados por el estado de React.

function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();  // Evitar la recarga de la página
    console.log('Enviado:', formData);
    // Llamada a la API aquí
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
        type="email"
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
        type="password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

Componentes no controlados (menos común): Utiliza refs para acceder directamente a los valores del DOM.

function UncontrolledForm() {
  const emailRef = useRef();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(emailRef.current.value);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input ref={emailRef} type="email" />
    </form>
  );
}

Mejor práctica: Utiliza componentes controlados para la mayoría de los casos.

Rareza: Común Dificultad: Medio

40. ¿Cuál es la diferencia entre componentes funcionales y de clase?

Respuesta:

Componentes funcionales (Moderno, preferido):

function Welcome({ name }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // Efectos secundarios
  }, []);
  
  return <h1>Hola, {name}!</h1>;
}

Componentes de clase (Legado):

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    // Efectos secundarios
  }
  
  render() {
    return <h1>Hola, {this.props.name}!</h1>;
  }
}

Diferencias clave:

• Sintaxis: Funciones vs clases
• Estado: Hooks (useState) vs this.state
• Ciclo de vida: Hooks (useEffect) vs métodos de ciclo de vida
• Palabra clave this: No es necesaria en los componentes funcionales
• Boilerplate: Menos código en los componentes funcionales
• Rendimiento: Ligeramente mejor con los componentes funcionales

Estándar moderno: Los componentes funcionales con Hooks son ahora el enfoque recomendado (desde React 16.8). Los componentes de clase siguen funcionando, pero se consideran heredados.

Rareza: Común Dificultad: Fácil-Medio

Herramientas de construcción y control de versiones (5 preguntas)

41. ¿Qué es npm y para qué se utiliza package.json?

Respuesta: npm (Node Package Manager) es el gestor de paquetes predeterminado para JavaScript, que se utiliza para instalar, gestionar y compartir paquetes de código.

package.json es el archivo de manifiesto que contiene:

• Metadatos: Nombre del proyecto, versión, descripción, autor
• Dependencias: Paquetes necesarios para la producción (dependencies)
• DevDependencies: Paquetes necesarios solo para el desarrollo (devDependencies)
• Scripts: Comandos para tareas comunes (start, build, test)

Ejemplo de package.json:

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0"
  }
}

Comandos comunes:

• npm install - Instalar todas las dependencias
• npm install package-name - Instalar un paquete específico
• npm install --save-dev package-name - Instalar como dependencia de desarrollo
• npm run script-name - Ejecutar un script de npm
• npm update - Actualizar paquetes

Rareza: Común Dificultad: Fácil

42. ¿Qué es Git y por qué los equipos lo usan?

Respuesta: Git es un sistema de control de versiones distribuido que rastrea los cambios en el código a lo largo del tiempo.

Por qué los equipos usan Git:

• Colaboración: Múltiples desarrolladores trabajan en la misma base de código sin conflictos
• Historial: Registro completo de todos los cambios (quién, qué, cuándo, por qué)
• Branching (Ramificación): Trabajar en características de forma independiente sin afectar al código principal
• Backup (Copia de seguridad): Código almacenado en múltiples ubicaciones (local + remoto)
• Rollback (Reversión): Revertir fácilmente a versiones de trabajo anteriores
• Code review (Revisión de código): Revisar los cambios antes de fusionarlos (pull requests)
• Experimentación: Probar nuevas ideas en ramas sin riesgo

Conceptos básicos:

• Repository (repo): Carpeta del proyecto rastreada por Git
• Commit: Instantánea de los cambios con un mensaje
• Branch (Rama): Línea de desarrollo independiente
• Merge (Fusión): Combinar los cambios de diferentes ramas
• Remote (Remoto): Repositorio alojado en línea (GitHub, GitLab)

Estándar de la industria: Más del 93% de los desarrolladores usan Git en todo el mundo.

Rareza: Común Dificultad: Fácil

43. Explica los comandos y el flujo de trabajo comunes de Git

Respuesta:

Flujo de trabajo básico:

# Clonar el repositorio
git clone https://github.com/user/repo.git

# Comprobar el estado
git status

# Crear una nueva rama
git checkout -b feature-name
# o sintaxis moderna:
git switch -c feature-name

# Realizar cambios, luego agregar al stage
git add file.js
git add .  # Agregar todos los cambios al stage

# Commit con mensaje
git commit -m "Añadir la función de inicio de sesión"

# Push al remoto
git push origin feature-name

# Pull los últimos cambios
git pull origin main

# Fusionar la rama
git checkout main
git merge feature-name

# Ver el historial
git log

Comandos esenciales que los juniors deben conocer:

• clone - Copiar el repositorio remoto
• add - Agregar cambios al stage
• commit - Guardar la instantánea con un mensaje
• push - Subir al remoto
• pull - Descargar + fusionar los cambios remotos
• branch - Listar/crear ramas
• checkout/switch - Cambiar de rama
• status - Ver el estado actual
• log - Ver el historial de commits

Rareza: Común Dificultad: Fácil-Medio

44. ¿Qué es un conflicto de fusión y cómo lo resolverías?

Respuesta: Un conflicto de fusión se produce cuando Git no puede fusionar automáticamente los cambios porque existen modificaciones en competencia en las mismas líneas de código.

Escenario común:

# El desarrollador A cambia la línea 5
# El desarrollador B también cambia la línea 5
# Al fusionar, Git no sabe cuál mantener

Marcadores de conflicto:

<<<<<<< HEAD
const greeting = "Hola";
=======
const greeting = "Qué tal";
>>>>>>> feature-branch

Pasos para la resolución:

1. Identificar los conflictos: Git marca los archivos con conflictos
2. Abrir los archivos en conflicto: Busca los marcadores de conflicto
3. Decidir qué mantener: Revisar ambos cambios
4. Editar el código: Eliminar los marcadores, mantener el código deseado
5. Probar: Asegurarse de que el código funciona correctamente
6. Agregar los archivos resueltos al stage: git add file.js
7. Completar la fusión: git commit

Mejores prácticas:

• Comunicarse con el equipo
• Hacer pull con frecuencia para minimizar los conflictos
• Mantener los commits pequeños y enfocados
• Probar a fondo después de la resolución

Rareza: Común Dificultad: Medio

45. ¿Qué hace Webpack? ¿Qué es Vite?

Respuesta:

Webpack: Un empaquetador de módulos que toma JavaScript, CSS, imágenes y otros activos, los procesa y los empaqueta en archivos optimizados para el navegador.

Qué hace:

• Empaqueta múltiples archivos en menos archivos
• Transforma el código (Babel para JSX/ES6, Sass a CSS)
• Optimiza para la producción (minificación, tree shaking)
• Maneja las dependencias
• Code splitting para el rendimiento

Concepto básico:

src/
  index.js
  component.js
  styles.css
          ↓ Webpack
dist/
  bundle.js (todo combinado y optimizado)

Vite: Herramienta de construcción moderna que es significativamente más rápida que los empaquetadores tradicionales como Webpack.

Por qué Vite es más rápido:

• Utiliza módulos ES nativos durante el desarrollo (no necesita empaquetado)
• Hot Module Replacement (HMR) es instantáneo
• Solo empaqueta para la producción
• Mejor experiencia para el desarrollador

Cuándo usar:

• Vite: Nuevos proyectos, frameworks modernos (React, Vue)
• Webpack: Proyectos existentes, necesita una configuración compleja

Rareza: Común Dificultad: Fácil-Medio

Rendimiento web y optimización (3 preguntas)

46. ¿Cómo optimizarías el rendimiento de carga de un sitio web?

Respuesta:

Optimización de imágenes:

• Comprimir las imágenes (JPG para fotos, PNG para gráficos, WebP para ambos)
• Usar tamaños apropiados (no cargar una imagen de 4000px para una visualización de 300px)
• Cargar las imágenes por lazy loading debajo del pliegue
• Usar srcset para imágenes responsive

Optimización del código:

• Minificar JavaScript, CSS, HTML (eliminar espacios en blanco, comentarios)
• Empaquetar y comprimir los archivos (gzip o Brotli)
• Eliminar CSS/JS no utilizados (tree shaking)
• Code splitting (cargar solo el código necesario por página)

Caching (Almacenamiento en caché):

• Caching del navegador con los encabezados de caché adecuados
• Usar CDN para los activos estáticos
• Service workers para las capacidades offline

Estrategias de carga:

• CSS crítico en línea en <head>
• Diferir el JavaScript no crítico
• Precargar los recursos importantes
• Reducir las peticiones HTTP

Métricas de rendimiento:

• Medir con Lighthouse, PageSpeed Insights
• Objetivo: FCP < 1.8s, LCP < 2.5s, CLS < 0.1

Rareza: Común Dificultad: Medio

47. ¿Qué herramientas usarías para medir el rendimiento de un sitio web?

Respuesta:

Herramientas de desarrollo del navegador:

• Pestaña Red de Chrome DevTools: Analizar el tiempo de las peticiones, el tamaño de los archivos, el orden de carga
• Pestaña Rendimiento/Lighthouse: Generar informes de rendimiento con puntuaciones
• Pestaña Cobertura: Encontrar JavaScript/CSS no utilizados
• Consola: Medir con console.time() y la API de rendimiento

Herramientas en línea:

• Google PageSpeed Insights: Obtener puntuaciones de rendimiento y recomendaciones
• WebPageTest: Gráficos de cascada detallados, múltiples ubicaciones
• GTmetrix: Análisis de rendimiento con calificaciones

Métricas a monitorizar:

• First Contentful Paint (FCP): Cuándo aparece el primer contenido
• Largest Contentful Paint (LCP): Cuándo se carga el contenido principal
• Time to Interactive (TTI): Cuándo la página se vuelve interactiva
• Cumulative Layout Shift (CLS): Estabilidad visual
• Total Blocking Time (TBT): Tiempo de bloqueo del hilo principal

Para los juniors: Es suficiente una familiaridad básica con Chrome DevTools y Lighthouse. No se esperan habilidades de creación de perfiles profundas.

Rareza: Común Dificultad: Fácil-Medio

48. ¿Qué es el lazy loading y cuándo lo usarías?

Respuesta: El lazy loading (carga diferida) retrasa la carga de los recursos no críticos hasta que son necesarios, normalmente cuando están a punto de entrar en el viewport.

Casos de uso comunes:

Imágenes:

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Descripción">

Lazy loading nativo (navegadores modernos):

<img src="image.jpg" loading="lazy" alt="Descripción">

JavaScript/React:

// Lazy loading de componentes
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Cargando...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Beneficios:

• Carga inicial de la página más rápida
• Reducción del uso de ancho de banda
• Mejor rendimiento en conexiones lentas
• Mejora de la experiencia del usuario (el contenido aparece más rápido)

Cuándo usar:

• Imágenes debajo del pliegue
• Componentes pesados que no son visibles inmediatamente
• Contenido en pestañas/acordeones
• Implementaciones de scroll infinito

Rareza: Poco común Dificultad: Medio

Depuración y herramientas de desarrollo (2 preguntas)

49. ¿Cómo depuras un error de JavaScript en el navegador?

Respuesta:

Proceso de depuración paso a paso:

1. Comprobar la consola:

console.log(variable);      // Inspeccionar los valores
console.error('Error:', error);  // Registrar los errores
console.table(arrayOfObjects);   // Ver los datos en una tabla
console.warn('Advertencia');    // Resaltar las advertencias

2. Usar Breakpoints (Puntos de interrupción):

• Abrir el panel Fuentes/Depurador de DevTools
• Hacer clic en el número de línea para establecer un breakpoint
• La ejecución del código se pausa en el breakpoint
• Inspeccionar las variables en el panel Alcance
• Recorrer el código (Step Over, Step Into, Step Out)

3. Examinar el Stack Trace (Rastro de la pila):

• Los mensajes de error muestran los nombres de los archivos y los números de línea
• Seguir la pila de llamadas para encontrar el origen del error
• Comprobar los errores de red en la pestaña Red

4. Depurar los problemas del DOM:

• Inspeccionar los elementos en el panel Elementos
• Comprobar los estilos calculados
• Usar el forzado del estado :hover
• Verificar que los event listeners están adjuntos

5. Comprobar las peticiones de red:

• La pestaña Red muestra las llamadas a la API fallidas
• Examinar los encabezados de la petición/respuesta
• Comprobar los códigos de estado (404, 500, etc.)

Técnicas de depuración comunes:

• Añadir la declaración debugger; para pausar la ejecución
• Usar breakpoints condicionales
• Observar las expresiones
• Poner en black box el código de terceros

Rareza: Común Dificultad: Fácil-Medio

50. ¿Cuáles son los principales paneles de Chrome DevTools y para qué los usas?

Respuesta:

Paneles esenciales:

1. Consola:

• Ver los errores y los registros de JavaScript
• Ejecutar comandos de JavaScript
• Probar expresiones de forma interactiva
• Pruebas de API

2. Elementos (Inspector):

• Inspeccionar y modificar la estructura HTML
• Editar el CSS en tiempo real
• Depurar los problemas de diseño
• Ver los estilos calculados, el modelo de caja
• Probar diseños responsive

3. Fuentes (Depurador):

• Ver los archivos de código fuente
• Establecer breakpoints
• Recorrer la ejecución del código
• Editar y guardar los cambios (workspaces)
• Ver la pila de llamadas

4. Red:

• Monitorizar las peticiones/respuestas HTTP
• Comprobar los tiempos de carga y el tamaño de los archivos
• Depurar las llamadas a la API
• Filtrar por tipo (JS, CSS, XHR, imágenes)
• Limitar la velocidad de la red

5. Rendimiento/Lighthouse:

• Analizar el rendimiento en tiempo de ejecución
• Generar auditorías de rendimiento
• Identificar los cuellos de botella
• Comprobar las Core Web Vitals

6. Aplicación:

• Inspeccionar el almacenamiento local, el almacenamiento de sesión
• Ver y borrar las cookies
• Comprobar los service workers
• Gestionar la caché

Para los juniors: Se espera una gran familiaridad con Consola, Elementos, Fuentes y Red. La creación de perfiles de rendimiento es un plus.

Rareza: Común Dificultad: Fácil

Accesibilidad y mejores prácticas (2 preguntas)

51. ¿Qué es la accesibilidad web y por qué es importante?

Respuesta: La accesibilidad web significa diseñar y desarrollar sitios web que puedan ser utilizados por todos, incluidas las personas con discapacidades (visuales, auditivas, motoras, cognitivas).

Por qué es importante:

1. Diseño inclusivo: El 15% de la población mundial tiene alguna forma de discapacidad 2. Requisitos legales: ADA (Americans with Disabilities Act), Sección 508, cumplimiento de WCAG 3. Mejor UX para todos: Los subtítulos ayudan en entornos ruidosos, la navegación con el teclado ayuda a los usuarios avanzados 4. Beneficios para el SEO: El HTML semántico y la estructura adecuada mejoran la clasificación en las búsquedas 5. Mayor audiencia: No excluir a los usuarios/clientes potenciales 6. Responsabilidad ética: La igualdad de acceso es un derecho humano

Discapacidades comunes a tener en cuenta:

• Visual: Ceguera, baja visión, daltonismo
• Auditiva: Sordera, pérdida de audición
• Motora: Movilidad limitada, temblores, parálisis
• Cognitiva: Dificultades de aprendizaje, problemas de memoria

Caso de negocio: Los sitios web accesibles llegan a más usuarios, se clasifican mejor en las búsquedas, evitan demandas, demuestran la responsabilidad corporativa.

Rareza: Común Dificultad: Fácil-Medio

52. ¿Cuáles son algunas formas básicas de hacer que un sitio web sea más accesible?

Respuesta:

Estructura HTML:

• Usar elementos semánticos (<header>, <nav>, <main>, <article>, <footer>)
• Jerarquía de encabezados adecuada (H1 → H2 → H3, sin saltarse)
• Etiquetar correctamente los inputs del formulario

<label for="email">Correo electrónico:</label>
<input id="email" type="email" name="email" />

Imágenes:

• Incluir siempre un texto alt descriptivo
• Usar alt vacío para las imágenes decorativas: alt=""

Navegación con el teclado:

• Todos los elementos interactivos deben ser accesibles con el teclado
• Orden de tabulación lógico
• Indicadores de enfoque visibles
• No eliminar el contorno de :focus

Color y contraste:

• Contraste de color suficiente (4.5:1 para el texto normal, 3:1 para el texto grande)
• No depender únicamente del color para transmitir información
• Probar con simuladores de daltonismo

Atributos ARIA (cuando sea necesario):

<button aria-label="Cerrar diálogo">×</button>
<div role="alert" aria-live="polite">Cambios guardados</div>
<nav aria-label="Navegación principal">...</nav>

Pruebas:

• Usar lectores de pantalla (VoiceOver, NVDA, JAWS)
• Navegación solo con el teclado
• Herramientas de accesibilidad del navegador (Lighthouse, axe)

Rareza: Común Dificultad: Medio

Conciencia de las pruebas (1 pregunta)

53. ¿Qué son las pruebas unitarias y por qué son importantes?

Respuesta: Las pruebas unitarias implican la prueba de funciones o componentes individuales de forma aislada para verificar que funcionan correctamente.

Qué prueba:

• ¿La función devuelve la salida esperada para una entrada dada?
• ¿El componente se renderiza correctamente con las props dadas?
• ¿Los casos extremos funcionan correctamente?

Ejemplo (Jest):

// Función a probar
function add(a, b) {
  return a + b;
}

// Prueba unitaria
test('suma 1 + 2 para igualar 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('maneja números negativos', () => {
  expect(add(-1, -2)).toBe(-3);
});

Por qué son importantes:

• Detecta los errores pronto: Encontrar los problemas antes de la producción
• Confianza en los cambios: Refactorizar sin miedo
• Documentación: Las pruebas muestran cómo se debe usar el código
• Depuración más rápida: Señalar la ubicación exacta del fallo
• Mejor diseño: El código que se puede probar suele ser un código más limpio

Pirámide de pruebas:

• Muchas pruebas unitarias (rápidas, baratas)
• Menos pruebas de integración (probar los componentes juntos)
• Pocas pruebas de extremo a extremo (flujos de usuario completos, lentos)

Para los juniors: Es suficiente entender por qué las pruebas son importantes y los conceptos básicos. No se espera que se escriban conjuntos de pruebas completos para los puestos de nivel de entrada, pero la voluntad de aprender a probar es importante.

Frameworks comunes: Jest, React Testing Library, Mocha, Jasmine

Rareza: Común Dificultad: Fácil-Medio

Total: 21 preguntas

Estas preguntas cubren los temas prácticos de React y herramientas que suelen aparecer después de los fundamentos en entrevistas frontend junior. Combínalas con la Parte 1: Fundamentos de HTML, CSS y JavaScript y practica explicando las respuestas con ejemplos de tus propios proyectos.