La industria del desarrollo web ha experimentado un crecimiento constante en los últimos años; y a medida que este crecimiento continúa, surgen constantemente nuevas tecnologías para ayudar a los desarrolladores a crear sitios y aplicaciones web fáciles de usar.

A lo largo de los años, hemos visto cómo los lenguajes de programación web producen características adicionales, cómo se utilizan más lenguajes de programación para crear tecnologías web, e incluso cómo se construyen frameworks y bibliotecas sobre las estructuras de las tecnologías existentes.

En este tutorial, hablaremos de React — la biblioteca de JavaScript basada en componentes más popular utilizada para crear interfaces de usuario. Aunque este tutorial será totalmente apto para principiantes, también puede servir como guía de referencia para los desarrolladores experimentados de React.

Hablaremos de las características de React, los pros y los contras, por qué deberías usarlo y cómo instalar y usar React. También veremos algunas de las funcionalidades principales de React utilizando ejemplos prácticos de código.

Al final de este tutorial, deberías entender qué es React y cómo funciona, y ser capaz de utilizarlo en la construcción de proyectos increíbles.

¿Qué es React?

React.js, comúnmente llamado simplemente React, es una biblioteca de JavaScript que se utiliza para construir interfaces de usuario. Toda aplicación web React se compone de componentes reutilizables que conforman partes de la interfaz de usuario — podemos tener un componente distinto para nuestra barra de navegación, otro para el pie de página, otro para el contenido principal, etc. Entenderás mejor esto cuando lleguemos a la sección en la que tenemos que trabajar con componentes.

Tener estos componentes reutilizables facilita el desarrollo porque no tenemos que repetir el código reiterativo. Sólo tendríamos que crear su lógica e importar el componente en cualquier parte del código donde se necesite.

React también es una aplicación de una sola página. Por tanto, en lugar de enviar una petición al servidor cada vez que hay que renderizar una nueva página, el contenido de la página se carga directamente desde los componentes de React. Esto conduce a una renderización más rápida sin recargas de la página.

En la mayoría de los casos, la sintaxis utilizada para construir aplicaciones React se llama JSX (JavaScript XML), que es una extensión de la sintaxis de JavaScript. Esto nos permite combinar la lógica de JavaScript y la lógica de la interfaz de usuario de una manera única. Con JSX, eliminamos la necesidad de interactuar con el DOM utilizando métodos como document.getElementById, querySelector, y otros métodos de manipulación del DOM.

Aunque el uso de JSX no es obligatorio, facilita el desarrollo de aplicaciones React.

Aquí tienes un ejemplo de cómo podemos utilizar JSX en React:

function App() {
    const greetings = "Hello World";
        return (
            <div className="App">
            <h1> {greetings} </h1>
            </div>
        );
    }
}

En el código anterior, utilizamos un componente funcional de React para mostrar un texto en el navegador. El nombre del componente es App. Hemos creado una variable antes de la función render().

A continuación, pasamos esta variable al marcado utilizando llaves. Esto no es HTML, sino la sintaxis para escribir código utilizando JSX.

En la siguiente sección, repasaremos algunas de las razones por las que deberías utilizar React.

¿Por qué React?

Muchos desarrolladores y organizaciones han elegido React en lugar de otras bibliotecas/frameworks; veamos el motivo a continuación:

  • Fácil de aprender: React es fácil de aprender y comprender siempre que se conozcan bien los requisitos previos. React tiene una sólida documentación y muchos recursos gratuitos online. creados por otros desarrolladores a través de la muy activa comunidad de React.
  • Componentes reutilizables: Cada componente en React tiene su propia lógica que puede reutilizarse en cualquier parte de la aplicación. Esto reduce la necesidad de reescribir el mismo trozo de código varias veces.
  • Oportunidades de trabajo: Un mayor porcentaje de oportunidades de desarrollo web frontend en este momento tienen React como una de las habilidades requeridas. Por lo tanto, entender cómo funciona React y ser capaz de trabajar con él aumenta tus posibilidades de conseguir un trabajo.
  • Mejora del rendimiento: Con el DOM virtual de React, la renderización de las páginas puede hacerse más rápidamente. Al utilizar una biblioteca de enrutamiento como React Router, tendrás diferentes páginas renderizadas sin necesidad de recargar la página.
  • Ampliamente extensible: React es una librería que sólo renderiza la UI de nuestra aplicación. Depende del desarrollador elegir con qué herramientas trabajar, como bibliotecas para renderizar diferentes páginas, bibliotecas de diseño, etc.

