Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso Práctico de React.js

Curso Práctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

React Context

21/29
Recursos

Aportes 15

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

useContext

Context es una herramienta para pasar propiedades en un arbol de componentes de arriba hacia abjo sin tener que pasar por componentes intermedios.

Par usar context debemos importar dos cosas:
createContext -> Permite crear el contexto
useContext -> Este hook nos va permitir uusar contextos dentro de los componentes

import { createContext, useContext} from 'react'; // Tambien podemos importarlo de esta manera
// Creando el contexto
const Context = createContext('valor');

createContext recibe un valor inicial que se va seleccionar en caso de no tener un provider. Puede ser cualquier valor (string, number, objeto, array…)

¿Que es un provider?

Es el encargado de poder pasar el contexto hacia los componentes hijos

import { createContext, useContext} from 'react';

//creando el contexto
const Context = createContext('valor por defecto'); 
const Provider = ({children} => {
	return (
//Recibe un valor obligatorio que es el que se va estar pasando a los componentes hijos****
	<Context.Provider value={"soy un valor"} > 
				{children}
		  </Context.Provider>
	)
}

//Finalmente usamos nuestro componente Provider

function App() {
	return (
	<Provider>
			<Contenido>
		</Provider>
	);
}

export default App;

Líneas de viento de un huracán en ciernes

estoy mareao

¿Qué es react context?

React context es una manera de acceder a un tipo de “variables globales” entre nuestros componentes de react. Es decir, hay situaciones en las que quisieramos pasarles datos importantes a un componente de react, y a todos sus nodos hijos. Sin embargo, usando props esta tarea es muy repetitiva y poco efectiva de mantener. Incluso, existen ocasiones que le pasamos props a nodos obligadamente aunque nunca la necesiten. Es aquí cuando entra en acción react context. Nosostros podemos acceder desde donde sea a una variables en nuestra aplicación. E inlcuso podemos crear cuantos contexto queramos donde cada uno mantendra información necesaria.

Si son como yo y quieren ver que al presionar el botón suceda algo podemos jugar con el handleClick un ejemplo simple el console.log() 😄

const handleClick = item => {
		addToCart(item)
		console.log(item)
	}

Min 12:44 aparece un sonido raro de fondo que miedo.

Hasta ahora venía entendiendo algunos hooks explicados en las clases pasadas. Sin embargo, en esta clase siento que casi no entendí nada. Se usan muchos elementos de un lado a otro y se mueven muy rápido. No logré comprender cómo se usa, cómo es la sintaxis, tampoco la parte donde usó el spread operator. En esta clase me parece que da un salto muy grande como de resolver ecuaciones lineales de una variable (tipo secundaria) a pasar a resolver ecuaciones diferenciales.

hola que tal , queria saber que posible error pude haber cometido

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Layout from '@containers/Layout';
import Home from '@pages/Home';
import Login from '@pages/Login';
import RecoveryPassword from '@pages/RecoveryPassword';
import SendEmail from '@pages/SendEmail';
import NewPassword from '@pages/NewPassword';
import MyAccount from '@pages/MyAccount';
import CreateAccount from '@pages/CreateAccount';
import Checkout from '@pages/Checkout';
import Orders from '@pages/Orders';
import NotFound from '@pages/NotFound';
import AppContext from '@context/AppContext';
import useInitialState from '@hooks/useInitialState';
import '@styles/global.css';

const App = () => {
	const initialState = useInitialState();
	return (
		<AppContext.Provider value = {initialState}>
		<BrowserRouter>
			<Layout>
				<Switch>
					<Route exact path="/" component={Home} />
					<Route exact path="/login" component={Login} />
					<Route exact path="/recovery-password" component={RecoveryPassword} />
					<Route exact path="/send-email" component={SendEmail} />
					<Route exact path="/new-password" component={NewPassword} />
					<Route exact path="/account" component={MyAccount} />
					<Route exact path="/signup" component={CreateAccount} />
					<Route exact path="/checkout" component={Checkout} />
					<Route exact path="/orders" component={Orders} />
					<Route path="*" component={NotFound} />
				</Switch>
			</Layout>
		</BrowserRouter>
		</AppContext.Provider>
	);
}

export default App;
import React, { useContext } from 'react';
import '@styles/ProductItem.scss';
import AppContext from '@context/AppContext';
import addToCartImage from '@icons/bt_add_to_cart.svg';

const ProductItem = ({ product }) => {
	const { addToCart } = useContent(AppContext);

	const handleClick = item => {
		addToCart(item);
	}
	return (
		<div className="ProductItem">
			<img src={product.images[0]} alt={product.title} />
			<div className="product-info">
				<div>
					<p>${product.price}</p>
					<p>{product.title}</p>
				</div>
				<figure onClick={ () => handleClick(product)} >
					<img src={addToCartImage} alt="" />
				</figure>
			</div>
		</div>
	);
}


export default ProductItem;
import { useState } from "react";

const initialState = {
    cart: [],
}

const useInitialState = () => {
    const [state,setState] = useState(initialState);

    const addToCart = (payload) => {
        setState({
            ...state,
            cart: [...state.cart, payload]
        });
    };

    return{
        state,
        addToCart
    }

}

export default useInitialState;

const path = require('path');
const HtmlWebpackPlugin = require ('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    mode: 'development',
    resolve:{
        extensions:['.js','.jsx'],
        alias:{
            '@components': path.resolve(__dirname, 'src/components'),
            '@containers': path.resolve(__dirname, 'src/containers'),
            '@pages': path.resolve(__dirname,'src/pages/'),
            '@styles': path.resolve (__dirname,'src/styles/'),
            '@icons': path.resolve(__dirname, 'src/assets/icons/'),
            '@logos': path.resolve(__dirname,'src/assets/logos/'),
            '@hooks': path.resolve(__dirname, 'src/hooks/'),
            '@context': path.resolve(__dirname, 'src/context/')
        }
    },
    module:{
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use:{
                    loader:'babel-loader'
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader:'html-loader',
                    }
                ]
            },
            {
                test: /\.(css|scss)$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ],
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                type:'asset'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename:'[name].css'
        }),
    ],
    devServer:{
        historyApiFallback: true,
    }
}
import React from 'react';

