9.2 Fundamentos de React

React es una biblioteca de JavaScript extremadamente poderosa que está específicamente diseñada para la construcción de interfaces de usuario. Su función y fortaleza principal radican en su capacidad para construir aplicaciones de una sola página dinámicas y altamente receptivas, donde una rápida reacción a las interacciones del usuario es primordial. Originada en el equipo innovador de Facebook, React ha ganado un espacio propio debido a sus capacidades de renderizado notablemente eficientes y su arquitectura sencilla e intuitiva basada en componentes.

En esta sección, nos embarcamos en un viaje a través de los conceptos fundamentales y características de React, con el objetivo de proporcionarte una comprensión sólida de cómo utilizar esta herramienta de manera efectiva. Está diseñada para asistirte en el inicio con la creación de interfaces de usuario interactivas que sean tanto altamente funcionales como estéticamente agradables. Cubriremos todo, desde los conceptos básicos hasta las técnicas avanzadas, dándote el conocimiento y la confianza para crear aplicaciones React que sean tanto poderosas como fáciles de usar.

9.2.1 Entendiendo los Componentes de React

En React, las aplicaciones se estructuran alrededor de componentes. Estos componentes pueden entenderse como los bloques de construcción fundamentales de cualquier aplicación construida con React. Cada componente en una aplicación React funciona como un módulo distinto y autónomo. Son responsables de gestionar su propio contenido, presentación y comportamiento, creando una estructura fácilmente manejable dentro de la propia aplicación.

Los componentes en React encapsulan toda la lógica necesaria para su operación. Esto incluye la renderización de la interfaz de usuario (UI), el manejo del estado (los datos que pueden cambiar con el tiempo y afectar cómo se comporta la aplicación) y la respuesta a las interacciones del usuario. Al encapsular esta lógica dentro de cada componente, React facilita la creación de una estructura limpia, eficiente y escalable para las aplicaciones.

Hay dos tipos de componentes en React: Componentes Funcionales y Componentes de Clase. Los componentes funcionales son funciones de JavaScript que aceptan propiedades (props) y devuelven elementos HTML que describen cómo debería verse la UI. Los componentes de clase eran el método principal para crear componentes que manejan lógica de estado compleja y métodos de ciclo de vida antes de la introducción de Hooks.

React también utiliza una extensión de sintaxis para JavaScript llamada JSX (JavaScript XML) para describir cómo debería verse la UI. JSX te permite escribir código similar a HTML dentro de tu JavaScript, haciendo que el código sea más legible y fácil de entender.

En React, el estado es un objeto que determina cómo se renderiza y se comporta un componente. Los componentes de React pueden tener un estado local, gestionado ya sea por useState en componentes funcionales o this.state en componentes de clase. Los métodos de ciclo de vida en componentes de clase y el Hook useEffect en componentes funcionales te permiten ejecutar código en momentos específicos del ciclo de vida del componente.

El manejo de entradas y acciones del usuario es una parte crítica de cualquier aplicación. React simplifica el manejo de eventos con su propio sistema de eventos sintéticos, asegurando la consistencia en todos los navegadores.

En general, entender los componentes de React es crucial para desarrollar aplicaciones usando React. El concepto de componentes permite a los desarrolladores crear interfaces de usuario complejas con piezas de código reutilizables, llevando a aplicaciones que son más fáciles de desarrollar y mantener.

Tipos de Componentes:

Componentes Funcionales

Estos son funciones de JavaScript que aceptan propiedades (props) y devuelven elementos HTML que describen la UI. Con la introducción de Hooks, los componentes funcionales también pueden gestionar el estado y otras características de React.

Los componentes funcionales son un tipo específico de arquitectura de componentes en React, que es una biblioteca popular de JavaScript para construir interfaces de usuario interactivas. Se nombran así porque son simplemente funciones de JavaScript. A diferencia de los componentes de clase, no extienden ninguna clase base, sino que devuelven HTML a través de una función de renderizado.

Los componentes funcionales han ganado popularidad por su simplicidad y concisión. Son menos verbosos, más fáciles de leer y probar, lo que lleva a menos errores en el código. Los componentes funcionales simplemente reciben datos y los muestran de alguna forma; es decir, son principalmente responsables de la UI.

En las primeras versiones de React, los componentes funcionales también se conocían como componentes sin estado, ya que no tenían acceso al estado ni a los métodos del ciclo de vida. Sin embargo, con la introducción de Hooks en React 16.8, los componentes funcionales ahora pueden gestionar el estado y los efectos secundarios, que eran capacidades anteriormente exclusivas de los componentes de clase.

Una ventaja significativa de los componentes funcionales es la capacidad de usar los Hooks integrados de React. Los Hooks permiten a los componentes funcionales usar el estado y otras características de React sin escribir una clase. Los Hooks useState y useEffect son los más comúnmente utilizados, permitiendo la gestión del estado y el uso de eventos del ciclo de vida respectivamente dentro de los componentes funcionales.