¿Quién utiliza React?

React ha sido utilizado por muchos ingenieros de front-end tanto en startups como en empresas establecidas como Facebook, Netflix, Instagram, Yahoo, Uber, The New York Times, y más.

Aunque todas las empresas mencionadas no construyeron todo su producto con React, algunas de sus páginas se construyeron con React. Esto se debe al alto rendimiento, la facilidad de uso y la escalabilidad de React.

Casos de uso de React

React se utiliza generalmente para construir la interfaz de usuario (frontend) de las aplicaciones web. Ofrece una rápida renderización de las páginas y un mayor rendimiento. React puede utilizarse para construir cualquier producto que se ejecute en la web.

Éstas son algunas de las cosas para las que se suele utilizar React:

  • Aplicaciones de reproducción de música
  • Aplicaciones de redes sociales
  • Aplicaciones de chat en tiempo real
  • Aplicaciones web Full-stack
  • Aplicaciones de Comercio Electrónico
  • Aplicaciones meteorológicas
  • Aplicaciones de listas de tareas

Características de React

React tiene una plétora de características increíbles que siguen haciendo que sea una opción muy popular para los desarrolladores.

Estas son algunas de las características principales de React:

  • JSX: Es una extensión de la sintaxis de JavaScript que amplía las características de ES6 (ECMAScript 2015). Nos permite combinar la lógica y el marcado de JavaScript en un componente.
  • DOM virtual: Se trata de una copia del objeto DOM que primero actualiza y vuelve a renderizar nuestras páginas cuando se realizan cambios; luego compara el estado actual con el DOM original para mantenerlo sincronizado con los cambios. Esto hace que la renderización de las páginas sea más rápida.
  • Componentes: Las aplicaciones React están formadas por diferentes componentes reutilizables que tienen su propia lógica e interfaz de usuario. Esto hace que sea eficiente para escalar aplicaciones y mantener un alto rendimiento porque no se duplica el código tan a menudo como en otros frameworks.

Pros y Contras de React

Puede que React sea una herramienta muy popular para construir nuestra interfaz de usuario, pero todavía hay razones por las que algunos desarrolladores o principiantes deciden no utilizarla.

En esta sección, hablaremos de las ventajas y desventajas de React.

Estos son los pros de usar React:

  1. React es fácil de aprender y entender.
  2. React tiene una comunidad muy activa en la que puedes contribuir y obtener ayuda cuando la necesites.
  3. Hay muchas oportunidades de trabajo para los desarrolladores de React.
  4. React ofrece un mayor rendimiento de las aplicaciones.

Estos son algunos de los contras de usar React:

  1. Los principiantes que no tengan un conocimiento sólido de JavaScript (especialmente de ES6) pueden tener dificultades para entender React.
  2. React viene sin algunas funcionalidades comunes como la gestión de estado único y el enrutamiento; tendrías que instalar y aprender a usar bibliotecas externas para ellas.

Cómo Empezar con React

En esta sección, hablaremos primero de los requisitos previos para usar React y luego nos sumergiremos en la configuración de una aplicación React, la creación de componentes, el manejo de eventos y el trabajo con estados, hooks y accesorios en React.

Requisitos Previos para Usar React

Antes de utilizar React, debes tener una buena comprensión y experiencia de JavaScript. Estos son algunos de los temas de JavaScript que recomendamos repasar antes de usar React:

  • Arrow functions
  • Rest operator
  • Spread operator
  • Módulos
  • Desestructuración
  • Métodos de array
  • Template literals
  • Promesas
  • Palabras clave let y const

