Por qué React, tu primer componente y JSX

Descubre qué es React, escribe tu primer componente y aprende las reglas básicas de JSX.

8 min · 3 preguntas

React es una biblioteca de JavaScript, es decir, una caja de herramientas de código listo para usar, creada para construir interfaces de usuario: todo lo que ves y con lo que interactúas en pantalla (botones, menús, formularios...). El único requisito previo para este módulo son las bases de JavaScript (variables, funciones, arrays). Para entender por qué React es importante, veamos primero cómo se modifica una página sin React.

const el = document.getElementById("title");
el.textContent = "Hello!";
el.style.color = "green";

Este enfoque funciona, pero en cuanto la página crece, tienes que localizar cada elemento, actualizarlo en el momento justo y no olvidar nunca ninguno... Rápidamente se vuelve inmanejable. React propone una idea diferente: dividir la interfaz en componentes. Un componente es una función de JavaScript que describe una parte de la interfaz (un botón, una tarjeta, un menú). Como piezas de Lego, los ensamblas para construir una página completa, y React se encarga de mantener la pantalla actualizada por ti.

import { createRoot } from "react-dom/client";

function Hello() {
  return <h1>Hello!</h1>;
}

const root = createRoot(document.getElementById("root"));
root.render(<Hello />);

La función Hello es un componente: devuelve algo que parece HTML escrito directamente dentro de JavaScript. Esta sintaxis se llama JSX. Tres reglas que recordar: un componente devuelve un único elemento padre; algunos atributos cambian de nombre (class se convierte en className); cada etiqueta debe cerrarse (<img />, por ejemplo). JSX tiene un superpoder: las llaves { } te permiten insertar cualquier valor de JavaScript en la salida.

function Welcome() {
  const firstName = "Sarah";
  return <h2>Welcome, {firstName}!</h2>;
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué es React?
   • Un lenguaje de programación que reemplaza a JavaScript
   • Una biblioteca de JavaScript para construir interfaces de usuario
   • Una herramienta de dibujo para crear maquetas de sitios web
2. En React, ¿qué es un componente?
   • Una función de JavaScript que devuelve JSX
   • Un archivo CSS que maqueta el sitio
   • Una base de datos que almacena a los visitantes
3. ¿Para qué sirven las llaves { } en JSX?
   • Para escribir un comentario HTML
   • Para crear un bucle automáticamente
   • Para insertar un valor de JavaScript en la salida