Micro-plan de clase con explicación y actividad práctica sobre componentes, props y useState
5.1 Concepto tecnológico trabajado: [Espacio de respuesta] Explique con sus propias palabras qué es un componente en React, para qué sirven las props y cuál es la función del Hook useState. 5.2 Analogía o estrategia didáctica para nivel medio: [Espacio de respuesta] Describa una analogía de la vida escolar o cotidiana que utilizaría para explicar el concepto de "componentes reutilizables con datos personalizados (props)" a estudiantes de secundaria. 5.3 Actividad de aprendizaje sugerida (15-20 min): [Espacio de respuesta] Diseñe una micro-actividad práctica donde sus propios alumnos de nivel medio modifiquen un componente existente para adaptarlo a otra materia (ej. Ciencias o Matemática). 5.4 Evidencia de evaluación sencilla: [Espacio de respuesta] Proponga un criterio rápido o lista de cotejo de 3 puntos para calificar la actividad anterior en el aula.
Cómo fue en el aula
Todavía nadie ha contado cómo le fue con este recurso.
Micro-plan de clase con explicación y actividad práctica sobre componentes, props y useState
Objetivo de aprendizaje
Al finalizar la clase, los estudiantes serán capaces de explicar con sus propias palabras qué es un componente en React, para qué sirven las props y cuál es la función del Hook useState, además de modificar un componente React para adaptarlo a una materia diferente, aplicando correctamente props y useState.
Materiales y recursos
- Computadoras con entorno básico para editar código React (editor de texto como VSCode o similar).
- Archivo base con un componente React simple ya creado (ejemplo: componente que muestra una tarjeta con título y descripción).
- Pizarra y marcador o proyector para la explicación.
- Lista de cotejo impresa para evaluación rápida.
Secuencia de la actividad
-
Introducción y explicación breve (10 minutos)
- Docente: Explica qué es un componente en React: una pieza reutilizable que representa una parte de la interfaz, como un bloque o tarjeta.
- Define props como los datos personalizados que se le pasan al componente para que muestre información diferente sin cambiar su estructura.
- Explica useState como un mecanismo para que el componente pueda "recordar" información interna que puede cambiar con la interacción del usuario.
- Presenta la analogía: “Un componente es como una plantilla para hacer carteles en la escuela. Las props son la información que escribes en cada cartel (nombre, fecha, tema), y useState es como si pudieras cambiar el color del cartel según lo que decidas en clase.”
-
Micro-actividad práctica: Modificación de un componente React (15-20 minutos)
- Docente: Entrega a los estudiantes el archivo base con un componente React que muestra una tarjeta con título y descripción para una materia (ejemplo: Tecnología).
- Indica que deben modificar los props para adaptar el componente a otra materia, por ejemplo, Ciencias o Matemática, cambiando el título, descripción y utilizando useState para agregar una función sencilla, como cambiar el estado de “favorito” al hacer clic en un botón.
- Estudiantes: Modifican el componente para cambiar textos y agregar un botón que cambia el estado interno usando useState (ejemplo: botón que cambia texto de “Agregar” a “Quitado”).
- Docente: Supervisa, apoya con dudas y promueve que compartan cambios con un compañero para comparar resultados.
-
Cierre y evaluación formativa (5 minutos)
- Docente: Pide a algunos estudiantes explicar en sus palabras qué hacen los props y el useState en su componente modificado.
- Recoge la lista de cotejo para valoración rápida.
Posibles obstáculos y cómo manejarlos
- Dificultad para entender props: Usar la analogía de la plantilla y ejemplos concretos en pantalla para mostrar cómo cambia la información sin alterar la estructura.
- Problemas técnicos con el entorno React: Tener un ejemplo en vivo o video corto preparado para mostrar en caso de falla de equipos o conectividad.
- Confusión con useState: Explicar con un ejemplo visual sencillo (botón que cambia texto) y guiar paso a paso la implementación.
- Tiempo limitado: Priorizar que cada estudiante modifique al menos el título y un cambio de estado simple, evitando complicaciones extras.
Lista de cotejo para evaluación rápida
| Criterio | Cumple (Sí/No) | Observaciones |
|---|---|---|
| Modificó correctamente los props para personalizar el componente a otra materia. | ||
| Implementó un uso funcional básico del hook useState (por ejemplo, cambio de texto o estado con botón). | ||
| Explicó con sus propias palabras la función de componente, props y useState. |
Micro-plan de implementación
Preparación del aula y materiales: Antes de la clase, preparar las computadoras con el archivo base React listo para editar y probar. Verificar que el entorno funcione correctamente. Preparar la lista de cotejo impresa para cada estudiante o grupo.
Inicio (10 min): El docente explica brevemente los conceptos clave (componente, props, useState) usando la analogía de la plantilla para carteles escolares. Utiliza pizarra o proyector para mostrar ejemplos visuales simples.
Actividad práctica (15-20 min): Los estudiantes trabajan individualmente o en parejas para modificar el componente React entregado, adaptándolo a otra materia. Cambian los datos en props y agregan una función con useState para cambiar un estado (por ejemplo, activar/desactivar un botón). El docente circula resolviendo dudas y promoviendo el intercambio de ideas.
Cierre (5 min): Algunos estudiantes comparten en voz alta qué hicieron y qué significa cada concepto. El docente aplica la lista de cotejo para evaluar rápidamente los resultados. Se refuerzan los conceptos clave.
Tips de contingencia: Si hay fallas técnicas, mostrar un video corto o demo en proyector con el componente funcionando y modificaciones realizadas para que los estudiantes sigan la explicación verbal y visual. También se puede realizar una actividad escrita para explicar props y useState con ejemplos cotidianos.