La mayoría de estos temas están incluidos en ES6. También deberías tener experiencia usando HTML, ya que el marcado forma parte de la sintaxis de JSX.

Cómo Instalar React

Antes de instalar React, asegúrate de que tienes Node.js instalado en tu ordenador.

Una vez que lo hayas instalado correctamente, ejecuta el siguiente comando en tu terminal:

node -v

Si todo ha ido bien, el comando anterior debería decirte qué versión de Node.js está instalada actualmente en tu ordenador.

A continuación, vamos a ejecutar otro comando para empezar a instalar React.

En primer lugar, crea una carpeta o navega hasta la ubicación en la que quieres que se instale la aplicación React, y luego ejecuta el siguiente comando en tu terminal:

npx create-react-app react-kit

El comando anterior va a instalar React en una carpeta llamada react-kit.

Una vez completada la instalación, abre la carpeta de React recién instalada en el editor de código de tu elección. En este tutorial utilizaremos Visual Studio Code. Visual Studio Code viene con un terminal integrado. Si vas a utilizar un terminal diferente, como Git Bash o CMD, sólo tienes que ir al directorio de tu aplicación React y ejecutar el siguiente comando:

npm run start

Este comando pone en marcha tu servidor de desarrollo. Al cabo de un rato, deberías tener esta página de abajo renderizándose en localhost:3000 en tu navegador:

Servidor de desarrollo de React tras su instalación
Servidor de desarrollo de React tras su instalación

Si has llegado hasta este punto, entonces has instalado con éxito tu primera aplicación React. ¡Enhorabuena!

Cuando eches un vistazo a tu estructura de carpetas, verás una carpeta llamada public. Esta carpeta tiene un archivo index.html donde se inyectará nuestro código y se servirá al navegador.

La carpeta src es donde vivirá toda nuestra lógica, estilo y marcado; es nuestra carpeta de desarrollo con el archivo App.js que actúa como componente raíz. El código de este archivo es el que tenemos en la imagen anterior.

Abre el archivo App.js y haz algunos cambios en el archivo, luego guarda para ver que se refleja automáticamente en el navegador.

¿Todo listo? ¡Ahora vamos a escribir algo de código!

Componentes en React

Hay dos tipos principales de componentes en React: componentes de clase y componentes funcionales. Actualmente se está reescribiendo la documentación de React utilizando Hooks, que es una característica que se encuentra en los componentes funcionales. En este tutorial también utilizaremos componentes funcionales, ya que se han convertido en los componentes más utilizados en las aplicaciones React.

En la mayoría de los casos, los componentes devuelven algo de código HTML con una mezcla de valores dinámicos creados mediante JavaScript. Los componentes se crean como funciones en JavaScript.

Creación de un Componente de Clase React

Veamos un ejemplo de componente de clase en React.

Todo componente de clase debe incluir la declaración React.Component y el render() subclass.

class Student extends React.Component {
    constructor() {
        super();
        this.state = {language: "JavaScript"};
    }
    render() {
        return <p>I am learning {this.state.language} </p>;
    }
}

En el componente anterior, hemos creado una variable de estado llamada language con un valor de cadena «JavaScript». A continuación, utilizamos esta variable en nuestro marcado. Este ejemplo muestra cómo podemos mezclar JavaScript y HTML sin hacer referencia a ningún método del DOM.

Cuando esto se renderice en el navegador, veremos «Estoy aprendiendo JavaScript» renderizado en la página.

Creación de un Componente Funcional React

En esta sección, recrearemos el ejemplo de la última sección utilizando un componente funcional.

Añade esta función a tu archivo:

function Student() {
    const language = "JavaScript";
    return (
        <div>
        <p>I am learning { language } </p>
        </div>
    );
}

El nombre de nuestro componente es el mismo: Student. Empieza siempre el nombre de tus componentes con una letra mayúscula. Esta variable también se pasó al marcado, como hicimos en la última sección, sin manipular el DOM mediante los métodos DOM de JavaScript.

