Formación corporativa en React

¿Qué es un componente en React 19?

Un componente en React 19 es una unidad reutilizable de código que define cómo debe aparecer una parte de la interfaz y cómo debe comportarse. Existen dos tipos principales de componentes en React 19: componentes de clase y componentes funcionales.

Componentes funcionales

Los componentes funcionales son funciones de JavaScript que aceptan props como argumento y devuelven elementos de React. A partir de React 16.8, con la introducción de los Hooks, los componentes funcionales han ganado popularidad y funcionalidad.

import React from 'react';

function Saludo({ nombre }) {
  return <h1>Hola, {nombre}</h1>;
}

export default Saludo;

En este ejemplo, Saludo es un componente funcional que acepta una prop nombre y devuelve un elemento h1 con un saludo.

Hooks en componentes funcionales

Los Hooks permiten usar el estado y otras características de React sin necesidad de escribir una clase. El Hook useState es uno de los más utilizados.

import React, { useState } from 'react';

function Contador() {
  const [cuenta, setCuenta] = useState(0);

  return (
    <div>
      <p>Has hecho clic {cuenta} veces</p>
      <button onClick={() => setCuenta(cuenta + 1)}>Haz clic</button>
    </div>
  );
}

export default Contador;

En este ejemplo, Contador es un componente funcional que utiliza el Hook useState para gestionar el estado cuenta.

Componentes de clase

Aunque los componentes funcionales son más comunes hoy en día, los componentes de clase siguen siendo útiles para comprender el legado de React.

import React, { Component } from 'react';

class Saludo extends Component {
  render() {
    return <h1>Hola, {this.props.nombre}</h1>;
  }
}

export default Saludo;

En este ejemplo, Saludo es un componente de clase que accede a las props a través de this.props.

Ciclo de vida de los componentes

Los componentes de clase tienen métodos específicos que se ejecutan en diferentes etapas de su ciclo de vida. Algunos de los métodos más importantes son:

• componentDidMount(): Se ejecuta después de que el componente se ha montado.
• componentDidUpdate(): Se ejecuta después de que el componente se ha actualizado.
• componentWillUnmount(): Se ejecuta justo antes de que el componente se desmonte.

Comunicación entre componentes

La comunicación entre componentes en React 19 se realiza principalmente a través de las props. Sin embargo, para la gestión de estado global, se recomienda utilizar Context o bibliotecas externas como Redux.

Ejemplo de uso de Context

import React, { createContext, useContext, useState } from 'react';

const TemaContext = createContext();

function ProveedorTema({ children }) {
  const [tema, setTema] = useState('claro');

  return (
    <TemaContext.Provider value={{ tema, setTema }}>
      {children}
    </TemaContext.Provider>
  );
}

function BotonTema() {
  const { tema, setTema } = useContext(TemaContext);

  return (
    <button onClick={() => setTema(tema === 'claro' ? 'oscuro' : 'claro')}>
      Cambiar a tema {tema === 'claro' ? 'oscuro' : 'claro'}
    </button>
  );
}

export { ProveedorTema, BotonTema };

En este ejemplo, TemaContext permite compartir el estado del tema entre componentes sin necesidad de pasar props manualmente en cada nivel.

En la versión React 19, los Hooks de React ofrecen una manera eficiente de gestionar estados y efectos en componentes funcionales. Los Hooks permiten usar características de React sin necesidad de escribir una clase. A continuación, exploraremos los Hooks más utilizados en React 19 y cómo implementarlos.

useState

El Hook useState permite añadir estado a componentes funcionales. Su sintaxis es la siguiente:

import React, { useState } from 'react';

function Contador() {
const [contador, setContador] = useState(0);

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

En este ejemplo, useState devuelve un array con dos elementos: el estado actual (contador) y una función para actualizarlo (setContador).

useEffect

El Hook useEffect se utiliza para realizar efectos secundarios en componentes funcionales, como suscripciones o manipulaciones del DOM. Su sintaxis básica es:

import React, { useEffect, useState } from 'react';

function EjemploUseEffect() {
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>
);
}

El segundo parámetro de useEffect es un array de dependencias. El efecto solo se ejecutará si alguna de las dependencias cambia.

useContext

El Hook useContext permite acceder al contexto de React en componentes funcionales. Su uso es el siguiente:

import React, { useContext } from 'react';

const TemaContexto = React.createContext('claro');

function ComponenteHijo() {
  const tema = useContext(TemaContexto);

  return <div style={{ background: tema === 'claro' ? '#fff' : '#000' }}>
  Tema actual: {tema}
  </div>;
}

