1
00:00:01,020 --> 00:00:03,690
Ahora tomemos unos minutos para mirar atrás.

2
00:00:03,690 --> 00:00:05,880
sobre todos los conceptos que acabamos de aprender

3
00:00:05,880 --> 00:00:07,233
a lo largo de esta sección.

4
00:00:09,240 --> 00:00:11,010
Primero que nada, aprendimos

5
00:00:11,010 --> 00:00:13,290
que los componentes son los bloques de construcción

6
00:00:13,290 --> 00:00:16,800
de cualquier interfaz de usuario en React.

7
00:00:16,800 --> 00:00:20,190
Ahora cada componente es una pieza independiente.

8
00:00:20,190 --> 00:00:24,240
de la interfaz de usuario, que incluye sus propios datos,

9
00:00:24,240 --> 00:00:27,930
su propia lógica de JavaScript y su propia apariencia.

10
00:00:27,930 --> 00:00:31,260
Ahora en términos prácticos, escribimos esta aparición.

11
00:00:31,260 --> 00:00:35,130
usando una sintaxis declarativa que se llama JSX

12
00:00:35,130 --> 00:00:38,640
y es este bloque de JSX el que finalmente

13
00:00:38,640 --> 00:00:41,850
se devuelve de cada componente.

14
00:00:41,850 --> 00:00:44,880
Y este JSX es lo que va a describir

15
00:00:44,880 --> 00:00:47,430
exactamente lo que verá el usuario

16
00:00:47,430 --> 00:00:50,520
en la pantalla cuando usan la aplicación.

17
00:00:50,520 --> 00:00:54,720
Y cualquier parte de JSX puede contener algún marcado,

18
00:00:54,720 --> 00:00:57,750
básicamente en forma de HTML.

19
00:00:57,750 --> 00:01:01,620
Puede contener algo de CSS, que en esta sección

20
00:01:01,620 --> 00:01:04,830
escribimos usando el accesorio de estilo.

21
00:01:04,830 --> 00:01:08,580
Entonces usamos el accesorio de estilo y luego pasamos un objeto.

22
00:01:08,580 --> 00:01:12,600
allí, que contenía algo de código CSS.

23
00:01:12,600 --> 00:01:16,860
Y también normalmente el JSX contiene algo de JavaScript.

24
00:01:16,860 --> 00:01:19,920
dentro de llaves, que me gusta llamar

25
00:01:19,920 --> 00:01:22,410
ingresando al modo JavaScript.

26
00:01:22,410 --> 00:01:25,650
Este es básicamente como escribir JavaScript.

27
00:01:25,650 --> 00:01:28,680
justo dentro de HTML.

28
00:01:28,680 --> 00:01:32,460
Esto es básicamente todo lo que contiene un componente.

29
00:01:32,460 --> 00:01:35,760
o puede contener, y así es como lo escribimos,

30
00:01:35,760 --> 00:01:38,430
así que nuevamente, usando JSX.

31
00:01:38,430 --> 00:01:41,790
Ahora bien, una solicitud completa suele estar compuesta

32
00:01:41,790 --> 00:01:45,240
de muchos componentes diferentes, que luego se organizan

33
00:01:45,240 --> 00:01:48,810
en un árbol de componentes como este.

34
00:01:48,810 --> 00:01:51,000
Entonces, en un árbol de componentes como este,

35
00:01:51,000 --> 00:01:53,070
los componentes que están en la parte superior

36
00:01:53,070 --> 00:01:57,930
han incluido o utilizado los componentes que se encuentran debajo de ellos,

37
00:01:57,930 --> 00:02:01,110
lo que los convierte en su componente principal.

38
00:02:01,110 --> 00:02:03,570
Entonces los componentes en la parte superior, por ejemplo aquí,

39
00:02:03,570 --> 00:02:06,870
el componente de la aplicación es el componente principal del encabezado,

40
00:02:06,870 --> 00:02:08,940
menú y pie de página.

41
00:02:08,940 --> 00:02:12,270
Y estos tres, encabezado, menú y pie de página,

42
00:02:12,270 --> 00:02:15,060
son el componente secundario de la aplicación.

43
00:02:15,060 --> 00:02:18,540
Y al mismo tiempo, por supuesto, el menú es el padre.

44
00:02:18,540 --> 00:02:21,270
componente de todos los componentes de la pizza.

45
00:02:21,270 --> 00:02:25,470
Y el pie de página es el componente principal del pedido.

46
00:02:25,470 --> 00:02:28,830
Entonces, obviamente, un componente puede ser un padre.

47
00:02:28,830 --> 00:02:31,080
y un niño al mismo tiempo.

48
00:02:31,080 --> 00:02:34,380
Ahora, para compartir datos entre componentes,

49
00:02:34,380 --> 00:02:36,780
Los componentes principales pueden pasar datos.

50
00:02:36,780 --> 00:02:41,010
en un componente secundario directo usando accesorios.

51
00:02:41,010 --> 00:02:43,710
Entonces, para cada valor que queremos transmitir,

52
00:02:43,710 --> 00:02:48,710
simplemente definimos un accesorio, que es la abreviatura de propiedad.

53
00:02:48,810 --> 00:02:53,810
Y así, usando accesorios, podemos configurar los componentes como queramos.

