Ejercicio de programación con React: Componentes funcionales

Código
Puntuación
0h 15m

React: Ejercicio para crear un componente funcional que muestra un mensaje personalizado en React. Practica con componentes funcionales y props.

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;
Empezar ejercicio de programación

Todos los ejercicios de programación de React

Evalúa tus conocimientos con ejercicios de programación en React de tipo Test, Puzzle, Código y Proyecto con VSCode.

Certificados de superación de React

Supera todos los retos de React y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.

Tutorial para resolver este ejercicio de programación

React

React

Componentes funcionales

Componentes

Otros tutoriales de programación con React