Introducción a JSX

Código
Básico
React
Curso de React
10 min
25 XP
Actualizado: 29/12/2024

¡Programa y certifícate!

Asistente de IA
Solución de código
Certificado
Empezar ejercicio

Descripción

Crea un componente funcional en React que use JSX para mostrar un saludo personalizado. El componente debe aceptar una propiedad nombre y desplegar un mensaje en un elemento

.

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>.

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

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.

Solución al ejercicio de programación en React

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en React para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js
JavaScript
1 function solveChallenge ( input ) {
2 // Algoritmo optimizado O(n log n)
3 const data = parseInput ( input );
4 const sorted = data . sort (( a , b ) => a - b );
5
6 // Aplicar técnica de dos punteros
7 let left = 0 , right = sorted . length - 1 ;
8 const result = [];
9
10 while ( left < right ) {
11 const sum = sorted [ left ] + sorted [ right ];
12 if ( sum === target ) {
13 result . push ([ sorted [ left ], sorted [ right ]]);
14 left ++; right --;
15 } else if ( sum < target ) {
16 left ++;
17 } else {
18 right --;
19 }
20 }
21
22 return result ;
23 }
Código completo
Explicaciones
Mejores prácticas
+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en React

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Únete a miles de desarrolladores mejorando sus habilidades en React

⭐⭐⭐⭐⭐
4.9/5 valoración