Ya hemos hablado en este blog sobre la nueva pila de desarrollo de WordPress y la revolución que viene con ella, tanto para la plataforma en sí como para los desarrolladores que ahora se ven obligados a aprender cosas nuevas. No hace mucho, por ejemplo, publiqué una publicación que explica cómo usar el paquete @WordPress/Scripts para expandir Guttenberg y agregar un botón a su interfaz. Como autor, me gusta escribir tutoriales porque puedo compartir algo que conozco bien y siento que podemos aprender todos juntos. Desafortunadamente, creo que los tutoriales ocultan un gran problema: muchos de ustedes los siguen ciegamente sin comprender realmente lo que está sucediendo, incluso si obtienes el resultado correcto al final. Pero a la mayoría de los tutoriales les faltan “Momento AHA”, el momento de perspectiva y comprensión en el que todo hace clic en su cabeza y usted comprende por qué las cosas son como son.
Así que hoy me gustaría comenzar una serie de publicaciones con una introducción sobre React para arrojar un poco de luz. Quiero reaccionar de manera demistal y ayudarlo a mejorar rápidamente. Quiero entender por qué React es como es y por qué las cosas son como son. Quiero entender los principios detrás de React. Quiero escribir un código mejor. Programación funcional Antes de hablar sobre React, creo que vale la pena pasar unos minutos hablando de programación funcional, porque muchos de los marcos que utilizamos hoy se basan en sus principios. Y React (junto con Rodux) no es una excepción.
La programación funcional es un paradigma de programación en el que los programas se crean aplicando y componiendo funciones. Puede pensar que, bueno, la “programación” siempre se trataba de construir y ejecutar funciones, ¿verdad? No realmente. Apoyarme. Considere, por ejemplo, programación orientada al objeto. En POO, los programas se crean creando y componiendo objetos, que pueden contener datos, en forma de atributos o campos, y código, en forma de métodos o procedimientos. ¿Ver? Sin funciones, sino objetos. Entonces, ¿qué hace la programación funcional especial? Bueno, hay algunos aspectos que caracterizan la programación funcional: funciones puras, transparencia referencial, inmutabilidad, funciones como ciudadanos de primer orden, funciones de orden superior, etc., y le recomiendo que los estudie por su cuenta (o si lo desea yo). En, podemos hablar de ellas en futuras publicaciones). Pero, para mantener esta breve publicación, hoy simplemente nos centraremos en una característica … Funciones puras Una de las cosas que hace que la programación funcional sea diferente de otros paradigmas de programación es la forma en que define y funciona con las funciones. En FP, las funciones son puras, lo que significa que cumplen con las siguientes dos condiciones:
Siempre produce el mismo resultado cuando se ofrece los mismos argumentos
No tiene efectos secundarios
Por ejemplo, esta no es una función pura: letuueusName = ‘David’; Function greet (name) {if (anterior! == name) {console.log (`hola, $ {name}!`); } else {console.log (`bienvenido, $ {nombre}!`); } Anterior = nombre; } Porque tiene más efectos secundarios. A saber, cambia una variable global (efecto secundario 1) y envía algún texto en la consola (efecto secundario 2). Otra función impura es la siguiente: creación de funciones (nombre) {cont id = Math.random (); return {id, nombre}; } Porque, como puede ver, no siempre produce el mismo resultado. Cada vez que se llama a la creación con cierto nombre, el resultado que obtiene es diferente. Después de todo, el atributo de identificación es generado por Math.Random … Las funciones puras son excelentes por varias razones: son fáciles de entender y no contienen sorpresas. Les da algunas entradas, devolverán una salida específica. Y esto es genial, porque esta forma de definir las funciones las acerca a nuestra comprensión matemática de lo que es una función: cada entrada a una salida bien definida.
Componentes en React ¿Qué tienen que hacer las funciones puras y la programación funcional? Bueno, veamos si podemos deducir su relación …
Como puede leer en su documentación, React es una biblioteca JavaScript para crear interfaces de usuario a través de pequeñas piezas de código llamadas “componentes”. Este es el primer componente que verá en su tutorial: Class Shoppingist React.Component {render () {return (

Lista de compras para {this.props.name}

Instagram
whatsapp
Oculus
); }} Bastante simple e incluso explicado, ¿no? ¡Pero espera un segundo! Esto no se ve en absoluto como una “función pura”. De hecho, esta es una clase implementada utilizando programación orientada a objetos.
Sí, tienes la razón. ¿No se ve bien … volvimos a hablar sobre la programación funcional? Eche un vistazo nuevamente al componente anterior. Cómo se ve? ¿Qué está haciendo? Bueno, es una clase de un solo render (renderizado) que genera algo HTML para jugar una lista de compras. Esta lista de compras es siempre la misma (dah, es un ejemplo simple), pero tiene una parte variable: su título, donde la clase parece usar una propiedad interna this.props.name.

Entonces, si todavía no sabemos nada sobre React y solo miramos el código e intentamos deducir lo que hace, vemos lo siguiente:
El componente puede recibir un “nombre”. No sabemos exactamente cómo recibe este nombre, pero sabemos que sí. Después de todo, este.props.name es una buena indicación.

El método Render produce HTML para reproducir una lista (estática) de “elementos de compras”: Instagram, WhatsApp y Oculus.
El resultado HTML no es 100% estático; Use un “nombre” que pueda variar según el valor de una propiedad. ¿Ves a dónde voy? ¡Las funciones de componentes en React acabo de describir una función pura! Tenemos un componente que toma un valor (nombre) y produce una salida bien definida (HTML). ¿Significa esto que podemos alejarnos del OOP y podemos implementar el componente anterior en función?
¡Por supuesto! La clase demasiado complicada que acabamos de ver se puede reescribir como una función más simple y más fácil de entender, que recibe accesorios y devuelve html: const shopingList = (props) => (

Lista de compras para {propos.name}

Instagram
whatsapp
Oculus
); Esto es exactamente lo mismo que tenía, pero mucho más simple. Incluso me atrevería a decir que es lo más simple que puedo implementar como programador: un componente React no es más que una función que se hace cargo de algunos accesorios y produce un HTML.
Y esta es precisamente la primera lección que debe aprender: su componente React es una función pura: accesorios, html out. Un componente no debe realizar funciones asincrónicas para tomar datos (que son efectos secundarios). Ningún componente puede cambiar las propiedades que recibe (inmutabilidad). Entonces, una vez más: un componente simplemente se hace cargo de algunos accesorios y produce el resultado HTML. Período. Pero quede, si un componente es tan simple, ¿cómo podemos hacer algo útil? Bueno, ¡quédate en la fase, porque hablaremos de esto en la próxima publicación!