¿Qué es React?

React es una biblioteca o librería que utiliza el lenguaje de programación JavaScript desarrollada por la empresa Meta (anteriormente Facebook) que ha revolucionado la forma en que se construyen las aplicaciones web. Desde su lanzamiento en 2013, React ha ganado una inmensa popularidad debido a su enfoque innovador y eficiente para construir interfaces de usuario. A diferencia de frameworks completos como por ejemplo Angular, React se centra en una sola cosa y es la capa de vista. Esto significa que React se ocupa principalmente de lo que el usuario ve y cómo interactúa con su aplicación.

React introduce el concepto de componentes. Un componente en React es una pieza independiente de código que controla una parte de la interfaz de usuario. Estos componentes son reutilizables y pueden combinarse para formar aplicaciones completas.

Hoy en día, React es una de las bibliotecas de JavaScript más populares para la construcción de UI (User Interface). Es utilizado por muchas empresas grandes y pequeñas (Netflix, Airbnb, Uber, The New York Times y la propia Meta) y tiene una comunidad de desarrollo muy activa. React ha seguido evolucionado desde su lanzamiento en 2013, con nuevas características y mejoras introducidas de forma regular.

¿Por qué usar React?

React tiene varias ventajas que lo hacen atractivo para los desarrolladores. Estas son algunas razones:

  • Componentes reutilizables: Como ya he mencionado, React se basa en componentes. Estos componentes son reutilizables, lo que significa que puedes escribir un componente una vez y luego usarlo en diferentes partes de tu aplicación. Esto no sólo ahorra tiempo, sino que también ayuda a mantener tu código limpio y organizado.
  • Virtual DOM: React introduce el concepto de Virtual DOM, una representación ligera del DOM (Document Object Model) real. Cuando el estado de un componente cambia, React primero actualiza el Virtual DOM y luego compara la versión actualizada con la versión anterior. Luego, solo actualiza las partes del DOM real que necesitan cambiar. Este proceso se conoce como «reconciliación» y es lo que hace que React sea tan rápido.
  • Unidireccionalidad de los datos: React sigue un flujo de datos unidireccional. Esto significa que los datos en una aplicación React fluyen desde los componentes padres a los componentes hijos. Esto hace que el seguimiento de los cambios en el estado de la aplicación sea más fácil y ayuda a mantener el código más predecible y fácil de entender.
  • Ecosistema y comunidad: React tiene un ecosistema robusto y una comunidad activa. Hay una gran cantidad de bibliotecas de terceros disponibles que puedes usar para agregar funcionalidad a tus aplicaciones React. Además, si te encuentras con un problema, es probable que alguien más ya haya encontrado una solución.

Requerimientos para aprender React

Para empezar a utilizar React es necesario tener conocimientos en ciertas tecnologías que permitirán una mejor comprensión de su uso, por lo cuál enlistaremos las más esenciales.

  • JavaScript: React utiliza JavaScript, por lo que debemos tener un conocimiento sólido de JS. Debemos conocer los conceptos modernos de JavaScript, como las funciones flecha (Arrow functions), las promesas, la desestructuración de objetos y arrays, y las clases. También es útil entender cómo funciona el modelo de eventos de JavaScript, ya que React hace un uso intensivo de los mismos.
  • HTML y CSS: React se utiliza para construir interfaces de usuario, por lo que un buen entendimiento de HTML y CSS es crucial. Deberías estar familiarizado con la estructura básica de un documento HTML, cómo se utilizan las etiquetas para definir la estructura y el contenido de una página, y cómo se utiliza CSS para dar estilos a ese contenido.
  • Node.js y NPM: React se desarrolla y se gestiona a través de Node.js y NPM (Node Package Manager). Necesitarás un entendimiento básico de cómo instalar y usar paquetes npm, y cómo se utilizan las herramientas de línea de comandos de Node.js. Aunque Node.js se emplea en sistemas Backend y creación de APis REST, no necesitas tener ese conocimiento, ya que Node abarca mucho más y se emplea también como herramienta de desarrollo.
  • ES6: React hace un uso intensivo de las características de ES6 (la sexta versión de ECMAScript, la especificación que define JavaScript). Deberías familiarizarte con las características que hemos comentado anteriormente.

Sintaxis de JavaScript y XML

¿Qué es JSX?

Esta sintaxis especial que utiliza React, sirve para entre otras cosas, ahorrarnos tiempo y sobre todo proporcionarnos una mejor experiencia de desarrollo.

Aquí tienes un ejemplo de cómo se ve el código JSX:

				
					const element = <h1>Hola, mundo</h1>;
				
			

A primera vista, la impresión es que estamos escribiendo código HTML y lo estamos mezclando dentro del código JavaScript, algo que es una muy mala práctica y que no se debería hacer.

Pero esto no es así. Esta sintaxis parecida a HTML es en realidad código JSX que se traduce en JavaScript. También tiene algunas diferencias clave que debes tener en cuenta. Por ejemplo, debido a que class es una palabra reservada en JavaScript, debes usar className en su lugar para asignar una clase CSS a un elemento.

¿Por qué usar JSX?

JSX tiene varias ventajas que lo hacen útil para desarrollar interfaces de usuario con React:

  • Legibilidad: El código JSX se parece mucho al HTML, lo que hace que sea fácil de leer y entender. Esto es especialmente útil cuando estás desarrollando interfaces de usuario complejas con muchos elementos y componentes.
  • Potencia de JavaScript: Aunque el código JSX se parece a HTML, tiene todo el poder de JavaScript detrás de él. Puedes insertar cualquier expresión JavaScript válida dentro de llaves {} en tu código JSX.
  • Optimización de rendimiento: Herramientas como Babel transforman el código JSX en llamadas a React.createElement, que es una forma eficiente de crear elementos de React.

Uso de JSX en React

¿Por qué hacemos esto? Basicamente React, a diferencia de otras bibliotecas como Vue o frameworks como Angular, utiliza JavaScript para todo. Para renderizar el código HTML, para manejar la lógica e incluso también para manejar estilos. Por tanto, cuando estamos componiendo la plantilla HTML que tendrá un componente, en lugar de usar templating como en los otros recursos que hemos mencionado, utilizamos JavaScript.

Esto complicaría mucho la escritura y sobre todo la lectura del código implementado. La forma más fácil de entender esto es usando el transpilador online de Babel.

Babel es una biblioteca de JavaScript que nos permite usar las últimas novedades que incorporan las versiones más recientes de JavaScript antes de que estas sean implementadas en el navegador. Entre ellas la sintaxis JSX que transpila el código a una versión que actualmente entiendan los navegadores.

Conclusiones

  • React es una gran herramienta para construir interfaces de usuario.
  • Su enfoque en los componentes reutilizables, el Virtual DOM y el flujo de datos unidireccional lo hacen muy atractivo para nosotros como desarrolladores.
  • React utiliza sintaxis JSX que pareciera que estamos escribiendo código HTML y lo estamos mezclando dentro del código JavaScript.
  • El código JSX se parece mucho al HTML, lo que hace que sea fácil de leer y entender.
  • Para empezar a utilizar React es necesario tener conocimientos en JavaScript, HTML y CSS, Node.js y NPM, ES6.
Facebook
X
LinkedIn
Reddit
Pinterest
Threads

Post relacionados

Post recientes

Search