Componentes funcionales

En este reto de programación, tu objetivo es crear un componente funcional al que llamaremos MensajeDiario, deberá recibir una propiedad (props) denominada mensaje y mostrar su valor dentro de un párrafo (<p>). Adicionalmente, el componente incluirá un encabezado (header) con un texto estático "Mensaje del día".

Este reto está diseñado para que practiques y profundices en el uso de componentes funcionales en React, así como en la manipulación y uso de propiedades (props) dentro de los mismos. La estructura del componente te permitirá ver lo sencillo y eficiente que es trabajar con componentes funcionales.

Requerimientos:

1. El componente debe llamarse MensajeDiario.
2. Debe recibir una propiedad mensaje.
3. Debe devolver un div que contenga:
   • Un header con el texto estático "Mensaje del día".
   • Un párrafo (<p>) que muestre el valor de la propiedad mensaje.

Instrucciones:

1. Define el componente MensajeDiario utilizando la sintaxis de componentes funcionales.
2. Utiliza la desestructuración de props para obtener el valor de mensaje.
3. Asegúrate de que el componente sea exportado por defecto.

Ejemplo de uso:

import MensajeDiario from './MensajeDiario';

const App = () => (
  <div>
    <MensajeDiario mensaje="¡Hoy es un gran día para aprender React!" />
  </div>
);

export default App;