React 19
Ejercicios de React sobre JSX
8 ejercicios de JSX en React. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.
1 · Elige la respuesta · nivel 1
¿Qué se muestra en pantalla?
const name = "Ana";return <h1>Hola, {name.toUpperCase()}</h1>;- AHola, ANA
- BHola, {name.toUpperCase()}
- CHola, name.toUpperCase()
- DUn error: no se pueden llamar funciones en JSX
Ver la respuesta
Respuesta: A. Hola, ANA
Entre llaves, JSX evalúa cualquier expresión de JavaScript y muestra su resultado. No admite sentencias como if o for, pero sí llamadas, ternarios y map.
2 · Elige la respuesta · nivel 1
¿Cómo se aplica una clase CSS a un elemento en JSX?
- AclassName="card"
- Bclass="card"
- CcssClass="card"
- Dstyle="card"
Ver la respuesta
Respuesta: A. className="card"
JSX se convierte en JavaScript y class es una palabra reservada, así que la prop se llama className. style recibe un objeto, no un texto.
3 · Elige la respuesta · nivel 1
¿Para qué sirve <> ... </> en este código?
return ( <> <h1>Título</h1> <p>Texto</p> </>);- AAgrupa varios elementos sin añadir un nodo extra al DOM
- BCrea un div vacío
- CEs un comentario de JSX
- DMarca el componente como privado
Ver la respuesta
Respuesta: A. Agrupa varios elementos sin añadir un nodo extra al DOM
Un componente devuelve un único elemento raíz. El fragmento agrupa varios sin meter un div de más. Si hace falta una key, se escribe <Fragment key={...}>.
4 · Elige la respuesta · nivel 1
Si name vale "Marta", ¿qué se muestra?
<p>Hola, {name}</p>- AHola, Marta
- BHola, {name}
- CHola, name
- DHola,
Ver la respuesta
Respuesta: A. Hola, Marta
Las llaves en JSX insertan el valor de una expresión de JavaScript. Sin llaves se mostraría el texto literal.
5 · Elige la respuesta · nivel 1
¿Qué se muestra en pantalla?
<p>Total: {2 * 5}</p>- ATotal: 10
- BTotal: 2 * 5
- CTotal: {2 * 5}
- DTotal:
Ver la respuesta
Respuesta: A. Total: 10
Dentro de las llaves va cualquier expresión de JavaScript, y React muestra su resultado.
6 · Elige la respuesta · nivel 1
¿Por qué da error este componente?
function Card() { return ( <h2>Título</h2> <p>Texto</p> );}- ADevuelve dos elementos sin un contenedor común
- BFalta importar h2
- CLos párrafos no se pueden usar en JSX
- DCard tiene que empezar en minúscula
Ver la respuesta
Respuesta: A. Devuelve dos elementos sin un contenedor común
Un componente devuelve un solo elemento raíz. Hay que envolverlos en un <div> o en un fragmento <>...</>.
7 · Encuentra el fallo · nivel 1
React avisa: Invalid DOM property `class`. ¿Qué línea tiene el fallo?
1function Alert() {2 return (3 <div class="alert">4 Cuidado5 </div>6 );7}Ver la respuesta
El fallo está en la línea 3:
<div class="alert">Se arregla con<div className="alert">.class es una palabra reservada de JavaScript, así que en JSX la clase CSS se pone con className.
8 · Encuentra el fallo · nivel 1
En pantalla sale literalmente user.name en vez del nombre. ¿Qué línea tiene el fallo?
1function User({ user }) {2 return (3 <p>Usuario: user.name</p>4 );5}Ver la respuesta
El fallo está en la línea 3:
<p>Usuario: user.name</p>Se arregla con<p>Usuario: {user.name}</p>.Sin llaves, JSX lo trata como texto. Para mostrar el valor de una expresión hay que envolverla en { }.