No tienes acceso a esta clase

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

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
17H
3M
44S

Creando tu primer HOC

13/19
Recursos

Aportes 40

Preguntas 6

Ordenar por:

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

o inicia sesi贸n.

Es un tema muy complejo, a煤n no se me ocurre nada para aplicarlo y as铆 complicarme la vida jejejej :p

Aqui dejo un codigo de ejemplo

function App(props) {
  return (
    <h1>!{props.saludo}, {props.nombre}隆</h1>
  );
}

function withSaludo(WrapperdComponent) {
  return function WrapperdComponentWithSaludo(saludo) {
    return function ComponenteDeVerdad (props) {
      return (
        <React.Fragment>
          <WrapperdComponent {...props} saludo={saludo}/>
          <p>Estamos acompa帽amdo al WrapperdComponent</p>
        </React.Fragment>
      );
    }
  }
}

const AppwithSaludo = withSaludo(App)
const AppwithSaludo2 =AppwithSaludo('Buenass');
const AppwithSaludo3 =AppwithSaludo('Buenass amigos');



ReactDOM.render(
  <React.Fragment>
    <AppwithSaludo2 nombre={"Alex"} />
    <AppwithSaludo3 nombre={"jose"} />
  </React.Fragment>,
  document.getElementById('root')
);

Acabo de terminar toda la escuela de frontend con React y vengo a repasar el tema de los HOC鈥檚. La verdad no entend铆 nada la primera vez que pas茅 por aqu铆, pero ahora todo tiene sentido!!

Si no entendiste nada en 茅sta clase, no te desanimes, con la pr谩ctica lo entender谩s.
y recuerda, 隆Nunnca pares de aprender!

