Bueno, pues nada, hoy tenemos con nosotros a Daniel de la Cruz. Bienvenido, Dani.
Muchas gracias, bien hallado.
Bien hallado. Oye, muchas gracias por venir un domingo por la mañana.
Sí.
¿Qué vamos a hacer? ¿Row Life Coding?
Vamos a hacerlo todo row.
Todo row.
Todo a pelo, sin filtros.
Vamos a intentar, bueno, sobre todo Dani, que es el que va a estar picando,
vamos a intentar hacer una micro librería que haga de Virtual Dawn.
Sí, exacto.
Va a ser un ejercicio práctico.
¿Qué es un Virtual Dawn? Un poquito así para la gente que no sepa qué es.
Bueno, pues un dom, a diferencia del dom de verdad,
es algo que vive en la memoria de la aplicación que estamos ejecutando en el navegador
y que nos permite actualizar o generar elementos en el dom de verdad,
con la ventaja de que tienes mucho más control sobre ellos
al ser algo que controlas desde JavaScript.
Sabemos, se hizo famoso sobre todo porque React, Priak y librerías de este estilo
pues utilizaban este dom virtual justamente para hacer las mínimas operaciones posibles
sobre el dom porque es más costoso, básicamente.
Y bueno, me parecía, es que vi tu código, tenías un repositorio en GitHub que le has llamado como un Pokémon.
Sí, le he llamado Yoltik, que Yoltik es el Pokémon más pequeño que existe de todas las generaciones.
Y como era algo muy, muy, muy pequeñito, un Virtual Dawn muy pequeñito.
¿Podríamos decir que es el piojo? ¿Es el Pokémon piojo?
Es el Pokémon Ácaro.
¿Ácaro?
Sí.
El Pokémon Ácaro.
Qué grande, el vichillo.
Muy bien, pues muy buen nombre y tal.
Vi tu repositorio y me pareció súper interesante y dije,
oye, pues te atreverías a hacer un Road Life Coding para implementar esto.
Y dijiste, yo me atrevo con todo.
Y ahora estás aquí.
Bueno.
No sé si te arrepientes.
No sé si dije exactamente eso.
Dije, uf, qué palo.
Es verdad, es verdad.
Qué palo.
Bueno, pero luego te convencí con un croissant de mascarpone y ya.
Uf, madre mía.
Los croissants de mascarpone del Prat de Llebregat.
¿Cómo se llama el sitio?
¿Lo podemos decir?
Sí, claro.
Se llama Le Tigre Cakes.
Para el que quiera venir.
Le Tigre Cakes.
Están increíbles.
Muy buenos.
Lo recomendamos.
No nos estamos llevando nada de dinero por esto.
No, no, no.
Bueno, yo espero que al próximo croissant de mascarpone, al menos, me inviten.
Pero bueno.
Vale.
Lo que sí que quería explicar un poco la historia de por qué empecé a hacer esto.
Sí, dale.
A mí me pasó en una entrevista de trabajo que hice cuando estaba buscando trabajo, que
me rechazaron de un sitio porque había utilizado React en la prueba técnica.
Anda.
Y esperaban que utilizara Vanilla JS.
Entonces, me piqué bastante en su momento porque pensé, jolín, pues, pues, ¿por qué,
no?
Si al final lo que voy a acabar haciendo allí es React.
Es React, claro.
Y a mí me toca las narices porque yo estoy trabajando con React y no tengo por qué estar
currándomelo más para una prueba técnica.
Entonces, empecé a leer artículos sobre qué podía hacer o cómo podía hacer algo
parecido a lo que hago en mi día a día con React, pero sin usar React.
Y descubrí un artículo muy bueno de Jason Miller.
Jason Miller es el creador de React, además de muchísimas otras cosas.
Microlibrerías, justamente, ¿no?
Microlibrerías.
Y en este artículo explicaba qué narices es JSX.
Que JSX es la sintaxis que hizo popular React para representar el DOM en sus componentes.
Y mucha gente piensa que esto, bueno, esto de React usa HTML en el Javascript.
Y no es verdad, ¿no?
No, eso sí.
JSX es solo una representación de algo muy sencillo que es lo que veremos en este artículo.
Sí, porque básicamente el JSX que vemos que parece HTML, eso en realidad son llamadas
a métodos de Javascript.
Exacto, exacto.
Literalmente.
Lo que pasa es que es azúcar sintáctico que te ayuda a verlo mucho mejor.
Porque si tenemos que anidar la llamada del create element de React dentro de un create
element de... te podrías volver loco.
Se puede hacer, pero no es recomendable.
De hecho, si quieres, podemos empezar ya a meternos un poco en faena.
Y podemos abrir en un navegador el Babel Repel.
R-E-P-L.
Que nunca sé lo que significa.
Me parece.
Repel.
Voy a hacer aquí...
Y vamos a hacer una pequeña prueba.
Babel Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
Repel.
A veces, aquí estamos.
Muy bien.
Vale.
Si borramos este código que nos ponen como ejemplo...
Bueno, que es el que tenía yo de la última vez que lo había ejecutado.
Exacto.
Vale.
Aquí básicamente...
Esto cómo funciona.
El código que pones en la parte izquierda del editor se transpila con Babel en la parte
derecha.
Entonces vamos a poner aquí un H1 por ejemplo con un hola mundo dentro.
Sí, así tal cual.
Y vamos a ver lo que genera Babel.
Vamos a ver.
Ajá.
Fijaos, lo que hace Babel con esta sintaxis que es JSX es transformarla en una llamada a la función react-create-element que recibe tres parámetros.
El primer parámetro es el h1, es decir, el primer parámetro es el tag que queremos representar.
El segundo parámetro es un null, que ahora veremos lo que es.
Y el tercero es el children, el nodo interior que envuelve este tag.
Vamos a probar ahora ponerle un className, por ejemplo, un atributo al h1.
Vale, pongo className.
ClassName, sí.
Vamos a poner que esto es un title.
Un title, exacto.
Entonces ahora vemos que este null, que era el segundo parámetro, se ha convertido en un objeto.
Un objeto que tiene aquí dentro el className y el title.
Si estáis acostumbrados a trabajar con React, podéis adivinar que este segundo parámetro son las props que reciben los componentes de JSX.
Yo sin saber nada, y por lo que me has explicado, yo me imaginaría que si yo ahora aquí añado otro atributo, se va a añadir en el objeto.
Exacto.
Si yo digo, no, pues yo quiero ahora tener un data, lo que sea.
Exacto.
Bueno, un área.
Vamos a poner un área, un role, y vamos a decir que esto es un title.
Exacto.
Y aquí aparece.
Todos los atributos van a este objeto de segundo parámetro, el createElement.
Exacto.
Vamos a probar ahora a hacer algo un poquito más complicado, y vamos a, en vez de pasarle un hola mundo, vamos a pasarle, por ejemplo, pues, en un H1 es un poco raro, pero vamos a pasarle un par de spans, por decir algo.
Vale.
Si quieres, si te sientes más cómodo, conviértelo en un div o algo así.
Vale.
Vale, pero solo para ver un ejemplo.
Ponle un div.
Mira, voy a hacer que esto sea un div, y dentro va a tener un H1.
Un H1 y un H2, si quieres.
Y un H2, bienvenidos a LiveCoding con Danidev, ¿qué te parece?
Muy bien.
H2.
Vale.
Vamos a ver qué nos ha generado esto.
Sí, porque eso está generando un montón de cosas ya, ¿eh?
Exacto.
Vale.
Fijaos que esto...
Aquí está el createElement de antes.
Tenemos el mismo createElement con el segundo parámetro, que sigue siendo las props, y el tercer parámetro se ha convertido en una lista de argumentos que a su vez van llamando a createElement.
Esto ya no pinta guay. Esto es lo que estábamos diciendo, que se iba complicando un poco el tema.
Esto se iba complicando un poco el tema, pero bueno, vamos a dejarlo aquí para ver luego lo que vamos a tener que acabar haciendo.
Lo que vamos a tener que acabar haciendo es implementar esta función de createElement de React para usar la nuestra.
Y para renderizar los hijos de cualquier elemento vamos a tener que ir llamando una y otra vez a esta función que implementemos.
Esto me parece espectacular, Dani. O sea, vamos a hacer nuestro propio React.
Vamos a hacer nuestro propio React.
Madre mía, la gente...
Y lo vamos a hacer en 20 minutos.
¡Guau!
Venga, ya.
¡Empezá! ¡Ya!
Vamos.
Vale, ¿por dónde nos vamos?
Vale. Hay una funcionalidad que ofrece Babel que no es muy conocida porque la gente no la usa a no ser que no use otra cosa que no sea React.
Babel por defecto asume que si usas JSX vas a estar usando React.
Pero si nosotros no queremos usar este ReactElement y queremos utilizar otra cosa, Babel te ofrece algo que se llama el JSXPragma.
Vale. ¿Y cómo le indico?
Para usar el JSXPragma pon aquí arriba del todo del fichero un comentario.
¿Sí? ¿Así?
Con dos asteriscos.
Ah, con dos asteriscos.
Sí.
¡Ay!
Vale. Y ahora...
¡Ay! ¡Ay! ¡Ay! ¡Ay! ¡Ay! ¡Ay!
Ahora un espacio y arroba JSX y aquí vendría el nombre de la función que queremos que Babel llame en vez de ReactCreditElement.
Por ejemplo, vamos a llamarle DOM o VDOM. Como tú quieras. O Miguel.
Ah, Miguel. Bueno. Danidom.
Danidom. Venga, Danidom. Cierra el comentario.
Vale.
Y aquí está.
¡Ojo! ¡El Danidom!
¡Aquí está!
Ya tenemos el Danidom.
Aquí está la magia. Me gusta más que Jolti que esto, ¿eh?
Sí, Danidom.
Ahora tengo un problema.
Danidom.
Danidom. Es que está guay. El Danidom.
Está chulísimo.
Vale. Pues con el Danidom, vale. Ahora veo que justamente le hemos indicado que cuando utilizamos JSX no queríamos llamar a React.CreateElement, sino que estamos diciendo que nos lo tiene que transformar al Danidom.
Exacto.
Que va a ser un método que va a hacer exactamente lo mismo que CreateElement.
Exacto.
Solo que aquí no está implementado, obviamente.
Exacto. Aquí no está implementado. Entonces lo que tenemos que hacer es implementar esta función.
Vale.
Vale. Porque esa función, obviamente, no existe.
No existe. Ojalá existe.
Esto si le he jugado que te hacemos en un navegador, pues petaría diría Danidom, no sé lo que es.
No es nadie. Danidom no es nadie.
No es nadie.
Vale.
Vale. Genial. Muy bien.
Pues vamos a empezar a implementarlo. Vamos a irnos a una consola de CodeSandbox que va a ser un poco más cómodo para divulgar y para ver lo que está pasando.
Para el que no conozca CodeSandbox, pues es una herramienta que es súper chulísima porque es un editor que tienes en el navegador y además tiene una funcionalidad para compartir editor.
Así que va a estar Dani programando y vamos a ir viendo los cambios también aquí. Y vamos a poder estar, mira, Dani de la Cruz, Join the Live Session.
Aquí estoy.
Muy bien. Pues nada, Dani, todo tuyo. Yo estoy aquí de observer.
Bueno, pues vamos a ver.
De observer.
De observer.
Bueno, vamos a borrar un poco el código de ejemplo que te pone CodeSandbox cuando creas un proyecto. Y lo primero que necesitamos es añadir la config de Babel para que nos haga la transformación esta y nos soporte el JSX Pragma.
Vale.
Así que voy a añadir un fichero Babel RC que CodeSandbox ya nos ofrece con una configuración por defecto. Yo le voy a poner la configuración que tengo en mi proyecto que es simplemente cambiar el plugin este de Transform Runtime por el de, ay, perdón, con el de Transform React JSX que es el que nos va a permitir poder hacer esta manipulación del...
Básicamente este es el plugin que antes, cuando hemos visto en el Babel Repel, es el que se estaba utilizando para que hiciese esa transformación.
Exacto.
Vale.
Entonces vamos a empezar. Vamos a venir aquí al archivo index.js.
Sí.
Y arriba del todo voy a poner mi pragma.
JSX.
DaniDom.
DaniDom.
Perfecto.
Y vamos a implementar esta función DaniDom. Vamos a decir que va a ser una función...
Bueno, sí. Aquí esto me va petando porque todavía no estoy implementado.
Sí, no os asustéis por los petes, pero mientras vayas queriendo, como tiene Live Reloading, pues...
Exacto.
El primer parámetro que va a recibir va a ser el type.
El segundo van a ser las props.
Y como tercer parámetro le voy a decir que va a recibir los children.
Pero se los voy a pasar de estructurados.
Esto de estructurar es con estos tres puntitos.
Vale, para que yo le pueda pasar una lista de parámetros y no le tenga que pasar un array.
Claro, porque como children en realidad un elemento de React, como hemos visto antes, puedes pasarle uno como que puedes pasarle una lista.
Exacto.
Exacto.
Babel, si tiene children, lo que va a hacer es ponértelos como parámetros a continuación.
Exacto.
Tercero, cuarto y el quinto.
Si tienes tres children, sería el tercero, el cuarto y el quinto.
Exacto.
Entonces, como a mí me interesa que me lleguen en un array, porque es más fácil de manipular, pues lo hago así de estructurado.
Entonces, ¿qué va a hacer esta función?
Esta función lo único que va a hacer es convertirme mi JSX en algo que yo pueda manipular en JavaScript.
Ese algo que pueda manipular en JavaScript, pues va a ser un objeto.
Y este objeto va a ser un objeto que va a tener un type, que va a tener props y va a tener children.
Esto es algo que ya puedo entender.
Y estos children van a ser los argumentos que me llegan por aquí en el tercer parámetro.
De momento vamos a hacer que children es directamente un array con los args.
Y vamos a devolver esto directamente.
Luego a lo mejor tenemos que modificar algo, pero nos va a servir para debugar un poco lo que está pasando.
Entonces, ya existe Danidon.
Esto ya existe Danidon, esto ya no está petando.
Y ahora vamos a imprimir algo.
Por ejemplo, vamos a crear un nodo, que va a ser un title.
Y va a ser el mismo que hacíamos antes.
Vale.
Hola.
Hola Miguel.
Muy bien.
Vamos a imprimir este title.
Y vamos a ver qué está pasando.
Aquí lo tenemos.
Vale.
Mira, en la consola tenemos aquí el mensaje.
Aquí tenemos la consola, que está recibiendo un type, que es el h1, un array con los children.
Que básicamente el children ahora es el contenido del h1, que es un texto.
Que es hola Miguel.
Exacto.
Entonces, ¿qué hacemos ahora con esto?
Esta función Danidon lo único que hace es transformarme el JSX en algo manipulable.
Pero ahora, yo este objeto lo tengo que tratar para pintarlo en la página.
Claro.
Porque si no, no...
Si no, no está haciendo nada, ¿no?
No hacemos nada.
Ya, ya hemos terminado.
No.
Entonces, vamos a hacer una función createElement o render o ¿cómo le llamamos?
DanidonRender.
Render, render está bien.
Vamos a hacer una función render, va.
Vamos a hacer una función render que reciba un nodo.
Y esta función, pues por ejemplo, puede hacer un createElement.
El nodo al final va a ser algo que tiene type, props y children.
Entonces, podemos hacer un document const, por ejemplo.
Element, document, createElement.
Y createElement, pues nos permite hacer noden.type, por ejemplo.
Y esto lo tenemos que poner en algún sitio.
Luego veremos dónde lo pongamos.
De momento, devolvemos esto.
O sea, justamente aquí lo que estamos creando es el elemento en el DOM.
Exacto.
Con el tipo que le hemos indicado por el noden.
Exacto.
De momento no va a aparecer en la pantalla todavía.
Pero devolvemos este elemento.
Y aquí vamos a hacer un render de title.
Esto lo vamos a poner en el body, por ejemplo.
Append child.
Vale, de momento no vemos nada.
Porque esto no tiene...
No sé si puedo inspeccionar aquí el...
Sí, puedes inspeccionarlo directamente.
Aquí tenemos el h1.
Vale, ya me lo ha pintado dentro.
Entonces, falta pintar...
Voy a mirarlo yo también, para que la gente lo vea.
Pero básicamente, podríamos ver que aquí tenemos el h1, solo que no está el texto.
Exacto.
O sea, hemos creado el elemento en el DOM, pero claro, el children no lo hemos creado todavía.
Exacto.
Es porque justo en la línea 16 tenemos el document createElement y sí que hemos creado ese nodo, pero sin nada dentro por ahora.
Exacto.
Entonces, aquí lo que podemos hacer es hacer un append children de element y ponerle node.children, por ejemplo.
Bueno, esto tiene que ser un text node, ¿no?
A ver.
Claro, aquí, element.appen...
Y yo...
Ahí está.
Ahí está.
No le puedo poner el texto directamente, sino que tengo que crear un texto.
Sí, un texto.
Vale.
Ahora, efectivamente, tenemos el h1.
Esto es...
O sea, ya este ejemplo es espectacular, ¿eh?
Porque aquí tenemos, por un lado, faltarían muchas cosas, ¿no?
Pero si pensamos en React, tendríamos la parte un poco del React DOM, un poco, que hemos hecho así, de forma un poco patillera, obviamente.
Pero es algo parecido a lo que haría internamente React DOM, ¿no?
Y también estamos renderizando...
Es espectacular, ¿no?
Que ha puesto aquí un h1 con ahora, Miguel.
Efectivamente, vale.
Estamos aquí creando el nodo que parece que se quita la magia, pero que ya está aquí.
Que ya podríamos empezar a volver a renderizar esto.
Exacto.
Con cualquier cosa e ir viendo elementos en el DOM.
Ya está.
Tal cual.
Ya está.
Hemos hecho ya aquí...
Bueno, lo has hecho tú, sobre todo.
Has hecho un DOM.
En un momento.
Tal cual.
Claro, esto está muy guay.
Pero ¿por dónde podemos seguir?
Porque, claro, el children...
Bueno, igual podríamos seguir por los props, ¿no?
Podemos seguir por los props.
Podemos hacer...
Ahora faltan muchas cosas aquí, porque hemos hecho muchas asunciones.
Claro.
La primera asunción que hemos hecho es que un nodo siempre va a recibir un texto.
Claro.
Pero puede tener tags internos y hay que ver si realmente es un texto o tengo que hacer un create element.
Esa es una de las primeras cosas que podemos hacer.
Luego también podemos implementar las props, que también es interesante, ¿no?
Darle un pequeño estilo a esto y ver si lo aplica.
¿Qué te parece si damos con ese?
Vamos a hacer las props.
Sí, me parece guay.
Las props.
Y así, como ya estamos importando style aquí arriba, pues le metemos un estilo...
Mira, voy a crear el title, ¿vale?
Vamos a poner que es de color tomato, que el font size es 24 píxeles...
Que yo creo que ya estaba.
Sí, ya está.
Con que se cambie el color, ya veremos qué se aplica.
Y de esta forma, pues en esta función vamos a hacer que las props cobren vida.
Que le podamos meter un class name.
O sea, que esperaríamos que aquí, básicamente, tenga el class name title.
Exacto.
Tenga el class name title.
Entonces, este class name title lo vamos a tener que tratar aquí, ¿no?
Vamos a ver por dónde empiezo.
Vamos a intentar hacerlo aquí y vamos a ver.
Esto va a recibir unas props.
Vale.
Si tenemos props, voy a hacer algo.
Entonces, vamos a coger y vamos a...
No sé cómo hacerlo.
O sea, la idea de las props...
Voy a verbalizar un poco lo que estoy pensando.
La idea de las props es que todo esto acaba en argumentos del elemento.
Pero no todas van a ser argumentos HTML.
Por ejemplo, class name es uno un poquito especial que vamos a tener que tratar aparte.
Entonces, lo que voy a hacer es voy a tratar este directamente y voy a hacer la transformación de class name a class.
Exacto.
Entonces, voy a poner aquí un código un poco guarro.
Sí, sí.
O sea, lo que vamos a decir.
Estamos haciendo un experimento.
Lo estamos haciendo en live coding.
Raw live coding.
O sea, que no va a ser el código más limpio que vais a tener en vuestra vida.
Pero que, bueno.
Exacto.
Que esto, la idea es que se pueda ir mejorando.
Exacto.
Entonces, vamos a ver si esto tiene class name.
Vale, vale.
Vamos a hacer en element...
¿Cómo era esto para argumento?
Ah.
Apply...
Ay, déjame mirar la chuletilla.
Sí, no, mira, mira chuletas.
Mira chuletas.
Mientras tú miras chuletas...
Estoy un poco en blanco.
Ah, pasa nada.
Tú miras chuletas.
Es que aquí no se ven las chuletas.
Set attribute.
Set attribute.
Jolín.
Set attribute.
Y le voy a decir que esto es un class.
Y el valor va a ser...
No de props class name.
Ay.
Guau.
Guara.
De una.
Madre mía.
Tal cual, eh.
O sea, muy bien.
Ya tenemos ahí con el set attribute.
O sea, tal cual.
Le han metido el class name.
Hombre, lo que mola es que si ahora por lo que sea le quitamos esto y esto se refresca,
pues nada, ya está.
Metemos title.
Codisim.
O sea, brutal, ¿no?
Sí.
Muy bien.
Claro.
¿Por qué estamos haciendo class name?
Esto lo vamos a explicar rápidamente.
Pero en React, cuando queréis meterle un class a un elemento del HTML, se utiliza class name
porque class es una palabra reservada y puede daros problemas, por ejemplo, a la deconstrucción
del class.
Antes internamente también tenía problemas.
En React, por ejemplo, sí que se utiliza el class.
Y por eso esto es un caso un poco especial.
¿Podríamos llegar a hacerlo?
Creo que se podría llegar a hacer en este caso.
O sea, aquí ponemos class.
¿O crees que no?
No, porque no lo estoy aplicando.
Solo estoy haciendo el if.
De hecho, lo que podría hacer...
O sea, quiero decir.
Podríamos hacer esto para que la gente entienda.
¿Por qué habéis hecho class name?
O sea, podríamos llamarle class.
Aquí le hacemos node.procs.class.
Set attribute class.
De hecho, esto nos permitiría que el set attribute fuese más fácil.
Exacto.
Porque ya diríamos...
Lo que pasa es que para los que son camel case, o sea, por ejemplo, los data que tienen
un guión...
Sí, hay que tratarlos.
Hay que tratarlos y...
Pero ya te los trata.
Claro.
Ya verás.
Mira.
Mira, interesante.
Ya te los trata.
Vamos a ver.
Vamos a poner un data attribute y vamos a ver qué imprime nuestra función danidon.
¿Vale?
Vale.
Si pones data...
QA, que es algo que yo uso mucho para testeo, vamos a poner pues title.
Vale.
Title para QA, ¿vale?
Para que se diferencie un poco del otro.
Si yo imprimo...
Uy, me lo formateo.
Si yo imprimo...
¿Dónde está esto?
El title.
El title aquí abajo.
Vale.
Bueno, ya lo tenía.
Ya lo tenía, de hecho, en algún sitio.
Si miro las props...
Ajá.
Ay, pues no te lo transformo.
Es verdad.
Yo pensaba que te lo...
Ah, pensabas que te lo ponían camel case.
Pensaba que te lo ponían camel case.
No sé por qué.
No, no, no.
Yo creo que no.
Es verdad.
Sí, no, no, no.
No, no, ya sería la bomba.
Sí, sí, sí, sí.
Sí.
No, no.
Claro.
Lo que normalmente en React, todo lo que son atributos que tienen un guión, como por ejemplo,
pues los ARIA Content.
Pues no se utilizan así, sino que se utilizan así.
Sí.
Y luego hacen una transformación por dentro para que sí que te funcionen bien.
Vale, vale, vale.
Esto sería interesante, ¿sabes por qué lo hacen?
Estaría bien.
Lo bueno de esto de implementarlo así es que no tenemos por qué hacerlo...
Exactamente igual.
Puede ser más cercano al HTML.
Exacto, exacto.
Todavía podríamos hacerlo más cercano.
Al final estamos definiendo nuestra convención.
Estamos haciendo el Danny Dom, o sea que puede ser como nos dé la gana.
Exacto, puede ser como nos salga de la gana.
Claro, de hecho en este caso que ahora tenemos el class tal cual así, sin utilizar el className,
para que veáis el problema con el class que comentábamos antes, es que si nosotros hiciéramos
aquí una deconstrucción del class y lo cogemos de asno de props, aquí vais a ver que nos
está dando un error, porque nos dice que class es una palabra reservada.
Entonces el problema de utilizar class es que a la mínima puedes tener este problema
sin que te des cuenta.
Entonces por eso normalmente se utiliza className.
¿Dejo class o quieres className?
Vamos a dejar class.
Vamos a dejar class.
Vamos a dejar class.
Lo que sé que me gustaría es sacar esto a una función porque si no va a quedar un poco
turbio.
Perfecto.
Y vamos a limpiarlo un poquito solo.
Vale.
Entonces, podríamos llamarle apply class, por ejemplo.
Y yo creo que con pasarle el node y el element ya tendríamos bastante.
Vamos a ver.
Función apply class.
Vale.
Y ya está.
Vale.
Ya está.
Ya lo tenemos.
Quizá con las props solo sería bastante, pero bueno, ya está.
Entonces ahora queda un poquito más limpia nuestra función render y nos podemos olvidar
de esto.
Otra cosa que sería chula es aplicar todos los demás atributos.
O sea, vamos a hacer un tratamiento especial al class porque sí, pero podríamos aplicar
todos los demás atributos.
Entonces, podríamos hacer un map de las case del objeto prop e ir aplicando atributos
tal cual.
Vale.
A ver qué tal funciona.
Vale.
Entonces, podríamos hacer object keys de node props y hacer un map sobre esto y por
cada uno hacer element set attribute de la key y de node props key.
Con esto setearíamos cualquier otro atributo que pusiéramos.
Por ejemplo, si ponemos un style, style que sea, ¿qué le pongo?
Subrayado.
Venga.
Text decoration.
Sí.
Aquí lo tenemos subrayado.
Ya lo tenemos.
Lo que es interesante de esto es que en realidad, claro, como ahora hemos dejado el class, como...
En realidad no haría falta.
Bueno, en realidad ya...
En realidad no haría falta.
En realidad este apply class, o sea, ya no lo podemos petar todos.
Nos lo podemos petar.
¿Nos lo petamos?
Sí.
Es una decisión de diseño.
Sí.
Entonces nos cargamos el apply class.
Exacto.
Y ya, si tenemos props, pues hace...
Y queda el código más sencillo.
Esto al final, como queráis, si queréis hacerlo como lo hace React, pues le dais un tratamiento
aparte.
Exacto.
Bueno, es por simplificar, porque ahora mismo me parece que es más interesante que veáis
cómo se está creando esto y cómo está trabajando por detrás, que más que veáis exactamente
cómo lo hace React, que al final es lo que decías, ¿no?
Tú, Dani, que es una decisión de diseño de hacerlo así y ya está.
Sí, sí, sí.
Tal cual.
Vale.
Vale, pues que los siguientes serán los children.
Antes que los children, vamos a hacer una cosa que no está en el artículo que yo miré
para hacer esto, porque yo me basé en un artículo donde un chico iba explicando todos estos
pasos.
Y es convertir, bueno, hacer que render soporte componentes funcionales.
Ahora mismo, si os fijáis, a lo mejor lo estáis pensando, que este title es estático, es JSX estático.
Pero la gracia de las librerías de componentes y de virtual DOM es que te permite hacer componentes
funcionales y parametrizarlos.
Entonces, esto no estaba en el artículo y creo que puede ser guay.
Me parece súper interesante.
¡Zasca!
¡Toma corte!
Bueno, es que el vídeo son unos 40-50 minutos y he preferido cortarlo en dos trozos, ¿vale?
Para que quede un poquito más disfrutable.
Así que, nada, os recomiendo que si no os queréis perder la segunda parte, os suscribáis
al canal, ¿vale?
Para que sepáis y os avise cuándo va a llegar y le deis like, lo compartáis con vuestros
amigos y dejéis un comentario sobre lo que os ha parecido este RAW Live Coding.
Así que, nada, nos vemos en el siguiente.
¡Hasta luego!