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 orientarte;
- **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
Crea una tarjeta de producto simple usando JSX y muéstrala 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. Utiliza llaves `{}`.
2. El atributo `alt` debe contener la cadena `"Computer"` como valor. Enciérralo entre comillas dobles.
3. El atributo `width` debe contener el número `256` como valor. Utiliza llaves `{}`.
3. Asegúrate de que los elementos `h3`, `span` y `p` tengan los valores correctos.

Explora los fundamentos de la creación de interfaces de usuario con React. Enfócate en componentes, JSX, flujo de datos, estado y efectos secundarios utilizados en aplicaciones React cotidianas.

Explora qué es React y cómo renderiza interfaces de usuario. Enfoque en componentes, sintaxis JSX y visualización de elementos en pantalla.

Profundización en el paso de datos entre componentes y el control de la salida de la interfaz de usuario. Enfoque en props, renderizado condicional y renderizado de listas de datos.

Aprenda cómo las interacciones del usuario y los datos externos modifican la interfaz de usuario a lo largo del tiempo. Enfoque en la gestión del estado y el manejo de efectos secundarios con hooks de React.

Explora formas comunes de estilizar componentes de React. Enfoque en la aplicación de estilos mediante estilos en línea y CSS externo.

Aprenda cómo ejecutar un proyecto React y comprender su estructura. Enfoque en iniciar un proyecto con Vite y navegar por los archivos del proyecto.

Desafío: Renderizar un Elemento en React

Cómo trabajar con CodeSandbox

Tarea: Crear una tarjeta de producto

Desafío: Renderizar un Elemento en React

Cómo trabajar con CodeSandbox

Tarea: Crear una tarjeta de producto