Este componente también tiene una variable Student que se renderizó, pero a medida que avancemos en el tutorial, utilizaremos un hook llamado useState Hook para crear nuestras variables de estado.

Manejo de Eventos en React

Los eventos utilizados en React son totalmente similares a los que utilizamos en HTML. La única diferencia es que los eventos de React se escriben en sintaxis camelCase. Así, «onclick» sería «onClick» en React, «onchange» sería «onChange», etc.

Al pasar un evento como atributo en una etiqueta HTML, utilizamos las llaves: onClick={changeName} en lugar de las comillas onClick=”changeName”

Aquí tienes un ejemplo (en el archivo App.js):

import { useState } from "react";
function App() {
    const [name, setName] = useState("John");
    const changeName = () => {
        setName("James");
    };
    return (
        <div className=”App”>
        <p>His name is {name}</p>
        <button onClick={changeName}> Click me </button>
        </div>
    );
}
export default App;

En el código anterior, hemos creado una función que avisa de un mensaje en el navegador. También hemos creado un botón que llama a esta función cuando se hace clic. El manejador de eventos utilizado aquí es el manejador de eventos onClick.

Te habrás dado cuenta de que el nombre de la función está entre corchetes y no entre comillas. Así es como se pasan los valores dinámicos, como los nombres de las variables y las funciones, en el marcado cuando se utiliza JSX.

Además, en lugar de usar «class» como haríamos al usar HTML, estamos usando «className». Esto se debe a que «class» es una palabra reservada en JavaScript.

Exportamos nuestro componente en la última línea. Esto nos permite importarlos en otros componentes.

Trabajar con Estados en React

Para gestionar el estado de nuestra aplicación en React, utilizamos un hook llamado useState Hook. Los ganchos nos permiten acceder a funciones adicionales de React sin tener que escribir una clase.

Con los Hooks, podemos gestionar el estado de nuestro componente, e incluso realizar ciertos efectos cuando nuestras variables de estado se renderizan por primera vez o se modifican.

Sin el hook useState en un componente funcional, cualquier cambio realizado en nuestras variables de estado no se reflejará en el DOM, por lo que el estado permanecerá sin cambios.

Veamos un ejemplo.

import { useState } from "react";
function App() {
    const [name, setName] = useState("John");
    const changeName = () => {
        setName("James");
    };
    return (
        <div className=”App”>
        <p>His name is {name}</p>
        <button onClick={changeName}> Click me </button>
        </div>
    );
}
export default App;

Ahora, echemos un vistazo a lo que acabamos de hacer.

Primero importamos el hook useState de React. A continuación, creamos una variable de estado llamada name y una función — setName — que se utilizará para actualizar el valor de la variable name. El valor inicial de la variable name se almacena en el Hook useState como «John».

A continuación, creamos una función llamada changeName, que utiliza la función setName para actualizar el valor de la variable name.

En nuestro marcado, una vez que se hace clic en el botón, «John» se cambia por «James».

En la siguiente sección, veremos cómo utilizar otro hook en React.

Trabajar con Hooks en React

En la última sección, vimos cómo gestionar el estado de nuestra aplicación utilizando el hook useStatet. En esta sección, veremos cómo utilizar el hook useEffect.

El Hook useEffect realiza un efecto cada vez que se produce un cambio en un estado. Por defecto, este Hook se ejecuta en la primera renderización y cada vez que se actualiza el estado, pero podemos configurar y adjuntar un efecto a una variable de estado respectiva.

Veamos algunos ejemplos:

import { useState, useEffect } from "react";
function App() {
    const [day, setDay] = useState(1);
    useEffect(() => {
        console.log(`You are in day ${day} of the year`);
    });
    return (
        <div>
        <button onClick={() => setDay(day + 1)}>Click to increase day</button>
        </div>
    );
}
export default App;

Lo primero que hicimos aquí fue importar el Hook useEffect.

