wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

Page 1

Total questions: 47

Worksheet time: 24mins

Name
Class
Date
1.

Según el recuadro azul, ¿qué se coloca entre las etiquetas ...aquí...?

a)

El contenido children

b)

La prop titulo

c)

Los estilos inline del componente

d)

Un hook de estado

2.

De acuerdo con el código mostrado, ¿cuál es el tipo correcto para la prop children en CardProps?

a)

ReactNode

b)

JSX.Element

c)

string

d)

number

3.

¿Qué tipo se especifica para la prop titulo en CardProps dentro del componente Card?

a)

string

b)

number

c)

boolean

d)

ReactNode

4.

¿Dónde se renderiza la prop titulo dentro del JSX del componente Card según la captura de código?

a)

Dentro de un elemento h2

b)

Dentro de un párrafo p

c)

Dentro de un botón

d)

Dentro de un div con clase card-title

5.

¿Qué valor de padding se aplica al contenedor que envuelve {children} en el componente Card?

a)

15px

b)

10px

c)

8px

d)

0px

6.

Según la sección titulada Ejemplo 2, ¿qué afirma la tarjeta sobre la composición con children?

a)

Una Card puede contener otros componentes

b)

Una Card no puede contener componentes

c)

children se ignora por defecto

d)

Solo se admite texto plano dentro de Card

7.

¿Desde qué archivo se indica que se ha pasado la información procesada en children?

a)

Home.tsx

b)

App.tsx

c)

index.tsx

d)

Card.tsx

8.

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?

a)

Una variable global que almacena el estado de la aplicación

b)

Una prop que referencia el árbol de nodos internos encapsulado por un componente

c)

Un método del ciclo de vida para montar componentes

d)

Un hook que sustituye a useState

9.

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?

a)

Permite que el componente gestione estilo y estructura externa sin acoplarse al contenido específico

b)

Impide que React capture nodos internos

c)

Obliga a definir reglas de padding y bordes dentro del contenido

d)

Convierte todos los elementos hijos en cadenas de texto

10.

En App.jsx: Implementación y Consumo. Inyección de Contenido: al utilizar la sintaxis de etiquetas dobles ( ... ), React captura el árbol de nodos internos y lo encapsula en la prop children. ¿Cuál es la descripción correcta de este proceso?

a)

Renderiza únicamente el primer nodo hijo y descarta el resto

b)

Transforma los nodos internos en propiedades CSS

c)

Encapsula los nodos internos en la prop children para su renderizado dentro del contenedor

d)

Mueve los nodos a un contexto global compartido

11.

En App.jsx: Implementación y Consumo. Abstracción de Diseño: el desarrollador que utiliza no necesita conocer reglas de CSS ni la lógica de padding o bordes internos; inyecta el contenido necesario manteniendo separación de responsabilidades. ¿Qué ventaja principal se señala?

a)

Aumenta el acoplamiento entre contenedor y contenido

b)

Reduce la reutilización del componente

c)

Favorece la separación de responsabilidades entre estilo/estructura y contenido

d)

Elimina la necesidad de escribir JSX

12.

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?

a)

Un mecanismo para pasar datos de un componente padre a uno hijo

b)

Una API para gestionar el estado global de la aplicación

c)

Un sistema para aplicar estilos CSS a componentes

d)

Un conjunto de manejadores de eventos del navegador

13.

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?

a)

number

b)

string

c)

boolean

d)

any

14.

Según el código de Inicio.tsx, ¿cuántas veces se renderiza el componente Saludo con diferentes props dentro del mismo contenedor?

a)

Una vez

b)

Dos veces

c)

Tres veces

d)

Cuatro veces

15.

Tomando como referencia el componente Saludo de Saludo.tsx, ¿qué contenido muestra cuando recibe las props nombre y edad?

a)

Un encabezado con "Hola, {nombre}!" y un párrafo con "Tienes {edad} años."

b)

Solo un párrafo con el nombre en mayúsculas

c)

Un listado con el historial de edades

d)

Un botón que incrementa la edad

16.

Según la captura de terminal mostrada, indica el comando utilizado para instalar la librería de enrutamiento de React.

a)

npm install react-router-dom

b)

npm add react-router

c)

yarn add router-dom

d)

npx create-react-router

17.

En el fragmento de App.tsx, señala el componente que envuelve todo el conjunto de rutas de la aplicación.

a)

BrowserRouter

b)

Routes

c)

Route

d)

Link

18.

En el código de App.tsx, ¿qué ruta se configura para renderizar el componente Contact?

a)

/contacto

b)

/contact

c)

/about

d)

/contactos

19.

En App.tsx, ¿qué elementos se importan desde 'react-router-dom'? Selecciona todas las opciones correctas.

a)

BrowserRouter

b)

Routes

c)

Route

d)

Link

20.

En el componente Header.tsx, ¿qué entidad se importa desde 'react-router-dom' para crear enlaces de navegación entre rutas?

a)

Link

b)

NavLink

c)

Redirect

d)

Navigate

21.

