1
00:00:00,732 --> 00:00:02,880
Es hora de presentar

2
00:00:02,880 --> 00:00:07,623
Otro concepto fundamental de React, que son los accesorios.

3
00:00:09,090 --> 00:00:10,980
Y los accesorios son esencialmente

4
00:00:10,980 --> 00:00:13,920
cómo pasamos datos entre componentes.

5
00:00:13,920 --> 00:00:16,620
Y en particular, de los componentes principales.

6
00:00:16,620 --> 00:00:18,750
a componentes secundarios.

7
00:00:18,750 --> 00:00:20,940
Entonces podemos imaginar que los accesorios son

8
00:00:20,940 --> 00:00:22,890
como un canal de comunicación

9
00:00:22,890 --> 00:00:26,520
entre un componente padre y un componente hijo.

10
00:00:26,520 --> 00:00:28,890
Entonces, en la práctica, lo que vamos a hacer,

11
00:00:28,890 --> 00:00:32,220
ahora es personalizar cada uno de estos componentes de pizza

12
00:00:32,220 --> 00:00:34,680
que tenemos aquí mismo.

13
00:00:34,680 --> 00:00:37,500
Entonces, recuerda cómo creamos el componente de pizza.

14
00:00:37,500 --> 00:00:42,150
que tiene esta imagen, el nombre de la pizza y los ingredientes.

15
00:00:42,150 --> 00:00:45,270
Pero ahora todas las pizzas son iguales.

16
00:00:45,270 --> 00:00:48,780
porque pues no teníamos como pasar

17
00:00:48,780 --> 00:00:52,710
diferentes datos en ellos para personalizar cada uno de ellos.

18
00:00:52,710 --> 00:00:54,600
Pero ahora, a medida que aprendemos sobre accesorios,

19
00:00:54,600 --> 00:00:56,433
podremos hacerlo.

20
00:00:57,360 --> 00:00:59,620
Entonces, antes que nada, vamos

21
00:01:00,540 --> 00:01:02,700
toma nuestro componente de pizza

22
00:01:02,700 --> 00:01:07,530
y córtalo desde aquí y colócalo justo después del menú,

23
00:01:07,530 --> 00:01:10,080
Sólo para que podamos ver lo que está pasando.

24
00:01:10,080 --> 00:01:13,983
Y luego deshagámonos de esta repetición por ahora.

25
00:01:14,940 --> 00:01:19,290
Así que por ahora solo queremos este componente de pizza aquí.

26
00:01:19,290 --> 00:01:22,440
Bien, ahora es el momento de pasar los datos.

27
00:01:22,440 --> 00:01:24,840
desde este componente principal aquí,

28
00:01:24,840 --> 00:01:29,670
que es el menú en este caso, al componente de pizza.

29
00:01:29,670 --> 00:01:34,670
Entonces, lo que queremos pasar es básicamente esta cadena de aquí.

30
00:01:34,740 --> 00:01:37,020
Entonces, el enlace a la imagen,

31
00:01:37,020 --> 00:01:40,440
luego el nombre de la pizza y los ingredientes.

32
00:01:40,440 --> 00:01:43,290
Entonces, para definir los accesorios, lo hacemos en dos pasos.

33
00:01:43,290 --> 00:01:46,260
Primero, pasamos los accesorios al componente,

34
00:01:46,260 --> 00:01:48,900
y luego, segundo, recibimos los accesorios.

35
00:01:48,900 --> 00:01:52,083
en el componente al que los pasamos.

36
00:01:53,160 --> 00:01:56,490
Entonces, aquí es donde pasamos esos accesorios.

37
00:01:56,490 --> 00:01:58,560
Y los escribimos así.

38
00:01:58,560 --> 00:02:01,533
Entonces, como si fueran atributos normales.

39
00:02:03,510 --> 00:02:04,343
entonces,

40
00:02:05,640 --> 00:02:07,030
pizza de espinacas.

41
00:02:08,610 --> 00:02:09,960
Ese es el primero.

42
00:02:09,960 --> 00:02:14,133
Luego, definamos también un accesorio para el ingrediente.

43
00:02:15,750 --> 00:02:19,590
Y, por cierto, prop simplemente significa propiedad.