const AppContext = React.createContext({});

export default AppContext;

Me tomo unpar de horas y ver esta clase varias veces para darme cuenta que tenia un error, les comparto por si acaso:
.
codigo con error

const App = () => {
    const initialState = useInitialState(); //Este hook retorna state y addToCart
    return (
        <AppContext.Provider value={'initialState'}>
            <BrowserRouter>
                <Layout>
                    <Routes>

Le pase el valor de inicial state como cadena texto y eso me tomo par de horas entender que pasaba.
.

Como dijo el profesor anterior “Ojo con esto! que sino, no les va a funcionar !!”

.
lo correcto es

const App = () => {
    const initialState = useInitialState(); //Este hook retorna state y addToCart
    return (
        <AppContext.Provider value={initialState}>
            <BrowserRouter>
                <Layout>
                    <Routes>

React Context
React Context is a way to manage state globally.

It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

Creo que el uso de useReducer en combinación con useContext hacen algo muy similar a Redux…

Que clase tan pesada, no entendí nada!

He visto que a varios compañeros les esta pasando lo mismo que a mi y es que no aparece el contenido de la pagina principal y tampoco me puedo cambiar a otras paginas, alguien seria tan amable de informarme por que se esta produciendo este error, cabe aclarar que lo ultimo que hice fue clonar el proyecto del profesor pero el problema continua muchas gracias

![](

Hola muchachos! le encontre una solucion al error que me arrojaba la aplicacion. Espero y les sirva como a mi.

Creo que esta clase debe de tener parte 2 o por lo menos ver el video dos veces para poder entender mejor