1
00:00:01,110 --> 00:00:04,413
En esta conferencia, repasemos los literales de plantilla.

2
00:00:05,640 --> 00:00:09,390
Entonces, los literales de plantilla son una característica de JavaScript de ES6

3
00:00:09,390 --> 00:00:12,450
lo que nos permite crear cadenas muy fácilmente

4
00:00:12,450 --> 00:00:15,270
que contienen algunas variables de JavaScript,

5
00:00:15,270 --> 00:00:19,170
o en realidad que contenga cualquier expresión JavaScript,

6
00:00:19,170 --> 00:00:21,630
dentro de una cuerda.

7
00:00:21,630 --> 00:00:24,960
Entonces, ilustremos eso usando algunas de estas variables.

8
00:00:24,960 --> 00:00:27,110
que hemos creado aquí en el principio,

9
00:00:28,050 --> 00:00:31,320
Me gustan algunos de estos aquí, sobre este libro.

10
00:00:31,320 --> 00:00:34,710
para crear una cadena de resumen del libro.

11
00:00:34,710 --> 00:00:39,000
Entonces, crear una cadena que contenga un resumen.

12
00:00:39,000 --> 00:00:40,533
del objeto del libro actual.

13
00:00:41,700 --> 00:00:44,730
Así que creemos un resumen,

14
00:00:44,730 --> 00:00:47,820
y aquí es donde tendremos nuestra cuerda.

15
00:00:47,820 --> 00:00:49,650
Ahora normalmente cadenas en JavaScript.

16
00:00:49,650 --> 00:00:52,203
se definen con comillas normales,

17
00:00:53,190 --> 00:00:56,430
así, o entre comillas dobles.

18
00:00:56,430 --> 00:01:00,990
Correcto, sin embargo, los literales de plantilla tienen estas marcas invertidas.

19
00:01:00,990 --> 00:01:03,540
Y, si estás usando un teclado en inglés,

20
00:01:03,540 --> 00:01:05,460
están justo encima de la tecla Tab

21
00:01:05,460 --> 00:01:08,010
en el lado izquierdo del teclado.

22
00:01:08,010 --> 00:01:10,440
Entonces estas marcas inversas indican JavaScript

23
00:01:10,440 --> 00:01:12,333
que se trata de un literal de plantilla.

24
00:01:14,490 --> 00:01:16,980
Entonces, por ahora, escribamos cualquier cosa aquí.

25
00:01:16,980 --> 00:01:20,640
y luego lo escribiré inmediatamente aquí nuevamente

26
00:01:20,640 --> 00:01:25,080
para que Quokka pueda mostrar el resultado de esta variable aquí.

27
00:01:25,080 --> 00:01:28,020
Y así, por ahora, vemos que esta sigue siendo una cadena normal.

28
00:01:28,020 --> 00:01:31,290
como si se hubiera definido con la comilla normal.

29
00:01:31,290 --> 00:01:33,120
Pero ahora agreguemos

30
00:01:33,120 --> 00:01:35,133
alguna expresión de JavaScript aquí.

31
00:01:36,180 --> 00:01:38,520
Entonces, para eso usamos este signo de dólar.

32
00:01:38,520 --> 00:01:40,113
y luego llaves.

33
00:01:43,710 --> 00:01:46,470
Entonces digamos que el título es un libro,

34
00:01:46,470 --> 00:01:49,050
y de hecho, este título aquí mismo,

35
00:01:49,050 --> 00:01:51,930
o de hecho cualquier JavaScript que esté aquí

36
00:01:51,930 --> 00:01:55,080
El interior de este bloque luego se reemplaza en la cadena.

37
00:01:55,080 --> 00:01:58,320
con el valor que básicamente devuelve este bloque.

38
00:01:58,320 --> 00:02:00,240
Entonces el valor que se crea aquí.

39
00:02:00,240 --> 00:02:02,820
Y el título es, por supuesto, "El señor de los anillos".

40
00:02:02,820 --> 00:02:03,900
Y entonces,

41
00:02:03,900 --> 00:02:06,650
En la cadena vemos que "El Señor de los Anillos" es un libro.

42
00:02:07,740 --> 00:02:10,140
Así que intentemos algo más aquí.

43
00:02:10,140 --> 00:02:13,200
Entonces, como decía, cualquier expresión de JavaScript funciona aquí.

44
00:02:13,200 --> 00:02:16,860
Entonces podemos hacer dos más cuatro, o realmente lo que queramos.

45
00:02:16,860 --> 00:02:18,690
Podemos llamar funciones aquí.

46
00:02:18,690 --> 00:02:21,030
Y realmente cualquier cosa que sea una expresión,

47
00:02:21,030 --> 00:02:23,850
entonces cualquier cosa que produzca inmediatamente un valor,

