Tu Primer Componente de React: JSX, Componentes y Hola Mundo

Hola y bienvenido

Si ya iniciaste tu proyecto con React, has completado el paso más importante. Ahora empieza lo entretenido: crear interfaces de usuario con componentes y JSX. En esta guía práctica vas a entender qué es un componente, cómo escribir JSX de forma correcta y cómo ejecutar tu primer Hola Mundo en React.

Antes de entrar en materia, una nota rápida sobre nosotros: en Q2BSTUDIO desarrollamos aplicaciones a medida y software a medida, integramos inteligencia artificial para empresas, diseñamos estrategias de ciberseguridad, y desplegamos servicios cloud en AWS y Azure. Si buscas un socio tecnológico que construya soluciones escalables y seguras, aquí estamos.

Qué es un componente de React

React se construye con componentes, como si fueran piezas de LEGO digitales. En vez de una página enorme, divides tu interfaz en partes reutilizables como botones, formularios o tarjetas de perfil. Un componente es una función de JavaScript que devuelve una porción de interfaz. Esa simple idea permite organizar la lógica y la presentación de forma modular y escalable.

JSX en pocas palabras

JSX es una extensión de sintaxis que te permite escribir estructura de interfaz con un estilo similar a HTML dentro de JavaScript. La ventaja es doble: el código es más legible y la UI se describe de forma declarativa. Recuerda esta regla clave: JSX no es HTML, es sintaxis que se transforma en llamadas de JavaScript durante la construcción del proyecto.

La regla del elemento raíz único

Todo componente debe devolver un único elemento raíz. Si quieres renderizar varios elementos hermanos, envuélvelos en un contenedor o usa un Fragmento. Un contenedor típico sería un div, pero lo más limpio suele ser un Fragmento: <> contenido </> ya que no añade un nodo extra al DOM.

Tu primer Hola Mundo con React y Vite

1 Abre el proyecto en tu editor, por ejemplo VS Code

2 Entra a la carpeta src y abre el archivo App.jsx

3 Revisa el contenido inicial creado por Vite para entender la estructura

4 Reemplaza el contenido del return por la línea JSX: <h1>Hola Mundo</h1> envuelta en un Fragmento, es decir <> y su cierre </>

Guarda el archivo y mira el navegador. Gracias al recargado en caliente, verás el resultado al instante sin refrescar manualmente.

Buenas prácticas rápidas

– Mantén componentes pequeños y con una única responsabilidad

– Usa Fragmentos para evitar divs innecesarios en el DOM

– Escribe JSX claro y legible, pensando en la intención más que en los detalles de implementación

Resumen

– Creaste tu primer componente App

– Escribiste JSX para describir la UI

– Renderizaste Hola Mundo en el navegador gracias al flujo de desarrollo de React

Tarea del día

Crea un componente llamado Bienvenida que reciba un nombre y muestre un saludo personalizado. Pista conceptual: tu componente debería aceptar una propiedad y renderizar algo como Hola Ana o Hola Carlos. Intenta además envolver varios elementos con un Fragmento y añade un pequeño párrafo debajo del saludo.

Cómo compartir tu solución

Publica una captura de tu pantalla y pega el contenido de tu App.jsx en el hilo de comentarios del artículo o repositorio donde estés practicando. En la próxima entrega veremos una solución comentada.

Qué viene después

En el siguiente capítulo hablaremos de props, el mecanismo para pasar datos de un componente padre a uno hijo. Con props podrás reutilizar el mismo componente para saludar a diferentes personas sin duplicar código.

Cómo puede ayudarte Q2BSTUDIO

Si tu organización necesita llevar estas prácticas a producción, en Q2BSTUDIO construimos aplicaciones a medida de extremo a extremo, desde la arquitectura front end con React hasta la capa de negocio y el despliegue en la nube. Conoce nuestros servicios de desarrollo y descubre cómo aceleramos tus proyectos con enfoque ágil en desarrollo de software y aplicaciones a medida. Además, potenciamos tus productos con inteligencia artificial aplicada, incluyendo agentes IA, automatización y analítica avanzada; si quieres explorar casos de uso reales de ia para empresas, visita nuestras soluciones de inteligencia artificial.

Palabras clave relevantes

aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi

Referencia recomendada

Consulta la documentación oficial de React en su sitio para profundizar en JSX, componentes, renderizado y buenas prácticas.

Recordatorio final

Empieza simple, piensa en componentes como piezas reutilizables y apóyate en JSX para expresar la UI de forma clara. Con esta base ya puedes construir interfaces sólidas, escalables y listas para producción.