Tutorial React Hooks: Cómo crear aplicaciones React paso a paso para desarrolladores intermedios

React ha revolucionado el desarrollo web al ofrecer una forma intuitiva y eficiente de construir interfaces de usuario. En este tutorial React Hooks, te guiaremos paso a paso para desarrollar aplicaciones modernas usando React y su poderoso sistema de hooks. Este contenido está dirigido a desarrolladores de nivel intermedio que quieren profundizar en la programación React para intermedios, mejorando sus habilidades para manejar estado, efectos y crear componentes funcionales de manera óptima.

¿Por qué usar React Hooks?

Los Hooks permiten usar estado y otras características de React sin escribir una clase. Esto simplifica la estructura de componentes, mejora la legibilidad y promueve la reutilización de lógica.

Principales ventajas:

Código más limpio y declarativo.
Mejor separación de responsabilidades.
Fácil manejo de efectos secundarios.
Promueven una programación funcional.

Requisitos previos

Para aprovechar este tutorial, debes tener:

Conocimiento básico de React (componentes, props).
Entendimiento básico de JavaScript moderno (ES6+).
Node.js y npm instalados.

Paso 1: Configurando el proyecto React

Para comenzar, crea un nuevo proyecto React con CRA (Create React App):

npx create-react-app mi-app-react-hooks
cd mi-app-react-hooks
npm start

npx create-react-app mi-app-react-hooks

cd mi-app-react-hooks

npm start

Esto inicializa la aplicación y abre el navegador en http://localhost:3000.

Paso 2: Creación de componentes funcionales

Con React Hooks, usar componentes funcionales es la forma recomendada.

Componente funcional básico

import React from 'react';

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

export default Saludo;

import React from 'react';

function Saludo({ nombre }) {

return <h1>Hola, {nombre}!</h1>;

}

export default Saludo;

Este componente recibe una prop nombre y muestra un saludo.

Uso del componente

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

function App() {
  return (
    <div>
      <Saludo nombre="Ana" />
    </div>
  );
}

export default App;

import React from 'react';

import Saludo from './Saludo';

function App() {

return (

<div>

</div>

);

}

export default App;

Paso 3: Manejo de estado con useState

useState es el hook fundamental para agregar y manejar estado en componentes funcionales.

Ejemplo práctico: Contador simple

import React, { useState } from 'react';

function Contador() {
  // Declarar una variable de estado llamada 'contador' y la función para actualizarla
  const [contador, setContador] = useState(0);

  const incrementar = () => {
    setContador(contador + 1);
  };

  return (
    <div>
      <p>Valor del contador: {contador}</p>
      <button onClick={incrementar}>Incrementar</button>
    </div>
  );
}

export default Contador;

import React, { useState } from 'react';

function Contador() {

// Declarar una variable de estado llamada 'contador' y la función para actualizarla

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

const incrementar = () => {

setContador(contador + 1);

};

return (

<div>

<p>Valor del contador: {contador}</p>

<button onClick={incrementar}>Incrementar</button>

</div>

);

}

export default Contador;

Explicación paso a paso:

Importamos useState desde React.
Inicializamos el estado con el valor inicial 0.
contador es el valor actual del estado.
setContador es la función que actualiza el estado.
Cada vez que el botón es clickeado, incrementamos el estado usando setContador.

Integración en la aplicación

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

function App() {
  return (
    <div>
      <h1>Aplicación React con Hooks</h1>
      <Contador />
    </div>
  );
}

export default App;

import React from 'react';

import Contador from './Contador';

function App() {

return (

<div>

<h1>Aplicación React con Hooks</h1>

</div>

);

}

export default App;

Paso 4: Uso de useEffect para efectos secundarios

useEffect permite manejar ciclos de vida y efectos secundarios como llamadas a APIs, suscripciones o manipulación del DOM.

