En esta sección, aprenderemos cómo gestionar el estado de nuestra aplicación React y cómo integrar APIs para obtener y enviar datos. Este es un paso crucial para construir aplicaciones completas y funcionales.
Objetivos
- Comprender cómo gestionar el estado global de la aplicación.
- Aprender a integrar APIs externas utilizando
fetchyaxios. - Implementar la gestión del estado y la integración de API en un proyecto React.
Contenido
Gestión del Estado Global
Context API
La Context API de React es una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel.
Creando un Contexto
import React, { createContext, useState } from 'react';
// Crear el contexto
export const AppContext = createContext();
const AppProvider = ({ children }) => {
const [state, setState] = useState({
user: null,
theme: 'light',
});
return (
<AppContext.Provider value={{ state, setState }}>
{children}
</AppContext.Provider>
);
};
export default AppProvider;Usando el Contexto en Componentes
import React, { useContext } from 'react';
import { AppContext } from './AppProvider';
const UserProfile = () => {
const { state, setState } = useContext(AppContext);
const updateUser = () => {
setState({ ...state, user: { name: 'John Doe' } });
};
return (
<div>
<h1>User Profile</h1>
<p>Name: {state.user ? state.user.name : 'Guest'}</p>
<button onClick={updateUser}>Update User</button>
</div>
);
};
export default UserProfile;Redux
Redux es una biblioteca para la gestión del estado de aplicaciones JavaScript. Es especialmente útil para aplicaciones grandes donde la gestión del estado puede volverse compleja.
Configuración de Redux
// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;Creando Reducers y Actions
// actions.js
export const setUser = (user) => ({
type: 'SET_USER',
payload: user,
});
// reducers.js
const initialState = {
user: null,
};
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case 'SET_USER':
return { ...state, user: action.payload };
default:
return state;
}
};
export default rootReducer;Conectando Redux a React
// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import UserProfile from './UserProfile';
const App = () => (
<Provider store={store}>
<UserProfile />
</Provider>
);
export default App;Integración de API con Fetch
Realizando una Petición GET
import React, { useEffect, useState } from 'react';
const FetchData = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error('Error fetching data:', error));
}, []);
return (
<div>
<h1>Data from API</h1>
{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
</div>
);
};
export default FetchData;Realizando una Petición POST
const postData = async (url = '', data = {}) => {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
return response.json();
};
postData('https://api.example.com/data', { answer: 42 })
.then(data => console.log(data))
.catch(error => console.error('Error posting data:', error));Integración de API con Axios
Instalación de Axios
Primero, instala Axios usando npm o yarn:
Realizando una Petición GET con Axios
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const FetchDataWithAxios = () => {
const [data, setData] = useState(null);
useEffect(() => {
axios.get('https://api.example.com/data')
.then(response => setData(response.data))
.catch(error => console.error('Error fetching data:', error));
}, []);
return (
<div>
<h1>Data from API</h1>
{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
</div>
);
};
export default FetchDataWithAxios;Realizando una Petición POST con Axios
axios.post('https://api.example.com/data', {
answer: 42
})
.then(response => console.log(response.data))
.catch(error => console.error('Error posting data:', error));Ejercicio Práctico
Objetivo
Crear una aplicación React que gestione el estado global utilizando Context API y realice peticiones a una API externa para obtener y mostrar datos.
Instrucciones
- Configura el Contexto: Crea un contexto para gestionar el estado global de la aplicación.
- Crea un Componente de Datos: Crea un componente que realice una petición GET a una API externa y muestre los datos.
- Integra el Contexto y el Componente de Datos: Usa el contexto para gestionar el estado de los datos obtenidos de la API y muéstralos en el componente.
Solución
// AppProvider.js
import React, { createContext, useState } from 'react';
export const AppContext = createContext();
const AppProvider = ({ children }) => {
const [data, setData] = useState(null);
return (
<AppContext.Provider value={{ data, setData }}>
{children}
</AppContext.Provider>
);
};
export default AppProvider;
// FetchData.js
import React, { useContext, useEffect } from 'react';
import axios from 'axios';
import { AppContext } from './AppProvider';
const FetchData = () => {
const { data, setData } = useContext(AppContext);
useEffect(() => {
axios.get('https://api.example.com/data')
.then(response => setData(response.data))
.catch(error => console.error('Error fetching data:', error));
}, [setData]);
return (
<div>
<h1>Data from API</h1>
{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
</div>
);
};
export default FetchData;
// App.js
import React from 'react';
import AppProvider from './AppProvider';
import FetchData from './FetchData';
const App = () => (
<AppProvider>
<FetchData />
</AppProvider>
);
export default App;Conclusión
En esta sección, hemos aprendido cómo gestionar el estado global de una aplicación React utilizando Context API y Redux. También hemos visto cómo integrar APIs externas utilizando fetch y axios. Estos conceptos son fundamentales para construir aplicaciones React robustas y escalables. En el próximo módulo, nos enfocaremos en la optimización del rendimiento de nuestras aplicaciones React.
Curso de React
Módulo 1: Introducción a React
- ¿Qué es React?
- Configuración del Entorno de Desarrollo
- Hola Mundo en React
- JSX: Extensión de Sintaxis de JavaScript
Módulo 2: Componentes de React
- Entendiendo los Componentes
- Componentes Funcionales vs de Clase
- Props: Pasando Datos a Componentes
- State: Gestión del Estado del Componente
Módulo 3: Trabajando con Eventos
- Manejo de Eventos en React
- Renderizado Condicional
- Listas y Claves
- Formularios y Componentes Controlados
Módulo 4: Conceptos Avanzados de Componentes
- Elevando el Estado
- Composición vs Herencia
- Métodos del Ciclo de Vida de React
- Hooks: Introducción y Uso Básico
Módulo 5: Hooks de React
Módulo 6: Enrutamiento en React
Módulo 7: Gestión del Estado
- Introducción a la Gestión del Estado
- API de Contexto
- Redux: Introducción y Configuración
- Redux: Acciones y Reductores
- Redux: Conectando a React
Módulo 8: Optimización del Rendimiento
- Técnicas de Optimización del Rendimiento en React
- Memorización con React.memo
- Hooks useMemo y useCallback
- División de Código y Carga Perezosa
Módulo 9: Pruebas en React
- Introducción a las Pruebas
- Pruebas Unitarias con Jest
- Pruebas de Componentes con React Testing Library
- Pruebas de Extremo a Extremo con Cypress
Módulo 10: Temas Avanzados
- Renderizado del Lado del Servidor (SSR) con Next.js
- Generación de Sitios Estáticos (SSG) con Next.js
- TypeScript con React
- React Native: Creación de Aplicaciones Móviles