Integrando la API de Platzi Store

Curso de Webpack con Express.js, React.js y TypeScript

Introducción

Migración de Webpack 4 a 5: Optimización y Despliegue Completo

Optimización de Proyectos React con Webpack 5 y TypeScript

Webpack en el Backend

Configuración de Webpack con Express y Babel paso a paso

Configuración de Webpack para proyectos Node.js con Express

Migración de Proyectos Express a TypeScript paso a paso

API RESTful con Express y TypeScript: Configuración Inicial JSON

Webpack en el Frontend

Actualización y Optimización de Proyectos con Webpack 5

Configuración de Webpack para Desarrollo y Producción

Implementación de Hooks en React para Consumo de APIs

Uso de Context en React para Gestión de Estado Global

Alias y Rutas Limpias en Webpack: Mejora tus Importaciones

Optimización de Imágenes y Uso de CDN en Webpack

Optimización de Imágenes PNG con Webpack Plugin

Configuración de TypeScript en proyectos React con Webpack

"Configuración de Hot Reload en Proyectos React con Webpack"

Lazy Loading y Dynamic Import en React

Aplicaciones React y Webpack: Integración de Micro Frontends

Configuración de Webpack para Separar Código en Modo Producción

Despliegue

Optimización de Proyectos React para Despliegue en Netlify

Despliegue de API Node.js con Heroku y TypeScript

Conectar un Dominio Personalizado a Netlify y Cloudflare

Migración de Proyectos Wetpack a Producción

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿Cómo integrar Context en un proyecto React?

La integración de Context en un proyecto React es una práctica que no solo organiza mejor el flujo de datos, sino que mejora la escalabilidad y el mantenimiento del código. Utilizar contextos nos permite compartir información a través de los componentes sin necesidad de ‘props’. En este artículo, te guiaremos en cómo implementar Context en React, desde su configuración inicial hasta la actualización de componentes.

¿Cómo se configura un contexto en React?

Crear la carpeta 'context': Dentro de la estructura del proyecto, genera una carpeta llamada 'context' donde vivirá el nuevo recurso. Esto promueve la organización del código.
Crear un archivo de contexto: Dentro de la carpeta 'context', crea un archivo llamado AppContext.js. Este archivo es crucial para la configuración del contexto.
Definir y exportar AppContext:
```
import React from 'react';

const AppContext = React.createContext({});

export default AppContext;
```
En este bloque de código, utilizamos la API de React para generar y exportar un contexto vacío.

¿Cómo se utiliza AppContext en la aplicación?

La integración del contexto en tu aplicación es esencial para compartir datos entre componentes.

Importar AppContext en el componente principal:
```
import AppContext from '../context/AppContext';
```
Esto permite que tu aplicación principal acceda y proporcione este contexto a los componentes hijos.
Encapsular los componentes con el proveedor del contexto:
```
<AppContext.Provider value={initialState}>
  {/* Otros componentes aquí */}
</AppContext.Provider>
```
Utilizamos Provider para encapsular los componentes que necesitan el acceso a los datos proporcionados por el contexto. initialState representa el estado inicial que puede provenir de una llamada API.

¿Cómo se reemplaza Redux con Context?

En proyectos pequeños, Context puede sustituir a Redux de manera eficiente.

Eliminar dependencias de Redux: Remueve el código relacionado a Redux en los componentes. Esto incluye las importaciones y el uso de mapStateToProps y mapDispatchToProps.

Reemplazar el uso de actions y reducers:

Actualiza los componentes para utilizar el estado y funciones del contexto en lugar de las actions de Redux. Puedes usar hooks como useContext para consumir y gestionar el contexto:

import React, { useContext } from 'react';
import AppContext from '../context/AppContext';

const Products = () => {
  const { products } = useContext(AppContext);

  return (
    <div>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
};

¿Cómo se verifica la integración efectiva de Context?

Para asegurarte de que la integración es correcta:

Inicia la aplicación: Utiliza npm run start para lanzar la aplicación y verificar que el contexto se carga sin errores.
Monitorea las redes y consolas: Inspecciona la consola y las redes para asegurar que los datos están siendo fetch correctamente y se muestran en los componentes designados.
Comprueba la transmisión de datos: Utiliza herramientas de depuración para confirmar que los datos fluyen desde la API hasta el contexto y de ahí a los componentes consumidores.

Finalmente, recuerda practicar la refactorización de tu aplicación eliminando elementos innecesarios y variando la organización del código para mejorar la legibilidad. Esto no solo mejorará tus habilidades, sino que también optimizará la aplicabilidad de Context en React.

Aportes 2

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Paolo Joaquin Pinto Perez

hace 4 años

Integrando la API de Platzi Store

Creamos una carpeta dentro de src llamada context.
Dentro de context creamos el archivo AppContext.js
AppContext.js:

import React from 'react';

const AppContext = React.createContext({});

export default AppContext;

En App.jsx importamos AppContext:

import useInitialState from '../hooks/useInitialState';
import AppContext from '../context/AppContext';

Y lo añadimos a nuestro template:

const App = () => {
  const initialState = useInitialState();
  const isEmpty = Object.keys(initialState.products).length;
  return (
    <>
    {isEmpty > 0 ? (
	// START
        <AppContext.Provider value={initialState}>
        <BrowserRouter>
          <Layout>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route exact path="/checkout" component={Checkout} />
              <Route component={NotFound} />
            </Switch>
          </Layout>
        </BrowserRouter>
        </AppContext.Provider>
	// END
      ) : <h1>Loading ...</h1>}
    </>
  )
}

Y Aqui el código de Products.jsx: link

Elioenai Garcia

hace 4 años

En el componente de Products, ya no es necesario usar desestructuración para acceder a products, el api ya regresa directo el array.

Quedaría así:
const products = useContext(AppContext);