Ejemplo: Fetch de datos con useEffect

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

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

  useEffect(() => {
    // Fetch API al montarse el componente
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        setUsuarios(data);
        setCargando(false);
      })
      .catch(error => {
        console.error('Error al obtener usuarios:', error);
        setCargando(false);
      });
  }, []); // [] indica que se ejecuta solo una vez al montar

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

  return (
    <div>
      <h2>Lista de Usuarios</h2>
      <ul>
        {usuarios.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Usuarios;

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

function Usuarios() {

const [usuarios, setUsuarios] = useState([]);

const [cargando, setCargando] = useState(true);

useEffect(() => {

// Fetch API al montarse el componente

fetch('https://jsonplaceholder.typicode.com/users')

.then(response => response.json())

.then(data => {

setUsuarios(data);

setCargando(false);

})

.catch(error => {

console.error('Error al obtener usuarios:', error);

setCargando(false);

});

}, []); // [] indica que se ejecuta solo una vez al montar

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

return (

<div>

<h2>Lista de Usuarios</h2>

<ul>

{usuarios.map(user => (

))}

</ul>

</div>

);

}

export default Usuarios;

Detalles importantes:

El array vacío [] como segundo argumento hace que el efecto se ejecute solo al montar el componente.
Cambiamos el estado para reflejar que los datos se están cargando y luego terminamos la carga.
Manejo simple de errores con catch.

Paso 5: Buenas prácticas en desarrollo React con Hooks

1. Nombres claros para estados y setters

Usa nombres intuitivos para variables de estado y sus funciones, preferiblemente con el formato [nombre, setNombre].

2. Evita efectos innecesarios

Siempre define correctamente la dependencia en los arrays de useEffect para evitar renders extra.

3. Divide lógica compleja en hooks personalizados

Si varios componentes usan la misma lógica de estado o efecto, crea hooks personalizados para reutilizar código.

4. No llames hooks condicionalmente

Asegúrate que hooks como useState y useEffect estén siempre en el mismo orden y no en condiciones o bucles.

5. Usa `useCallback` y `useMemo` para optimizar

Cuando pases funciones como props o cálculos costosos, usa estos hooks para evitar renders innecesarios.

Bonus: Creando un hook personalizado simple

import { useState, useEffect } from 'react';

// Hook para detectar tamaño de ventana
function useVentana() {
  const [ventanaAncho, setVentanaAncho] = useState(window.innerWidth);

  useEffect(() => {
    const manejarResize = () => setVentanaAncho(window.innerWidth);
    window.addEventListener('resize', manejarResize);

    return () => {
      window.removeEventListener('resize', manejarResize);
    };
  }, []);

  return ventanaAncho;
}

export default useVentana;

import { useState, useEffect } from 'react';

// Hook para detectar tamaño de ventana

function useVentana() {

const [ventanaAncho, setVentanaAncho] = useState(window.innerWidth);

useEffect(() => {

const manejarResize = () => setVentanaAncho(window.innerWidth);

window.addEventListener('resize', manejarResize);

return () => {

window.removeEventListener('resize', manejarResize);

};

}, []);

return ventanaAncho;

}

export default useVentana;

Uso del hook personalizado

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

function MostrarAncho() {
  const ancho = useVentana();

  return <p>El ancho de la ventana es: {ancho}px</p>;
}

export default MostrarAncho;

import React from 'react';

import useVentana from './useVentana';

function MostrarAncho() {

const ancho = useVentana();

return <p>El ancho de la ventana es: {ancho}px</p>;

}

export default MostrarAncho;

Conclusión

En este tutorial React Hooks para programación React para intermedios, aprendiste a:

Crear componentes funcionales modernos.
Manejar estado con useState.
Controlar efectos secundarios con useEffect.
Aplicar buenas prácticas para mantener tu código limpio y eficiente.

Los hooks son la herramienta esencial para el desarrollo web con React hoy en día. Te invitamos a seguir experimentando con ellos y crear aplicaciones innovadoras y performantes.

Llamada a la acción

¿Quieres llevar tus aplicaciones React al siguiente nivel? Suscríbete a nuestro boletín para recibir más tutoriales React Hooks, tips de desarrollo web con React y noticias acerca de nuevas tecnologías.

¡Empieza a aprovechar todo el potencial de React y sus hooks ahora mismo!

Tutorial React Hooks: Cómo crear aplicaciones React paso a paso para desarrolladores intermedios

¿Por qué usar React Hooks?

Requisitos previos

Paso 1: Configurando el proyecto React

Paso 2: Creación de componentes funcionales

Componente funcional básico

Uso del componente

Paso 3: Manejo de estado con useState

Ejemplo práctico: Contador simple

Integración en la aplicación

Paso 4: Uso de useEffect para efectos secundarios

Ejemplo: Fetch de datos con useEffect

Paso 5: Buenas prácticas en desarrollo React con Hooks

1. Nombres claros para estados y setters

2. Evita efectos innecesarios

3. Divide lógica compleja en hooks personalizados

4. No llames hooks condicionalmente

5. Usa useCallback y useMemo para optimizar

Bonus: Creando un hook personalizado simple

Uso del hook personalizado

Conclusión

Llamada a la acción

5. Usa `useCallback` y `useMemo` para optimizar