1
00:00:01,140 --> 00:00:02,100
en este punto,

2
00:00:02,100 --> 00:00:05,340
Hemos utilizado JSX para describir la apariencia.

3
00:00:05,340 --> 00:00:06,870
de algunos componentes

4
00:00:06,870 --> 00:00:10,560
y también hemos utilizado algo de JavaScript dentro de ellos.

5
00:00:10,560 --> 00:00:12,780
Y ahora que tenemos un poquito

6
00:00:12,780 --> 00:00:16,680
de experiencia en la escritura de componentes, quiero tomarme un minuto

7
00:00:16,680 --> 00:00:20,400
y volvamos al hecho de que JSX combina

8
00:00:20,400 --> 00:00:25,400
HTML, CSS y JavaScript en un solo bloque de código.

9
00:00:26,160 --> 00:00:28,320
Porque quizás te estés preguntando,

10
00:00:28,320 --> 00:00:32,520
¿Por qué a React se le ocurrió esta idea en primer lugar?

11
00:00:32,520 --> 00:00:36,840
Entonces, ¿por qué no conservar HTML, CSS y JavaScript?

12
00:00:36,840 --> 00:00:40,920
en lugares separados, como siempre lo hemos hecho antes?

13
00:00:40,920 --> 00:00:43,860
Y esto puede parecer una pregunta trivial,

14
00:00:43,860 --> 00:00:47,580
algo que crees que no es realmente relevante en absoluto

15
00:00:47,580 --> 00:00:51,180
pero en realidad es profundamente relevante entender por qué

16
00:00:51,180 --> 00:00:54,453
React fue diseñado completamente en torno a componentes.

17
00:00:55,920 --> 00:00:59,160
Y entendamos este tema desde el principio.

18
00:00:59,160 --> 00:01:03,570
Así, desde el auge de las aplicaciones interactivas de una sola página.

19
00:01:03,570 --> 00:01:08,570
Antes de las aplicaciones de una sola página, siempre teníamos un archivo para HTML,

20
00:01:08,670 --> 00:01:12,420
uno para JavaScript y otro para CSS.

21
00:01:12,420 --> 00:01:15,810
Básicamente, una tecnología por archivo.

22
00:01:15,810 --> 00:01:19,350
Ésa era nuestra tradicional separación de preocupaciones.

23
00:01:19,350 --> 00:01:22,170
Y estoy bastante seguro de que al igual que yo,

24
00:01:22,170 --> 00:01:25,170
Así es como aprendiste por primera vez sobre desarrollo web.

25
00:01:25,170 --> 00:01:28,680
Sin embargo, a medida que las páginas se volvieron cada vez más interactivas,

26
00:01:28,680 --> 00:01:31,050
se convirtieron en aplicaciones de una sola página,

27
00:01:31,050 --> 00:01:35,250
donde JavaScript comenzó a determinar la interfaz de usuario

28
00:01:35,250 --> 00:01:37,470
y el contenido en general.

29
00:01:37,470 --> 00:01:38,910
O en otras palabras,

30
00:01:38,910 --> 00:01:43,500
JavaScript se hizo cada vez más a cargo del HTML.

31
00:01:43,500 --> 00:01:47,130
Y podemos ver eso aquí en este ejemplo de código realmente pequeño,

32
00:01:47,130 --> 00:01:50,220
donde el contenido y la presentación de estos

33
00:01:50,220 --> 00:01:54,120
Los elementos HTML están realmente completamente determinados.

34
00:01:54,120 --> 00:01:56,130
por el código JavaScript.

35
00:01:56,130 --> 00:01:59,670
De hecho, están estrechamente unidos.

36
00:01:59,670 --> 00:02:02,010
Entonces el HTML ni siquiera tiene sentido.

37
00:02:02,010 --> 00:02:04,590
sin el JavaScript aquí.

38
00:02:04,590 --> 00:02:08,250
Ahora bien, los detalles de este código realmente no son importantes.

39
00:02:08,250 --> 00:02:12,150
Entonces, si no puedes leer este código, no hay ningún problema.

40
00:02:12,150 --> 00:02:15,870
Mi punto aquí es que si JavaScript está a cargo

41
00:02:15,870 --> 00:02:20,870
del HTML de todos modos, por lo que si la lógica y la interfaz de usuario son tan

42
00:02:21,240 --> 00:02:24,660
estrechamente unidos, entonces ¿por qué deberíamos mantenerlos?

43
00:02:24,660 --> 00:02:27,180
separados en estos diferentes archivos

44
00:02:27,180 --> 00:02:28,863
¿Y en diferentes bloques de código?

45
00:02:29,820 --> 00:02:31,680
Bueno, la respuesta a esa pregunta.

46
00:02:31,680 --> 00:02:35,463
es lo que nos dio los componentes de React y JSX.

47
00:02:36,870 --> 00:02:40,290
Entonces, el hecho de que la lógica y la interfaz de usuario estén tan acopladas

48
00:02:40,290 --> 00:02:43,800
en las aplicaciones web modernas, es realmente la razón por la cual

49
00:02:43,800 --> 00:02:47,370
un componente de React contiene los datos, la lógica

50
00:02:47,370 --> 00:02:50,283
y la apariencia de una pieza de la interfaz de usuario.

51
00:02:51,240 --> 00:02:53,520
De hecho, es la razón fundamental

52
00:02:53,520 --> 00:02:56,160
por qué React tiene que ver con componentes.

