1
00:00:01,050 --> 00:00:03,480
Bienvenidos al proyecto Menú Pizza

2
00:00:03,480 --> 00:00:06,180
que vamos a desarrollar a lo largo de esta sección.

3
00:00:06,180 --> 00:00:08,850
Y en esta conferencia, realmente quiero comenzar

4
00:00:08,850 --> 00:00:11,913
para construir este proyecto desde cero.

5
00:00:13,260 --> 00:00:14,820
Y con cero completo,

6
00:00:14,820 --> 00:00:17,220
Quiero decir que vamos a borrar todo.

7
00:00:17,220 --> 00:00:20,790
de estos archivos que tenemos aquí y que realmente no necesitamos,

8
00:00:20,790 --> 00:00:25,410
y empezar un proyecto desde cero, como acabo de decir.

9
00:00:25,410 --> 00:00:28,260
Así que cerremos este y este.

10
00:00:28,260 --> 00:00:30,840
e incluso el index.HTML

11
00:00:30,840 --> 00:00:33,775
que no eliminaremos ni recrearemos, pero todos estos

12
00:00:33,775 --> 00:00:37,500
siéntase libre de ignorarlos y eliminarlos.

13
00:00:37,500 --> 00:00:42,390
Así que borra y empecemos de cero.

14
00:00:42,390 --> 00:00:44,490
Entonces aquí tenemos nuestro primer error.

15
00:00:44,490 --> 00:00:47,910
y observe que coloqué el navegador aquí en un lado

16
00:00:47,910 --> 00:00:50,070
y nuestro editor de código en el lado izquierdo

17
00:00:50,070 --> 00:00:53,970
para que siempre podamos ver la salida al mismo tiempo.

18
00:00:53,970 --> 00:00:56,820
Entonces puedes ver que nuestra aplicación se ve como

19
00:00:56,820 --> 00:00:59,160
para este archivo aquí mismo,

20
00:00:59,160 --> 00:01:00,862
pero claro ya no existe

21
00:01:00,862 --> 00:01:02,853
porque lo acabamos de borrar.

22
00:01:04,860 --> 00:01:07,260
Entonces, comencemos desde cero.

23
00:01:07,260 --> 00:01:09,210
Y vamos a crear nuestro primer archivo.

24
00:01:09,210 --> 00:01:10,680
dentro de esta carpeta,

25
00:01:10,680 --> 00:01:14,760
y se llamará index.js, y realmente

26
00:01:14,760 --> 00:01:17,010
necesita llamarse index.js

27
00:01:17,010 --> 00:01:18,210
porque el paquete web,

28
00:01:18,210 --> 00:01:21,030
cuál es el paquete de módulos en este proyecto,

29
00:01:21,030 --> 00:01:25,590
espera que el punto de entrada se llame index.js.

30
00:01:25,590 --> 00:01:26,423
¿está bien?

31
00:01:26,423 --> 00:01:29,619
Pero de todos modos, comencemos ahora importando

32
00:01:29,619 --> 00:01:33,540
reaccionar

33
00:01:33,540 --> 00:01:34,860
de 'reaccionar'.

34
00:01:34,860 --> 00:01:38,370
Y nuevamente, esto es simplemente JavaScript.

35
00:01:38,370 --> 00:01:42,360
Entonces, importar módulos es parte de JavaScript,

36
00:01:42,360 --> 00:01:45,570
y específicamente desde ES6.

37
00:01:45,570 --> 00:01:47,320
Entonces importemos también

38
00:01:48,264 --> 00:01:49,097
ReaccionarDOM

39
00:01:50,640 --> 00:01:52,267
de

40
00:01:52,267 --> 00:01:57,267
"reaccionar-dom/cliente".

41
00:01:58,050 --> 00:01:58,883
¿está bien?

42
00:01:58,883 --> 00:02:02,349
Y mientras sigo guardando, de alguna manera sigue moviendo el archivo aquí.

43
00:02:02,349 --> 00:02:04,053
pero no importa.

44
00:02:04,920 --> 00:02:08,010
Así que importamos estas dos bibliotecas y nuevamente

45
00:02:08,010 --> 00:02:11,370
Recuerda cómo importamos básicamente estos dos exactos.

46
00:02:11,370 --> 00:02:14,820
mismas bibliotecas en la conferencia pura de React.

47
00:02:14,820 --> 00:02:17,790
Y de hecho, quiero abrir ese archivo aquí.

48
00:02:17,790 --> 00:02:19,950
para que podamos compararlo.

49
00:02:19,950 --> 00:02:21,660
tan abierto,

