No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de React.js

Curso Pr谩ctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

React Context

22/30
Recursos

Aportes 34

Preguntas 16

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渧ariables 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.

ala鈥 as铆 no se explican las bases de uso de un elemento tan complicado. Esto estar铆a much铆simo mejor primero explicarlo en un solo documento, despacio y sin tanto lenguaje decorativo, experimentando cada elemento, y no 鈥渋r aplicando y explicando al tiempo鈥.

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

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 鈥淥jo 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>

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.

Antes de dar mi explicaci贸n, quisiera dar un poco de contexto.

Dentro de esta clase se crea useInitialState, un costume hook que contendr谩 la l贸gica de la aplicaci贸n, y Appcontext. Este ultimo es el que realmente contiene la l贸gica de React Context

**REACT CONTEXT: estado compartido **
Es una forma de tener acceso a datos a trav茅s del 谩rbol de componentes sin tener que pasar props manualmente en cada nivel, usando datos globales.
Para esto tenemos un proveedor que envolver谩 a todos los componentes que ser谩n los consumidores de nuestro contexto.
.
Fases:

  1. Crear el contexto de nuestra aplicaci贸n
  2. Proveer nuestro contexto con los datos que queremos globales.
  3. Consumir los datos desde cualquier parte de nuestra aplicaci贸n.

.

  • CREAR :
    Se crea una carpeta context aparte, en donde tendr谩n todo el contexto de su aplicaci贸n:
    Es importante crear el contexto con createContext, ya que este nos regresar谩 dos componentes: provider y consumer.
import React from 'react';

const AppContext = React.createContext({});

export default AppContext;

Al crear el contexto tambi茅n podemos pasarle un valor inicial entre par茅ntesis, pero en este caso lo iniciamos como un objeto vac铆o
.

  • PROVEER:
    Para poder proveer del contexto se utiliza el m茅todo provider del componente que hemos creado con el contexto (AppContext)
    En la carpeta root se encuentra toda la l贸gica de navegaci贸n de reactShop. Ah铆 es donde retornaremos nuestro provider con nuestro contexto en la etiqueta value.
import AppContext from '../context/AppContext';
import useInitialState from '../hooks/useInitialState';

const App = () => {
	const initialState = useInitialState();
	return (
		<AppContext.Provider value={initialState}>
	{/* todo lo que se encuentra dentro de la etiqueta AppContext.Provider podr谩 utilizar el contexto que se encuentra dentro de la etiqueta value */}
		</AppContext.Provider>
	);
}
  • CONSUMIR:
    useContext nos ayuda a acceder a datos globales de nuestro contexto, desde cualquier componente hijo, sin tener que pasar estos datos por props componente por componente.
    B谩sicamente la formula de useContext es:
import React,{useContext} from 'react'
import {context} from './direccionContexto/'

const {value} = React.useContext (context)

como por ejemplo dentro de ProductItem se obtiene addToCard usando use.context

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

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

	const handleClick = item => {
		addToCart(item);
	}
	console.log (product)
	return (
				<figure onClick= {()=> handleClick(product)} >
					<img src={addToCartImage} alt="" />
				</figure>
	);
}

Espero haber aclarado un poco las dudas de esta clase.

He avanzado en el curso, he resuelto los problemas que se han presentado, igual siento que NO explica nada, y no estoy entendiendo realmente lo que estoy haciendo鈥

Clases como esta me refuerzan la idea de que en Platzi falta mucha didactica para ensenhar a programar. Lo cual no es nada facil, ya que tambien soy profesor y se lo dificil que esto implica, pero ayudarse con una pizarra y explicar con dibujos tal cual lo que esta haciendo el codigo, es una ayuda inmensa que siempre le voy a reclamar a Platzi

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

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)
	}

si fuera un pokemon ya me hubiera atacado a mi mismo

Veo muchos porblemas, especialmente de falta de rigurosidad por parte del profesor para comunicar y hacer digerible el curso: no nombra las cosas que usa por su nombre t茅cnico (atributos, elementos, m茅todos, constantes鈥), las descripci贸nes de su proceso y de las herramientas que usa son demasiado vagas y redundan constantemente con 鈥渕uletillas鈥 que no dicen nada.

Uno puede excusarlo diciendo 鈥淓s que para eso est谩 la documentaci贸n鈥 o 鈥渆s que de los errores se aprende鈥, pero aqu铆 mismo en Platzi he dado con profesores que de verdad motivan por la forma como transmiten el conocimiento, y no se limitan a seguir un paso a paso.

Para mi portfolio full stack, Estoy desarrollando mi primera app, con el stack MERN.

Estoy pensando meter un CRUD con el stack MERN para que el usuario cree una card para definir una emoci贸n que siente.

Que esa card se guarde en una collection de mongo db.
(imagen de la emoci贸n, nombre de la emoci贸n, texto describiendo la emoci贸n)

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

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 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;