54
00:02:54,270 --> 00:02:56,010
Por ejemplo, en esta aplicación,

55
00:02:56,010 --> 00:02:59,070
hicimos muchas pizzas diferentes creando

56
00:02:59,070 --> 00:03:01,530
un componente de pizza y luego pasar

57
00:03:01,530 --> 00:03:05,100
en diferentes objetos de pizza en ese componente,

58
00:03:05,100 --> 00:03:08,673
renderizándolo varias veces con un accesorio diferente.

59
00:03:09,540 --> 00:03:11,610
Ahora es muy importante entender.

60
00:03:11,610 --> 00:03:15,150
que los accesorios solo se pueden pasar por el árbol,

61
00:03:15,150 --> 00:03:17,580
así que sólo de padres a hijos,

62
00:03:17,580 --> 00:03:20,250
pero nunca al revés.

63
00:03:20,250 --> 00:03:22,440
Ahora algo que hacemos todo el tiempo.

64
00:03:22,440 --> 00:03:25,980
en aplicaciones React es renderizar múltiples componentes

65
00:03:25,980 --> 00:03:29,250
del mismo tipo haciendo un bucle sobre una matriz.

66
00:03:29,250 --> 00:03:32,970
Y esto es lo que llamamos crear una lista.

67
00:03:32,970 --> 00:03:35,010
Entonces, en la aplicación que acabamos de crear,

68
00:03:35,010 --> 00:03:38,010
Creamos una lista de pizzas haciendo un bucle.

69
00:03:38,010 --> 00:03:42,600
sobre la matriz de pizza usando el método de mapa de JavaScript.

70
00:03:42,600 --> 00:03:46,830
Y entonces, en React, no hay nada especial para crear listas.

71
00:03:46,830 --> 00:03:49,170
Todo lo que necesitamos saber es el método del mapa.

72
00:03:49,170 --> 00:03:52,050
que está disponible en todas las matrices de JavaScript.

73
00:03:52,050 --> 00:03:54,510
Entonces nuestro conocimiento de JavaScript es más

74
00:03:54,510 --> 00:03:56,940
más que suficiente para recorrer una matriz

75
00:03:56,940 --> 00:04:00,843
para crear listas de componentes del mismo tipo.

76
00:04:01,770 --> 00:04:06,300
Y finalmente, también aprendimos sobre el renderizado condicional.

77
00:04:06,300 --> 00:04:09,330
Entonces esa es otra cosa que hacemos todo el tiempo.

78
00:04:09,330 --> 00:04:11,700
para renderizar componentes sólo cuando

79
00:04:11,700 --> 00:04:14,370
se cumplen ciertas condiciones.

80
00:04:14,370 --> 00:04:16,620
Y al igual que las listas de renderizado,

81
00:04:16,620 --> 00:04:19,020
podemos renderizar componentes condicionalmente

82
00:04:19,020 --> 00:04:22,650
mediante el uso de herramientas comunes de JavaScript que ya conocemos,

83
00:04:22,650 --> 00:04:26,460
por ejemplo, el operador final, el operador ternario,

84
00:04:26,460 --> 00:04:30,780
y también usando múltiples devoluciones, y eso es todo.

85
00:04:30,780 --> 00:04:33,270
Entonces estas son las cosas más prácticas.

86
00:04:33,270 --> 00:04:35,730
que acabamos de aprender y que aplicamos

87
00:04:35,730 --> 00:04:38,880
al proyecto que venimos construyendo.

88
00:04:38,880 --> 00:04:41,610
También aprendimos algunas cosas más teóricas.

89
00:04:41,610 --> 00:04:43,950
como la diferencia entre imperativo

90
00:04:43,950 --> 00:04:46,020
y enfoques declarativos.

91
00:04:46,020 --> 00:04:48,780
Aprendimos sobre la separación de preocupaciones.

92
00:04:48,780 --> 00:04:52,740
Aprendimos exactamente por qué no podemos mutar accesorios,

93
00:04:52,740 --> 00:04:55,980
que es otra cosa importante que aprendimos.

94
00:04:55,980 --> 00:04:59,940
Y sí, también aprendimos muchas cosas más teóricas.

95
00:04:59,940 --> 00:05:02,430
que no voy a abordar ahora.

96
00:05:02,430 --> 00:05:04,980
Para que siempre puedas volver a ver esas conferencias.

97
00:05:04,980 --> 00:05:06,450
si estás interesado.

98
00:05:06,450 --> 00:05:09,840
Aquí sólo quería resumir los aspectos prácticos.

99
00:05:09,840 --> 00:05:14,010
de todo lo que acabamos de hacer en esta sección.

100
00:05:14,010 --> 00:05:15,810
Así que espero que esto haya sido útil.

101
00:05:15,810 --> 00:05:18,180
Y ahora para cerrar este apartado,

102
00:05:18,180 --> 00:05:20,340
hay un último desafío de codificación

103
00:05:20,340 --> 00:05:23,820
esperándote donde acabaremos de terminar el desarrollador

104
00:05:23,820 --> 00:05:27,450
tarjeta de perfil que comenzamos inicialmente.

105
00:05:27,450 --> 00:05:29,823
Espero verte allí muy pronto.