streakode

React 19

Ejercicios de React para practicar cada día

En React los fallos más caros vienen del estado y los efectos. Los ejercicios te enseñan a leer un componente y anticipar cuándo se renderiza y qué valor tiene cada cosa.

Prueba cuatro ejercicios sin cuentaCrear cuenta gratis

Así son los ejercicios de React

Estos son 4 del nivel 1. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.

  1. Ejemplo 1 · Estado

    Nada más pintar el componente, ¿qué número se muestra?

    function Likes() {
  const [likes, setLikes] = useState(3);
  return <p>{likes}</p>;
}
    • A3
    • B0
    • Cundefined
    • DNada
    Ver la respuesta

    Respuesta: A. El argumento de useState es el valor inicial. likes vale 3 hasta que se llame a setLikes.

  2. Ejemplo 2 · JSX

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

  3. Ejemplo 3 · Props

    ¿Qué recibe Card en children?

    function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card><p>Hola</p></Card>
    • AEl <p>Hola</p> que va entre las etiquetas
    • BUn array vacío
    • CEl texto "children"
    • Dundefined: hay que pasarlo como prop explícita
    Ver la respuesta

    Respuesta: A. Lo que va entre la etiqueta de apertura y la de cierre llega en la prop children. Es la forma de crear contenedores reutilizables como tarjetas o modales.

  4. Ejemplo 4 · Componentes

    ¿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. Un componente es una función que devuelve JSX. React se encarga de convertirlo en elementos del DOM.

Qué vas a practicar

La ruta de React tiene 60 ejercicios repartidos en 17 temas, con cuatro formatos: predecir la salida, completar un hueco, encontrar el fallo y ordenar líneas. El estado y los efectos son el grueso de la ruta, junto con props, JSX, listas y lo nuevo de React 19.

  • Estado
  • React 19
  • JSX
  • Efectos
  • Props
  • Componentes
  • Listas
  • Eventos
  • Carga diferida
  • Contexto
  • Formularios
  • Hooks propios
  • Módulos
  • Refs
  • Reglas de los hooks
  • Renderizado condicional
  • Rendimiento

Un minuto al día, sin perder la racha

Cada día haces una sesión de cinco ejercicios. Lo que fallas vuelve justo cuando estás a punto de olvidarlo, cada acierto suma XP en la ruta y puedes compararte con tus amigos en las ligas semanales. Funciona en el navegador, también en el móvil, y es gratis.

Empezar con React

Otras rutas