Esto me recuerda demasiado a los decoradores de Python (:

Clases que me ayudaron a enteder esta clase (HOC)

Es importante aprender este concepto ya que para aplicaciones escalables(grandes) utilizaremos Redux en un futuro y este concepto te sera de utilidad

  1. Closures en programacion funcional
    Ir a la clase
  2. Currying en Javascript programacion funcional
    Ir a la clase
  3. Introduccion a la HOF (higher order funcition en JS)
    Ir a la clase

si alguien necesita un repaso de hof. este dev tiene una forma interesante de explicar

https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84

Es una forma de herencia en componentes funcionales, la difefrencia al no usar children, es que un children lo redderizas dentro de otro contexto, en el caso de un compoente hoc cuando lo renderizar puedes usar los metodos del compoenente padre, ya que al final elhoc es un clousure

Enamorado de esta clase!! que incre铆ble lo que se puede aprender en una tarde de domingo!

Los 鈥淗igh Order Components鈥 (HOCs) son un patr贸n com煤n en React que se utiliza para compartir c贸digo y l贸gica entre diferentes componentes. Un HOC es una funci贸n que toma un componente como argumento y devuelve un nuevo componente que tiene acceso a ciertas propiedades o m茅todos adicionales. Esto puede ser 煤til en casos donde tienes varios componentes que necesitan acceder a la misma informaci贸n o comportamiento, ya que puedes crear un HOC que contenga esa l贸gica y luego utilizarlo en diferentes componentes.

Si alguien quiere hacer esto con TypeScript esta es la mejor forma que se me ocurre lo he hecho con gen茅ricos para que se adapte a cualquier componente

  • Primero creamos el componente App que este no tiene ning煤n misterio solo pasarle el tipado como cualquier componente en TypeScript
type App2Props = {
  name?: string;
  greeting?: string;
}

function App2(props: App2Props) {
  return (
    <h1>{props.greeting}, {props.name}!</h1>
    );
}
  • Este ser铆a el primer componente que creamos solo con un wrapper:
function withWhatever<T>(Component: ComponentType<T>) {
  return function ComponenteDeVerdad(hocProps: T) {
    return (
      <>
        	<Component {...hocProps}/>
        	<p>Estamos acompa帽ando al wrapped component</p>
      	     </>
    );
  }
}

const AppWithWhatever = withWhatever(App2)
  • Y este con dos wrapper:
function withSaludo<T>(Component: ComponentType<T>) {
  return function WrappedComponentWithGreeting(greeting: string) {
    return function ComponenteDeVerdad(hocProps: T) {
      return (
        <>
         		<Component {...hocProps} greeting={greeting}/>
         		<p>Estamos acompa帽ando al wrapped component</p>
                 </>
      );
    }
  }
}

const AppWithSaludo = withSaludo(App2)("Hola")
  • En el render es exactamente igual que en JavaScript:
ReactDOM.render(
  <React.StrictMode>
    	<AppWithWhatever name="Jairo" greeting="Hola"/>
    	<AppWithSaludo name="Jairo" />
    </React.StrictMode>,
  document.getElementById('root')
);

Aplicando el curryng con arrow functions

const withSaludo1 = (WrappedComponent) => {
  // add something
  return (saludo) => {
    // adding saludo
    return (props) => (
      <>
        <WrappedComponent
          {...props}
          saludo={saludo}
        />
        <p>Estamos acompa帽ando al WrappedComponent</p>
      </>
    )
  }
}
  1. Simplified
const withSaludoSimplified = (WrappedComponent) => (saludo) => (props) => (
      <>
        <WrappedComponent
          {...props}
          saludo={saludo}
        />
        <p>Estamos acompa帽ando al WrappedComponent</p>
      </>
)

Commit de la clase, por si alguien quiere hechar un ojo directamente al codigo, es m谩s facil cuando se ve de golpe el resultado y despues se analiza el funcionamiento.

https://github.com/NightDreams/curso-react-patrones-render/commit/2cdbc86246aaae9d940c6361a5960fe8835b02e4

Esta clase me encanto, no se pero esta genial!


function greeting(props) {
    return (<h1 className="block">Hi! {props.name} </h1>)
}


function withHi(WrappedComponent) {
    return function (Companion) {
        return function (props) {
            return (
                <React.Fragment>
                    <WrappedComponent {...props}/>
                    <Companion {...props}/>
                </React.Fragment>
            );
        }
    }

}

function CompanionComponent(props) {
    return (<h1 className="inline">I'm your companion, {props.name}</h1>)
}


const Hi = withHi(greeting)(CompanionComponent);


function App() {
    return (
        <div className="text-center text-white">
            <Hi name="Ricardo"/>
        </div>
    );
}

const root = document.getElementById('root');
ReactDOM.render(
    <App/>,
    root
);

Ah caray!!!

Segun como yo lo entiendo con el HOC podemos llamar dos funciones a la misma vez, Las dos se encargan de hacer cosas diferente pero llega un tiempo en que debe de unirser para entregar un resultado en comun. Me equivoco?

o no lo entiendo o nose como aplicarlo a un proyecto propio ?

Despues de la primear visualizaci贸n del video

Dejo un ejemplo de c贸mo cre茅 mi primer HOC:
Primero que todo, gener茅 un componente espec铆fico para mostrar un saludo al principio de mi ToDo App, llamado Greeting, Aqu铆 pueden verlo:

El cual tiene un c贸digo peque帽o que recibe algunas render props y unas render functions y las ejecuta seg煤n sea el caso, como pueden ver en su c贸digo:

Y su implementaci贸n en la app:

Entonces, quise crear un HOC que cambiase el color de las letras en cualquier componente, y en especifico, usarlo para cambiar el color de mi saludo, para eso cre茅 un HOC llamado ChangeLettersColor, as铆:

De esta forma, mi HOC, necesita como argumentos un color y un Componente al cual le cambiar谩 el color original de sus letras, se utiliza de la siguiente manera:


Y este es su resultado!:

Espero que les sirva como ejemplo de c贸mo utilizar este conocimiento para este o cualquier otro proyecto que est茅n realizando. Saludos!

Muy interesante como se va armando la l贸gica del componente (funci贸n) que recibe un componente y devuelve un nuevo componente

Creando tu primer HOC

Vamos a ver un ejemplo para entender que es un HOC.

Digamos que deseamos tener un componente en el cual deseemos insertar informaci贸n de manera din谩mica. Podemos hacerlo con las props por ejemplo:

import React from "react";
import { ReactDOM } from "react-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));

function AppEjemplo(props) {
	return (
    <h1>隆{props.saludo}, {props.nombre}!</h1>
  );
}

root.render(
  <AppEjemplo saludo="Buenas" nombre="andru" />
);

Esto funciona, pero podemos hacer uso de los HOC, ya entenderemos para que. Por convenci贸n al crear nuestro HOC debemos empezar con with y luego le decimos que tipo de inyecci贸n le haremos nuestro componente.

// La gracia de estas funciones es que retornen otra funci贸n
function withLoQueSea() {
  return function ComponenteDeVerdad(props) {
    /* Obligatoriamente SIEMPRE el ultimo return de un HOC debe
    retornar un componente de React */
    return <h2>Buenas</h2>
  }
}

Lo que hacemos despu茅s es crear una variable en la cual almacenemos a nuestro componente AppEjemplo luego de que lo hayamos envuelto en nuestro HOC withLoQueSea.

const AppWithLoQueSea = withLoQueSea(AppEjemplo);

Lo que nos permite los HOC es hacer uso de los WrappedComponent que lo podemos utilizar dentro de nuestro componente de verdad.

function withLoQueSea(WrappedComponent) {
  return function ComponenteDeVerdad(props) {
    return (
      <React.Fragment>
        <WrappedComponent />
        <p>Estamos acompa帽ando al WrappedComponent</p>
      </React.Fragment>
    )
  }
}

...
root.render(
  <AppWithLoQueSea saludo="Hey" nombre="Juanita" />
);

Si vemos el navegador vemos de que a pesar de que le pasamos las propiedades al componente no las renderiz贸 y solo aparece el p谩rrafo.

Lo que pasa es que no le estamos enviando ninguna propiedad, aqu铆 veremos la importancia de que la 煤ltima funci贸n retorne un componente, para enviar y recibir estas propiedades debemos hacerlo con el Spread Operator dentro de los par谩metros del WrappedComponent.

function withLoQueSea(WrappedComponent) {
  return function ComponenteDeVerdad(props) {
    return (
      <React.Fragment>
        <WrappedComponent {...props} />
        <p>Estamos acompa帽ando al WrappedComponent</p>
      </React.Fragment>
    )
  }
}
...

Si vemos ahora el navegador ya aparecer谩 renderizada las propiedades.

Esto no es lo 煤nico que nos permite nuestros HOC, podemos tener muchas m谩s funciones hasta retornar nuestro componente de verdad, veamos un ejemplo:

function withSaludo(WrappedComponent) {
  // La propiedad saludo ser谩 otro requerimiento de nuestro HOC
  // Este par谩metro lo recibiremos directamente de AppEjemplo
  return function WrappedComponentWithSaludo (saludo) {
    return function ComponenteDeVerdad(props) {
      return (
        <React.Fragment>
          <WrappedComponent {...props} saludo={saludo} />
          <p>Estamos acompa帽ando al WrappedComponent</p>
        </React.Fragment>
      )
    }
  }
}

function AppEjemplo(props) {
  /* Aqu铆 se inyecta la propiedad saludo a nuestro 
  WrappedComponentWithSaludo */
	return (
    <h1>隆{props.saludo}, {props.nombre}!</h1>
  );
}

/* Aqu铆 enviaremos nuestro saludo para que lo renderice el 
WrappedComponent */
const AppWithSaludo = withSaludo(AppEjemplo)('Wenas'); // saludo

root.render(
  <AppWithSaludo nombre="Juanita" />
);

Y ya lo tendr铆amos en el navegador:

Podemos jugar mucho con esto y tenemos una cantidad casi ilimitada de opciones, por ejemplo, si cambiamos de orden los par谩metros que esperan las funciones cambiaremos el orden en el que enviamos al informaci贸n.
function withSaludo(saludo) {
  return function WrappedComponentWithSaludo (WrappedComponent) {
    return function ComponenteDeVerdad(props) {
      return (
        ...
      )
    }
  }
}

// Ahora enviamos al rev茅s los par谩metros
const AppWithSaludo = withSaludo('Wenas')(AppEjemplo);

Y todo esto podemos hacer con los HOC鈥檚, podemos hacer lo que queramos con estos.

what a crazy video 馃く馃く馃く

Si ya viste patrones de dise帽o de POO esto ser铆a algo 鈥渟imilar鈥 al patr贸n Decorator.

Le sume nombre.

function withSaludo(EtiquetaHTMLComponen){
  return function saludoFunction(saludo){
    return function nombreFunction(nombre){
      return function ComponenteDeVerdad(){
        return (
          <React.Fragment>
            <EtiquetaHTMLComponen nombre={nombre} saludo={saludo}/>
            <p>Pasamos saludo en la segunda funcion</p>
            <p>Pasamos nombre en la tercera funcion</p>
          </React.Fragment>
        )
      }
    }
  }
}
const AppWthatever = withSaludo(App)('Hola')('Gaston');

Es un tema que se parece a la composicion funcional en matematicas, entonces pueden entenderlo tambien asi.

Para entender mejor este tema pueden revisar el concepto de Closures. Es de mucha ayuda para entender el porqu茅 estas funciones 鈥渞ecuerdan鈥 el valor con el que se le llam贸 a su padre.

Que buena clase, Todo quedo muy claro y bien explicado

Like si te gusta complicar las funciones aunque solo sea para para practicar tus super poderes

loooool

const App =({name, sur})=> <h1>hola {name} {sur}</h1>


ReactDOM.render(

  <App {...{name: "JuanDc", sur: "with objects"}} />, 

document.getElementById("root"));

podemos tambi茅n pasar 2 o mas componentes a nuestro HOC

function App (props){
  return (
      <p>{props.saludo} {props.nombre}</p>
    )
}
function App2 (props){
  return (
    <p>soy {props.other}</p>
  )
}

function HOC (Component){
  return function (Other){
    return function (saludo){
      return function (props){
        return (
          <>
            <Component {...props} saludo={saludo} />
            <Other {...props} />
            <h2>soy un texto</h2>
          </>
        )
      }
    }
  }
}

const MyComponent = HOC(App)(App2)('hey')


ReactDOM.render(
    <MyComponent nombre={'juan!'} other={'cualquier otro componente'}/>, 
    document.getElementById('root')
);


en el navegador ver铆amos algo as铆:
.
.
hey juan!
soy cualquier otro componente
soy un texto

Currying sirve para descomponer funciones complejas en otras funciones m谩s peque帽as donde cada funci贸n recibe un solo argumento

// Sin Currying
function sumThreeNumbers(a, b, c) {
        return a + b + c
}

console.log(sumThreeNumbers(1, 2, 3)) // 6

//con Currying

function sumThreeNumbers(a) {
        return function(b) {
                return function(c) {
                        return a + b + c
                }
        }
}

console.log(sumThreeNumbers(1)(2)(3)) // 6

馃く Se parec茅 a un Callback Hell 馃く馃く

Es. programacion funcinonal

Increible, aprendi currying con la 鈥渃ompetencia de platzi鈥, que adem谩s es gratuita, porque platzi no tiene un curso al respecto, pero no imagine en donde lo podr铆a utilizar, solo lo usaba para comprimir modulos.

Ahora con esto puedo ver que se le puede otorgar a react una capacidad de reutilizar codigo brutal.

Otra cosa es que en mi terminal me estan saliendo una cantidad de errores asombrosa, warning y type invalid. De momento no tengo tiempo para arreglarlos pero parecen errores por que uso una version mas nueva que la del curso.

Que rapido que habla el profesor, eso me fastidia(en buen sentido), lo tuve que poner en 0.85 jaja

Tuve que ver la clase en 0.85 para escuchar y entender poco a poco jaja!! Buena clase馃憦馃憦馃憦

Muy interesante, pero** 驴En qu茅 ayudar铆a aplicar esto en mis proyectos sera para una mejor estructura, buenas pr谩cticas 贸 quizas el performance?** 馃馃

interesante鈥 estan chetadas

const App =( {name, sur}={} )=> <h1>hola {name} {sur}</h1>

const hoc =(WC)=> (props)=> { return ( <>
    <WC {...{name: "JuanDc", sur: "with objects"}} />
    <h2> acompa帽ando a wc </h2>
    </>
  )
}

const Wrapper = hoc(App);

ReactDOM.render(

  <Wrapper />,
  
document.getElementById("root"));