Un ejemplo de un componente funcional simple sería:

import React from 'react';

function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
}

export default Welcome;

Este es un ejemplo simple de un componente funcional en React. El componente está escrito en un lenguaje llamado JSX (JavaScript XML), una extensión de sintaxis para JavaScript que te permite escribir lo que parece HTML en tu código JavaScript.

El componente es una función llamada 'Welcome'. Como es común en los componentes funcionales en React, esta función toma un argumento llamado 'props', que son las propiedades. Estas propiedades son esencialmente entradas para el componente que se pueden usar para pasar datos a él. En este caso, se espera que 'props' contenga una propiedad llamada 'name'.

Dentro de la función, se devuelve un único elemento similar a HTML, un encabezado 'h1'. Entre las etiquetas de apertura y cierre de este encabezado, se escribe la expresión {props.name}. Este es un ejemplo de sintaxis JSX, donde las expresiones de JavaScript se pueden incrustar dentro del código similar a HTML envolviendo la expresión en llaves. Aquí, la expresión está accediendo a la propiedad 'name' del objeto 'props'.

Cuando este componente se usa en una aplicación React, renderizará un encabezado 'h1' con el contenido "Hello, {name}!", donde {name} será reemplazado por cualquier valor que se pase como la propiedad 'name' al componente 'Welcome'.

Finalmente, la línea 'export default Welcome' al final del código está usando el sistema de módulos de JavaScript para exportar la función 'Welcome' desde este archivo. La palabra clave 'default' indica que 'Welcome' es la exportación predeterminada de este archivo, lo que significa que se puede importar sin necesidad de usar llaves en la declaración de importación. Esto hace que el componente 'Welcome' esté disponible para ser importado y utilizado en otras partes de la aplicación.

Para resumir, este es un componente funcional simple de React que toma una propiedad 'name' y renderiza un mensaje de saludo con ese nombre en un encabezado 'h1'. Este componente se puede reutilizar en cualquier lugar donde se necesite un mensaje de saludo en la aplicación.

Componentes de Clase

Antes de los Hooks, los componentes de clase eran el método principal para crear componentes que manejan lógica de estado compleja y métodos de ciclo de vida.

En el contexto de React, los componentes de clase son clases de JavaScript ES6 que extienden la clase React.Component importada de la biblioteca React. La clase React.Component es una clase base abstracta que proporciona la funcionalidad central para los componentes de React, incluyendo los métodos de ciclo de vida y la capacidad de mantener y gestionar el estado.

Los componentes de clase tienen un método render que devuelve un elemento React (normalmente escrito en JSX, una extensión de sintaxis para JavaScript que se asemeja a HTML). Este elemento React describe lo que debería aparecer en la pantalla cuando se renderiza el componente.

Una de las características distintivas de los componentes de clase es su capacidad para tener estado local. El estado en React es una estructura de datos que mantiene y gestiona los datos que pueden cambiar durante el ciclo de vida del componente y afectan el comportamiento y la renderización del componente. En los componentes de clase, el estado se inicializa en el constructor y se puede actualizar usando el método setState proporcionado por React.Component.

Otra característica importante de los componentes de clase son los métodos de ciclo de vida. Estos son métodos especiales que se llaman automáticamente durante diferentes etapas del ciclo de vida de un componente, como cuando se crea, se actualiza o se destruye. Estos métodos permiten a los desarrolladores controlar lo que sucede cuando los componentes se montan, se actualizan o se desmontan, proporcionando un alto grado de control sobre el comportamiento del componente.

Sin embargo, aunque los componentes de clase son poderosos, también pueden ser verbosos y complejos, especialmente para los principiantes. Además, la introducción de Hooks en React 16.8 ha hecho posible usar características de estado y ciclo de vida en componentes funcionales, haciéndolos igualmente poderosos que los componentes de clase, lo que ha llevado a un cambio en la comunidad de React hacia los componentes funcionales.

Aún así, entender los componentes de clase es crucial, ya que muchas bases de código de React más antiguas y existentes usan ampliamente los componentes de clase, y siguen siendo una parte fundamental del modelo de componentes de React.

9.2.3 JSX - JavaScript XML

JSX, que significa JavaScript XML, es una extensión de sintaxis para JavaScript. Fue desarrollado y es ampliamente utilizado por React, una popular biblioteca de JavaScript para construir interfaces de usuario. JSX no es un lenguaje de programación, pero permite a los desarrolladores escribir una sintaxis similar a HTML directamente en su código JavaScript.

JSX hace que sea más fácil e intuitivo crear y gestionar HTML complejo y dinámico en tu aplicación JavaScript. Proporciona una sintaxis más legible y expresiva para estructurar tu código UI y se beneficia del poder y la flexibilidad de JavaScript.

