Ejercicio de programación con React: Componentes funcionales
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:
- El componente debe llamarse
MensajeDiario
. - Debe recibir una propiedad
mensaje
. - 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 propiedadmensaje
.
- Un
Instrucciones:
- Define el componente
MensajeDiario
utilizando la sintaxis de componentes funcionales. - Utiliza la desestructuración de
props
para obtener el valor demensaje
. - 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;
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.
Props y manejo de datos entre componentes
Definición y manejo de rutas
Conocimiento general de React
Galería de imágenes en React
Eventos en React
Gestor de tareas con React
Custom Hooks para servicios compartidos
Nuevos métodos create de React Router
Solicitudes HTTP con Fetch API
Instalar React y crear nuevo proyecto
Renderizado condicional
Introducción a JSX
Manejo de clases y estilos
Introducción a React Router
Solicitudes HTTP con Axios
Estado local con useState y useReducer
Estado global con Redux Toolkit
Estado y ciclo de vida de los componentes
Hooks para gestión de estado complejo y contexto
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
Componentes funcionales
Componentes