¿Qué es React y para qué usarlo?
En esta nota te contamos en qué consiste React, un framework front-end con JavaScript que nos permite construir interfaces para la web de manera rápida, fácil y escalable.
Cuando estudias desarrollo web, lo primero que aprendes es que la web está construida en base a tres pilares principales: HTML, la estructura, la semántica o el corazón de la web, CSS que es la parte visual en donde das forma, color y alineación a la información estructurada en HTML, y por último, JavaScript, el lenguaje que nos brinda la interactividad y, en definitiva, aporta vida al sitio web porque permite que el mismo responda a las acciones del usuario.
¿Para qué sirve React.js?
Estos tres conceptos esenciales en el desarrollo web siempre estuvieron separados: tanto estructura, como presentación y comportamiento (es decir, HTML, CSS y JavaScript) se definían y operaban de manera independiente al desarrollar una web. ¿Y qué sucede con React? Lo que permite es diseñar interfaces más complejas a través de bloques reutilizables de mayor nivel y más abstractos, lo que se conoce como componentes.
👉 Descubre más sobre JavaScript aquí ;)
Pero detengámonos un momento. A través de la propuesta que surge en 2013, cuando Jordan Walker, Ingeniero de Software en Facebook, propone esta librería para cargar los contenidos en la red social de manera óptima y rápida, algunas buenas prácticas a las que estábamos habituados se ponen en jaque. ¿Cómo escalar el proyecto, lograr código desacoplado, o reutilizar funcionalidades si todo está junto y metido allí?
Para ReactJS la estructura es inseparable de la lógica: HTML y JavaScript están unidos (CSS puede estar por fuera)
En realidad, separar HTML, CSS y JavaScript es separar por código y no por funcionalidad. Una interfaz web como www.soyhenry.com está compuesta por bloques y piezas de interfaz que responden a la siguiente premisa de React.js: podemos separar el proyecto por piezas de tal manera que el código pueda ser reutilizable. De este modo, podemos desacoplar el código y la funcionalidad porque el mismo se encuentra dividido en bloques de interfaz y ya no en HTML, CSS y JavaScript.
¿Qué son los componentes en React.js?
Un componente es una pieza de UI (user interface), es decir, la interfaz con la que el usuario interactúa. Dicho de manera simple: todo lo que ves en la pantalla, cada bloque, cada pieza, es un componente. Los mismos son similares a una jerarquía de nodos HTML pero son generados con una función de JavaScript, que en el momento de renderizado devuelve HTML.
Los componentes son piezas de código independiente que pueden reutilizarse y combinarse entre ellos para crear componentes mayores, los cuales, a su vez, son combinados para crear un sistema completo, como la web de Henry ;) Y esta es la forma de tener HTML con toda la funcionalidad de JavaScript y el estilizado de CSS.
Como vimos, React está basado en un paradigma llamado programación orientada a componentes en el que cada componente es una pieza con la que el usuario puede interactuar. ¿Cómo se crean estos bloques de código? Mediante una sintaxis llamada JSX que nos permite escribir HTML (y opcionalmente CSS) dentro de objetos JavaScript.
¿Cómo funciona el virtual DOM en React?
Un plus de React es que ofrece un DOM virtual. ¿Qué es? Se trata de una representación del DOM (Document Object Model) en memoria que le permite a React.js trabajar sobre la copia al comparar el DOM virtual con el DOM real, lo cual tiene como ventaja el ahorro de costos en términos de recursos (procesador, memoria RAM, etcétera).
De este modo se evita renderizar toda la página cada vez que haya cambios. Simplemente se aplica dicho cambio al componente que haya sido actualizado, lo cual no solo proporciona una mejor experiencia de desarrollador (DX) sino que además ofrece rapidez y un gran rendimiento.
¿Qué se construye con React?
Algo interesante de React.js es que no solamente es utilizado para construir páginas web interactivas y responsive. Se puede usar para crear aplicaciones nativas con React Native en Android y iOS e incluso para crear aplicaciones de escritorio. Es una librería que funciona en muchos ámbitos del desarrollo web, móvil y escritorio, ¡e incluso para construir realidad virtual!
👉¿Qué es un desarrollador Front End? Aprende más en este artículo
Además de ser una tecnología muy buscada por las empresas, es amada por los programadores porque es fácil de aprender y te permite pasar de HTML a React conociendo solo lo básico de JavaScript ;)
Si te interesa aprender más sobre React, aplica a Henry y ¡acelera tu carrera en tecnología hoy! 🚀
Preguntas Frecuentes 🔎
¿Para qué sirve React.js?
React permite diseñar interfaces más complejas a través de bloques reutilizables de mayor nivel y más abstractos, lo que se conoce como componentes.
¿Qué son los componentes en React.js?
Un componente es una pieza de UI (user interface), es decir, la interfaz con la que el usuario interactúa. Los mismos son similares a una jerarquía de nodos HTML pero son generados con una función de JavaScript, que en el momento de renderizado devuelve HTML.
¿Cómo funciona el virtual DOM en React?
Se trata de una representación del DOM (Document Object Model) en memoria que le permite a React.js trabajar sobre la copia al comparar el DOM virtual con el DOM real, lo cual tiene como ventaja el ahorro de costos en términos de recursos (procesador, memoria RAM, etcétera).
¿Qué se construye con React?
React.js no solamente es utilizado para construir páginas web interactivas y responsive. Se puede usar para crear aplicaciones nativas con React Native en Android y iOS e incluso para crear aplicaciones de escritorio.