Context provee una forma de pasar datos a trav茅s del 谩rbol de componentes sin tener que pasar聽props聽manualmente en cada nivel.

En una aplicaci贸n t铆pica de React, los datos se pasan de arriba hacia abajo (de padre a hijo) a trav茅s de聽props, pero esta forma puede resultar inc贸moda para ciertos tipos de聽props聽(por ejemplo, localizaci贸n, el tema de la interfaz) que son necesarias para muchos componentes dentro de una aplicaci贸n. Context proporciona una forma de compartir valores como estos entre componentes sin tener que pasar expl铆citamente una聽prop聽a trav茅s de cada nivel del 谩rbol.

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  // El componente Toolbar debe tener un prop adicional "theme"
  // y pasarlo a ThemedButton. Esto puede llegar a ser trabajoso
  // si cada bot贸n en la aplicaci贸n necesita saber el tema,
  // porque tendr铆a que pasar a trav茅s de todos los componentes.
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

Usando Context podemos evitar pasar聽props
聽a trav茅s de elementos intermedios:

// Context nos permite pasar un valor a lo profundo del 谩rbol de componentes
// sin pasarlo expl铆citamente a trav茅s de cada componente.
// Crear un Context para el tema actual (con "light" como valor predeterminado).
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // Usa un Provider para pasar el tema actual al 谩rbol de abajo.
    // Cualquier componente puede leerlo, sin importar qu茅 tan profundo se encuentre.
    // En este ejemplo, estamos pasando "dark" como valor actual.
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// Un componente en el medio no tiene que
// pasar el tema hacia abajo expl铆citamente.
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // Asigna un contextType para leer el contexto del tema actual.
  // React encontrar谩 el Provider superior m谩s cercano y usar谩 su valor.
  // En este ejemplo, el tema actual es "dark".
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }

Increible clase con MUCHISIMA informacion para absorver, tanto del profe como de los compa帽eros. Veanla con mucha paciencia, repitanla las veces que sea necesario.

He le铆do m煤ltiples comentarios acerca de la forma en la que se dicto esta clase, en lo personal esto es una maravilla鈥 he estado desarrollando una App personal en react desde hace unos meses, sin conocimiento de este en absoluto, y este video valio toda la pena de el mundo. Habia conocido el Context pero nunca lo habia aplicado, no sabia lo maravilloso que es鈥 hasta el dia de hoy he estado pasando todos los states por los props, que equivocado he estado. Me encanta esto!

Durante estos cursos de Platzi he visto mucha gente que no entiende y se queja, generalmente s贸lo utilizan el video como respaldo. Algo que aprend铆 en la Universidad es que debes LEER antes de ir a la clase, en este caso debes leeerte la documentaci贸n de context y con ello va a tener un contexto mejor y vas a comprender mejor, en la Universidad siempre se debe leer el texto gu铆a, as铆 entiendes mucho m谩s r谩pido y te descomplicas

esta es la sexta ves que veo la clase

Que clase tan pesada, no entend铆 nada!

Teniendo encuenta lo realizado, los context en react se utilizan principalmente para poder pasar variables de un componente padre a un componente hijo, (esto se utiliza cuando hay muchos componentes y no es optimo pasar los prop, por que seria pasar de un componente a otro y si se tiene que agregar un valor a un componente p tendr铆a que pasar ese valor sin ser usado por el componente a,b , c, d鈥 y como se puede ver no es muy recomendable).

para esto Oscar crea un Appcontext que va en este caso a recibir un objeto vac铆o:

luego crea un useInitialState donde retorna un objeto de productos y una funci贸n de agregar un producto, la logica interna de la funci贸n los que hace es que cada vez que se llame a la funci贸n me envie un nuevo producto sin perder los productos ya existentes en ese array, es decir en cart.

el uso del useState es importante por que permite crear un objeto state y una funci贸n que modifica el valor de ese objeto 鈥渟etState鈥.

retomando, lo que hace el objeto inicialState es inicializar el valor de state.

const inicialState={
    cart:[]
}

 const [state, setState]=useState(inicialState);

Luego en ProductItem lo que hace es mediante el hook useContext de React usar el AppContext previamente creado.

const {addToCart}= useContext(AppContext);

pero te preguntaras que hago con un context vacio, por que as铆 se declaro en la creaci贸n de AppContext, pues bueno para poder utilizar esa funci贸n, dentro de App.jsx se utiliza el AppConext.Provider y se a帽ade el valor initialState donde incorpora y retorna el objeto y la funci贸n

 <AppContext.Provider value={initialState}> 

esto lo que indica que toda los variables como la funci贸n va a hacer globales, lo cual cualquier componente creado como hijo del AppContext van a poder acceder tanto al objeto como a la funci贸n

Alquien mas se le hizo un poco complicado? nota mental, cuando vean un curso sigan el formato, yo quise usar TS ya que lo aprendi en un curso, pero ahora cambiare a js xd

interface ProductCardProps {
  price: number;
  name: string;
  image: string;
}

