¿Qué es React y para qué sirve?

React es un framework para desarrollar apps altamente responsivas

Si has pasado algún tiempo rodeado de desarrolladores, lo más probable es que hayas oído el nombre “React” más de una vez, quizás a veces junto con “Angular”, o con menos frecuencia “Vue”. 

¿Qué es React? ¿Es un avión? ¿Es una nave espacial? ¿Es una librería? ¿O es un framework? ¿Es importante? Vamos a ver…

React: ¿Framework o librería?

Los desarrolladores de React lo describen como “una librería de javascript para la construcción de interfaces de usuario”, como se puede ver en el gran banner de su página web.

Pero la mayoría de la gente lo llama framework, y por lo tanto lo hace parte de la santa trinidad de los frameworks de javascript frontales, con Angular y Vue. 

Entonces, ¿cuál es el problema? Bueno, la discusión es sobre todo académica, con un lado argumentando que un framework es “algo que se conecta a su código”, y una librería es “algo que se conecta a su código”, y el otro lado argumentando que react hace, esencialmente, la misma cosa que los otros dos, pero – para ser honesto – para la persona promedio la convención de nombres es bastante irrelevante, por lo que podríamos llamarlo cualquiera. 

Sin embargo, lo que sí es relevante es que React hace una cosa y la hace bastante bien: permite construir rápidamente interfaces de usuario sorprendentes, responsivas y rápidas. 

Es extremadamente popular (si miras algunos gráficos y comparaciones podrás ver alguna tendencia), es de código abierto y está respaldado por una gran corporación. Entonces, ¿de dónde viene y qué hace que sea el framework (o librería) javascript número 1?

Una breve historia de React

React fue creado en 2011 por Jordan Walke en Facebook. Para entonces, la plataforma había crecido tanto, que las soluciones existentes no eran suficientes, así que construyeron su propio framework (o librería) de front-end para satisfacer sus crecientes necesidades. 

En 2013, React fue se liberó al código abierto, y desde entonces ha crecido exponencialmente, con nuevas características que se añaden todo el tiempo y una increíble comunidad de desarrolladores que crece a su alrededor.

¿Por qué es popular React?

React es bastante maduro y probado, y ha sido utilizado por un montón de nombres conocidos (Netflix, AirBnB, Instagram, por nombrar algunos. También, Facebook). 

Es más ligero y tiene más rendimiento que Angular, que es la solución de Google para crear aplicaciones frontales.

 React tampoco impone ninguna forma específica de hacer las cosas, y puedes elegir entre una amplia gama de librerías adicionales para hacer lo que quieras. No hay una única “manera React”. 

Por lo tanto, puedes construir tu propia pila de React para satisfacer tus necesidades particulares. 

Aplicaciones creadas con React

Estas son algunas de las aplicaciones más populares creadas con React:

• Facebook
• Netflix
• PayPal
• Uber
• AirBnB
• Dropbox

React es declarativo y está basado en componentes

Cuando consideras una aplicación, lo que ves son elementos individuales, como botones, desplegables, tarjetas y cajas de información, combinados en elementos más grandes, como menús y formularios.

Muestran cierta información y reaccionan (¿ves lo que he hecho?) a tu entrada, haciendo cambios en lo que se muestra.

React funciona exactamente así, permitiéndote pensar de forma natural en la interfaz que estás desarrollando.

La unidad básica de la estructura en React es un componente – un bloque de construcción de su aplicación. Esto puede ser cualquier cosa – una ventana emergente de mensajes, un botón, un icono, un pasaje de texto, o un contenedor para sostener todo eso dentro y pasar algunos datos a cada uno.

Sólo tienes que proporcionar a React información sobre el aspecto que deben tener todos los componentes en función de parámetros específicos (también conocido como el “estado” de la aplicación) y él se encarga del resto, realizando los cambios adecuados en la vista según los cambios de estado.

A esto se le llama “programación declarativa”, y ya puedes ver que resulta natural y lógico trabajar de esta manera: acelera y facilita el desarrollo de las aplicaciones frontales más complejas.

React también es muy eficaz a la hora de realizar cambios en las vistas, porque virtualiza el contenido de toda la aplicación y primero realiza los cambios en esta “vista” virtual, y luego averigua la forma mejor y más rápida de mostrar los cambios en la pantalla.

Esto da lugar a aplicaciones muy fluidas y eficaces, que proporcionan una excelente experiencia de usuario.

SPA, SSR, CSR.. ¿Qué es todo eso?

Probablemente haya oído hablar de estos términos en algún momento, pero ¿qué significan? 

SPA significa “Single Page Application”, y el término está más o menos relacionado con CSR, o “Client-Side Rendering”, que se opone a SSR, que significa “Server Side Rendering”.

¿Qué es el renderizado del lado del servidor?

En las aplicaciones web tradicionales, cuando introduces la URL en el navegador, se hace una petición al servidor, que decide lo que debe mostrarse, prepara la página html necesaria y te la devuelve.

Cuando usted navega por la página y quiere hacer algo, como realizar una búsqueda o filtrar datos, se envía otra petición al servidor, que realiza las acciones necesarias, encuentra su información y prepara otra página html para usted.

Así que el tiempo inicial de renderización de la página puede ser bastante rápido, pero luego se obtiene una recarga cada vez que se intenta hacer algo.

Esto se llama renderización del lado del servidor, porque -lo has adivinado- todas las páginas se renderizan primero en el servidor, y sólo entonces se te envían.

¿Qué es el render del lado del cliente?

Por otro lado, en el enfoque RSC, el servidor obtiene todo el paquete y te lo envía de una sola vez.

El primer renderizado puede ser más lento, porque tu navegador está descargando todo ese material, pero entonces nuestro héroe JavaScript se despierta y toma el relevo y empieza a hacer su magia – manejando toda la lógica de renderizado desde el acogedor interior de tu navegador.

Esto significa transiciones instantáneas, animaciones suaves, tiempos de carga inexistentes, y nunca, nunca, nunca ver ninguna recarga de la página (y de ahí el término Aplicación de Página Única, ya que técnicamente todo sucede dentro de una sola página html).

A todos los efectos, parece una aplicación nativa. ¿El inconveniente? Esa carga inicial puede ser bastante dolorosa, y no es perfecta para el SEO. 

También existe el enfoque híbrido, en el que el renderizado inicial se realiza en el servidor y la funcionalidad se transfiere gradualmente al cliente a medida que el navegador carga todos los componentes necesarios.

¿Por qué te cuento todo esto? Porque React se puede utilizar para todo eso.

Por sí solo, es perfectamente adecuado para hacer aplicaciones de una sola página del lado del cliente, pero también puede renderizarse en el servidor o utilizarse para el enfoque híbrido con herramientas como Gatsby y Next.js. 

¿Qué es React Native?

Y ahora la mejor parte de React: realmente “sólo” se trata de renderizar vistas, y no específicamente en la web.

La web es, por supuesto, su objetivo más destacado, pero también se puede utilizar para hacer aplicaciones móviles, con la ayuda de React Native.

Y no se trata de apps híbridas, es decir, ventanas del navegador disfrazadas de aplicaciones, sino que son realmente apps nativas, por lo que rinden mucho más y pueden aprovechar todas las características del dispositivo en cuestión.

Conclusión

React es una librería-framework rápida, de alto rendimiento y amigable para los desarrolladores.

Se puede utilizar para todo tipo de aplicaciones, ya sean renderizadas del lado del servidor, o del lado del cliente. También se puede utilizar para hacer aplicaciones móviles nativas, y ya que la plataforma es “agnóstica”.