Las aplicaciones y sitios web tienen backend y frontend. El backend es el interior de la aplicación, lo que no puedes ver, pero es donde está la lógica del negocio. Es decir, el funcionamiento profundo del sistema. Por otro lado, el frontend es lo que ves en tu pantalla: páginas, menús, botones, formularios. Si fuera un auto, el backend sería el motor y los mecanismos internos mientras que el frontend sería la carrocería, timón, pedales, asientos y luces.
Dicho así, parece que el backend es la parte más compleja, mientras que el frontend es la parte sencilla y puramente estética que no requiere grandes conocimientos (de hecho, muchas personas tienen este concepto equivocado). Pero ahora, imagina un auto que tiene un botón para modificar el color, otro para cambiar las llantas, otro para cambiar los asientos o el modelo completo del auto. Sería un vehículo mágico y completamente revolucionario ¿cierto? pues ese es el frontend de la actualidad.
La estructura del frontend se construye con HTML, pero como es un lenguaje estático, no tiene variables, ni ciclos, ni funciones. Entonces, si queremos un frontend que reaccione al usuario (como el auto que cambia de color) la única forma es manipular esa estructura HTML con JavaScript. Sin embargo, hacerlo siempre ha sido algo complejo porque se tiene que escribir mucho código y es enredado. Hasta que llegó React y lo cambió todo.
En este blog te explicaré qué es React, cómo funciona, qué lo diferencia de otras tecnologías web y, sobre todo, por qué domina el mundo frontend.
¿Qué es React y cómo funciona?
React es una librería creada por Facebook y lanzada en 2013 para construir interfaces web. Es decir, para el frontend. A diferencia de otras opciones como Angular, Vue (u otras), React tiene un solo objetivo: mostrar cosas en la pantalla.
Para entender cómo funciona React, es importante que comprendas los siguientes cuatro conceptos:
1. Componentes
La UI de una aplicación web está formada por varias piezas: botones, menús, cards, formularios, títulos, subtítulos, entre otros, y estas piezas se repiten en diferentes partes de la aplicación. Entonces, lo que React propone, es que esas piezas sean la base del frontend y que todo gire alrededor de esas piezas de UI.
Para React, los componentes son esas piezas de interfaz que deben ser reutilizables y deben contener tanto la estructura como la lógica junta, en un solo paquete. Es decir, el código HTML y JavaScript ya no se separan como en el desarrollo web tradicional sino que están acoplados. Sin este acoplamiento, sería imposible (o muy difícil), reutilizar los componentes, puesto que la lógica se rompería al estar separada de la estructura.
Aunque no es obligatorio que los estilos (el código CSS) estén dentro del mismo componente, normalmente se incluyen también. Entonces, un componente incluiría todo el código HTML, CSS y JavaScript de cada pieza de interfaz de la aplicación. De tal manera que, combinando y reutilizando componentes, construimos todo lo que el usuario ve en la pantalla.
Por ejemplo, si tuvieras que desarrollar la web de cursos de EDteam, tendrías que repetir cientos de veces el HTML de cada curso e ir cambiándole el contenido a cada uno. Es una pésima idea, pero si usamos componentes, resulta muy sencillo de hacer. Pero no solo eso, sino que podemos aprovechar que los componentes son reutilizables para poner los cursos en diferentes lugares de la aplicación sin tener que reescribirlos.
¿Cómo se crea un componente?
En las primeras versiones de React, los componentes se creaban usando el paradigma de la programación orientada a objetos. ¿Todavía no entiendes bien de qué se trata este paradigma? descúbrelo en este video, que es la mejor explicación que puedes conseguir en español: ¿Qué es la programación orientada a objetos?
Ahora bien, se creaban extendiendo la clase Component de React, que traía sus propios métodos como render() para pintar el componente en pantalla, métodos para el manejo del estado y para el ciclo de vida.
Un componente basado en clases se escribía así:
Las propiedades (o props) son un objeto con valores que va a recibir el componente cuando se imprime en pantalla. En este caso, para imprimir este componente, lo escribimos como si fuera un elemento HTML y las props como atributos HTML:
En la actualidad, los componentes de clases se han dejado de usar y se prefieren componentes basados en funciones (funcionales). Esta sintaxis es mucho más natural para JavaScript (que no es un lenguaje orientado a objetos) y mucho más sencillo de comprender. De tal manera que, el mismo componente anterior, lo podemos escribir ahora así:
Como ves, es super sencillo crear un componente y no necesitas conocimientos avanzados de JavaScript: solo debes escribir una función que retorna HTML. Podríamos retornar una estructura HTML más compleja sin problemas:
¿Y para imprimirlo en pantalla? de esta forma:
De esta manera, React simplifica enormemente la creación de elementos HTML. Ahora tenemos un HTML completamente dinámico y controlado por JavaScript.
Sin embargo, si estuviste atento, hay algo súper raro en ese código: una función de JavaScript está retornando código HTML. Y por tus conocimientos de JavaScript, sabes que eso no es posible. Para eso, React usa su ingrediente secreto: JSX.
Pero antes de explicar qué es JSX, te invito a tomar nuestro curso React desde cero completamente actualizado a 2022. Junto al profesor Beto Quiroga, aprenderás a crear tu primer aplicación con React paso a paso. Ve las primeras clases gratis y descubre por qué en español, nadie explica como EDteam.
2. JSX
JSX significa JavaScript Extendido, y es un lenguaje que introdujo React con el fin de escribir HTML dentro de JavaScript sin los métodos y propiedades de manejo del DOM de JavaScript nativo (que implican escribir mucho código), sino escribiendo la misma sintaxis de HTML dentro de JavaScript. Por esta razón, su curva de aprendizaje es prácticamente cero y es muy fácil empezar con React sin conocimientos profundos de JavaScript.
En otras palabras, si sabes escribir una función con JavaScript y sabes HTML, ya puedes comenzar con React. ¡Más fácil imposible! ¿Todavía no sabes JavaScript? domina las bases del único lenguaje que te da la oportunidad de trabajar del lado del cliente y del lado del servidor en nuestro curso: JavaScript desde cero.
Por ejemplo, crear un h1 con JavaScript puro, sería así:
Con JSX (en React), sería:
Una función que retorna HTML, a parte de ser reutilizable, también es dinámico.
3. Virtual DOM
DOM son las iniciales para Document Object Model, que es la estructura de un documento HTML con los padres, hijos, hermanos y todas las ramificaciones. El navegador se encarga de interpretar el código HTML, CSS y JavaScript para calcular el tamaño y posición de cada elemento e imprimirlo en pantalla. Si hay un cambio en el DOM, por ejemplo, aparece un elemento nuevo o se elimina uno, el navegador tiene que hacer todos los cálculos nuevamente y repintar el DOM desde el elemento modificado, todos sus descendientes (hijos, nietos, etc) y todos los demás elementos que deban cambiar.
Esta operación es costosa en recursos, por lo que React introduce el concepto de Virtual DOM, que es una copia del DOM en memoria, que permite trabajar más rápido porque los cambios primero se hacen en memoria antes que en el DOM real.
4. Manejo del estado
En una aplicación web, dos personas pueden estar en la misma página y ver cosas completamente diferentes: puede ser que una haya iniciado sesión y la otra no, una persona puede haber agregado productos al carrito y la otra no. Y así pueden haber múltiples escenarios que implican que, a pesar de estar exactamente en la misma página, cada persona ve cosas diferentes. Para conseguirlo, usamos el concepto de estado. El estado es un conjunto de datos que representan lo que está viendo cada usuario en determinado momento. Es como una fotografía de la aplicación en un momento específico.
Por ejemplo, si estás en la página de EDteam y agregas un curso al carrito, tanto el curso como el carrito deben recibir ese cambio de estado. Y si cambias de página, ese estado (el curso agregado al carrito) no debe perderse. El manejo del estado es uno de los conceptos más importantes del desarrollo frontend. Sin el estado, el frontend sería un juguete, los cambios no permanecerían, los componentes no se comunicarían entre ellos y cualquier cambio, hasta el más pequeño, dependería del backend, haciendo mucha más lenta la aplicación.
En términos técnicos, el estado es un objeto que se manipula dentro del propio componente (no fuera de él) lo que complica la comunicación del estado entre componentes (como el curso y el carrito). Existen soluciones como Redux para el manejo del estado en React y desde las últimas versiones, React ha incluido su propia solución llamada Context API.
¿Qué son los Hooks?
Uno de los conceptos más importantes de React son los hooks. Como ya vimos, React empezó con un enfoque de programación orientada a objetos, donde cada componente extendía a la clase Component de React para acceder a sus métodos. En ese entonces, los componentes de función solo mostraban información y no tenían ninguna lógica, puesto que no extendían a la clase Component, por los que se les llamaba dummy components (componentes tontos).
Sin embargo, los componentes funcionales son más versátiles y con una sintaxis más sencilla, por lo que React terminó prefiriendo esta forma de escribirlos frente a los componentes de clase.
Entonces, ¿cómo accedemos a funcionalidades como manejo del estado o del ciclo de vida u otras más, sin extender componentes de una clase? La solución son los hooks, que son funciones que permiten enganchar (de ahí el nombre) componentes funcionales a las funciones del core de React (e incluso crear nuestros propios hooks a partir de ellas).
Los hooks se añaden en la versión 16.8 de React, en 2018. Desde entonces, el uso de los componentes de clase ha ido cayendo en desuso. Aunque si te toca trabajar en un proyecto legacy, es probable que te toque enfrentarte a componentes de clase.
Existen varios hooks en el core de React, pero los más importantes son useState para el manejo del estado del componente, useEffect para el ciclo de vida, useRef para la manipulación del DOM o useContext para el manejo del estado global de la aplicación.
Para usar los hooks, basta con importarlos en el archivo del componente.
Puedes aprender más del manejo de los hooks en React en nuestro cursos React desde cero y React Hooks con TypeScript.
¡Tu primer proyecto con React!
Ahora llegó el momento de crear tu primer proyecto con React, si tienes Node.js y npm instalados, la forma tradicional es usar el comando create-react-app, de esta forma:
Por cierto, el comando npx permite ejecutar un comando de una librería sin tenerla instalada.
Sin embargo, existe una nueva herramienta llamada Vite, desarrollada por Evan Yu (el mismo creador de Vue.js) que hace este proceso mucho más rápido, además que te permite crear un proyecto no solo para react, sino Vue, Vanilla js, Svelte, entre otras.
Para crear un proyecto con Vite, se usa el comando:
Entonces, Vite te hará una serie de preguntas como: ¿qué tipo de proyecto vas a crear?
Por ejemplo, si escoges React, te preguntará si quieres usar React con JavaScript o con TypeScript. Vite crea el proyecto mucho más rápido que create-react-app e incluso lo levanta más rápido.
React es la tecnología de frontend más utilizada en el mundo y con mayor demanda laboral. Por ejemplo, estos son los resultados de la encuesta de StackOverflow de 2022.
La última encuesta de Jetbrains dice lo mismo:
Las búsquedas en Google tienen la misma tendencia:
¿Por qué sucede esto? ¿Por qué React lidera el desarrollo frontend? Hay varios motivos, pero podemos destacar tres:
- Su curva de aprendizaje: empezar con React es escribir una función JavaScript que retorne HTML. No hay nada más sencillo que eso, en ningún framework ni librería.
- Es una librería, no un framework: los framework intentan abarcar todos los aspectos de un proyecto, lo cual es bueno, pero a costa de perder versatilidad (como el famoso Angular way). Puesto que React una librería con una función específica, el manejo de componentes, permite que los desarrolladores armen su propio stack de tecnologías alrededor de React para sus proyectos.
- Ecosistema: gracias al punto anterior, se ha creado un enorme ecosistema de soluciones alrededor de React: librerías, frameworks, etc. Quizás el caso más famoso sea Vercel, una empresa multimillonaria gracias a soluciones como Next.js que es un framework para React.
Por último, empresas como EDteam, Figma, Notion, Airbnb, Uber, Netflix, Facebook, TikTok o Twitch, incluso el navegador Vivaldi, usan React para sus interfaces. Así que React es una apuesta segura si quieres ser un desarrollador frontend profesional y acceder a una gran cantidad de ofertas laborales.
¿Quieres aprender React? te invito a tomar nuestro curso React desde cero, que está actualizado al 2022, con las últimas novedades de la librería. ¿Ya tienes experiencia con React? entonces toma nuestro curso React Hooks con TypeScript, o el de Server Side Rendering con Next.js y React.
Amplia esta información en nuestro video de Youtube: