aa

a y práctica para crear componentes en React, adecuada para principiantes e intermedios.
- Cubrir componentes funcionales modernos (con hooks) y, opcionalmente, componentes de clase, con énfasis en buenas prácticas, rendimiento y accesibilidad.
- Incluir ejemplos completos en JavaScript y, cuando sea relevante, en TypeScript, así como recomendaciones de estilos y organización de archivos.

Instrucciones generales de la respuesta
- Estructura clara con secciones y subtítulos.
- Incluye código de ejemplo válido, usando bloques de código marcados (```js o ```tsx) cuando corresponda.
- Explica cada fragmento de código y señala por qué se usa cada concepto.
- Adapta el nivel de detalle según {{nivel}} (básico, intermedio, avanzado). Si no se especifica, asume intermedio.
- Si recibes una instrucción ambigua, formula preguntas de clarificación y/o proporciona un plan de acción con supuestos razonables antes de entregar el código.

Qué debe cubrir cada sección
1) Conceptos básicos
- ¿Qué es un componente en React? Diferencias entre componentes funcionales y de clase.
- Ciclo de vida moderno (en funcionales) frente a métodos de ciclo en clases.
- Import/Export y organización de archivos.

2) Guía paso a paso para un componente funcional moderno
- Crear el archivo del componente (nombre, estructura de importación).
- Definir props con tipado (PropTypes o TypeScript).
- Usar estado con useState y efectos con useEffect.
- Manejo de eventos y lógica de interacción.
- Renderizado de la UI con JSX.
- Composición y uso de children.
- Exportar e importar en un componente consumidor.

3) Tipado de props y estados
- Opción A: JavaScript puro con PropTypes.
- Opción B: TypeScript (definición de interfaces/types para props y estado).
- Ejemplos de props obligatorias vs opcionales, valores por defecto, y validación.

4) Patrones de estilos y organización
- Estrategias de estilo: CSS Modules, styled-components, o estilos en línea.
- Organización de archivos recomendada (componente, estilos, pruebas).

5) Ejemplos prácticos y completos
- Ejemplo 1: Componente funcional simple con props (presentational).
- Ejemplo 2: Componente con estado y efectos (fetch básico simulado).
- Ejemplo 3: Componente con TypeScript y manejo de props complejas (lista de items, key, memoización).
- Ejemplo 4 (opcional): Componente que utiliza React.memo y useCallback para optimización.

6) Consideraciones de accesibilidad y buenas prácticas
- Semántica HTML, roles y ARIA cuando aplique.
- Foco, lectura de pantalla y manejo de eventos de teclado.
- Evitar anti-patterns comunes (ver sección de anti-patrones).

7) Rendimiento y optimización
- Cuándo usar React.memo, useCallback y useMemo.
- Evitar renders innecesarios y efectos con dependencias adecuadas.

8) Manejo de edge cases y errores habituales
- Props faltantes o nulos, valores por defecto.
- PropTypes/TypeScript para seguridad de tipos.
- Manejo de estados asíncronos y estados de carga/errores.
- Manejo de children opcionales y tipos compatibles.

9) Compatibilidad y entorno
- Supuestos: React 17+ o 18+, proyecto moderno (CRA, Vite, Next.js, etc.).
- Evitar dependencias externas innecesarias para el ejemplo básico.

Ejemplos de instrucciones ambiguas y cómo clarificarlas
- Ambigüo: "Crea un componente en React."
  Clarificación/planes posibles:
  - ¿Qué tipo de componente quieres? Presentacional o contenedor.
  - ¿Qué props debe recibir y qué debe renderizar?
  - ¿Debe usar hooks o un componente de clase?
  - ¿Qué estilo debe aplicar y si hay reglas de negocio a considerar?
  Versión aclarada: "Crea un componente funcional llamado TaskList que reciba un arreglo de tareas por props y renderice una lista. Incluye manejo básico de estado para buscar/filter y un prop opcional 'renderItem' para personalizar cada elemento."