44
00:02:19,590 --> 00:02:21,813
Es solo una abreviatura de

45
00:02:22,770 --> 00:02:23,703
sí, propiedad.

46
00:02:25,458 --> 00:02:26,291
¿bueno?

47
00:02:26,291 --> 00:02:31,037
Y finalmente, digamos la foto o el nombre de la foto.

48
00:02:32,943 --> 00:02:34,643
Y luego tomemos este de aquí.

49
00:02:38,010 --> 00:02:39,090
está bien.

50
00:02:39,090 --> 00:02:41,313
Y tal vez pasemos también un precio.

51
00:02:43,710 --> 00:02:46,110
Y por ahora también lo pasaré como cadena.

52
00:02:46,110 --> 00:02:48,780
pero te mostraré algo en un minuto.

53
00:02:48,780 --> 00:02:51,060
Entonces, por ahora, escríbelo así.

54
00:02:51,060 --> 00:02:52,590
Guárdalo;

55
00:02:52,590 --> 00:02:56,370
y luego Prettier formateará todo muy bien así.

56
00:02:56,370 --> 00:02:58,590
Y ahora tenemos que ir al segundo paso,

57
00:02:58,590 --> 00:03:01,440
que en realidad va a recibir los accesorios aquí

58
00:03:01,440 --> 00:03:03,780
dentro del componente secundario.

59
00:03:03,780 --> 00:03:07,530
Así que ahora mismo, por supuesto, el componente no tiene forma de saberlo.

60
00:03:07,530 --> 00:03:09,993
que estos cuatro accesorios se han pasado.

61
00:03:11,100 --> 00:03:14,670
Entonces, la forma en que lo hacemos es aceptar un parámetro de accesorios.

62
00:03:14,670 --> 00:03:17,220
aquí en este componente.

63
00:03:17,220 --> 00:03:20,400
Y luego, para empezar, bloqueemos estos accesorios.

64
00:03:20,400 --> 00:03:24,660
a la consola; y echa un vistazo a lo que está pasando.

65
00:03:24,660 --> 00:03:27,903
Y ya podemos ver algo aquí.

66
00:03:29,250 --> 00:03:32,670
Entonces, estos accesorios son básicamente este objeto de aquí;

67
00:03:32,670 --> 00:03:37,533
y tiene nombre, luego pizza de espinacas, que es exactamente esto.

68
00:03:38,520 --> 00:03:42,930
Entonces, ¿qué pasó? Cuando React incluyó este componente de pizza,

69
00:03:42,930 --> 00:03:45,810
Básicamente se llamaba disfunción en el pasado.

70
00:03:45,810 --> 00:03:47,790
en este objeto de accesorios.

71
00:03:47,790 --> 00:03:51,600
Y este objeto de accesorios está hecho de estos cuatro accesorios.

72
00:03:51,600 --> 00:03:54,390
que pasamos al componente.

73
00:03:54,390 --> 00:03:58,020
Y ahora podemos usar este objeto de accesorios.

74
00:03:58,020 --> 00:04:00,063
para reemplazar todos estos valores aquí.

75
00:04:01,410 --> 00:04:04,890
Ahora necesitamos sacar estos valores del objeto;

76
00:04:04,890 --> 00:04:08,670
y por lo tanto, necesitamos JavaScript, ¿verdad?

77
00:04:08,670 --> 00:04:10,860
Así que aquí ya no se trata de una cadena;

78
00:04:10,860 --> 00:04:13,293
pero necesitamos ingresar al modo JavaScript nuevamente.

79
00:04:14,190 --> 00:04:18,960
Entonces, el nombre de la foto de los puntos de utilería es este.

80
00:04:18,960 --> 00:04:21,660
Y aquí está el nombre de la pizza.

81
00:04:21,660 --> 00:04:25,770
Y nuevamente, necesitamos el modo JavaScript.

82
00:04:25,770 --> 00:04:28,263
Entonces, nombre del punto de accesorios.

83
00:04:29,670 --> 00:04:31,293
Lo mismo aquí abajo.

84
00:04:34,380 --> 00:04:35,853
Entonces, nombre del punto de accesorios.

