Font size
WorksheetsPage 1
Total questions: 47
Worksheet time: 24mins
Según el recuadro azul, ¿qué se coloca entre las etiquetas
El contenido children
La prop titulo
Los estilos inline del componente
Un hook de estado
De acuerdo con el código mostrado, ¿cuál es el tipo correcto para la prop children en CardProps?
ReactNode
JSX.Element
string
number
¿Qué tipo se especifica para la prop titulo en CardProps dentro del componente Card?
string
number
boolean
ReactNode
¿Dónde se renderiza la prop titulo dentro del JSX del componente Card según la captura de código?
Dentro de un elemento h2
Dentro de un párrafo p
Dentro de un botón
Dentro de un div con clase card-title
¿Qué valor de padding se aplica al contenedor que envuelve {children} en el componente Card?
15px
10px
8px
0px
Según la sección titulada Ejemplo 2, ¿qué afirma la tarjeta sobre la composición con children?
Una Card puede contener otros componentes
Una Card no puede contener componentes
children se ignora por defecto
Solo se admite texto plano dentro de Card
¿Desde qué archivo se indica que se ha pasado la información procesada en children?
Home.tsx
App.tsx
index.tsx
Card.tsx
Sin acceso al documento original, responde según esta instrucción: En Contenedor.jsx: Definición del Layout. Propiedad especial: children es una prop reservada en React que hace referencia automática a los elementos contenidos entre las etiquetas de apertura y cierre de un componente. ¿Qué describe correctamente la función de children en React según el contenido?
Una variable global que almacena el estado de la aplicación
Una prop que referencia el árbol de nodos internos encapsulado por un componente
Un método del ciclo de vida para montar componentes
Un hook que sustituye a useState
Según el texto: Punto de Inserción. Al desestructurar {children} en los argumentos y renderizarlo dentro del JSX, se define un "slot" o espacio dinámico. ¿Cuál es el efecto principal de este mecanismo?
Permite que el componente gestione estilo y estructura externa sin acoplarse al contenido específico
Impide que React capture nodos internos
Obliga a definir reglas de padding y bordes dentro del contenido
Convierte todos los elementos hijos en cadenas de texto
En App.jsx: Implementación y Consumo. Inyección de Contenido: al utilizar la sintaxis de etiquetas dobles (
Renderiza únicamente el primer nodo hijo y descarta el resto
Transforma los nodos internos en propiedades CSS
Encapsula los nodos internos en la prop children para su renderizado dentro del contenedor
Mueve los nodos a un contexto global compartido
En App.jsx: Implementación y Consumo. Abstracción de Diseño: el desarrollador que utiliza
Aumenta el acoplamiento entre contenedor y contenido
Reduce la reutilización del componente
Favorece la separación de responsabilidades entre estilo/estructura y contenido
Elimina la necesidad de escribir JSX
En el material se explica que, en React, las "props" son el mecanismo principal para pasar información entre componentes. ¿Qué describen las props según esta explicación?
Un mecanismo para pasar datos de un componente padre a uno hijo
Una API para gestionar el estado global de la aplicación
Un sistema para aplicar estilos CSS a componentes
Un conjunto de manejadores de eventos del navegador
En el archivo mostrado como Saludo.tsx, el componente declara el tipo de su prop edad con TypeScript. ¿Qué tipo se especifica para la prop edad?
number
string
boolean
any
Según el código de Inicio.tsx, ¿cuántas veces se renderiza el componente Saludo con diferentes props dentro del mismo contenedor?
Una vez
Dos veces
Tres veces
Cuatro veces
Tomando como referencia el componente Saludo de Saludo.tsx, ¿qué contenido muestra cuando recibe las props nombre y edad?
Un encabezado con "Hola, {nombre}!" y un párrafo con "Tienes {edad} años."
Solo un párrafo con el nombre en mayúsculas
Un listado con el historial de edades
Un botón que incrementa la edad
Según la captura de terminal mostrada, indica el comando utilizado para instalar la librería de enrutamiento de React.
npm install react-router-dom
npm add react-router
yarn add router-dom
npx create-react-router
En el fragmento de App.tsx, señala el componente que envuelve todo el conjunto de rutas de la aplicación.
BrowserRouter
Routes
Route
Link
En el código de App.tsx, ¿qué ruta se configura para renderizar el componente Contact?
/contacto
/contact
/about
/contactos
En App.tsx, ¿qué elementos se importan desde 'react-router-dom'? Selecciona todas las opciones correctas.
BrowserRouter
Routes
Route
Link
En el componente Header.tsx, ¿qué entidad se importa desde 'react-router-dom' para crear enlaces de navegación entre rutas?
Link
NavLink
Redirect
Navigate
En App.tsx, ¿qué componentes se importan desde './pages'? Selecciona todas las opciones correctas.
Home
Contact
Header
App
Según la captura de pantalla, ¿qué tecnología se menciona explícitamente para aprender la arquitectura de componentes? El texto visible dice: "Aprendiendo la arquitectura de componentes en React."
React
Vue
Angular
Svelte
¿Cuál es el título principal que aparece en la página mostrada en la captura?
Mi Empresa DAM
Proyecto DESIN
Inicio de la aplicación
Componentes reutilizables
¿Qué indica la barra del navegador sobre el host y puerto donde se ejecuta la aplicación? En la esquina superior derecha se lee la dirección.
localhost:5173
localhost:3000
127.0.0.1:8080
0.0.0.0:4200
¿Qué curso o grupo se menciona en el pie de página de la captura? El pie de página incluye el año y el grupo.
Alumnos de 2º de DAM
Profesorado de 1º de DAW
Estudiantes de 3º de ESO
Equipo de 4º de Ingeniería
¿Qué tipo de contenido se indica como principal en la página mostrada? El texto central lo especifica.
Contenido principal de la página de Inicio
Listado de contactos
Formulario de registro
Panel de administración
Según el texto bajo la captura, ¿en qué archivo se juntan todos los componentes reutilizables? El enunciado dice: "Y el lugar donde todo encaja es en el Home.tsx, siendo donde juntamos todos los componentes reutilizables".
Home.tsx
App.js
index.html
Main.css
¿Qué año aparece en el aviso de copyright del pie de página de la captura?
2026
2024
2022
2030
En el archivo Contact.tsx mostrado, ¿qué componentes se importan desde ../components al inicio del archivo?
Header y Footer
Nav y Sidebar
Header y Navbar
Footer y Modal
En Contact.tsx, ¿qué elemento envuelve el contenido principal de la página de contacto que incluye el Header, la sección y el Footer?
main
section
div con className "App"
article
Dentro del formulario de Contact.tsx, ¿qué tipo de botón se utiliza para enviar los datos?
submit
button
reset
image
Según el código de App.tsx mostrado, ¿qué componente se renderiza dentro del contenedor con className "App"?
Contact
Header
Footer
Home
En App.tsx, ¿qué ruta exacta se utiliza en la importación del componente de la página de contacto?
'./pages/Contact'
'./components/Contact'
'../pages/Contact'
'./pages/contact.ts'
¿Cuál es el valor del atributo className del div contenedor en App.tsx?
"App"
"Main"
"Container"
"Root"
En la captura de la página web mostrada, ¿cuál es el título principal que aparece en la parte superior?
Mi Empresa DAM
Contacto
Asignatura DESIN
Formulario de dudas
Según el texto de la sección «Contacto», ¿para qué asignatura se indica que puedes enviar dudas?
DESIN
DAM
Diseño Web
Programación
En el formulario mostrado, selecciona todos los marcadores de posición que aparecen en los campos.
Tu nombre
Tu correo
Mensaje
Asunto
¿Qué acción indica el texto del botón del formulario en la captura?
Enviar
Cancelar
Guardar borrador
Registrarse
¿Qué año figura en el pie de página de la página web mostrada?
2024
2025
2026
2027
¿Quiénes se mencionan en el pie de página junto al símbolo de copyright?
Alumnos de 2º de DAM
Profesores de DESIN
Equipo de Mi Empresa DAM
Usuarios registrados
¿Qué host aparece en la barra de direcciones del navegador en la captura?
localhost:5173
127.0.0.1:3000
example.com
localhost:8080
Según la guía, ¿a qué sitio web se accede como primer paso para instalar React en Windows?
nodejs.org
reactjs.org
python.org
microsoft.com
¿Qué formato de instalador se indica descargar para Windows desde la página de Node.js?
Windows Installer (.msi)
Standalone Binary (.zip)
Paquete .deb para Linux
Imagen .dmg para macOS
¿Qué comandos de terminal se sugieren para verificar que la instalación de Node.js y npm se completó? Selecciona todas las que correspondan.
node -v
npm -v
npx create-react-app
git --version
Si Windows impide la ejecución de scripts por defecto y aparece un error al ejecutar npm, ¿qué comando debe ejecutarse para permitir scripts firmados para el usuario actual?
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
Set-ExecutionPolicy Unrestricted -Scope MachinePolicy
disable-security
chmod +x npm.ps1
En la descripción visible del sitio de Node.js, ¿qué afirmación caracteriza correctamente a Node.js?
Es un entorno de ejecución de JavaScript libre, de código abierto y multiplataforma que permite crear servidores, aplicaciones web, herramientas de línea de comandos y scripts.
Es únicamente un navegador web para ejecutar JavaScript del lado del cliente.
Es una base de datos relacional diseñada para almacenar scripts.
Es un framework gráfico para diseñar interfaces sin usar JavaScript.
Al elegir la arquitectura del instalador de Windows en la descarga de Node.js, ¿qué variante aparece seleccionada en la captura?
x64
ARM64
x86
IA-64
