En esta conferencia, repasemos los literales de plantilla.
Entonces, los literales de plantilla son una característica de JavaScript de ES6
lo que nos permite crear cadenas muy fácilmente
que contienen algunas variables de JavaScript,
o en realidad que contenga cualquier expresión JavaScript,
dentro de una cuerda.
Entonces, ilustremos eso usando algunas de estas variables.
que hemos creado aquí en el principio,
Me gustan algunos de estos aquí, sobre este libro.
para crear una cadena de resumen del libro.
Entonces, crear una cadena que contenga un resumen.
del objeto del libro actual.
Así que creemos un resumen,
y aquí es donde tendremos nuestra cuerda.
Ahora normalmente cadenas en JavaScript.
se definen con comillas normales,
así, o entre comillas dobles.
Correcto, sin embargo, los literales de plantilla tienen estas marcas invertidas.
Y, si estás usando un teclado en inglés,
están justo encima de la tecla Tab
en el lado izquierdo del teclado.
Entonces estas marcas inversas indican JavaScript
que se trata de un literal de plantilla.
Entonces, por ahora, escribamos cualquier cosa aquí.
y luego lo escribiré inmediatamente aquí nuevamente
para que Quokka pueda mostrar el resultado de esta variable aquí.
Y así, por ahora, vemos que esta sigue siendo una cadena normal.
como si se hubiera definido con la comilla normal.
Pero ahora agreguemos
alguna expresión de JavaScript aquí.
Entonces, para eso usamos este signo de dólar.
y luego llaves.
Entonces digamos que el título es un libro,
y de hecho, este título aquí mismo,
o de hecho cualquier JavaScript que esté aquí
El interior de este bloque luego se reemplaza en la cadena.
con el valor que básicamente devuelve este bloque.
Entonces el valor que se crea aquí.
Y el título es, por supuesto, "El señor de los anillos".
Y entonces,
En la cadena vemos que "El Señor de los Anillos" es un libro.
Así que intentemos algo más aquí.
Entonces, como decía, cualquier expresión de JavaScript funciona aquí.
Entonces podemos hacer dos más cuatro, o realmente lo que queramos.
Podemos llamar funciones aquí.
Y realmente cualquier cosa que sea una expresión,
entonces cualquier cosa que produzca inmediatamente un valor,
se puede colocar aquí dentro de este bloque.
Está bien, pero ahora creemos.
un poco más de una cuerda bonita aquí.
Entonces digamos "El Señor de los Anillos".
Es un libro con un número determinado de páginas.
Entonces aquí podemos usar la variable páginas,
que recuerdan, sacamos del objeto de los libros
utilizando la desestructuración.
Y ahora empiezas a ver por qué es tan útil.
Porque, de lo contrario, tendríamos que escribir libro.título,
luego aquí book.pages y así sucesivamente
para todas estas variables que vamos a utilizar aquí.
Entonces dijimos un libro de 1216 páginas.
fue escrito por...
Ahora, usemos el autor aquí.
Y, nuevamente, lo eliminamos mediante la desestructuración.
Y publicado en...
Ahora, aquí podemos usar nuestra fecha de publicación.
o en realidad creo que se llama fecha de publicación.
Muy bien, entonces, aquí,
a veces la cuerda se vuelve demasiado larga,
y en ese caso, me gustaría desplazarme hacia abajo aquí
y vea el resultado aquí mismo,
en este panel aquí en la parte inferior.
y por cierto,
en caso de que tu Quokka no haya abierto este panel,
siempre puedes abrirlo abriendo la terminal,
que debería estar aquí.
Así puedes hacer una nueva terminal
como esto,
y luego ves eso
aquí tienes la pestaña PROBLEMAS, la pestaña SALIDA,
y luego aquí puedes seleccionar Quokka.
Muy bien, aquí tenemos esta cadena ahora,
y aquí tenemos la fecha de publicación.
Pero aquí sólo quiero el año.
Así que simplemente saquemos el año.
Y esto es de nuevo para mostrarles
que podemos escribir cualquier expresión JavaScript,
aquí dentro de estas llaves.
Entonces digamos que queremos dividir esta cadena por este guión,
lo que dará como resultado una matriz.
Y luego, a partir de ahí, tomamos el primer elemento.
Entonces eso es solo JavaScript estándar.
Y ahora, efectivamente, aquí tenemos la cuerda como la queremos.
Genial, y eso es todo lo que tenía que decirte.
sobre literales de plantilla.
Así de fáciles y directos son,
pero los usamos realmente todo el tiempo en React.