Ejercicio de programación con React: Introducción a JSX

Código
Puntuación
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

  1. Crea un componente funcional de React llamado Saludo.
  2. El componente Saludo debe aceptar una propiedad llamada nombre.
  3. Utiliza JSX para renderizar un elemento <h1> que contenga el texto "Hola, nombre", donde nombre es el valor de la propiedad nombre.
  4. 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.
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

Introducción a JSX

Componentes

Otros tutoriales de programación con React

Introducción A React Y Su Ecosistema

React

Introducción Y Entorno

Instalar React Y Crear Nuevo Proyecto

React

Introducción Y Entorno

Introducción A Componentes

React

Componentes

Componentes Funcionales

React

Componentes

Eventos En React

React

Componentes

Props Y Manejo De Datos Entre Componentes

React

Componentes

Renderizado Condicional

React

Componentes

Renderizado Iterativo Con Bucles

React

Componentes

Manejo De Clases Y Estilos

React

Componentes

Introducción A Los Hooks

React

Hooks

Estado Y Ciclo De Vida De Los Componentes

React

Hooks

Hooks Estado Y Efectos Secundarios

React

Hooks

Hooks Para Gestión De Estado Complejo Y Contexto

React

Hooks

Hooks Optimización Y Concurrencia

React

Hooks

Introducción A React Router

React

Navegación Y Enrutamiento

Definición Y Manejo De Rutas

React

Navegación Y Enrutamiento

Rutas Anidadas Y Rutas Dinámicas

React

Navegación Y Enrutamiento

Navegación Programática Redirección

React

Navegación Y Enrutamiento

Nuevos Métodos Create De React Router

React

Navegación Y Enrutamiento

Solicitudes Http Con Fetch Api

React

Interacción Http Con Backend

Solicitudes Http Con Axios

React

Interacción Http Con Backend

Estado Local Con Usestate Y Usereducer

React

Servicios Y Gestión De Estado

Estado Global Con Context Api

React

Servicios Y Gestión De Estado

Estado Global Con Redux Toolkit

React

Servicios Y Gestión De Estado

Custom Hooks Para Servicios Compartidos

React

Servicios Y Gestión De Estado

Evaluación Test React

React

Evaluación