50
00:02:21,660 --> 00:02:26,403
y luego en el escritorio, puro React, luego index.HTML.

51
00:02:27,870 --> 00:02:30,687
Y recuerda que aquí lo importamos, también React.

52
00:02:30,687 --> 00:02:34,080
y Reactdom, utilizando estos textos de guión.

53
00:02:34,080 --> 00:02:37,350
Pero nuevamente aquí, estos se instalaron usando NPM.

54
00:02:37,350 --> 00:02:40,070
y aquí ahora los estamos importando a nuestro proyecto.

55
00:02:40,070 --> 00:02:43,500
usando la sintaxis de importación, que viene directamente

56
00:02:43,500 --> 00:02:44,970
desde JavaScript.

57
00:02:44,970 --> 00:02:48,363
A continuación, creemos nuevamente nuestro componente de aplicación.

58
00:02:49,470 --> 00:02:54,090
Entonces funciona App, y no tendría que llamarse App

59
00:02:54,090 --> 00:02:56,070
esto es solo una convención,

60
00:02:56,070 --> 00:02:57,090
¿bien?

61
00:02:57,090 --> 00:02:59,280
Lo que es necesario es un componente de estatus.

62
00:02:59,280 --> 00:03:01,263
comienza con mayúscula aquí.

63
00:03:02,430 --> 00:03:04,116
Así que ahora volvamos aquí,

64
00:03:04,116 --> 00:03:06,784
otra vez lo mismo que volvimos antes

65
00:03:06,784 --> 00:03:11,220
que es simplemente ¡Hola Reaccionar!.

66
00:03:11,220 --> 00:03:14,880
Y ahora todo lo que tenemos que hacer es enviar esto al volcado.

67
00:03:14,880 --> 00:03:16,290
Y así una vez más

68
00:03:16,290 --> 00:03:19,680
Esto será similar a lo que hicimos aquí.

69
00:03:19,680 --> 00:03:23,610
Así que incluso podríamos copiar y pegar todo esto aquí en nuestra aplicación.

70
00:03:23,610 --> 00:03:28,610
que ya tenemos, pero escribámoslo a mano.

71
00:03:29,310 --> 00:03:31,590
Por supuesto, en el futuro no escribiremos todos

72
00:03:31,590 --> 00:03:33,327
de esto a mano, pero al menos una vez

73
00:03:33,327 --> 00:03:34,920
quiero que escribas todo esto

74
00:03:34,920 --> 00:03:38,640
a mano para que sepas realmente lo que está pasando aquí.

75
00:03:38,640 --> 00:03:39,473
¿está bien?

76
00:03:40,980 --> 00:03:43,923
Así que ahora creemos la llamada raíz.

77
00:03:46,230 --> 00:03:48,849
Y para eso usamos la biblioteca ReactDOM.

78
00:03:48,849 --> 00:03:52,860
en el que hay un método createRoot.

79
00:03:52,860 --> 00:03:57,240
Y ahora seleccionamos este elemento raíz.

80
00:03:57,240 --> 00:04:00,573
Bueno, no aquí por supuesto, sino en nuestra carpeta pública.

81
00:04:02,160 --> 00:04:04,140
Así que aquí tienes todas estas cosas.

82
00:04:04,140 --> 00:04:06,630
como esta extraña URL aquí.

83
00:04:06,630 --> 00:04:09,390
Y nuevamente, webpack se encargará de todo esto.

84
00:04:09,390 --> 00:04:12,363
como si reemplazara esta URL allí mismo.

85
00:04:13,427 --> 00:04:17,880
Pero lo que buscamos aquí es este div con esta identificación.

86
00:04:17,880 --> 00:04:19,200
Entonces id="raíz".

87
00:04:19,200 --> 00:04:21,960
Entonces vamos a seleccionar este elemento para que

88
00:04:21,960 --> 00:04:25,293
React puede representar nuestra aplicación dentro de este div.

89
00:04:27,540 --> 00:04:29,373
Entonces document.getElementById.

90
00:04:33,570 --> 00:04:38,570
Bien, entonces hagamos root.render.

91
00:04:39,000 --> 00:04:42,060
Y también podríamos haberlo escrito todo en una sola línea.

92
00:04:42,060 --> 00:04:46,500
Entonces, sin almacenar esto aquí como una variable intermediaria

93
00:04:46,500 --> 00:04:48,271
pero así, queda un poco más limpio.

94
00:04:48,271 --> 00:04:52,593
¿bueno? Y luego aquí colocamos nuestra App,

95
00:04:53,850 --> 00:04:57,420
dale una caja fuerte y ahí está.