48
00:02:23,850 --> 00:02:26,703
se puede colocar aquí dentro de este bloque.

49
00:02:28,860 --> 00:02:30,630
Está bien, pero ahora creemos.

50
00:02:30,630 --> 00:02:34,290
un poco más de una cuerda bonita aquí.

51
00:02:34,290 --> 00:02:36,540
Entonces digamos "El Señor de los Anillos".

52
00:02:36,540 --> 00:02:38,793
Es un libro con un número determinado de páginas.

53
00:02:40,260 --> 00:02:42,210
Entonces aquí podemos usar la variable páginas,

54
00:02:42,210 --> 00:02:44,880
que recuerdan, sacamos del objeto de los libros

55
00:02:44,880 --> 00:02:46,320
utilizando la desestructuración.

56
00:02:46,320 --> 00:02:49,110
Y ahora empiezas a ver por qué es tan útil.

57
00:02:49,110 --> 00:02:52,380
Porque, de lo contrario, tendríamos que escribir libro.título,

58
00:02:52,380 --> 00:02:56,070
luego aquí book.pages y así sucesivamente

59
00:02:56,070 --> 00:02:58,980
para todas estas variables que vamos a utilizar aquí.

60
00:02:58,980 --> 00:03:03,430
Entonces dijimos un libro de 1216 páginas.

61
00:03:06,930 --> 00:03:09,090
fue escrito por...

62
00:03:09,090 --> 00:03:10,653
Ahora, usemos el autor aquí.

63
00:03:11,610 --> 00:03:14,613
Y, nuevamente, lo eliminamos mediante la desestructuración.

64
00:03:17,550 --> 00:03:19,650
Y publicado en...

65
00:03:19,650 --> 00:03:22,260
Ahora, aquí podemos usar nuestra fecha de publicación.

66
00:03:22,260 --> 00:03:24,753
o en realidad creo que se llama fecha de publicación.

67
00:03:26,610 --> 00:03:28,260
Muy bien, entonces, aquí,

68
00:03:28,260 --> 00:03:30,540
a veces la cuerda se vuelve demasiado larga,

69
00:03:30,540 --> 00:03:33,480
y en ese caso, me gustaría desplazarme hacia abajo aquí

70
00:03:33,480 --> 00:03:35,550
y vea el resultado aquí mismo,

71
00:03:35,550 --> 00:03:37,560
en este panel aquí en la parte inferior.

72
00:03:37,560 --> 00:03:38,393
y por cierto,

73
00:03:38,393 --> 00:03:42,360
en caso de que tu Quokka no haya abierto este panel,

74
00:03:42,360 --> 00:03:45,780
siempre puedes abrirlo abriendo la terminal,

75
00:03:45,780 --> 00:03:49,380
que debería estar aquí.

76
00:03:49,380 --> 00:03:51,160
Así puedes hacer una nueva terminal

77
00:03:53,460 --> 00:03:54,330
como esto,

78
00:03:54,330 --> 00:03:55,710
y luego ves eso

79
00:03:55,710 --> 00:03:58,710
aquí tienes la pestaña PROBLEMAS, la pestaña SALIDA,

80
00:03:58,710 --> 00:04:01,593
y luego aquí puedes seleccionar Quokka.

81
00:04:03,750 --> 00:04:07,440
Muy bien, aquí tenemos esta cadena ahora,

82
00:04:07,440 --> 00:04:10,050
y aquí tenemos la fecha de publicación.

83
00:04:10,050 --> 00:04:12,210
Pero aquí sólo quiero el año.

84
00:04:12,210 --> 00:04:14,070
Así que simplemente saquemos el año.

85
00:04:14,070 --> 00:04:15,300
Y esto es de nuevo para mostrarles

86
00:04:15,300 --> 00:04:17,850
que podemos escribir cualquier expresión JavaScript,

87
00:04:17,850 --> 00:04:20,073
aquí dentro de estas llaves.

88
00:04:22,470 --> 00:04:26,370
Entonces digamos que queremos dividir esta cadena por este guión,

89
00:04:26,370 --> 00:04:28,170
lo que dará como resultado una matriz.

90
00:04:28,170 --> 00:04:31,500
Y luego, a partir de ahí, tomamos el primer elemento.

91
00:04:31,500 --> 00:04:34,230
Entonces eso es solo JavaScript estándar.

92
00:04:34,230 --> 00:04:38,370
Y ahora, efectivamente, aquí tenemos la cuerda como la queremos.

93
00:04:38,370 --> 00:04:40,770
Genial, y eso es todo lo que tenía que decirte.

94
00:04:40,770 --> 00:04:42,300
sobre literales de plantilla.

95
00:04:42,300 --> 00:04:44,910
Así de fáciles y directos son,

96
00:04:44,910 --> 00:04:47,613
pero los usamos realmente todo el tiempo en React.