Que es React?

Bienvenido a React

React es una librería de JavaScript para construir interfaces de usuario. Fue creada por Facebook (hoy Meta) y publicada como código abierto en 2013. Desde entonces se ha convertido en una de las herramientas más usadas para el desarrollo frontend, tanto en startups como en grandes empresas.

La idea central es sencilla pero poderosa: en lugar de manipular el DOM a mano, tú describes cómo debe verse la interfaz según los datos, y React se encarga de actualizar la pantalla cuando esos datos cambian.

¿Por qué React?

• Componentes reutilizables: divides tu interfaz en piezas independientes que combinas como bloques de Lego.


• Virtual DOM: React calcula el mínimo de cambios necesarios antes de tocar el DOM real, lo que hace las actualizaciones eficientes.


• Flujo de datos predecible: los datos bajan de padres a hijos, lo que hace más fácil razonar sobre la aplicación.


• Ecosistema enorme: enrutadores, gestión de estado, formularios, animaciones y miles de paquetes en npm.


• Demanda laboral alta: es uno de los conocimientos más solicitados en ofertas de frontend.

React frente a JavaScript puro

Con JavaScript puro manipulas el DOM imperativamente, paso a paso:

// JavaScript puro: tú das cada orden

const button = document.createElement('button');

let count = 0;

button.textContent = 'Clics: ' + count;

button.onclick = () => {

  count++;

  button.textContent = 'Clics: ' + count;

};

document.body.appendChild(button);

Con React describes el estado y la interfaz que corresponde a ese estado. Cuando llamas a la función que actualiza el estado, React vuelve a renderizar por ti:

// React: describes el resultado, no los pasos

function Contador() {

  const [count, setCount] = useState(0);



  return (

    <button onClick={() => setCount(count + 1)}>

      Clics: {count}

    </button>

  );

}

Conceptos que dominarás en este curso

• JSX: sintaxis parecida a HTML que escribes dentro de JavaScript.


• Props: datos que un componente padre pasa a un hijo.


• State (estado): datos internos que cambian con el tiempo.


• Hooks: funciones como useState y useEffect que añaden capacidades a los componentes.

Ejercicio práctico