Uno de los aspectos únicos de JSX es que no solo se usa para el marcado HTML. También puede crear componentes definidos por el usuario, permitiendo la composición de interfaces de usuario complejas a partir de componentes más pequeños y reutilizables. Esta arquitectura basada en componentes está en el corazón de bibliotecas como React, y JSX juega un papel crucial en ella.

Un ejemplo simple de código JSX podría verse así:

const element = <h1 className="greeting">Hello, world!</h1>;

En este ejemplo, el JSX se traduce en una función JavaScript que crea un elemento HTML h1 con la clase "greeting" y el texto "Hello, world!".

Lo más importante a recordar sobre JSX es que, en última instancia, se compila en JavaScript regular. En el fondo, la sintaxis de JSX se transforma en llamadas a React.createElement(), un método proporcionado por la biblioteca React. Esta conversión generalmente se realiza usando un compilador de JavaScript como Babel.

A pesar de su sintaxis similar a HTML, JSX viene con todo el poder de JavaScript. Permite incrustar cualquier expresión de JavaScript dentro de llaves {} en tu código JSX.

En conclusión, JSX es una herramienta poderosa para escribir código de interfaz de usuario declarativo y basado en componentes en JavaScript. Combina la expresividad de HTML con el poder de JavaScript, resultando en una forma más intuitiva y eficiente de construir interfaces de usuario en JavaScript.

9.2.4 Estado y Ciclo de Vida

En React, el estado es un objeto que determina cómo se renderiza y se comporta un componente. Los componentes de React pueden tener estado local, gestionado ya sea por useState en componentes funcionales o this.state en componentes de clase.

El 'estado' en React es un objeto incorporado que contiene valores de propiedades que pertenecen a un componente. Cuando el objeto de estado cambia, el componente se vuelve a renderizar. El estado se usa para datos que cambiarán con el tiempo o que afectarán el comportamiento o la renderización del componente. Por ejemplo, la entrada del usuario, las respuestas del servidor y más. El estado se inicializa en el constructor de un componente de clase, o utilizando el Hook useState en componentes funcionales. Las actualizaciones del estado se realizan a través del método setState o la función de establecimiento de valores devuelta por useState.

El 'Ciclo de Vida' de un componente React se refiere a las diferentes fases por las que pasa un componente desde su creación hasta su eliminación del DOM. Cada fase viene con métodos que React llama en momentos particulares, lo que te permite controlar lo que sucede cuando un componente se monta, se actualiza o se desmonta. En los componentes de clase, estos son métodos como componentDidMount, componentDidUpdate y componentWillUnmount. Con la introducción de los hooks en React, se pueden lograr efectos similares en componentes funcionales usando el Hook useEffect.

Entender estos conceptos es clave para gestionar datos y comportamientos en aplicaciones React. Permiten a los desarrolladores controlar el proceso de renderización y reaccionar a cambios en el estado o las propiedades, creando interfaces de usuario dinámicas e interactivas.

Ejemplo de Estado en un Componente Funcional:

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={increment}>Click me</button>
        </div>
    );
}

export default Counter;

Este ejemplo utiliza la biblioteca React para crear un componente de contador simple. El código demuestra el uso de componentes funcionales de React y el hook useState, una característica introducida en la versión 16.8 de React que permite agregar estado a tus componentes funcionales.

Desglosamos el código:

La declaración import React, { useState } from 'react'; se usa para importar la biblioteca React y el hook useState en el archivo.
function Counter() { ... } define un componente funcional llamado Counter. En React, un componente se puede definir como una función que devuelve un elemento React. Este elemento describe lo que debe aparecer en la pantalla cuando se renderiza el componente.
Dentro del componente Counter, const [count, setCount] = useState(0); utiliza el hook useState para crear una nueva variable de estado llamada count. Esta variable contendrá el conteo actual. El hook useState también devuelve una función (setCount) que podemos usar para actualizar el estado count. El argumento pasado a useState (en este caso, 0) es el valor inicial del estado.
const increment = () => { ... }; define una función llamada increment. Esta función, cuando se llame, actualizará el estado count llamando a setCount(count + 1), aumentando efectivamente el count en 1.
La declaración return en la función describe la salida renderizada del componente. Devuelve un elemento div que contiene un párrafo y un botón. El párrafo muestra el conteo actual, que se inserta dinámicamente usando llaves. El botón, cuando se haga clic en él, llamará a la función increment, incrementando así el conteo.
La línea export default Counter; exporta el componente Counter, haciéndolo disponible para su uso en otras partes de la aplicación.

La salida de este componente en la pantalla sería un texto que muestra "You clicked X times", donde X es el conteo actual, y un botón que dice "Click me". Cada vez que se haga clic en el botón, el conteo aumentará en 1.