53
00:02:56,160 --> 00:02:58,800
Y lo mismo es cierto también para

54
00:02:58,800 --> 00:03:01,563
la mayoría de los otros frameworks front-end modernos.

55
00:03:02,520 --> 00:03:04,380
Ahora volviendo a algún código,

56
00:03:04,380 --> 00:03:07,650
En este ejemplo de React podemos ver cómo JavaScript

57
00:03:07,650 --> 00:03:11,168
y el marcado HTML conviven muy felices

58
00:03:11,168 --> 00:03:14,040
en este único componente.

59
00:03:14,040 --> 00:03:16,890
Entonces este componente tiene algo de lógica JavaScript,

60
00:03:16,890 --> 00:03:20,760
tiene JSX y luego dentro de ese JSX,

61
00:03:20,760 --> 00:03:23,280
hay otro bloque más de JavaScript,

62
00:03:23,280 --> 00:03:27,690
que a su vez tiene aún más JSX dentro.

63
00:03:27,690 --> 00:03:29,910
Entonces todo está mezclado

64
00:03:29,910 --> 00:03:32,550
pero todo sigue funcionando muy bien.

65
00:03:32,550 --> 00:03:35,730
Así que el contenido y la lógica están estrechamente unidos.

66
00:03:35,730 --> 00:03:39,240
y por eso tiene sentido que estén ubicados aquí.

67
00:03:39,240 --> 00:03:43,680
Y coubicar simplemente significa que las cosas que cambian juntas

68
00:03:43,680 --> 00:03:47,460
deben ubicarse lo más cerca posible entre sí.

69
00:03:47,460 --> 00:03:50,910
Y en el caso de las aplicaciones React, eso significa que en lugar de eso

70
00:03:50,910 --> 00:03:55,830
de un perfil tecnológico, tenemos un perfil de componente.

71
00:03:55,830 --> 00:03:59,940
Entonces, un componente que contiene lógica de datos y apariencia,

72
00:03:59,940 --> 00:04:02,130
todos mezclados.

73
00:04:02,130 --> 00:04:06,690
Ahora bien, cuando React y JSX aparecieron por primera vez hace mucho tiempo,

74
00:04:06,690 --> 00:04:11,640
Mucha, mucha gente simplemente odiaba la apariencia de JSX.

75
00:04:11,640 --> 00:04:14,790
Y odiaron que estemos tirando separaciones

76
00:04:14,790 --> 00:04:17,820
de preocupaciones por la ventana.

77
00:04:17,820 --> 00:04:20,400
Pero en realidad, ¿lo somos realmente?

78
00:04:20,400 --> 00:04:23,883
¿Realmente no existe separación de preocupaciones en React?

79
00:04:24,840 --> 00:04:27,390
Bueno, creo que la gente que dice

80
00:04:27,390 --> 00:04:32,370
que React no tiene separación de preocupaciones, lo entendió todo mal.

81
00:04:32,370 --> 00:04:36,990
Porque React en realidad tiene preocupaciones separadas.

82
00:04:36,990 --> 00:04:39,750
Simplemente no es una preocupación por expediente,

83
00:04:39,750 --> 00:04:44,730
ya que tradicionalmente teníamos una sola preocupación por componente.

84
00:04:44,730 --> 00:04:47,220
Entonces, cada componente es, de hecho,

85
00:04:47,220 --> 00:04:50,403
Solo le preocupa una parte de la interfaz de usuario.

86
00:04:51,240 --> 00:04:54,000
Luego, dentro de cada uno de estos componentes,

87
00:04:54,000 --> 00:04:57,450
Por supuesto, todavía tenemos las tres preocupaciones de HTML,

88
00:04:57,450 --> 00:05:01,623
CSS y JavaScript están todos mezclados, como hemos estado comentando.

89
00:05:02,460 --> 00:05:05,940
Entonces, en comparación con la tradicional separación de intereses,

90
00:05:05,940 --> 00:05:08,640
Este es un paradigma completamente nuevo.

91
00:05:08,640 --> 00:05:12,840
al que mucha gente no estaba acostumbrada al principio.

92
00:05:12,840 --> 00:05:14,790
Pero ahora, muchos años después,

93
00:05:14,790 --> 00:05:18,720
Todos nos acostumbramos a esto y funciona muy bien.

94
00:05:18,720 --> 00:05:21,990
Entonces tener toda la información sobre un determinado componente

95
00:05:21,990 --> 00:05:23,520
en un solo lugar,

96
00:05:23,520 --> 00:05:25,983
realmente funciona de una manera asombrosa.

97
00:05:27,000 --> 00:05:27,960
ahora a la derecha.

98
00:05:27,960 --> 00:05:30,720
Entonces esta fue una conferencia larga,

99
00:05:30,720 --> 00:05:32,550
más de lo que esperaba,

100
00:05:32,550 --> 00:05:35,190
solo para llegar a esta conclusión

101
00:05:35,190 --> 00:05:38,850
que React en realidad tiene separación de preocupaciones.

102
00:05:38,850 --> 00:05:42,090
Simplemente una separación diferente de preocupaciones.

103
00:05:42,090 --> 00:05:45,300
Pero todavía espero que les haya gustado cómo llegamos.

104
00:05:45,300 --> 00:05:48,360
en esa conclusión, a lo largo de este video.

105
00:05:48,360 --> 00:05:51,000
Porque espero que esto te haya dado mucho.

106
00:05:51,000 --> 00:05:54,033
de conocimientos fundamentales adicionales de React.