Creación de Hooks para Consumo de APIs en React con Axios

Clase 9 de 22 • Curso de Webpack con Express.js, React.js y TypeScript

Resumen

¿Cómo configurar una API en un proyecto con React y Axios?

Integrar una API a un proyecto en React puede aumentar significativamente su funcionalidad y dinamismo. Al aplicar técnicas de optimización mediante herramientas como Webpack y Axios, el proceso se vuelve más eficiente. Aquí, te enseñaré cómo configurar adecuadamente una API utilizando la librería Axios para facilitar peticiones HTTP y gestionar la información de manera organizada.

¿Cuál es el primer paso al trabajar con APIs y React?

Primero, necesitas tener una API lista que puedas utilizar. Esta API te proporcionará los datos necesarios para integrar a tu aplicación. Una vez que tengas la URL, procede a configurarla en tu proyecto React, cerrando elementos innecesarios para trabajar con eficacia.

¿Cómo se implementa un hook en React para manejar peticiones a una API?

Crea un hook personalizado: Dentro de la carpeta src, genera una subcarpeta llamada hooks y dentro de ella, un archivo useInitialState.js.
Importa useEffect y useState: Estos hooks de React son clave para gestionar los efectos laterales y el estado local.

import { useEffect, useState } from 'react';

Instala Axios: En tu terminal, agrega Axios como dependencia para gestionar las peticiones HTTP.
```
npm install axios
```
Configura la API: Define la API en tu código con la URL proporcionada.
```
const API = 'URL_de_tu_API';
```

Crea la función del hook: Implementa una función con la convención use, integrando lógica de estado y efectos.

const useInitialState = () => {
    const [products, setProducts] = useState([]);
    
    useEffect(() => {
        const fetchData = async () => {
            const response = await axios(API);
            setProducts(response.data);
        };
        fetchData();
    }, []);

    return products;
};

export default useInitialState;

¿Cómo se integra el hook dentro del componente principal de la aplicación?

Importa el hook en el componente principal: En el archivo donde react-router se maneja, importa useInitialState.
```
import useInitialState from './hooks/useInitialState';
```

Implementa el hook y valida datos: Asigna los datos que retorna el hook a una constante y realiza validaciones para asegurar que no haya errores en la visualización.

const App = () => {
    const initialState = useInitialState();

    const isEmpty = Object.keys(initialState).length === 0;

    return (
        <>
            {!isEmpty ? (
                <RenderComponent products={initialState.products} />
            ) : (
                <h1>Loading...</h1>
            )}
        </>
    );
};

¿Qué configuraciones adicionales son necesarias para Axios y async/await?

Para asegurar que las funcionalidades de Axios y async/await se comporten adecuadamente en tu proyecto React, debes configurar Babel con los plugins adecuados.

Configura Babel para async/await: Instala un plugin específico que facilite el uso de async/await.
```
npm install @babel/plugin-transform-runtime --save-dev
```
Añade el plugin en Babel: En el archivo .babelrc, incluye el plugin bajo la sección plugins.
```
{
    "plugins": ["@babel/plugin-transform-runtime"]
}
```

Con estas configuraciones listo, ejecuta tu aplicación con npm run start. Observa cómo el proyecto gestiona las peticiones a la API, mostrando mensajes de carga mientras espera los datos y validando la correcta recepción de los mismos. Trabajar con Axios y react-hooks como useEffect y useState optimiza el desarrollo de tus proyectos con React. ¡Sigue perfeccionando tus habilidades en cada clase para expandir tu dominio en el tema!