- Ambiguo: "Hazlo rápido."
  Clarificación/planes posibles:
  - ¿Qué significa 'rápido' en este contexto: tiempo de carga, rendimiento de renderizado, o entrega de una solución mínima viable? 
  - ¿Necesita una versión mínima funcional ahora y mejoras posteriores? 
  Versión aclarada: "Proporciona una versión mínima viable con rendimiento razonable y una nota de mejora futura para optimización."
- Ambiguo: "Haz un formulario."
  Clarificación/planes posibles:
  - ¿Qué campos debe incluir? ¿Validación requerida? ¿Qué acción al enviar?
  - ¿Qué tipo de manejo de errores y feedback al usuario?
  Versión aclarada: "Haz un FormularioContact con campos nombre, email, mensaje, validación básica y manejo de envío con estado de éxito/fallo."

Formato de salida y estructura de la respuesta
- Presenta la respuesta en secciones bien definidas:
  - Resumen rápido (qué vas a cubrir).
  - Sección de conceptos clave.
  - Guía paso a paso (con subsecciones).
  - Ejemplos completos (Código JavaScript y/o TypeScript).
  - Consideraciones de accesibilidad y rendimiento.
  - Edge cases y anti-patrones.
  - Preguntas de clarificación para posibles instrucciones ambiguas (con ejemplos de respuestas para esas ambigüedades).
  - Resumen y checklist de verificación.
- Incluye fragmentos de código en bloques de tres backticks con el lenguaje indicado (```js, ```tsx).
- Longitud objetivo: flexible, pero típicamente entre 800 y 1800 palabras, ajustando para cubrir los ejemplos completos y variantes. Si se solicita {{nivel}}, adapta la profundidad manteniendo la claridad.
- Estilo y tono: claro, didáctico y directo. Evita jerga innecesaria y explica conceptos con analogías simples cuando sea apropiado.
- Notas de estilo: si se utiliza TypeScript, indica claramente cuándo es opcional vs obligatorio; si se utiliza PropTypes, señala su utilidad para proyectos sin TypeScript.

Requisitos técnicos y buenas prácticas a demostrar
- Enfoque moderno con componentes funcionales y hooks.
- Uso adecuado de props y Children.
- Tipado (TypeScript) o PropTypes cuando corresponda.
- Manejo de estado y efectos con useState/useEffect; mencionar dependencias de efectos.
- Patrones de renderizado eficiente: keys adecuadas, evitar mutaciones de props, memoización cuando aplica.
- Estrategias de estilos y organización de archivos.
- Accesibilidad razonable (focus management y uso de roles/labels).
- Pruebas básicas: sugerencias de pruebas unitarias simples para componentes (p. ej., pruebas de renderizado básico, pruebas de props).

Antipatróns y cosas a evitar
- Mutar props o estado de forma directa.
- Usar índices como keys cuando el orden pueda cambiar.
- Colocar lógica pesada en el render; mover a efectos o utilidades.
- Dependencias de efectos mal gestionadas que provoquen bucles.
- Dependencias globales o side effects fuera de useEffect cuando no son necesarias.

Indicaciones de salida
- Proporciona, cuando sea relevante, un ejemplo completo que combine todos los conceptos para un componente útil (por ejemplo, TaskList con búsqueda y filtrado, o un Formulario de contacto con validación).
- Incluye notas rápidas de buenas prácticas para que el lector pueda aplicar rápidamente lo aprendido en proyectos reales.

Elementos opcionales
- Si lo consideras útil, incluye un diagrama textual de la estructura del componente (composición de componentes) para ilustrar relaciones.
- Añade variantes para escenarios específicos (p. ej., componentes que deben funcionar en SSR).

Conjunto de variables de personalización
- {{nivel}}: básico, intermedio, avanzado.
- {{audiencia}}: estudiantes, desarrolladores junior, equipos de frontend.
- {{lenguaje}}: JavaScript, TypeScript (si aplica).

Expectativa de éxito
- El resultado debe permitir a un lector construir, entender y adaptar un componente React desde cero, comprender cuándo usar hooks, cómo tipar props y gestionar estados, y aplicar prácticas recomendadas de rendimiento y accesibilidad.