Forem: Alfredo Moscoso

React Render props

Alfredo Moscoso — Fri, 07 Oct 2022 19:32:37 +0000

¿Que son las render props en React?

Las render props son un técnica que nos permiten compartir código en React al hacer uso de un propiedad que tiene como valor una función.

Un componente con una render prop recibe una función que retorna un elemento react.

<Data render={(user) => <UserData user={user} />} />

En React podríamos decir que hay varias maneras de compartir código entre componentes, siendo estos componentes los elementos principales de reutilización de código en React.

También es cierto que no siempre tenemos claro como podríamos compartir estados, comportamientos, que un componente encapsula, con otros componentes que necesiten esos datos.

Digamos que tenemos un componente que simplemente encapsula los datos de un usuario.

function UserData() {
  const user = {
    name: "Alfredo",
    lastName: "Moscoso",
    rol: "Frontend Developer",
  };

  return (
    //user...
  );
}

Ahora supongamos que queremos mostrar estos datos como una table.

Aquí nos preguntamos, ¿Como podríamos compartir esos datos con otros componentes?

Creamos un componente que renderice un table y acepte un prop user.

function Table({ user }) {
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Lastname</th>
            <th>Rol</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{user.name}</td>
            <td>{user.lastName}</td>
            <td>{user.rol}</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

Refactorizamos nuestro componente <UserData /> para que renderice el componente <Table />.

function UserData() {
  const user = {
    name: "Alfredo",
    lastName: "Moscoso",
    rol: "Frontend Developer",
  };

  return (
    <Table user={user}/>
  );
}

Pero ahora también queremos mostrar esos datos mediante un componente <Card /> en otro lugar de nuestra App, entonces podríamos pasar esos datos a <Card user={user} />

Tendríamos que crear por ejemplo otro componente UserDataCard, para mostrar una salida diferente o transmitir los datos desde un contexto global.

function UserDataCard() {
  const user = {
    name: "Alfredo",
    lastName: "Moscoso",
    rol: "Frontend Developer",
  };

  return (
    <Card user={user}/>
  );
}

Esto funciona pero el objetivo de encapsular datos, hacerlos portables y reutilizables no se ha logrado.

En este caso podemos recurrir al uso de render props, ya que esta técnica nos permite encapsular y hacer portables datos o comportamientos que queramos compartir entre componentes.

En el componente <UserData /> encapsularíamos nuestros datos y le proporcionaríamos una función por medio de props para que determine que renderizar de forma dinámica.

function UserData({ render }) {
  const user = {
    name: "Alfredo",
    lastName: "Moscoso",
    rol: "Frontend Developer",
  };
  return (
    <div>
      <h1>User Data</h1>
      //renderiza una salida dinámicamente 
      {render(user)}
    </div>
  );
}

En algún lugar de nuestra App donde necesitemos mostrar esos datos como un table llamaríamos a nuestro componente de la siguiente manera:

<UserData render={(user) => <Table user={user} />} />

O si necesitamos renderizar una <Card> ...

<UserData render={(user) => <Card user={user} />} />

Como puedes ver, esta técnica hace a nuestros componentes muy portátiles y reutilizables.

Recuerda que esta es otra técnica mas que podemos usar en React, y tal vez no se adapte a tus requerimientos al desarrollar una aplicación o una web, pero es importante conocer diferentes patrones que nos ayuden a decidir cual es el mejor para nuestro caso de uso.

Tu feedback es de ayuda para mi 🙏

Conectemos 😎
https://twitter.com/JairDevep
https://www.linkedin.com/in/alfredo-moscoso-desarrollador-frontend/

¡Nos vemos pronto! 👊

Funciones de flecha en JavaScript + this

Alfredo Moscoso — Mon, 13 Jun 2022 21:54:22 +0000

Las funciones de flecha en JavaScript nos brindan la posibilidad de escribir funciones sin utilizar la palabra clave function, pero mas allá de la sintaxis, las funciones de flecha o arrow functions tienen algunas particularidades y diferencias de cuando creamos funciones de manera "tradicional".

Sintaxis

//Declaración de función
function sayHello() {
  console.log("Hi")
}

//Expresión de función
const sayHello = function() {
  console.log("Hi")
}

//Función de flecha
const sayHello = () => console.log("Hi")

Como mencioné al inicio de este artículo, las funciones de flecha nos permiten crear funciones de una manera mas compacta en algunos casos, ahora hablemos de sus diferencias y algunas limitaciones.

This y Funciones de flecha

Una de las diferencias mas llamativas es cuando asociamos el concepto de this en JavaScript con las funciones de flecha.

Como this determina su valor?.

La palabra clave this y su valor dependen del contexto de ejecución o como se invoca determinada función o método en JavaScript.

Aprendiendo este concepto (this keyword) yo también estaba confundido como la imagen mas arriba 😆, pero no te preocupes espero que con este artículo despejes tus dudas.

En los navegadores el valor de this ejecutándose en un contexto global es el objeto window.

console.log(this === window) // true

En una función

Cuando utilizamos this dentro de una función, su valor depende del contexto de ejecución de la función.

function sayHello() {
  console.log(this)
}
sayHello() *contexto de ejecución global

// Window {...}

En un objeto declarado

Al utilizar this dentro de un método en un objeto declarado, el valor de this será el del objeto en el que se está llamando el método.

const nameObj = {
  name: "Alfredo",
  getUserName: function () {
    console.log(this)
  }
}

nameObj.getUserName()

// {name: 'Alfredo', ...}

En este ejemplo a continuación, el valor de this se determina de acuerdo a su referencia mas cercana.

const nameObj = {
  name: "Alfredo",
  nested : {
    lastName: "Moscoso",
    getUserName: function () {
      console.log(this);
    },
  }
};

nameObj.nested.getUserName()

//{lastName: 'Moscoso', ...}

Como podemos ver su valor depende del contexto de ejecución del método.

En una función constructora

Si trabajamos con una función constructora y la palabra clave new su valor está vinculado al nuevo objeto que se está creando.

function Car(model, year) {
  this.model = model;
  this.year = year;
}

const ford = new Car("Ford", "1970")
console.log(ford.year) // 1970

const chevrolet = new Car("Chevrolet", "1956")
console.log(chevrolet.year) // 1956

En los métodos call, apply y bind

Con los métodos de funciones call y apply podemos enlazar el valor de this dentro de una función a un objeto.

call()

const nameObj ={
  name: "Alfredo"
}

function getUserName(lastName) {
  console.log(`${this.name} ${lastName}`)
}

getUserName.call(nameObj, "Moscoso")

//Alfredo Moscoso

apply()

const nameObj ={
  name: "Alfredo"
}

function getUserName(lastName) {
  console.log(`${this.name} ${lastName}`)
}

getUserName.apply(nameObj, ["Moscoso"])

//Alfredo Moscoso

bind()

En el método bind también podemos enlazar un valor de this con un objeto, la diferencia es que el método bind crea una nueva función que podemos llamar luego.

const nameObj ={
  name: "Alfredo"
}

function getUserName(lastName) {
  console.log(`${this.name} ${lastName}`)
}

const user = getUserName.bind(nameObj, "Moscoso")
user()

//Alfredo Moscoso

Más información sobre estos métodos.
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Ahora que ya vimos algunos ejemplos y como this modifica su valor, veamos como se comportan las funciones de flecha y la palabra clave this.

This en una función de flecha

const nameObj = {
  name: "Alfredo",
  getUserName: () => console.log(this)
}

nameObj.getUserName() // ???

Cual crees será la salida del código ?

La salida de este código es la siguiente, el window object.

// Window {...}

Esto ocurre porque las funciones de flecha no tienen un this atado a ellas o no predeterminan this al alcance de Window, estas se ejecutan en el alcance en que fueron creadas.

En este ejemplo el método getUserName() está retornando una función de flecha, como estas funciones no tienen su propio this, el valor de this es el del ámbito adjunto, el del método getUserName() y como estamos utilizando una función "tradicional" en el método getUserName(), this tendrá el valor del objeto nameObj.

const nameObj = {
  name: "Alfredo",
  getUserName: function () {
    return () => console.log(this)
  }
}
const inside = nameObj.getUserName()

inside() 

//{name: 'Alfredo', ..}

O con este ejemplo, donde la función de flecha del método setInterval se está ejecutando en el contexto de la instancia count.

function IncreaseCount(count) {
  this.count = count
  setInterval(() => {
    console.log(this.count += 1)
  }, 1000);
}

const count = new IncreaseCount(30)

//31
//32
//...

A diferencia de este caso donde se utiliza una función "tradicional" dentro del método setInterval() y como esta se ejecuta en el ámbito global, la salida no es la esperada.

function IncreaseCount(count) {
  this.count = count
  setInterval(function () {
    console.log(this.count)
  }, 1000);
}


const count = new IncreaseCount(30)

// undefined

Como te habrás dado cuenta las funciones de flecha no es solo una sintaxis mas corta sino que su comportamiento es diferente a una función tradicional.

Algunas consideraciones.

No utilices funciones de flecha en métodos de objeto.
No utilices funciones de flecha como constructores.
No utilices funciones de flecha con los métodos call, apply o bind.
Las funciones de flecha no tienen una propiedad prototype.

Espero este post haya aclarado tus dudas sobre como funciona this en JavaScript y las funciones de flecha.

Tu feedback es de mucha ayuda para mi 🙏

Conectemos 😎
https://twitter.com/JairDevep
https://www.linkedin.com/in/alfredo-moscoso-desarrollador-frontend/

¡Nos vemos pronto! 👊

Animación de máscaras CSS.

Alfredo Moscoso — Tue, 07 Jun 2022 21:13:55 +0000

Hoy aprenderemos a animar máscaras css, apoyándonos en la posición del cursor para crear un efecto único para tu próximo proyecto web.

Demo
https://css-mask-effect.netlify.app/

Github
https://github.com/JairDev/css-mask-effect

El enmascaramiento en css, nos permite “cortar” (enmascarar ) un elemento, ya sea a través de una imagen, un svg o un degradado pudiendo establecer que parte serán o no visibles de ese elemento de acuerdo a la transparencia en la imagen, svg o degradado.

Como podemos ver en este ejemplo, nuestra imagen que servirá de máscara es el logo de apple, es totalmente negra con un fondo transparente y nuestro elemento a enmascarar tiene un fondo de color rosa.

*La imagen se aplica como máscara al elemento rosa, lo ilustré de esta manera para ver como actúa el fondo transparente de la imagen, solo serían dos elementos, mas adelante lo veremos.

Máscara aplicada

La parte mas oscura de nuestra imagen, svg o degradado hacen visible el elemento mientras que la parte mas trasparente ocultan el elemento.

Propiedad css mask:

La propiedad css mask es un shorthand para mask-image, mask-repeat, mask-position entre otras propiedades, https://developer.mozilla.org/es/docs/Web/CSS/mask.

.element {
  mask-image: url("image-link");
  mask-repeat: no-repeat;
  mask-position: center;
  ...
}

Funciona parecido a la propiedad background de css, podemos establecer una imagen mediante una url, si queremos que se repita o no la máscara, de esta manera tenemos mas control sobre los efectos de nuestra máscara.

Ahora a ensuciarnos las manos ... 😎

Para nuestro efecto vamos a duplicar nuestro elemento .hero.

<div class="container">
 <div class="hero">
  <div class="contain-name">
    <h1>Hi, I am Kim,</h1>
    <span>I am a</span>
    <span>web developer.</span>
  </div>
  ...
 </div>

 <div class="hero copy" aria-hidden="true">
  <div class="contain-name">
    <p>Hi, I am Kim,</p>
    <span>I am a</span>
    <span class="span web-developer">web developer.</span>
  </div>
  ...
 </div>
</container

Para mejorar la accesibilidad de nuestro contenido, hemos establecido el elemento duplicado en aria-hidden="true" para evitar que sea mencionado dos veces por lectores de pantalla.

Enmascaramiento del elemento duplicado.

.hero.copy {
 --mask: radial-gradient(
    circle at 15% 50%,
    black 25%,
    transparent 0%
  );
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

Estilos


.container {
  background: #18191c;
}

.hero {
  opacity: 0.6;
}

.hero.copy {
  background: #7f8189af;
  filter: brightness(1.5);
  opacity: 1;
}

.span.web-developer {
  color: #ff03a0;
}

En el elemento .container utilizamos un fondo oscuro y en nuestro elemento base .hero establecemos una opacidad de 0.6 para dar una sensación de oscuridad.

Para la máscara utilizaremos un radial gradient, estableciendo el circulo que vemos a continuación, el fondo será de un color grisáceo para dar el efecto de un foco de luz blanca, aumentaremos un poco el brillo y resaltaremos el texto web developer con un color intenso.

Como puedes ver, la máscara que es un circulo se está aplicando a nuestro elemento, vamos a difuminar un poco el circulo asignando un 4% al inicio del gradiente y un 25% al final.

.hero.copy {
 --mask: radial-gradient(
    circle at 15% 50%,
    black 4%,
    transparent 25%
  );
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

El resultado ...

Rastrear la posición del cursor

Para lograr nuestro efecto de "movimiento de la luz", necesitamos rastrear el cursor de acuerdo al movimiento del usuario, JavaScript al rescate 💪

Primero definamos unas propiedades personalizadas "--x", "--y", y establezcamos una posición inicial para la máscara, 15% y 50% respectivamente.

--mask: radial-gradient(
  circle at var(--x, 15%) var(--y, 50%),
  black 4%,
  transparent 25%
  )

En nuestro archivo JS llamamos al evento "mousemove", obtenemos la posición del mouse y hacemos el cálculo para luego asignar ese valor porcentual a nuestras propiedades personalizadas --x y --y.

const hero = document.querySelector(".hero.copy");

window.addEventListener("mousemove", (e) => {
  const x = Math.round((e.clientX / window.innerWidth) * 100);
  const y = Math.round((e.clientY / window.innerHeight) * 100);
  hero.style.setProperty("--x", `${x}%` )
  hero.style.setProperty("--y", `${y}%`)
});

Al movimiento de nuestro "foco de luz" le falta un poco de suavidad para que no se sienta tenso. Para lograr esto utilizaré una biblioteca js de animaciones llamada gsap https://greensock.com/docs/, esta biblioteca nos permite establecer una transición de manera sencilla a nuestra máscara ya que estamos utilizando propiedades personalizadas.

npm install gsap

import gsap from "gsap";

const hero = document.querySelector(".hero.copy");

window.addEventListener("mousemove", (e) => {
  const x = Math.round((e.clientX / window.innerWidth) * 100);
  const y = Math.round((e.clientY / window.innerHeight) * 100);
  gsap.to(hero, {
    "--x": `${x}%`,
    "--y": `${y}%`,
    duration: 0.4,
    ease: "sine.out",
  });
});

Ahora nuestro movimiento se siente mas natural 😁

¡Espero este post haya sido de tu agrado!

Te invito a que juegues con las máscaras css y me enseñes ese próximo proyecto donde incluyas grandiosos efectos con esta propiedad.

Tu feedback es de mucha ayuda para mi 🙏

Conectemos 😎
https://twitter.com/JairDevep
https://www.linkedin.com/in/alfredo-moscoso-desarrollador-frontend/

¡Nos vemos pronto! 👊