Chulo, hostia
Un montón de trucos ahí
Los test secretos, se han colado
Vale, os explico un truco
De javascript que al menos
A mi me da bastante coraje
Vale
Pongamos que tenemos aquí, hostia
Tengo el modo script mode
Vale, hay un problema
Hay un problema bastante grave con javascript
No se si lo sabíais, pero es un bastante
Interesante, y es el tema de los imports
Que pasa con los imports
En javascript, pues que
En realidad hay muchos lenguajes de programación que lo tienen mal
En mi opinión
Como por ejemplo, se me ocurre, creo que Java
Hay un montón
Estoy bien, Tafididi, gracias, que me ha preguntado
Y mayúsculas, ¿cómo estás? Estoy bien
Estoy un poco resfriado, pero estoy aquí
Callo, estoy disfrutándolo
Bueno, en muchos lenguajes de programación
A la hora de importar un módulo
Externo, se hace como
De alguna forma parecida, como se hace también
En javascript, tú haces
Import, tienes que decir
El nombre del módulo, yo que sé
UseState
¿No?
Y luego tienes que poner React
Vale
¿Qué pasa con esto?
Que muchas veces
El problema
Si tú haces el import
Y abres llaves
Para ver qué es lo que importas
Vale
Fíjate que aquí te sale
De todo
De todo
O sea, es imposible saber
Qué es realmente lo que quieres
Lo que quieres importar
Igual tienes claro
Que tiene que ser una cosa de React
¿No?
Yo por ejemplo tengo claro
Que es una cosa de React
Pero no me acuerdo del nombre
Claro
Si empiezo a poner U
Pues bueno
Se va acercando
Pero como podéis ver
Todavía pues me salen cositas
Me empiezo a poner Use
Vale
Sí, ya salen aquí las de React
Pero también me salen un montón más
¿No?
En Python es al revés
Porque en Python lo tienen bien
En Python lo tienen bien
O sea
En Python aprendieron la lección
Entonces
Pero hay en otros que no
El de Python está bien en este sentido
Pero esto tiene una solución
Esto tiene una solución
¿No?
O sea
Una cosa que puedes hacer obviamente
Es poner primero
Import from React
Y luego tener que ir atrás
Pero esto
Está bien
Pero es un poco rollo
¿No?
Porque entonces ya tienes que
Es un poco rollo
Pues una cosa que podéis hacer
Si ya no me acuerdo
Es tener
Vuestro propio
Snippet
Y de esta forma
Lo primero que haces
Tú pondrías
El
Imp
¿Vale?
Le das aquí
Ya te va directamente
A la parte del módulo
Tú escribes aquí el módulo
Que en este caso
Pues sería React
Y cuando le das al tabulador
Te irías
A la parte de las dependencias
Y ya aquí
Ahora sí que tendrías
Solo las dependencias
Que serían de React
De hecho
Fíjate que aquí a la derecha
Ya no te aparece
Ni de qué dependencia es
Porque ya se da por hecho
Que son todas las de React
Entonces
¿Cómo podéis hacer esto?
¿Vale?
Para hacer esto
Lo único que tienes que hacer es
Abrir con
La paleta de comandos
Con mayúscula
Comando P
Y le dais aquí
Snippet
¿Vale?
Y ves que pone aquí
Configure User Snippet
Le dais aquí
Y aquí os preguntan
Qué archivos son los que queréis tener
¿No?
Pues tenéis
JavaScript.json
JavaScript.react.json
Lo que sea
Bueno
Yo lo voy a poner
JavaScript.react
Porque es el que más utilizo
Y haríais algo así
Tenéis que decirle
Cuál es el nombre
Del snippet
Que queréis hacer
En este caso
Pues le podéis llamar
Import
ImportModule
Lo que sea
El prefijo
Con el que va a detectar
Ya que quieras utilizar esto
Por ejemplo
Imp
Entonces ya cuando haces el imp
Bueno
A mí me ha dejado ahora fatal
Pero
Vale
Aquí lo tienes
El imp
Y luego lo que va a escribir
Pero aquí está el trucazo
De lo que vas a escribir
¿Qué?
Tú le puedes decir
Cuáles son los pasos
Que tiene que dar
A la hora
De moverse el tabulador
Como veis
El tabulador
Primero me lleva aquí
¿Veis que primero me ha llevado
Al módulo?
Y cuando le doy al tabulador
Otra vez
Bueno
Ahora me ha dejado mal
Porque justamente
Como me he cambiado
De React
¿Veis?
Que se ha movido aquí
Pues el tabulador
Va al otro sitio
Tú le vas diciendo
Dónde tendré que ir dejando
Cada uno
Bueno
Hackon
Ya imagino que hay muchos
Que os conocéis
El truquillo
Pero hay gente
Que a lo mejor no se conoce
Y la verdad es que es un poco rollo
Es un poco rollo
Tener que hacer los impos
Hacer los manuales
Y todo esto
Entonces
Aquí le podéis poner un nombre
Porque en el import
Pues puedes decir
Que te aparezca el nombre y tal
Pero bueno
El uno le dirías
Vale
Aquí es donde tiene que ir
La primera vez
Y aquí
Donde va la segunda
Le puedes poner una descripción
Por si quieres ver los snippets
Y ya está
Pero bueno
Que sepáis que esto de los snippets
También lo podríais utilizar
Yo que sé
Por ejemplo
Hay extensiones que tienen un montón de snippets
Para crear componentes
¿No?
Un componente de React
Podríais poner yo que sé
React
React component
RC
Y le podéis poner el body
Lo que soleáis hacer
No sé que es lo que soléis hacer
Pero podéis decirle aquí
Que sea
Import
Use state
From React
Por ejemplo
No sé si esto es por líneas
Creo que sí
Entonces aquí podríais poner
Mira
Perfecto
Mira
Geekhack o pilot se sabe ya
Hacer las mierdas estas
Pues esto
Estos snippets
A ver
Esto no es muy interesante
Porque es demasiado
Como que sabe demasiado esto
Pero ahora cuando pongamos en un sitio
RC
Bueno
Me ha dejado aquí
Bueno es que no sé
Porque esto no es de React
A lo mejor
A ver
Y he puesto aquí prefijo
RC
A ver React component
Solo para asegurarme
Ay que no lo había guardado
Bueno
Ya lo veis
¿Veis que pone aquí React component?
Si le dais al enter
Pues ya te hace todo esto
Pero lo más interesante en realidad
Está aquí
Está en
Donde te ha dejado el cursor
El cursor te lo ha dejado aquí
Y aquí ya puedes poner
Counter
Mira
Counter
¿Ves que te va cambiando?
Bueno en este caso
Ha puesto el cursor en dos sitios a la vez
Esto
Es que es una cosa que también se puede hacer
Poner el cursor en dos sitios a la vez
O sea
Tiene un montón de mierdas
Y vale
Ajá
Que otra vez he cambiado
React component
Counter
Vale
Counter
Counter
¿Ves?
Se puede hacer que una vez que te vas
Lo ponga en uppercase
En este caso
Está mal
Porque lo ha hecho mal
Geekhack o pilot
Pero bueno
Para que veáis un poco
Las cosas que se pueden hacer
De que tengáis este tipo de snippets
En el caso de los simpots
Está bastante chulo
Porque ya veis que así
Podéis hacer así
Y aquí
Pues es mucho más fácil
Que escribáis
Y ya os ha dado autocompletado
Y hombre
Es una forma de arreglar
Los simpots que están mal
Los simpots que están mal
De javascript
Al final
Pues hacéis simpots
Y así pues
Tenéis la forma esta
De hacerlo
Pum
Pum
Pum
Pum
Pum
Hacerlo de la forma correcta
Midu 1
Guija copa en los ceros
Si ahí se ha ido un poco la olla
Las extensiones React
Traen muchos de esos
Pero hacer nippets ayuda
Si
Lo
¿Sabéis lo que pasa?
A mí la extensión de React
Está bien
Pero muchas veces
Claro
El problema de los snippets
Es que están opinionados
Vamos
Que de alguna forma
Están metiendo su opinión
En los snippets
Si utilizas .sicoma
O no lo utilizas
Si cómo haces el import
De los módulos
Entonces muchas veces
Lo mejor es que hagas tú mismo
Tus propios snippets
Y uno tan sencillo
Como el de los imports
Yo lo utilizo un montón
Y el otro día me di cuenta
Porque me lo comentó alguien
Y dije
Hostia pero no haces esto
Y me dijo no
Y yo joder
Todo el mundo debería estar
Haciendo esas cosas
Así que
Snippets
Evan Yu hace snippets
Desde el 2014
Sí, sí, sí
No, me imagino
Me imagino que ahora me dirá eso
También Evan Yu
¿Cuándo haremos un SPAC
Y Microfrontend
Con Modules Federation?
Microfrontend
Con Modules Federation
Sí, sí, sí
Sí, sí