function ComponentePadre() {
  return (
  <TemaContexto.Provider value="oscuro">
    <ComponenteHijo />
  </TemaContexto.Provider>
  );
}

useContext permite consumir el valor del contexto sin necesidad de un componente de orden superior.

En React 19, la navegación y el enrutamiento son componentes esenciales para construir aplicaciones web dinámicas y de múltiples páginas. La biblioteca react-router-dom es la herramienta más utilizada para este propósito. A continuación, exploraremos cómo configurar y utilizar la navegación y el enrutamiento en React 19.

Instalación de react-router-dom

Para comenzar, primero necesitamos instalar la biblioteca react-router-dom. Esto se puede hacer utilizando npm o yarn:

npm install react-router-dom

o

yarn add react-router-dom

Configuración básica

Una vez instalada la biblioteca, podemos configurar nuestro enrutador. En el archivo principal de nuestra aplicación (por ejemplo, index.js), importamos los componentes necesarios y envolvemos nuestra aplicación con BrowserRouter:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Definición de rutas

En el componente principal de la aplicación (App.js), podemos definir nuestras rutas utilizando los componentes Routes y Route:

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default App;

Navegación entre rutas

Para navegar entre rutas, podemos utilizar el componente Link o la función useNavigate. El componente Link reemplaza a los enlaces HTML tradicionales:

import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

export default Navbar;

Parámetros de ruta

Podemos definir rutas con parámetros utilizando :. Para acceder a estos parámetros, usamos el hook useParams:

import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
  let { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

Y en la configuración de rutas:

<Routes>
  <Route path="/user/:userId" element={<UserProfile />} />
</Routes>

Redirecciones

Para redirigir a los usuarios a otra ruta, utilizamos el componente Navigate:

import React from 'react';
import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isAuthenticated }) {
  return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}

Anidación de rutas

Podemos anidar rutas para crear una estructura más compleja:

import React from 'react';
import { Routes, Route, Outlet } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Route>
    </Routes>
  );
}

function Layout() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}

export default App;

Esta configuración permite que Navbar se renderice en todas las rutas definidas dentro del componente Layout.

La interacción de React 19 con HTTP backend es fundamental para gestionar datos en aplicaciones modernas. En este módulo, aprenderás cómo realizar peticiones HTTP para obtener, enviar y manipular datos desde un servidor backend empleando React 19 y las herramientas de su ecosistema.

Instalación de Axios

Para facilitar la comunicación HTTP, utilizaremos Axios, una biblioteca popular en el entorno de React. Primero, instalemos Axios en nuestro proyecto:

npm install axios

Configuración inicial

Una vez instalado Axios, configuramos una instancia base para centralizar todas las peticiones HTTP. Esto nos permite reutilizar la configuración y manejar errores de manera eficiente.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.ejemplo.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

Realizar peticiones GET

Para obtener datos del servidor, utilizamos el método get de Axios. Este ejemplo muestra cómo recuperar una lista de usuarios:

import React, { useEffect, useState } from 'react';
import api from './api';

const Usuarios = () => {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    api.get('/usuarios')
      .then(response => {
        setUsuarios(response.data);
      })
      .catch(error => {
        console.error('Error al obtener los usuarios', error);
      });
  }, []);

  return (
    <div>
      <h1>Lista de Usuarios</h1>
      <ul>
        {usuarios.map(usuario => (
          <li key={usuario.id}>{usuario.nombre}</li>
        ))}
      </ul>
    </div>
  );
};

export default Usuarios;

Envío de datos con POST

Para enviar datos al servidor, utilizamos el método post. Este ejemplo muestra cómo agregar un nuevo usuario:

import React, { useState } from 'react';
import api from './api';