Este ejemplo de código demuestra los conceptos básicos de la gestión del estado en React usando el hook useState y los componentes funcionales, ambos centrales para el desarrollo moderno de React.

Los métodos de ciclo de vida en los componentes de clase te permiten ejecutar código en momentos particulares del ciclo de vida, como componentDidMount, componentDidUpdate y componentWillUnmount. Con los Hooks en componentes funcionales, se logran efectos similares usando useEffect.

9.2.5 Manejo de Eventos

"Manejo de Eventos" se refiere al proceso de gestionar y responder a las interacciones del usuario o eventos del sistema en una aplicación de software. Estas interacciones pueden incluir una amplia variedad de acciones, como clics del mouse, pulsaciones de teclas del teclado, gestos táctiles o incluso comandos de voz en algunas aplicaciones. Los eventos del sistema pueden ser cualquier cosa, desde que se agote un temporizador, cambie el estado del sistema, se reciban datos de un servidor, etc.

Cuando un usuario interactúa con una aplicación, se crean y se despachan eventos para ser manejados por la aplicación. Por ejemplo, cuando un usuario hace clic en un botón, se genera un evento de clic. La aplicación debe decidir cómo responder a este evento, que es donde entra el manejo de eventos. Esta respuesta podría ser cualquier cosa, desde abrir una nueva ventana, obtener datos, cambiar el estado de la aplicación y más.

En el contexto de JavaScript y aplicaciones web, el manejo de eventos a menudo se asocia con elementos HTML específicos. Por ejemplo, un elemento de botón podría tener un controlador de eventos de clic que desencadena una función cuando se hace clic en el botón.

En frameworks de JavaScript como React, el manejo de eventos se realiza usando lo que se conoce como Eventos Sintéticos. El sistema de Eventos Sintéticos de React es un envoltorio multiplataforma alrededor del sistema de eventos nativo del navegador, que asegura que los eventos tengan propiedades consistentes en diferentes navegadores.

Aquí tienes un ejemplo de manejo de eventos en React:

function ActionLink() {
    const handleClick = (e) => {
        e.preventDefault();
        console.log('The link was clicked.');
    };

    return (
        <a href="#" onClick={handleClick}>
            Click me
        </a>
    );
}

Este ejemplo demuestra la creación de un componente funcional en React. El componente específico detallado en el código se llama 'ActionLink'. Este es un tipo de componente funcional en React. Los componentes funcionales son una forma más simple de escribir componentes en React. Son simplemente funciones de JavaScript que devuelven elementos React.

El componente ActionLink se define como una función de JavaScript:

function ActionLink() {
    ...
}

Dentro de la función ActionLink, se define otra función llamada handleClick:

const handleClick = (e) => {
    e.preventDefault();
    console.log('The link was clicked.');
};

Esta función handleClick es un controlador de eventos para eventos de clic. Toma un objeto de evento e como argumento. Este objeto e representa el evento que ocurrió. El método preventDefault se llama en el objeto del evento para evitar que se realice la acción predeterminada asociada con el evento. En este caso, evita la acción predeterminada de un clic en un enlace, que es navegar a una nueva URL.

En lugar de navegar a una nueva URL, la función registra 'The link was clicked.' en la consola. Esto se logra con el método console.log, que imprime el mensaje proporcionado en la consola del navegador web.

Finalmente, el componente ActionLink devuelve un elemento JSX:

return (
    <a href="#" onClick={handleClick}>
        Click me
    </a>
);

JSX es una extensión de sintaxis para JavaScript que se usa con React para describir cómo debería verse la UI. El elemento JSX devuelto es una etiqueta de anclaje, que generalmente se usa para crear enlaces.

El atributo onClick es una prop especial en React que se usa para manejar eventos de clic. La función handleClick se pasa a la prop onClick. Esto significa que cuando se hace clic en el enlace, se ejecutará la función handleClick.

En resumen, este componente ActionLink, cuando se usa en una aplicación React, renderizará un enlace que dice 'Click me'. Cuando se hace clic en este enlace, en lugar de navegar a una nueva URL (que es el comportamiento predeterminado de los enlaces), registrará 'The link was clicked.' en la consola.

React proporciona un conjunto rico de características que lo hacen ideal para desarrollar interfaces de usuario complejas con menos código y mayor reutilización. Comenzando con estos conceptos básicos—componentes, JSX, estado, métodos de ciclo de vida y manejo de eventos—ahora tienes el conocimiento fundamental para profundizar en características y patrones más avanzados de React.

Si quieres profundizar en React, consulta nuestros otros libros publicados en: https://www.cuantum.tech/books. Considera nuestro libro específico de React o sigue nuestra ruta de aprendizaje completa de desarrollo web para convertirte en un maestro en desarrollo web.