# Tarea

Crear un componente reutilizable `StatusCard` que muestre diferentes mensajes según la prop `online`.

El componente `StatusCard` debe incluir:

1. Un encabezado (elemento `h2`). Su contenido de texto debe mostrar la prop `name`.

2. Un párrafo (elemento `p`).

* Si la prop `online` es `true`, mostrar `Online`;
* De lo contrario, mostrar `Offline`.

El componente `App` ya renderiza varios componentes `StatusCard` con diferentes props.


## Código inicial
Abre el proyecto inicial a continuación y completa las partes faltantes del componente.

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-03-starter-show-user-status-messages?file=src%2FApp.jsx)



## Solución

Puedes comparar tu resultado con la solución final a continuación.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-03-solution-show-user-status-messages?file=src%2FApp.jsx)

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.

¿Cuál es el propósito principal de las props en React?

¿Qué método se utiliza con mayor frecuencia para renderizar una lista de elementos en React?

¿Por qué es importante la prop key al renderizar listas?

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: Mostrar mensajes de estado del usuario

Tarea

Código inicial

Solución