96
00:04:57,420 --> 00:04:58,740
Hola reacciona!

97
00:04:58,740 --> 00:05:01,533
Cuál es nuestro gran componente de aplicación aquí.

98
00:05:02,460 --> 00:05:07,170
Así es como escribimos React desde cero básicamente.

99
00:05:07,170 --> 00:05:10,890
Ahora solo quiero llamar su atención que este es el camino.

100
00:05:10,890 --> 00:05:15,090
que rendericemos la raíz para que básicamente rendericemos

101
00:05:15,090 --> 00:05:18,123
nuestra aplicación en Dom en React versión 18.

102
00:05:19,590 --> 00:05:22,620
Entonces reacciona v18.

103
00:05:22,620 --> 00:05:24,870
Pero si estás viendo una base de código más antigua que es

104
00:05:24,870 --> 00:05:28,260
Antes de React 18, esto funcionaba de manera diferente.

105
00:05:28,260 --> 00:05:30,210
Entonces se veía un poco diferente.

106
00:05:30,210 --> 00:05:32,534
Así que ejemplifiquemos eso aquí.

107
00:05:32,534 --> 00:05:36,420
Y no es necesario escribir este código aquí.

108
00:05:36,420 --> 00:05:38,790
Sólo quiero mostrárselo rápidamente.

109
00:05:38,790 --> 00:05:41,470
Entonces, antes de React 18, simplemente haríamos

110
00:05:42,360 --> 00:05:45,154
Reaccionar.renderizar

111
00:05:45,154 --> 00:05:48,513
y luego coloque la aplicación allí.

112
00:05:50,160 --> 00:05:51,150
¿está bien?

113
00:05:51,150 --> 00:05:53,790
Y otro cambio que tendríamos que hacer es

114
00:05:53,790 --> 00:05:55,440
para deshacerse de esto.

115
00:05:55,440 --> 00:06:00,440
Entonces esta sería una aplicación React 17, pero con estos cambios

116
00:06:00,480 --> 00:06:03,780
entonces con tener reaccionar-dom/cliente

117
00:06:03,780 --> 00:06:05,790
y con renderizar de esta manera,

118
00:06:05,790 --> 00:06:08,610
Preparamos nuestra aplicación para React 18.

119
00:06:08,610 --> 00:06:10,620
Entonces ahora podemos comentar este,

120
00:06:10,620 --> 00:06:13,590
y lo dejaré aquí solo como referencia.

121
00:06:13,590 --> 00:06:15,570
Ahora, sólo una última cosa de la que quiero hablar.

122
00:06:15,570 --> 00:06:18,023
Aquí está el modo estricto.

123
00:06:18,023 --> 00:06:21,322
Entonces podemos simplemente activar el modo estricto, en su lugar

124
00:06:21,322 --> 00:06:25,590
de representar directamente el componente de la aplicación como un componente raíz.

125
00:06:25,590 --> 00:06:29,700
Envolviendo esto aquí en un componente de modo estricto.

126
00:06:29,700 --> 00:06:32,960
Entonces escribamos React.StrictMode.

127
00:06:34,890 --> 00:06:36,992
Y entonces este modo estricto es básicamente un componente

128
00:06:36,992 --> 00:06:41,992
eso es parte de React y que podemos tomar de React.

129
00:06:43,170 --> 00:06:45,030
Y entonces ves eso automáticamente.

130
00:06:45,030 --> 00:06:48,060
El código VS luego cierra este componente.

131
00:06:48,060 --> 00:06:50,730
Así que copiemos o cortemos esto.

132
00:06:50,730 --> 00:06:54,330
desde aquí y colócalo aquí, dale una caja fuerte.

133
00:06:54,330 --> 00:06:58,170
Y así, la aplicación ahora está incluida en este modo estricto.

134
00:06:58,170 --> 00:07:00,643
Y el modo estricto realmente no es gran cosa.

135
00:07:00,643 --> 00:07:03,855
Lo único que hace es que durante el desarrollo

136
00:07:03,855 --> 00:07:06,399
renderizará todos los componentes dos veces

137
00:07:06,399 --> 00:07:08,820
para encontrar ciertos errores.

138
00:07:08,820 --> 00:07:10,620
Y también reaccionará

139
00:07:10,620 --> 00:07:14,730
si utilizamos partes obsoletas de la API de React.

140
00:07:14,730 --> 00:07:17,430
El modo estricto no es nada innovador.

141
00:07:17,430 --> 00:07:19,902
pero sigue siendo una buena idea activarlo siempre

142
00:07:19,902 --> 00:07:22,953
cuando desarrollamos aplicaciones React.