interface AppContextProps {
  addToCart: (product: ProductCardProps) => void;
  card: string[];
}

export default function ProductCard({ price, name, image }: ProductCardProps) {
  const { addToCart } = useContext(AppContext) as AppContextProps;

  function handleAddToCart(product: ProductCardProps) {
    addToCart(product);
  }

  return (
    <div className="product-card">
      <img src={image} alt={name} />
      <div className="product-info">
        <div>
          <p>{`${numberToPrice(price)}`}</p>
          <p>{name}</p>
        </div>
        <figure onClick={() => handleAddToCart({ price, name, image })}>
          <img src="./icons/bt_add_to_cart.svg" alt="carIcon" />
        </figure>
      </div>
    </div>
  );
}

驴Alguien m谩s se desespero con el error de la imagen addToCart? casi le gritaba a la compu: es no es la variable correcta!

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.

Estoy pensando meter un CRUD con el stack MERN para que el usuario cree una card para definir una emoci贸n que siente.

Que esa card se guarde en una collection de mongo db.
(imagen de la emoci贸n, nombre de la emoci贸n, texto describiendo la emoci贸n)

驴Lo ven posible?

Casos de USO para Context

Yo siempre lo vi como un redux Lite jajajaja
.
Bueno, a lo que vi esta muy bueno para features de no gran relevancia, en este caso lo utilizamos para el carrito pero eso seria mejor con Redux.
.
CASOS DE USO: switch para dark mode, carrito de compras, contadores.

Les comparto mis apuntes. Los complement茅 con los aportes de algunos compa帽eros. Cabe destacar que en mi caso el componente de ProductItem se llama Product

Context聽es una herramienta para pasar propiedades en un 谩rbol de componentes de arriba hacia abajo sin tener que pasar por componentes intermedios.

Context y Redux son cosas diferentes. Redux se encarga del flujo de la informaci贸n en la aplicaci贸n, pasando por una serie de eventualidades que tienen que suceder, mientras que Context permite que la informaci贸n este disponible para los diferentes componentes de la App sin tener que pasar por intermediarios.

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

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;

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

El provider es el encargado de poder pasar el contexto hacia los componentes hijos.

Usar Context en la App

  • Crear carpeta context.

  • Crear un archivo para crear los context. Ej: AppContext.js

    // Crear contexto de la App
    import React from 'react';
    
    const AppContext = React.createContext({});
    
    export default AppContext;
    
  • Al definir el contexto para que pueda ser le铆do por otros componentes:

    ...
    import AppContext from '@context/AppContext';
    import useInitialState from '@hooks/useInitialState';
    
    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={'/password-recovery'} component={ PasswordRecovery } />
                            <Route exact path={'/send-email'} component={ SendMail } />
                            <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>
        );
    }
    
  • En este caso se tiene un custom hook para agregar productos al carrito y guardarlos en el estado.

    // Agregar al estado los productos que se a帽adan al carrito
    import { useState } from "react";
    
    const initialState = {
        cart: []
    };
    
    const useInitialState = () => {
        const [state, setState] = useState(initialState);
    
        // Agregar productos al carrito
        const addToCart = (payload) => {
            // Mantiene los datos previos del state y adiciona el producto nuevo
            setState({
                ...state,
                cart: [...state.cart, payload]
            });
        };
    
        return {
            state,
            addToCart
        }
    };
    
    export default useInitialState;
    
  • Para acceder al contexto desde los componentes hijo se usa el hook useContext.

    import React, { useContext } from 'react'
    ...
    import AppContext from '@context/AppContext';
    
    const Product = ({ product }) => {
        // Obtener las propiedades del producto
        const { title, images, price } = product;
    
        // Obtener del contexto la funci贸n para agregar productos al carrito
        const { addToCart } = useContext(AppContext);
    
        // Agregar al carrito el producto seleccionado al hacer click
        const handleClick = (productItem) => {
            addToCart(productItem)
        };
    
        return (
            <div className='Product'>
                <img 
                    src={ images[0] }
                    alt={ title } 
                    className="product-img"
                />
    
                <div className="product-info">
                    <div>
                        <p>${ price }</p>
                        <p>{ title }</p>
                    </div>
    
                    <figure onClick={ () => handleClick(product) }>
                        <img 
                            src={ addToCartIcon }
                            alt="Add to cart icon"
                        />
                    </figure>
                </div>
            </div>
        );
    }
    
    export default Product
    

Para mi portfolio full stack, Estoy desarrollando mi primera app, con el stack MERN.

Estoy pensando meter un CRUD con el stack MERN para que el usuario cree una card para definir una emoci贸n que siente.

Que esa card se guarde en una collection de mongo db.
(imagen de la emoci贸n, nombre de la emoci贸n, texto describiendo la emoci贸n)

Y claro, que pueda editar el texto de la emoci贸n y borrar la card.

驴Como hacen ustedes cuando buscan una funcionalidad nueva y entender el c贸digo?

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