Si has llegado a este artículo, es muy posible que estés comenzando desarrollo web y te hayan recomendado aprender React. React es una librería Javascript por lo que, aunque puedes aprenderlo desde cero, es muy recomendable tener conocimientos previos de Javascript, por lo que si no los tienes, te recomiendo antes echar un vistazo al curso de Javascript.
¿Qué es React?
React es una librería para crear interfaces web de usuario con Javascript. El objetivo de React es tener a nuestra disposición un lenguaje que simplifique la cantidad de detalles que hay que hacer en Javascript, sin perder demasiado control o personalización en lo que hacemos.
Por esa razón, muchos de los conceptos que vamos a ver relacionados con React, cambian los fundamentos o conceptos utilizados en el desarrollo web, introduciendo nuevos conceptos o realizando muchas tareas de forma transparente por debajo, de modo que el desarrollador no tenga que controlar al detalle muchas de esas cosas.
OJO: Que no tengas que controlar muchos de estos detalles no quiere decir que puedas permitirte desconocerlos. Si ignoras estos fundamentos o bases, podrás hacer cosas sencillas, pero te costará mucho dominar o trabajar con React.
Historia y comparación
Actualmente, existen 4 librerías o frameworks populares para crear interfaces de usuario:
Angular: Framework «todo-en-uno». Suele interesar a desarrolladores que provienen de backend, porque utiliza patrones muy similares y habituales en ese sector. Requiere conocer Typescript.
React: Librería para crear UI para web. Si te encuentras cómodo trabajando con Javascript (o conoces Javascript del lado del servidor como Node, Deno o Bun), pero eres ajeno a las bases del frontend (HTML, CSS, ...), probablemente será tu opción preferida.
VueJS: Framework progresivo para frontend. Si eres un desarrollador que proviene o tiene bases sólidas de HTML y CSS, es muy probable que Vue te resulte un framework más agradable que el resto.
Svelte: Librería Javascript que une lo mejor de los mundos de React y Vue, introduciendo ciertos conceptos propios. La única pega es que es más moderna y su adopción es menor.
React se ha consolidado como la librería preferida de frontend para crear interfaces de usuario. Si quieres saber un poco más, aconsejo echar un ojo al post historia de los frameworks.
Conceptos
Antes de continuar, recuerda que React es una abstracción, es decir, un lenguaje que está sobre Javascript, y para simplificar el trabajo del desarrollador, cambia muchos patrones y formas de trabajar por otras, con el objetivo de que sea más sencillo.
Veamos una lista de conceptos que se utilizan en React como equivalencia a patrones utilizados en Javascript u otros sectores:
🧩 Componentes
En React se trabaja con componentes. A grandes rasgos, se trata de crear «etiquetas propias» que se comportan como etiquetas HTML. La forma preferida de crearlas es utilizar los llamados componentes funcionales, es decir, funciones de Javascript que devuelven código HTML (o casi):
function component() {
return <h1>¡Hola, amigo!</h1>;
}
Antiguamente, se utilizaban componentes de clases (programación orientada a objetos). Sin embargo, aunque la orientación a objetos sigue siendo actualmente una forma válida de trabajar, en React se ha reemplazado por los componentes funcionales, ya que son más simples dentro de su ecosistema.
🔥 JSX
En React se utiliza JSX como lenguaje de marcado en lugar de HTML. JSX es una sintaxis que, aunque parece HTML, realmente es Javascript y se encarga de leer el código JSX y convertirlo a un HTML equivalente con añadidos Javascript:
function component() {
const name = "Manz";
return (
<div>
<h1>¡Hola, {name}!</h1>
</div>
);
}
Al principio, suele disgustar mucho por su mezcla de HTML y Javascript, algo que siempre se ha tendido a separar. Sin embargo, el objetivo de esto es no separar tecnologías: crear componentes de modo que, siempre que tengan relación entre sí, estén juntos, independientemente de la tecnología utilizada.
Más adelante, en el artículo ¿Qué es JSX? profundizamos y entendemos realmente que es este tipo de sintaxis y algunos consejos y recomendaciones.
🌌 Virtual DOM
En el ecosistema de React no se suele trabajar directamente con el DOM. Aunque puedes hacerlo, está mal visto y se considera una mala práctica. Esto es así porque React utiliza su llamado Virtual DOM: una especie de DOM ligero en memoria que es al que React accede directamente. Por esta razón, normalmente el desarrollador de React no necesita preocuparse por el DOM. React se encargará de mantenerlo actualizado cuando sea necesario.
Existe un mito que afirma que el «DOM es lento» y es mejor utilizar un Virtual DOM. Esto no es cierto. Realmente, el DOM no es lento, sino que es muy común que se gestione incorrectamente por el desarrollador. Si evitamos acceder al DOM real y dejamos esa tarea al Virtual DOM de React, evitamos la posibilidad de gestionarlo incorrectamente.
Echa un vistazo a este post si quieres saber más sobre el DOM y el Virtual DOM.
🏹 Datos unidireccionales
Al contrario de como se trabaja en otros ecosistemas, en React los datos viajan de forma unidireccional, o sea, esto significa que un elemento HTML padre puede enviar datos a sus elementos HTML hijos, pero no a la inversa.
Entenderemos esto un poco más adelante. De momento, lo que debemos tener en cuenta es que debido a esta «limitación» tenemos una ventaja y una desventaja:
- 🟩 Es más simple y predecible gestionar los datos.
- 🟥 Es menos flexible al no poder trabajar de forma bidireccional.
En casos donde se requiera compartir datos de forma más compleja, se suelen optar por stores (librerías con estado centralizado), de las que hablaremos más adelante.