const AgregarUsuario = () => {
  const [nombre, setNombre] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    api.post('/usuarios', { nombre })
      .then(response => {
        console.log('Usuario agregado', response.data);
      })
      .catch(error => {
        console.error('Error al agregar el usuario', error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nombre:
        <input type="text" value={nombre} onChange={(e) => setNombre(e.target.value)} />
      </label>
      <button type="submit">Agregar</button>
    </form>
  );
};

export default AgregarUsuario;

Actualización de datos con PUT

Para actualizar datos existentes, utilizamos el método put. Aquí mostramos cómo actualizar la información de un usuario:

import React, { useState } from 'react';
import api from './api';

const ActualizarUsuario = ({ id }) => {
  const [nombre, setNombre] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    api.put(`/usuarios/${id}`, { nombre })
      .then(response => {
        console.log('Usuario actualizado', response.data);
      })
      .catch(error => {
        console.error('Error al actualizar el usuario', error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nombre:
        <input type="text" value={nombre} onChange={(e) => setNombre(e.target.value)} />
      </label>
      <button type="submit">Actualizar</button>
    </form>
  );
};

export default ActualizarUsuario;

Eliminación de datos con DELETE

Para eliminar datos, utilizamos el método delete. Este ejemplo muestra cómo eliminar un usuario:

import React from 'react';
import api from './api';

const EliminarUsuario = ({ id }) => {
  const handleDelete = () => {
    api.delete(`/usuarios/${id}`)
      .then(response => {
        console.log('Usuario eliminado', response.data);
      })
      .catch(error => {
        console.error('Error al eliminar el usuario', error);
      });
  };

  return (
    <button onClick={handleDelete}>Eliminar Usuario</button>
  );
};

export default EliminarUsuario;

La interacción de React 19 con HTTP backend es crucial para aplicaciones que requieran gestión de datos en tiempo real. Utilizar Axios facilita la comunicación con el servidor, permitiendo un manejo eficiente de las peticiones HTTP.

En el desarrollo de aplicaciones con React 19, la gestión del estado y el uso de servicios son aspectos fundamentales para construir aplicaciones eficientes y mantenibles. En esta lección, exploraremos cómo manejar el estado de la aplicación y cómo integrar servicios externos de manera efectiva.

Gestión de estado en React 19

La gestión del estado en React 19 se puede abordar de diversas maneras, dependiendo de la complejidad de la aplicación. A continuación, se presentan algunas estrategias comunes:

Uso de hooks

Los hooks son una característica clave en React para manejar el estado y otros efectos secundarios. Dos hooks fundamentales para la gestión de estado son useState y useReducer.

useState

El hook useState se utiliza para manejar estados locales en componentes funcionales. Ejemplo:

import React, { useState } from 'react';

function Contador() {
const [contador, setContador] = useState(0);

return (
<div>
<p>Contador: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
}

useReducer

Para estados más complejos, useReducer es una alternativa adecuada. Proporciona un enfoque similar a los reducers de Redux.

import React, { useReducer } from 'react';

const initialState = { contador: 0 };

function reducer(state, action) {
switch (action.type) {
case 'incrementar':
return { contador: state.contador + 1 };
case 'decrementar':
return { contador: state.contador - 1 };
default:
return state;
}
}

function Contador() {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
<p>Contador: {state.contador}</p>
<button onClick={() => dispatch({ type: 'incrementar' })}>Incrementar</button>
<button onClick={() => dispatch({ type: 'decrementar' })}>Decrementar</button>
</div>
);
}

Servicios en React 19

La integración de servicios externos es crucial para aplicaciones que dependen de datos externos o APIs. La forma más común de manejar servicios en React es mediante el hook useEffect para manejar efectos secundarios y la API Fetch para realizar solicitudes HTTP.

Fetch y useEffect

A continuación, se muestra un ejemplo de cómo realizar una solicitud HTTP utilizando fetch y useEffect.

import React, { useState, useEffect } from 'react';

function ListaUsuarios() {
const [usuarios, setUsuarios] = useState([]);
const [cargando, setCargando] = useState(true);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
setUsuarios(data);
setCargando(false);
});
}, []);

if (cargando) {
return <p>Cargando...</p>;
}

return (
<ul>
{usuarios.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}

Manejo de errores

Es importante manejar errores en las solicitudes para mejorar la experiencia del usuario:

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => {
if (!response.ok) {
throw new Error('Error en la solicitud');
}
return response.json();
})
.then(data => {
setUsuarios(data);
setCargando(false);
})
.catch(error => {
console.error('Error:', error);
setCargando(false);
});
}, []);

Aprende a integrar TypeScript con React para aprovechar el tipado estático en componentes, props, hooks y eventos. Este módulo cubre la configuración de tipos, el uso de interfaces frente a types, genéricos en hooks como useState y useRef, tipado de event handlers con ChangeEvent y FormEvent, y los patrones habituales al trabajar con children, props opcionales y valores por defecto.

Aprende a testar aplicaciones React con Vitest y React Testing Library. Este módulo cubre la instalación y configuración sobre Vite con jsdom, el uso de render y screen para renderizar componentes, las queries getByRole, getByText, findBy y queryBy, la simulación de interacciones con fireEvent y userEvent, el testing de hooks personalizados con renderHook y act, y el mocking de servicios con vi.mock y waitFor para escenarios asíncronos.