85
00:04:37,590 --> 00:04:42,523
Y finalmente, aquí abajo, queremos los ingredientes de los puntos de utilería.

86
00:04:47,100 --> 00:04:48,930
O en realidad, es un ingrediente.

87
00:04:48,930 --> 00:04:50,280
Arreglemos eso aquí.

88
00:04:50,280 --> 00:04:53,433
Ingredientes e ingredientes aquí abajo.

89
00:04:54,360 --> 00:04:55,260
bueno.

90
00:04:55,260 --> 00:04:58,560
Y claro, ahora todo sigue igual;

91
00:04:58,560 --> 00:05:00,900
porque los datos que teníamos aquí antes,

92
00:05:00,900 --> 00:05:03,810
Son exactamente los datos que tenemos aquí.

93
00:05:03,810 --> 00:05:06,753
Pero ahora hagamos realidad algo de magia.

94
00:05:08,280 --> 00:05:11,580
Entonces, creemos otro componente de pizza;

95
00:05:11,580 --> 00:05:16,580
Y luego, aquí es donde veremos por qué los accesorios son tan útiles.

96
00:05:17,340 --> 00:05:20,643
Entonces, creemos una pizza funghi.

97
00:05:22,950 --> 00:05:25,983
Pongámosle algunos ingredientes.

98
00:05:28,020 --> 00:05:31,890
Entonces tomate, digamos también champiñones.

99
00:05:31,890 --> 00:05:33,540
Y esto no es importante aquí.

100
00:05:33,540 --> 00:05:35,190
Esto es sólo para mostrarte

101
00:05:35,190 --> 00:05:39,180
que ahora podemos personalizar completamente nuestros componentes.

102
00:05:39,180 --> 00:05:42,180
A continuación, podemos definir el precio.

103
00:05:42,180 --> 00:05:45,330
Y observe que lo estoy haciendo ahora en un orden diferente.

104
00:05:45,330 --> 00:05:48,120
Así que aquí tenía primero una foto, el nombre y el precio.

105
00:05:48,120 --> 00:05:49,620
Y esto es sólo para mostrarte

106
00:05:49,620 --> 00:05:51,990
que el orden en el que pasamos los accesorios

107
00:05:51,990 --> 00:05:53,763
es completamente irrelevante.

108
00:05:56,610 --> 00:05:58,830
Entonces, el nombre de la foto es pizzas.

109
00:05:58,830 --> 00:06:02,073
barra diagonal punto hongo jpg.

110
00:06:04,470 --> 00:06:07,890
¿bueno? Y ahora necesitamos cerrar inmediatamente este componente.

111
00:06:07,890 --> 00:06:09,390
justo como antes.

112
00:06:09,390 --> 00:06:13,350
Y mientras lo guardo, miren lo que pasó aquí.

113
00:06:13,350 --> 00:06:16,200
Y ahí está nuestro segundo componente de pizza.

114
00:06:16,200 --> 00:06:18,870
ahora con datos completamente diferentes.

115
00:06:18,870 --> 00:06:22,530
Y ahora, por primera vez, hemos reutilizado un componente.

116
00:06:22,530 --> 00:06:26,130
y lo configuré de una manera que hace que cada componente sea único

117
00:06:26,130 --> 00:06:28,770
y mostrar sus propios datos.

118
00:06:28,770 --> 00:06:31,410
¿bueno? Y ahora mejoremos

119
00:06:31,410 --> 00:06:34,200
Este componente de pizza aquí un poco.

120
00:06:34,200 --> 00:06:36,060
Entonces, para empezar,

121
00:06:36,060 --> 00:06:38,883
En nuestro CSS, en realidad tenemos un nombre de clase aquí.

122
00:06:39,720 --> 00:06:42,423
Entonces un nombre de clase llamado pizza.

123
00:06:43,920 --> 00:06:48,300
¿bueno? Y luego coloquemos también estos dos aquí,

124
00:06:48,300 --> 00:06:49,590
dentro de su propio div,

125
00:06:49,590 --> 00:06:53,880
para que estos datos puedan visualizarse en el sitio de la imagen.

126
00:06:53,880 --> 00:06:56,580
Así como aquí en nuestro original.

