Ejercicio de programación con React: Introducción a JSX
Código
0h 10m
React: Introducción a JSX y creación de componentes funcionales personalizados. Ejercicio para aprender a utilizar JSX para crear un componente React.
En este reto, se te invita a trabajar con JSX, una extensión de sintaxis para JavaScript comúnmente utilizada en React. El objetivo es desarrollar un componente funcional llamado Saludo
que acepte una propiedad nombre
y muestre un mensaje de saludo personalizado en un elemento <h1>
.
Instrucciones
- Crea un componente funcional de React llamado
Saludo
. - El componente
Saludo
debe aceptar una propiedad llamadanombre
. - Utiliza JSX para renderizar un elemento
<h1>
que contenga el texto "Hola, nombre", dondenombre
es el valor de la propiedadnombre
. - Asegúrate de que la etiqueta
<h1>
esté correctamente cerrada y que el nombre del atributo siga la convención de camelCase.
Ejemplo
Si el componente Saludo
recibe la propiedad nombre
con el valor "Carlos", debe renderizar:
<h1>Hola, Carlos</h1>
Requisitos
- Utiliza JSX correctamente, asegurándote de seguir las diferencias clave con HTML.
- Utiliza la interpolación de JavaScript dentro de JSX para mostrar el valor de la propiedad
nombre
.
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
Puzzle
Definición y manejo de rutas
Puzzle
Conocimiento general de React
Test
Galería de imágenes en React
Proyecto
Eventos en React
Código
Gestor de tareas con React
Proyecto
Custom Hooks para servicios compartidos
Test
Nuevos métodos create de React Router
Código
Solicitudes HTTP con Fetch API
Test
Instalar React y crear nuevo proyecto
Puzzle
Renderizado condicional
Código
Manejo de clases y estilos
Puzzle
Introducción a React Router
Test
Solicitudes HTTP con Axios
Puzzle
Estado local con useState y useReducer
Código
Estado global con Redux Toolkit
Código
Estado y ciclo de vida de los componentes
Código
Hooks para gestión de estado complejo y contexto
Código
Componentes funcionales
Código
Estado global con Context API
Código
Hooks: optimización y concurrencia
Código
Introducción a React y su ecosistema
Test
Introducción a Componentes
Test
Introducción a los Hooks
Test
Navegación programática y redirección
Código
Renderizado iterativo con bucles
Código
Rutas anidadas y rutas dinámicas
Código
Hooks: estado y efectos secundarios
Código
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
Introducción a JSX
Componentes