Qué es React y para qué sirve

React es una de las herramientas más usadas del mundo para construir lo que ves en la pantalla de una página web: botones, menús, listas, formularios, tarjetas. Si ya hiciste «JavaScript desde cero», estás listo: React se escribe con JavaScript. En esta primera lección vas a entender qué es, por qué existe y qué problema te resuelve, sin instalar nada todavía.

Un taxi con GPS

Imagina que quieres ir a una dirección en un taxi.

• Forma 1: giro por giro. Le dices al conductor: «avanza dos cuadras, gira a la derecha, sigue hasta el semáforo, gira a la izquierda...». Si cambia el tráfico o hay una calle cerrada, tienes que corregirle cada instrucción.
• Forma 2: el destino. Le dices: «llévame a la plaza principal». El conductor decide el camino, y si algo cambia, ajusta la ruta solo.

Con JavaScript solo, para cambiar algo en la pantalla haces la forma 1: «busca este elemento, cámbiale el texto, agrega este botón, quita aquel». Con React haces la forma 2: describes cómo debe verse la pantalla con los datos que tienes, y React se encarga de los cambios.

Qué es React

React es una librería de JavaScript para construir interfaces de usuario. Una «interfaz de usuario» es todo lo que la persona ve y toca en una pantalla. React la creó un equipo de Meta (la empresa de Facebook) y hoy es de código abierto: lo mantiene una comunidad enorme de personas y empresas.

Dos aclaraciones que evitan confusiones:

• React no es un lenguaje. Es un conjunto de herramientas que se escribe con JavaScript, el mismo que ya conoces.
• React no es un framework completo. Se ocupa de dibujar la pantalla. Cosas como las direcciones de un sitio (rutas) o publicar el sitio las resuelven otras herramientas. Una de ellas es Next.js, que se construye encima de React y que verás en el siguiente curso.

El mismo contador, de las dos maneras

Un contador es el ejemplo clásico: un botón que dice cuántas veces lo pulsaste. Primero, giro por giro, con JavaScript solo. Esto es para leer; es código que no ejecutarás:

const boton = document.getElementById("boton");
let veces = 0;

boton.addEventListener("click", () => {
  veces = veces + 1;
  boton.textContent = "Clics: " + veces;
});

Ahora, la misma idea con React. Pulsa Ejecutar y luego el botón varias veces:

Verás un botón que dice «Clics: 0» y que sube cada vez que lo pulsas.

Qué ves y de dónde sale

Las tres ideas del curso

Todo lo que vas a aprender en este curso gira alrededor de tres ideas:

1. Componentes. La pantalla se arma con piezas pequeñas y reutilizables, como un juego de lego: un botón, una tarjeta, un menú. Con ellas armas piezas más grandes.
2. Datos. Cada pieza recibe datos (los llamamos props) y los muestra. Con los mismos datos, siempre se ve igual. Cambias los datos y cambia lo que se ve.
3. Estado. Algunas piezas necesitan recordar cosas que cambian con el tiempo, como el número de clics. Ese recuerdo es el estado, y cuando cambia, React redibuja lo necesario.

Cómo se usan los laboratorios

En este curso casi todo se practica en laboratorios como el de arriba. Tienes el código a la izquierda y el resultado a la derecha:

• Puedes cambiar el código. No tengas miedo de romperlo: el botón Limpiar lo deja como estaba.
• Pulsa Ejecutar (o Ctrl + Enter) para ver el resultado.
• Los mensajes de error aparecen en la consola, abajo.
• Los ejercicios «Tu turno» tienen pistas y un botón Comprobar mi código que te dice si lo lograste.

Errores y confusiones comunes

• Creer que React es un lenguaje nuevo. Es JavaScript con herramientas extra.
• Creer que React reemplaza a JavaScript. Lo necesitas: todo lo que aprendiste (variables, funciones, listas, objetos) lo vas a usar a cada paso.
• Creer que React es lo mismo que Next.js. Next.js se construye sobre React; por eso este curso va primero.
• Pensar que hay que memorizar todo. Nadie lo hace. Se aprende usando y volviendo a mirar.

Cambia el texto, pulsa Ejecutar y comprueba.

Repite la pieza, ejecuta y comprueba. Fíjate: escribiste el aviso una sola vez y lo usas las veces que quieras.

Cambia el valor inicial, ejecuta, pulsa el botón y comprueba.

Ejercicio en tu navegador

Este ejercicio no necesita instalar nada:

1. EN EL NAVEGADOR, abre https://es.react.dev. Es la página oficial de React, en español. Verás ejemplos como los de esta lección.
2. Busca un ejemplo con un botón y pulsa «Mostrar JSX» o el botón para ver el código. Compara con el contador de esta lección: ¿reconoces useState, return y las llaves?
3. EN UN PAPEL O UN ARCHIVO DE TEXTO, escribe con tus palabras: «React me sirve para...». Al final del curso volverás a leerlo.

En la próxima lección verás qué necesitas saber y tener antes de empezar, y qué tecnologías trabajan juntas cuando usas React.