Tutorial React: Introducción a Componentes

¿Qué es un componente en React?

En React, un componente es una pieza fundamental de la arquitectura. Los componentes permiten dividir la interfaz de usuario en partes independientes, reutilizables y manejables. 

Cada componente encapsula su propia lógica y estilo, lo que facilita el mantenimiento y la evolución de la aplicación. 

Un componente en React puede ser tan simple como una función JavaScript o una clase ES6 que retorna un elemento de React. 

Los elementos de React son objetos que describen lo que se debería ver en la pantalla. Aquí se muestra un ejemplo básico de un componente funcional:

export default function MiComponente() {
  return (
    <div>
      <h1>Hola, mundo</h1>
      <p>Este es mi primer componente en React.</p>
    </div>
  );
}

Los componentes también pueden recibir propiedades (props) para personalizar su comportamiento y apariencia. Las props son un mecanismo para pasar datos de un componente padre a un componente hijo. Aquí hay un ejemplo de un componente que recibe props:

export default function Saludo(props) {
  return <h1>Hola, {props.nombre}</h1>;
}

Y así es como se utiliza este componente:

import Saludo from './Saludo';

export default function App() {
  return (
    <div>
      <Saludo nombre="Juan" />
      <Saludo nombre="María" />
    </div>
  );
}

En este caso, el componente Saludo recibe una prop llamada nombre y la utiliza para renderizar un saludo personalizado. Al usar componentes de esta manera, se puede construir interfaces de usuario complejas a partir de piezas pequeñas y manejables.

Hay dos tipos principales de componentes: componentes funcionales y componentes de clase.

Diferencia entre componentes funcionales y componentes de clase

En React, los componentes se pueden definir de dos maneras: como componentes funcionales y como componentes de clase. Ambos tipos de componentes pueden lograr la misma funcionalidad, pero tienen diferencias significativas en su sintaxis y en la manera en que manejan el estado y el ciclo de vida.

Componentes funcionales

• Son funciones de JavaScript que retornan elementos de React.
• Utilizan hooks para manejar el estado y los efectos secundarios.
• Tienen una sintaxis más simple y concisa.
• Desde React 16.8, los componentes funcionales pueden manejar estado y ciclo de vida mediante hooks como useState y useEffect.

Ejemplo de un componente funcional:

import { useState, useEffect } from 'react';

export default function MiComponenteFuncional() {
    const [contador, setContador] = useState(0);

    useEffect(() => {
        document.title = `Has hecho clic ${contador} veces`;
    }, [contador]);

    return (
        <div>
            <p>Has hecho clic {contador} veces</p>
            <button onClick={() => setContador(contador + 1)}>Incrementar</button>
        </div>
    );
}

Componentes de clase

• Son clases de ES6 que extienden de React.Component.
• Utilizan métodos de clase para manejar el estado y el ciclo de vida.
• Requieren más código y tienen una sintaxis más verbosa en comparación con los componentes funcionales.
• Antes de la introducción de los hooks, los componentes de clase eran la única manera de manejar el estado y el ciclo de vida.

Ejemplo de un componente de clase:

// MiComponenteDeClase.jsx
import { Component } from 'react';

export default class MiComponenteDeClase extends Component {
    constructor(props) {
        super(props);
        this.state = { contador: 0 };
    }

    componentDidMount() {
        document.title = `Has hecho clic ${this.state.contador} veces`;
    }

    componentDidUpdate() {
        document.title = `Has hecho clic ${this.state.contador} veces`;
    }

    incrementarContador = () => {
        this.setState((prevState) => ({ contador: prevState.contador + 1 }));
    };

    render() {
        return (
            <div>
                <p>Has hecho clic {this.state.contador} veces</p>
                <button onClick={this.incrementarContador}>Incrementar</button>
            </div>
        );
    }
}

// App.jsx
const App = () => (
  <MiComponenteDeClase />
)
export default App

Diferencias clave:

• Sintaxis: Los componentes funcionales son más concisos y utilizan funciones de flecha y hooks, mientras que los componentes de clase requieren métodos de clase y un constructor para inicializar el estado.
• Estado y ciclo de vida: Los componentes funcionales utilizan hooks (useState, useEffect) para manejar el estado y los efectos secundarios, mientras que los componentes de clase utilizan this.state y métodos del ciclo de vida (componentDidMount, componentDidUpdate).
• Legibilidad y simplicidad: Los componentes funcionales suelen ser más fáciles de leer y escribir, especialmente para componentes simples. Con la llegada de los hooks, se puede argumentar que los componentes funcionales también son más fáciles de mantener en aplicaciones más complejas.
• Performance: No hay diferencias significativas en el rendimiento entre componentes funcionales y de clase. Sin embargo, los hooks permiten una mejor separación de las preocupaciones y pueden ayudar a evitar patrones anti-patrón como el "callback hell".

Recomendación

En la práctica moderna, los componentes funcionales con hooks son la opción preferida debido a su simplicidad y flexibilidad. 

Los componentes de clase siguen siendo válidos y útiles, especialmente en proyectos más antiguos o cuando se trabaja con bibliotecas que aún no soportan completamente los hooks.

Crear y renderizar un componente básico en la aplicación

Para crear y renderizar un componente básico en una aplicación React, se debe seguir una serie de pasos que incluyen la definición del componente, su inclusión en la aplicación y finalmente su renderización en el DOM. 

A continuación se detalla el proceso paso a paso:

Definir el componente: Un componente en React puede ser definido como una función o una clase. En este ejemplo, usaremos un componente funcional ya que es la práctica recomendada en la actualidad.

// MiComponente.jsx
export default function MiComponente() {
    return (
        <div>
            <h1>Hola, mundo</h1>
            <p>Este es un componente básico en React.</p>
        </div>
    );
}

Este código define un componente funcional llamado MiComponente que retorna un fragmento de JSX.

Incluir el componente en la aplicación: Una vez definido el componente, se debe incluir en la aplicación principal. Para esto, se importa el componente y se utiliza dentro del JSX de otro componente, comúnmente dentro del componente raíz de la aplicación (App).

// App.jsx
import MiComponente from './components/MiComponente/MiComponente'

const App = () => (
  <MiComponente />
)

export default App

En este ejemplo, MiComponente es importado y utilizado dentro del componente App. Esto permite que MiComponente se renderice como parte de la interfaz de usuario.

Renderizar el componente en el DOM: Finalmente, se debe renderizar el componente raíz (App) en el DOM. Esto se realiza en el archivo de entrada de la aplicación, típicamente main.jsx.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

En este ejemplo, se utiliza ReactDOM.createRoot para crear un punto de entrada en el DOM donde se montará la aplicación. React.StrictMode es un wrapper que ayuda a identificar problemas potenciales en la aplicación durante el desarrollo.

Modularidad y reutilización de componentes

La modularidad y reutilización de componentes en React son principios esenciales que permiten construir aplicaciones escalables y mantenibles. La idea es dividir la aplicación en componentes pequeños y reutilizables, cada uno con una responsabilidad específica. Esto facilita la gestión del código y mejora la legibilidad y el mantenimiento.

Para lograr una buena modularidad y reutilización, es importante seguir ciertas prácticas y patrones.

Componentes pequeños y específicos: Crear componentes que se encarguen de una única responsabilidad. Esto significa que cada componente debe hacer una cosa y hacerlo bien. Por ejemplo, un componente Button debe encargarse únicamente de renderizar un botón y manejar sus eventos.

export default function Button({ onClick, label }) {
    return <button onClick={onClick}>{label}</button>;
}

Composición de componentes: Utilizar componentes más pequeños dentro de componentes más grandes para construir interfaces complejas. Esto se conoce como composición de componentes. En lugar de tener un componente grande y monolítico, se puede dividir en varios componentes más pequeños y combinarlos.

import Button from "../Button/Button";

export default function Form() {
    const handleSubmit = () => {
        alert('Has enviado el formulario');
    };

    return (
        <form>
            <input type="text" placeholder="Nombre" />
            <Button onClick={handleSubmit} label="Enviar" />
        </form>
    );
}

Uso de props: Pasar datos y funciones a los componentes hijos a través de props. Esto permite que los componentes sean reutilizables y configurables. Las props son un mecanismo para transferir información del padre a hijo.

function Greeting({ name }) {
  return <h1>Hola, {name}</h1>;
}

const App = () => (
  <div>
    <Greeting name="Juan" />
    <Greeting name="María" />
  </div>
)

export default App