127
00:06:56,580 --> 00:06:58,563
Así que esto es lo que vamos a hacer.

128
00:06:59,430 --> 00:07:03,330
Entonces aquí tenemos un div,

129
00:07:03,330 --> 00:07:05,550
y luego otra vez, estoy usando ese truco

130
00:07:05,550 --> 00:07:07,893
donde simplemente empujo hacia abajo esa línea.

131
00:07:10,080 --> 00:07:12,723
Y esto ya tiene una pinta mucho mejor.

132
00:07:13,740 --> 00:07:16,560
Finalmente agreguemos también el precio aquí.

133
00:07:16,560 --> 00:07:18,333
y lo estoy haciendo como un lapso.

134
00:07:20,850 --> 00:07:24,930
Así que el precio del punto de apoyo.

135
00:07:24,930 --> 00:07:26,760
Y ahí está.

136
00:07:26,760 --> 00:07:29,850
Pero ahora digamos que queríamos por alguna razón

137
00:07:29,850 --> 00:07:31,530
para agregar un número aquí.

138
00:07:31,530 --> 00:07:35,910
Entonces queríamos aumentar todos los precios en tres, digamos.

139
00:07:35,910 --> 00:07:38,883
Pero mira lo que sucede cuando intentamos esto.

140
00:07:40,110 --> 00:07:42,243
Entonces todos los precios más tres.

141
00:07:44,010 --> 00:07:46,350
Entonces lo que pasa es que

142
00:07:46,350 --> 00:07:50,550
React, o JavaScript, básicamente simplemente agregó los tres aquí

143
00:07:50,550 --> 00:07:52,710
hasta el final de este número.

144
00:07:52,710 --> 00:07:54,180
Y la razón de eso

145
00:07:54,180 --> 00:07:59,180
es que aquí pasamos estos números como una cadena.

146
00:07:59,580 --> 00:08:02,850
Y podemos ver eso también aquí en este resultado.

147
00:08:02,850 --> 00:08:05,550
Entonces no queremos una cadena aquí.

148
00:08:05,550 --> 00:08:07,140
En cambio, queremos un número.

149
00:08:07,140 --> 00:08:08,880
Y entonces, la forma en que podemos lograrlo.

150
00:08:08,880 --> 00:08:11,610
es ingresando nuevamente, al modo JavaScript.

151
00:08:11,610 --> 00:08:15,210
Y en JavaScript, este es ahora un número real.

152
00:08:15,210 --> 00:08:17,610
Y entonces observen lo que sucede.

153
00:08:17,610 --> 00:08:19,950
De hecho, ahora tenemos 13;

154
00:08:19,950 --> 00:08:22,773
que son los 10 que teníamos antes, más tres.

155
00:08:24,870 --> 00:08:27,873
¿bueno? Entonces hagamos lo mismo aquí.

156
00:08:29,040 --> 00:08:30,720
Y eso soluciona esto.

157
00:08:30,720 --> 00:08:32,670
Entonces, es muy importante notar esto.

158
00:08:32,670 --> 00:08:34,350
que cuando quieras pasar

159
00:08:34,350 --> 00:08:36,360
algo que no es una cuerda,

160
00:08:36,360 --> 00:08:40,500
simplemente usas, nuevamente, este modo JavaScript básicamente.

161
00:08:40,500 --> 00:08:44,340
Porque, de hecho, puedes pasar cualquier cosa como accesorio.

162
00:08:44,340 --> 00:08:46,860
Por tanto, no tiene por qué ser una cadena o un número.

163
00:08:46,860 --> 00:08:48,390
Puedes pasar en una carrera.

164
00:08:48,390 --> 00:08:52,380
u objetos o incluso otros componentes de React.

165
00:08:52,380 --> 00:08:55,080
Entonces los accesorios son realmente muy poderosos.

166
00:08:55,080 --> 00:08:59,430
y realmente una de las cosas más fundamentales en React.

167
00:08:59,430 --> 00:09:03,540
Y ahora a revisar este concepto e ir incluso un poco más allá.

168
00:09:03,540 --> 00:09:05,733
pasemos a la siguiente conferencia.