En App.tsx, ¿qué componentes se importan desde './pages'? Selecciona todas las opciones correctas.

a)

Home

b)

Contact

c)

Header

d)

App

22.

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."

a)

React

b)

Vue

c)

Angular

d)

Svelte

23.

¿Cuál es el título principal que aparece en la página mostrada en la captura?

a)

Mi Empresa DAM

b)

Proyecto DESIN

c)

Inicio de la aplicación

d)

Componentes reutilizables

24.

¿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.

a)

localhost:5173

b)

localhost:3000

c)

127.0.0.1:8080

d)

0.0.0.0:4200

25.

¿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.

a)

Alumnos de 2º de DAM

b)

Profesorado de 1º de DAW

c)

Estudiantes de 3º de ESO

d)

Equipo de 4º de Ingeniería

26.

¿Qué tipo de contenido se indica como principal en la página mostrada? El texto central lo especifica.

a)

Contenido principal de la página de Inicio

b)

Listado de contactos

c)

Formulario de registro

d)

Panel de administración

27.

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".

a)

Home.tsx

b)

App.js

c)

index.html

d)

Main.css

28.

¿Qué año aparece en el aviso de copyright del pie de página de la captura?

a)

2026

b)

2024

c)

2022

d)

2030

29.

En el archivo Contact.tsx mostrado, ¿qué componentes se importan desde ../components al inicio del archivo?

a)

Header y Footer

b)

Nav y Sidebar

c)

Header y Navbar

d)

Footer y Modal

30.

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?

a)

main

b)

section

c)

div con className "App"

d)

article

31.

Dentro del formulario de Contact.tsx, ¿qué tipo de botón se utiliza para enviar los datos?

a)

submit

b)

button

c)

reset

d)

image

32.

Según el código de App.tsx mostrado, ¿qué componente se renderiza dentro del contenedor con className "App"?

a)

Contact

b)

Header

c)

Footer

d)

Home

33.

En App.tsx, ¿qué ruta exacta se utiliza en la importación del componente de la página de contacto?

a)

'./pages/Contact'

b)

'./components/Contact'

c)

'../pages/Contact'

d)

'./pages/contact.ts'

34.

¿Cuál es el valor del atributo className del div contenedor en App.tsx?

a)

"App"

b)

"Main"

c)

"Container"

d)

"Root"

35.

En la captura de la página web mostrada, ¿cuál es el título principal que aparece en la parte superior?

a)

Mi Empresa DAM

b)

Contacto

c)

Asignatura DESIN

d)

Formulario de dudas

36.

Según el texto de la sección «Contacto», ¿para qué asignatura se indica que puedes enviar dudas?

a)

DESIN

b)

DAM

c)

Diseño Web

d)

Programación

37.

En el formulario mostrado, selecciona todos los marcadores de posición que aparecen en los campos.

a)

Tu nombre

b)

Tu correo

c)

Mensaje

d)

Asunto

38.

¿Qué acción indica el texto del botón del formulario en la captura?

a)

Enviar

b)

Cancelar

c)

Guardar borrador

d)

Registrarse

39.

¿Qué año figura en el pie de página de la página web mostrada?

a)

20242024

b)

20252025

c)

20262026

d)

20272027

40.

¿Quiénes se mencionan en el pie de página junto al símbolo de copyright?

a)

Alumnos de 2º de DAM

b)

Profesores de DESIN

c)

Equipo de Mi Empresa DAM

d)

Usuarios registrados

41.

¿Qué host aparece en la barra de direcciones del navegador en la captura?

a)

localhost:5173

b)

127.0.0.1:3000

c)

example.com

d)

localhost:8080

42.

Según la guía, ¿a qué sitio web se accede como primer paso para instalar React en Windows?

a)

nodejs.org

b)

reactjs.org

c)

python.org

d)

microsoft.com

43.

¿Qué formato de instalador se indica descargar para Windows desde la página de Node.js?

a)

Windows Installer (.msi)

b)

Standalone Binary (.zip)

c)

Paquete .deb para Linux

d)

Imagen .dmg para macOS

44.

¿Qué comandos de terminal se sugieren para verificar que la instalación de Node.js y npm se completó? Selecciona todas las que correspondan.

a)

node -v

b)

npm -v

c)

npx create-react-app

d)

git --version

45.

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?

a)

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

b)

Set-ExecutionPolicy Unrestricted -Scope MachinePolicy

c)

disable-security

d)

chmod +x npm.ps1

46.

En la descripción visible del sitio de Node.js, ¿qué afirmación caracteriza correctamente a Node.js?

a)

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.

b)

Es únicamente un navegador web para ejecutar JavaScript del lado del cliente.

c)

Es una base de datos relacional diseñada para almacenar scripts.

d)

Es un framework gráfico para diseñar interfaces sin usar JavaScript.

47.

Al elegir la arquitectura del instalador de Windows en la descarga de Node.js, ¿qué variante aparece seleccionada en la captura?

a)

x64

b)

ARM64

c)

x86

d)

IA-64