En el vídeo de hoy te voy a enseñar algo que te va a estallar la cabeza.
¿Te imaginas sumar React y Python?
Pues hoy es posible gracias a React.py,
que es una biblioteca que te permite construir interfaz de tu usuario
utilizando Python sin JavaScript,
y esto te lo va a compilar a React.js.
Vamos a hacer una aplicación de cero para que veas cómo funciona.
Lo primero que haremos es instalar las dependencias que requerimos.
Vamos a crear aquí una carpeta llamada React.py,
React.py e instalamos.
Yo lo tengo como pip3, porque así es como lo ponen en macos.
Seguramente tú tendrás que hacer pip install.
Pero yo pongo pip3 install y voy a utilizar React.py y de backend fastAPI.
El backend tampoco es que sea requerido.
Si no tienes APIs ni nada, no te preocupes.
No tienes que saber de fastAPI.
Pero sí que lo necesita para poder levantar el proyecto.
Ahora que tenemos esto, también voy a instalar Ubicor,
porque esto nos va a permitir levantar el entorno de desarrollo.
Así que instalamos aquí Ubicor, el standard.
Esto lo ponemos entre comillas y ya tendríamos con esto las dependencias.
Ahora vamos con el código.
Vamos a levantar Visual Studio Code.
Vamos a crear un archivo llamado main.py de Python.
Y vamos a empezar a utilizar React.py.
React.py tienes toda la documentación aquí en reactpy.dev.
Puedes ver, todavía no tienen a día de hoy, cuando estoy grabando este vídeo,
todavía no tienen toda la documentación completa, que está todavía en construcción,
porque es una biblioteca muy nueva.
Pero bueno, está igualmente interesante.
Venga, vamos a ver qué tenemos que hacer.
Lo que tenemos que hacer es, primero, importar desde React.py.
Aquí vamos a importar el componente y el HTML.
Ya verás que no utiliza JSX.
Si sabes React, pues verás que no utiliza JSX, pero igualmente se entiende bastante bien.
Ahora vamos a traernos de React.py, nos vamos a traer el backend de FastAPI.
Y esto, desde React.py, backend FastAPI, from configure.
Esto es para configurar la parte del backend.
¿Vale? Ahí.
La parte del backend.
Muy bien.
Y ahora lo que vamos a hacer es importar FastAPI.
Así que desde FastAPI, import FastAPI.
Estas serían como las tres dependencias que necesitamos para nuestro proyecto.
Antes de crear el primer componente, lo que voy a hacer es crear nuestra aplicación de FastAPI.
Y ahora, en el configure, lo que le pasamos es, por un lado, nuestra aplicación
y, por otro lado, nuestro primer componente.
Le podemos llamar Hello World.
Vamos a crear nuestro primer componente.
¿Cómo lo hacemos?
Creamos con el decorador Component.
Definimos el Hello World.
Utilizando la misma nomenclatura que tenemos justamente con React, ¿no?
Que es la de Pascal Case.
Así que definimos esto y ahora le tenemos que decir qué es lo que tiene que devolver.
Pues vamos a hacer un return de HTML.dipHelloWorld.
Aquí le pasaríamos el texto que queremos que tenga el elemento deep.
No te preocupes que luego iremos viendo cómo puedes anidar elementos HTML y todo esto.
Vamos paso a paso, paso a paso.
Ahora, vamos a inicializar, si te parece, nuestro entorno de desarrollo para ver cómo va quedando esto.
Así que vamos a poner aquí Ubicorn.
Le decimos que queremos main, dos puntos, app.
Y esto, además, con el reload para que se vaya actualizando automáticamente cada vez que hagamos cambios en nuestra aplicación,
que se refresque y así los veamos reflejados.
Muy bien, pues con esto ya lo tenemos en este puerto 8000.
Voy a abrir aquí, en el puerto 8000.
¿Ves? Ya tengo aquí este Hello World.
Voy a ponerlo, si te parece, para que lo entendamos mejor y vayamos viendo los cambios que vamos haciendo.
Lo voy a dejar aquí a la derecha y esto, pues lo muevo un poquito por aquí y ¡hala!
Ya tenemos esto en un mismo sitio y vamos a ir viendo los cambios que vamos haciendo reflejados directamente aquí.
Ahora, ¿qué más podemos hacer?
Para que veas cómo sería que no utiliza JSX, ¿qué es lo que está utilizando exactamente?
Bueno, está utilizando, pues, este método .dip y lo mismo tendrías con el .h1, ul, li y todo esto.
Para que veas cómo funciona, ¿cómo lo haríamos?
Pues aquí dentro podrías poner como los children, ¿no? Los hijos.
Vamos a poner el h1, en lugar de Hello World vamos a poner lista de tareas
y aquí, pues, podríamos volver a hacer html.ul y aquí tener una lista, html.li
y aquí, pues, la tarea 1, la tarea 2, aquí tendríamos las dos tareas.
Si guardamos los cambios, pues ya vemos aquí reflejado exactamente esto.
A ver, lo interesante de React.p es que lo que está ocurriendo por debajo es que esto es código Python
y lo que está haciendo es transformarlo realmente a código de JavaScript.
Y esto lo podríais ver aquí si le damos a inspeccionar y miramos la red y volvemos aquí a refrescar.
Fijaos que, si, a ver, inhabilitar caché, ¿vale? Refrescamos.
Fíjate aquí en estos 40k de JavaScript. Esto es JavaScript.
Y aquí podéis ver un poquito lo que está haciendo, ¿no?
Está como importando ciertas cosas, está haciendo cositas aquí con el component will and man.
Veis que se ven cosas .render, se ven cosas de React aquí.
Podríamos buscar el useState. ¿Ves? React DOM, useState, useReducer.
O sea, lo que está haciendo es transformar ese código de Python a código de JavaScript
y utilizando la biblioteca también de React.
Así que aquí lo podéis ver que no es que está haciendo magia puramente con Python, ¿vale?
Solo para que lo tengáis en cuenta, ¿vale?
Ahora que esto te ha quedado claro, vamos a continuar.
Una pregunta, ¿no? Es, oye, ¿cómo se hacen los fragments?
Porque fíjate que aquí tengo un div, pero realmente este div lo estoy haciendo solo
porque ya sabéis que siempre hay que envolver una lista de elementos y que siempre sea un elemento.
Pues aquí en React.py también podéis utilizar el guión bajo, ¿no?
El underscore para decirle, oye, no quiero que me renderices nada.
Y esto, si mirásemos el HTML, veríamos que ahora no está renderizando el div
y simplemente lo que está haciendo es envolverlo.
O sea, no está renderizando en el HTML nada, pero aquí sí que lo podemos envolver.
¿Qué más? Pues crear un componente, ¿no?
Siempre la componentización es súper importante.
Lo podríamos ir creando en archivos, pero yo lo voy a crear aquí mismo
y así pues lo veremos rápidamente.
Podríamos tener aquí la definición del item.
Aquí tendríamos también las props.
Y vamos a, bueno, por ahora vamos a renderizar directamente cada tarea, ¿no?
Así que vamos a poner esto, tarea 1.
Obviamente que necesitamos que nuestros componentes tengan, pues, parametrizados, ¿no?
Que estén parametrizados para que los podamos reutilizar.
Así que aquí le vamos a pasar el parámetro texto y lo vamos a utilizar aquí dentro.
Y ahora este item ya lo podemos utilizar aquí.
Cambiamos a HTML.ly y utilizamos el item.
Si guardamos esto, vamos a poner tarea con componente
para que veamos que realmente es diferente, ¿vale?
¿Ves? Ahora está utilizando nuestro primer componente.
Bueno, esto es un poco sencillo.
Vamos a utilizar, vamos a complicarlo un poco más
porque seguramente la pregunta ahora es, bueno, ¿y cómo se le añaden atributos, no?
Como por ejemplo un class, unos estilos en línea o este tipo de cosas.
Pues para ello, aquí en el li que tenemos aquí,
puede recibir antes un primer parámetro
donde le podemos pasar directamente los atributos que queramos
que tenga este elemento HTML.
Por ejemplo, podríamos tener aquí el style y decirle, pues, el style vamos a poner
con el color que sea red, ¿vale? De color rojo.
Y al guardar esto, ¿ves? Ahora tenemos esto que está de color rojo.
Lo podríamos ir cambiando, blue.
Y esto para cualquier atributo HTML que se te ocurra.
También podrías poner aquí class y que sea, pues, item, lo que sea, ¿no?
Y con la coma.
Y aquí, si le damos al botón derecho, deberíamos ver que ahora tenemos el class item
y aquí tenemos los estilos en línea.
Ah, fíjate que ya que estamos aquí, que ahora no tienes el div que lo rodea,
solo tienes este div que sea a nivel de aplicación, ¿vale?
Este div lo tienes por defecto porque así es como funciona,
pero lo que estamos haciendo antes es poner un div entre el div y el h1.
Y ahora ya no está.
Pero bueno, vení a hablarte del class name.
Y aquí el class name no está.
Muy bien, pues nada, continuamos.
Porque, a ver, el class name no lo vamos a necesitar.
Vamos a poner que el color es green.
Porque vamos a ver otra cosa muy típica de React,
que es el renderizado condicional.
O sea, cuando quieres renderizar una cosa u otra,
dependiendo de una prop, un estado, que también vamos a ver los estados.
Así que, ¿cómo lo vamos a hacer?
Podríamos tener un segundo parámetro aquí, o una prop,
esto serían las props,
que nos diga si realmente ha terminado una tarea.
Si una tarea está activada o no está activada.
Vamos a poner que por defecto sea false,
para que no nos dé ningún error.
Y lo que podemos hacer aquí es decir, bueno, pues si, mira,
vamos a crear una variable que sea atributos y decimos aquí,
oye, si vamos a poner esta, que era el que ya teníamos,
este ya era el que teníamos, lo vamos a poner aquí, ¿vale?
Lo vamos a poner una línea porque no hace falta, a ver,
que ahora esto lo he roto.
Lo vamos a poner en una sola línea para que lo veamos más claro
y no complicarlo.
Pero aquí tendríamos los estilos.
Y este estilo debería aparecer si está hecho.
Y si no, vamos a tener atributos vacíos.
Por ahora, luego lo podríamos cambiar, ¿no?
Pero lo que estamos haciendo aquí es que este atributo,
ahora se lo pasamos por aquí,
y solo cuando la prop done esté a true,
realmente va a estar en verde.
Y si no, pues no va a estar con el color por defecto.
Claro, ahora cambiando, ¿ves?
Aquí podemos ver que me pone tarea 1, tarea 2.
Vamos a darle un nombre más interesante.
Aprender React con Python.
Otra tarea, seguir y like al vídeo.
Yo que sé, ¿qué más?
Item, vamos a poner otro.
Item 3, vamos a poner...
Ay, la he liado, que he ejecutado esto por aquí.
Item y suscribirse al canal, ¿vale?
Mira, esto seguro que lo habéis hecho ya.
Esto de suscribirse al canal, seguro que lo habéis hecho ya.
Así que, fijaos.
Ahora aquí tenemos que el tercero está de color verde
porque le estamos pasando la prop de done a true, ¿no?
Y por eso entra aquí y dice, vale, si done es true, entonces esto.
Obviamente, vamos a ver ahora otro renderizado condicional
mucho más interesante, mucho más potente,
pero lo vamos a ver con el estado.
Vamos a ver hooks y estado.
También ReactP tiene hooks y estado.
O sea, te va a volar la cabeza esto.
Esto me parece muy interesante.
Entonces, ¿cómo se haría?
Lo primero, tendríamos que importar hooks aquí.
Puedes importar hooks o puedes importar directamente el useState.
Voy a importar hooks para que lo veamos todo súper claro.
¿Y cómo se utiliza?
Pues igual que como lo utilizamos con JavaScript y con React.
Vamos a tener, en lugar de done, lo voy a llamar initial done, ¿vale?
Bueno, en Python debería ser así.
Nunca me acostumbro a utilizar el snake case.
Así que, initial done.
¿Por qué?
Porque vamos a tener un estado, que le vamos a llamar aquí done y set done,
donde vamos a tener hooks.useState,
y aquí le vamos a utilizar initial done para darle un valor inicial.
A ver, lo que estamos haciendo aquí, un estado,
lo que hace es definir en qué estado se encuentra el componente
y poder cambiarlo de forma dinámica, de forma que cada vez que cambia el valor ese estado,
se vuelva a renderizar el componente reflejando esos nuevos datos, ¿no?
Entonces, la primera vez, pues, initial done, si es false,
veremos que no estará de color verde, estará de aquí negrito,
pero si cambia este estado, se volverá a renderizar el componente
y cambiará el color, lo cual está bastante interesante.
Así que, claro, viendo esto, ¿qué es lo que necesitamos?
Porque este estado no puede cambiar de la nada.
Pues también, mira, rápidamente,
también vas a ver cómo gestionar eventos de click.
Así que ya te puedes ir haciendo la idea
y estamos haciendo una pequeña aplicación
que ya con esto estás aprendiendo bastantes cosas en un momento.
Mira, vamos a definir una función que le vamos a llamar handleClick
y aquí le vamos a pasar el evento, aunque no lo utilicemos,
y luego te explico por qué, ¿no?
Y vamos a actualizar el estado de done
dándole la vuelta al valor que tenemos, ¿no?
O sea, que decimos, oye, set done, cuando le demos click,
lo que queremos es cambiar.
Si era false, lo pasamos a true.
Si era true, lo pasamos a false.
Y ahora, lo que queremos es también renderizar cosas diferentes.
O sea, que vas a ver también un renderizado condicional a otro nivel.
O sea, que tendríamos aquí, mira, para...
Bueno, voy a dejar esto.
Voy a dejar el attributes,
pero lo que voy a hacer aquí es un renderizado condicional
de estos potentes, ¿no?
Que renderizan realmente elementos diferentes.
Podemos decir, oye, si está hecho,
lo que quiero que me renderices es el HTML,
retun html.ly,
y lo que quiero que hagas es utilizar el attributes
con el texto que tenemos, ¿vale?
Esto sería si está hecho.
Pues sería como los atributos,
que sería color verde o lo que sea.
Y si no está hecho, pues quiero que me renderices otra cosa.
Vamos a hacer un ret, un html.
Vamos a utilizar otra vez el fragment,
porque vamos a renderizar ahora dos cosas.
Por un lado, renderizaríamos esto,
pero por otro lado necesitamos...
Ahí está, el botón.
Necesitamos el botón,
utilizando el onClick, así,
y le decimos que utilice esta función,
la de handleClick.
Y, bueno, podemos poner aquí hecho.
Eso, hecho, ¿vale?
Que si ya está hecho, pues está hecho.
Bueno, podemos ver aquí...
A ver, es verdad que ha salido así,
como en otra...
O sea, ha salido como en otra línea.
Podríamos ponerle que esto sea el li
y esto un span, por ejemplo,
para que así se quede en la misma línea,
porque si no quedaría...
¿Ves? Ahora sí se quedaría en la misma línea.
Podríamos añadirle estilos,
un montón de cosas, ¿eh?
Pero, bueno, no me da la vida.
No me da la vida.
Prefiero explicarte ReactPee un poquito por encima.
Bueno, pues ves que aquí ya tienes el botón.
Si le damos,
ahora se ha vuelto de otro color.
Y ya está, de otro color.
Oye, veo que, fíjate,
que me falta uno, ¿no?
O sea, aprender React con Python,
lo tenemos por aquí,
seguir y like al vídeo,
suscribirse al canal.
¿Qué está pasando aquí?
Bueno, lo que está pasando es que,
si te fijas,
como en el tercero le estamos pasando done,
y aquí hemos dicho que era initial done,
es que esto no es correcto.
O sea, le tenemos que decir,
¿veis?
Este item no se está renderizando
porque el parámetro que estábamos pasando
no era correcto.
Tenemos que pasarle initial done.
Ahora sí que lo deberíamos ver, ¿vale?
Ahora sí, ¿ves?
Suscribirse al canal ya está verde
porque initial done está true.
Y los demás también lo podríamos cambiar
y va cambiando, ¿no?
Estamos cambiando el estado.
Cuando cambia el estado,
pues al principio,
si el done está false,
renderiza esto.
Si está true,
pues renderiza esto.
Bueno,
esto es una introducción rápida
de cómo utilizar React con Python.
Ya veis que es una biblioteca
que lo que hace es que puedas utilizar Python
con muchos de los conceptos de React,
o sea,
que son exactamente los mismos,
pero adaptados a Python.
Y lo que hace es compilarlo
a código JavaScript
con la biblioteca de React.
Muy interesante.
Si te ha gustado el vídeo,
deja like,
porque si hay un montón de likes
y esto lo revienta,
hacemos una aplicación completa
con React.p,
con fetching de datos,
con más usos,
viendo otros hooks
y un montón de cosas.
Así que espero que te haya gustado
y nos vemos en la siguiente.
Chao.