Todos los desafíos pueden aparecer incompletos por defecto. Incluyen secciones vacías donde es necesario agregar el código requerido. Una vez que todas las partes faltantes se completen correctamente, el código finalizado se mostrará en la página en vivo.

Cada desafío incluye dos botones de ayuda:
- **Pista**: muestra pequeñas pistas para guiarte;
- **Solución**: abre la versión completa en una nueva pestaña.

Nota

También puedes ver el breve video tutorial a continuación para aprender cómo trabajar con CodeSandbox.

## Cómo trabajar con CodeSandbox

## Tarea: Crear una tarjeta de producto
Crear una tarjeta de producto simple usando JSX y renderizarla en el DOM. La tarjeta de producto debe incluir:
1. La imagen del producto (elemento `img`).
   - El atributo `src` debe ser igual a la variable `imageUrl`.
   - El atributo `alt` debe ser igual a la cadena `Computer`.
   - El atributo `width` debe ser igual a `256`.
2. El título del producto (elemento `h3`).
   - Su contenido de texto debe ser `Computer`.
3. El precio del producto (elemento `span`).
   - Su contenido de texto debe ser `Price: $129.99`.
4. La descripción del producto (elemento `p`).
   - Su contenido de texto debe ser `New Model`.


1. El atributo `src` debe contener la variable `imageUrl` como valor. Utilizar llaves `{}`.
2. El atributo `alt` debe contener la cadena `"Computer"` como valor. Encerrar entre comillas dobles.
3. El atributo `width` debe contener el número `256` como valor. Utilizar llaves `{}`.
3. Verificar que los elementos `h3`, `span` y `p` tengan los valores correctos.

Explora cómo se utiliza React para construir interfaces de usuario dinámicas mediante componentes, JSX y props. Gestión del estado y efectos secundarios con hooks, renderizado de listas e interfaces condicionales, y aplicación de estilos a componentes reales. Configuración de un proyecto React con Vite y comprensión de la estructura de las aplicaciones.

Desafío: Renderizar un Elemento en React

Cómo trabajar con CodeSandbox

Tarea: Crear una tarjeta de producto