Cada vez que hacemos clic en el botón, la variable name se incrementa en uno, este cambio en el valor de name hace que el Hook useEffect registre un mensaje en la consola — esto ocurre cada vez que la variable name cambia.

En la siguiente sección, hablaremos de los Props y del flujo de datos entre componentes.

Trabajar con Props en React

Los Props nos permiten pasar datos de un componente a otro. Esto hace que el flujo de datos en nuestra aplicación sea dinámico y mantenible. Props es la abreviatura de propiedades.

Veamos un ejemplo de cómo podemos utilizar Props.

Este es el aspecto de nuestro archivo App.js:

function App() {
    return (
        <div>
        </div>
    );
}
export default App;

Creamos otro componente llamado Bio.js que tiene el siguiente aspecto:

function Bio() {
    return (
        <div>
        <p>My name is John</p>
        <p>I am a JavaScript developer</p>
        </div>
    );
}
export default Bio;

A continuación, importaremos el componente Bio a nuestro componente App de la siguiente manera

import Bio from "./Bio";
function App() {
    return (
        <div className="App">
        <Bio/>
        </div>
    );
}
export default App;

En la primera línea importamos el componente Bio. A continuación, colocamos el componente entre las etiquetas div en nuestro componente App. Cuando veas esto en el navegador, verás el código que hemos creado en el componente Bio que se está mostrando.

Ahora entiendes cómo el código puede ser reutilizable en React. Pero este código es estático; será el mismo en cualquier componente en el que se utilice. Esto no será eficiente en los casos en los que queramos utilizar el mismo componente pero con diferente información.

Arreglemos eso usando Props.

En el componente Bio.js, haz lo siguiente

function Bio({name, language}) {
    return (
        <div>
        <p>My name is { name }</p>
        <p>I am a { language } developer</p>
        </div>
    );

}
export default Bio;

Primero desestructuramos y pasamos name y language como parámetros. A continuación, utilizamos estos parámetros de forma dinámica en nuestro marcado.

Exportamos el componente en la última línea de código: export default Bio; para poder importarlo en cualquier otro componente que requiera su lógica.

Por el momento, no podemos ver ningún valor que se muestre. Lo haremos en el componente App; he aquí cómo:

import Bio from "./Bio";
function App() {
    return (
        <div className="App">
        <Bio name="James" language="Python"/>
        </div>
    );
}
export default App;

Hemos añadido atributos a nuestra etiqueta Bio que se corresponden con los props que hemos creado antes. Cualquier valor que pasemos en esos atributos se mostrará en el navegador. Esto es importante para los componentes que se utilizarán en varios componentes pero que requieren sus propios datos diferentes.

Dónde Aprender Más

Este tutorial te ha dado los conocimientos fundamentales necesarios para empezar a construir aplicaciones web con React, pero no es todo lo que hay que saber sobre React. Todavía hay otras funcionalidades necesarias para construir una aplicación eficiente con React, como el enrutamiento en aplicaciones que tienen más de una página y la gestión de estado único utilizando herramientas como Redux.

El mejor lugar para empezar a explorar más sobre React es la documentación de React. También puedes consultar la documentación de la beta que se está reescribiendo con Hooks.

Resumen

React como librería frontend ha seguido creciendo masivamente en comparación con otras librerías/frameworks en la comunidad de desarrolladores y no muestra signos de detenerse. Puedes encontrar React en la hoja de ruta de cualquier desarrollador web moderno.

Con la adopción actual de la tecnología web3 por parte de cada vez más desarrolladores, React ha seguido siendo la herramienta favorita para construir el frontend de las aplicaciones descentralizadas (DApps).

Puedes construir una gran variedad de aplicaciones con React, desde simples aplicaciones web de listas de tareas hasta mercados, paneles de control, etc.

React puede utilizarse con muchas tecnologías como Bootstrap, Tailwind CSS, Axios, Redux, Firebase, y muchas más. También podemos utilizar React con Node.js y otros lenguajes de backend para construir aplicaciones full-stack y aplicaciones web que se ejecuten a la velocidad del rayo.