React 19
Ejercicios de React sobre Componentes
5 ejercicios de Componentes 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
¿Cuál de estos nombres es válido para un componente de React?
- AHeader
- Bheader
- Cheader-bar
- D_header
Ver la respuesta
Respuesta: A. Header
Los componentes empiezan por mayúscula. En JSX, <header> en minúscula se interpreta como la etiqueta HTML, no como tu componente.
2 · Elige la respuesta · nivel 1
¿Qué devuelve un componente de función de React?
function Welcome() { return <h1>Bienvenido</h1>;}- AEl JSX que se pinta en pantalla
- BUn string con HTML
- CNada, pinta directamente en el DOM
- DUn fichero CSS
Ver la respuesta
Respuesta: A. El JSX que se pinta en pantalla
Un componente es una función que devuelve JSX. React se encarga de convertirlo en elementos del DOM.
3 · Encuentra el fallo · nivel 1
No se ve Mi perfil y React avisa: The tag <profile> is unrecognized in this browser. ¿Qué línea tiene el fallo?
1function Profile() {2 return <p>Mi perfil</p>;3}4 5export default function App() {6 return <profile />;7}Ver la respuesta
El fallo está en la línea 6:
return <profile />;Se arregla conreturn <Profile />;.JSX distingue mayúsculas: <profile> en minúscula se interpreta como una etiqueta HTML (que no existe), no como el componente Profile.
4 · Completa el hueco · nivel 1
Completa un componente que muestre un título.
___ Title() { ___ <h1>Mi tienda</h1>;}- function
- return
- class
Ver la respuesta
Respuesta: function · return
function Title() { return <h1>Mi tienda</h1>;}Un componente de función se declara con function y devuelve su JSX con return.
5 · Ordena las líneas · nivel 1
Ordena un componente que muestre un saludo.
- print(<p>Hola</p>);
- return <p>Hola</p>;
- }
- function Hello() {
Ver la respuesta
El orden correcto:
function Hello() { return <p>Hola</p>;}Sobran: print(<p>Hola</p>);
Un componente es una función que devuelve JSX con return. print no existe en JavaScript.