1
00:00:02,260 --> 00:00:08,440
Ahora, en este curso de actualización, Module Yeater no escribirá una aplicación de reacción compleja porque esa no es

2
00:00:08,440 --> 00:00:10,120
la idea de este módulo.

3
00:00:10,630 --> 00:00:17,260
Escribiremos una aplicación realista en el módulo principal más adelante este curso después de este módulo aquí donde trabajaremos en

4
00:00:17,260 --> 00:00:18,730
el proyecto del curso.

5
00:00:18,880 --> 00:00:20,890
Así que eso es solo un repaso aquí.

6
00:00:21,070 --> 00:00:25,840
Y me enfoco en los elementos centrales de reacción, Stael, para y no en construir una aplicación increíble.

7
00:00:26,530 --> 00:00:31,870
Por lo tanto, REACT se trata de componentes y, por lo tanto, generalmente dividimos nuestra aplicación en componentes.

8
00:00:32,080 --> 00:00:34,300
Ahora comencemos sin dividirlo, sin embargo.

9
00:00:34,390 --> 00:00:41,320
Y en lugar de generar H one tech aquí, una aplicación, usaré un div, digamos en ese div.

10
00:00:41,710 --> 00:00:43,840
Agreguemos más código h html.

11
00:00:44,050 --> 00:00:50,420
Estoy diciendo h html aquí, por supuesto, es J es X, pero aún se traduce a dos notas de HCM Altidore.

12
00:00:50,500 --> 00:00:50,700
Derecha.

13
00:00:50,980 --> 00:00:52,120
Pero es J es X.

14
00:00:53,020 --> 00:01:00,830
Entonces, aquí podríamos tener H para etiquetar dónde decimos objetivos de causa y debajo de eso queremos tener una lista o agregar una lista

15
00:01:00,830 --> 00:01:02,950
de los objetivos de nuestro curso.

16
00:01:03,180 --> 00:01:04,150
Y son un objetivo.

17
00:01:04,180 --> 00:01:04,840
Podría ser.

18
00:01:05,260 --> 00:01:09,460
Papá, queremos terminar el curso.

19
00:01:10,350 --> 00:01:13,560
Que queremos aprender todo sobre el curso.

20
00:01:17,240 --> 00:01:21,230
Tema principal y que queremos, digamos, ayuda.

21
00:01:22,920 --> 00:01:25,950
Nuestros alumnos en el curso, CU y.

22
00:01:28,030 --> 00:01:31,890
Una sección, y eso podría ser algo de oro.

23
00:01:32,260 --> 00:01:34,060
Ahora, una aplicación muy trivial.

24
00:01:34,240 --> 00:01:39,850
Ahora, no tengo ningún estilo espectacular especial aquí, por eso guardamos eso y lo sacamos.

25
00:01:39,880 --> 00:01:47,050
Pero ahora agregaré un poco de estilo y para eso agregaré una aplicación, el archivo de Sears aquí e importaré Deadfall en

26
00:01:47,110 --> 00:01:48,370
el archivo JavaScript.

27
00:01:48,400 --> 00:01:53,710
Esto, por supuesto, no es posible en Manila, JavaScript, pero debido a eso bajo las herramientas del

28
00:01:53,710 --> 00:01:56,860
capó, Nien analiza nuestros archivos y luego transforma el código.

29
00:01:57,310 --> 00:02:02,740
Esto es posible y esto simplemente se transforma para inyectar este código CSX en el H.

30
00:02:02,740 --> 00:02:03,790
Archivo de tiempo también.

31
00:02:04,660 --> 00:02:07,580
Ahora aquí, le daré a esto una C como clase.

32
00:02:07,600 --> 00:02:09,370
Y hay una cosa especial.

33
00:02:10,080 --> 00:02:16,500
El atributo de clase como este no existe y J es X porque la clase es una palabra clave en JavaScript.

34
00:02:16,840 --> 00:02:18,160
Entonces es el nombre de la clase.

35
00:02:18,190 --> 00:02:21,870
Y así es como se agregan clases de siestas a elementos y J es X.

36
00:02:22,240 --> 00:02:28,400
Todo esto, por supuesto, es una especie de prueba o le recuerda el hecho de que esto no es H Tim.

37
00:02:28,660 --> 00:02:29,320
Pero H Tim.

38
00:02:29,320 --> 00:02:37,630
Sintaxis de aspecto Owlish, todos nombrados como lista de objetivos de clase aquí y ahora aquí, podemos.

39
00:02:39,040 --> 00:02:46,300
Define algunos estilos para el Gollust aquí, y simplemente estableceré la lista de estilos como no aquí, eliminaré un margen

40
00:02:46,300 --> 00:02:52,660
o le daré un margen de dos ram arriba y abajo y un relleno de cero.

41
00:02:53,350 --> 00:03:00,040
Y en cada elemento de la lista de objetivos, agregaré un margen de una habitación superior e inferior cero dos a la izquierda y a la derecha,

42
00:03:00,460 --> 00:03:03,020
y luego simplemente un borde de un píxel sólido.

43
00:03:03,040 --> 00:03:07,460
Y luego este color grisáceo aquí y un relleno de un carnero.

44
00:03:07,550 --> 00:03:12,460
Este es un estilo muy, muy simple porque no quiero dedicar mucho tiempo a escribir

45
00:03:12,520 --> 00:03:13,150
aquí.

46
00:03:13,930 --> 00:03:15,820
Ahora, tal vez un ajuste.

47
00:03:16,420 --> 00:03:19,810
Vamos a dar a la lista un margen de dos cintas en todas las direcciones.

48
00:03:20,230 --> 00:03:24,310
Ahora tenemos esta lista de nuestros objetivos para ajustar los objetivos del curso aquí en la parte superior.

49
00:03:24,640 --> 00:03:25,990
Yo tambien.

50
00:03:27,750 --> 00:03:30,420
Dale a este d'Hiv un nombre de clase, por supuesto, calaveras.

51
00:03:31,460 --> 00:03:33,050
Y luego en D. C. como archivo de EE. UU.

52
00:03:34,390 --> 00:03:41,410
Tal vez en la parte superior, podemos retrasar los objetivos del curso y su d. h para etiquetar y alinear en el centro.

53
00:03:41,620 --> 00:03:42,220
Así.

54
00:03:43,060 --> 00:03:45,160
Ahora de nuevo, muy objetivos Euge.

55
00:03:45,190 --> 00:03:47,470
Pero eso está bien para el discurso aquí.

56
00:03:47,650 --> 00:03:49,270
Solo estamos practicando reaccionar.

57
00:03:49,780 --> 00:03:51,070
Así que tenemos estos objetivos del curso aquí.

58
00:03:51,430 --> 00:03:51,880
Increíble.

59
00:03:52,450 --> 00:03:54,860
Esto, por supuesto, es un marcado muy simple.

60
00:03:55,450 --> 00:04:00,940
Ahora, lo que a menudo hace reacciona, ya que dividiría esto en más componentes,

61
00:04:00,940 --> 00:04:07,570
por ejemplo, externalizaría esta lista en un componente separado para mantener cada componente por sí solo relativamente delgado

62
00:04:07,570 --> 00:04:09,640
y enfocado en una tarea.

63
00:04:10,180 --> 00:04:14,560
Para eso, podemos agregar una carpeta sup de componentes aquí en la carpeta fuente.

64
00:04:15,400 --> 00:04:20,650
Y allí agregaré una lista de objetivos J. S. Expediente.

65
00:04:20,830 --> 00:04:22,960
Esto mantendrá mi componente de la lista de objetivos.

66
00:04:23,620 --> 00:04:27,880
Ahora, para crear un componente tan nuevo, primero tenemos que importar, reaccionar desde reaccionar.

67
00:04:27,940 --> 00:04:30,450
De lo contrario, no podemos usar este J como X Syntex.

68
00:04:31,000 --> 00:04:32,290
Y luego mencioné muerto.

69
00:04:32,290 --> 00:04:33,760
Un componente es una función.

70
00:04:33,880 --> 00:04:37,660
Y, por cierto, también puede crear con la palabra clave de función o.

71
00:04:38,710 --> 00:04:42,280
Con una expresión de función o.

72
00:04:43,490 --> 00:04:47,480
Con el texto de la función Flecha que usé antes, era solo un somático que usaré aquí, pero eso no

73
00:04:47,480 --> 00:04:48,680
es algo que deba hacer.

74
00:04:49,430 --> 00:04:52,430
Y luego aquí exporto mi lista de objetivos de esta manera.

75
00:04:52,790 --> 00:04:54,860
Y ahora aquí, regreso.

76
00:04:55,920 --> 00:05:01,530
Esta lista desordenada, salt, córtela aquí y luego agregue, aquí hay un valor de retorno y, si

77
00:05:01,530 --> 00:05:07,500
se realiza una reforma, verá automáticamente que estos paréntesis se agregan a su alrededor para que pueda formatearse bien

78
00:05:07,680 --> 00:05:08,910
en varias líneas.

79
00:05:08,940 --> 00:05:10,890
De lo contrario, esto no sería JavaScript válido.

80
00:05:11,280 --> 00:05:13,350
Así es con los paréntesis.

81
00:05:13,350 --> 00:05:16,920
Es porque entonces JavaScript sabe que este bloque pertenece juntos.

82
00:05:17,730 --> 00:05:20,170
Así que ahora tenemos la lista de objetivos aquí y una aplicación.

83
00:05:20,430 --> 00:05:24,630
Sí, ahora podemos importar nuestro componente de lista de objetivos.

84
00:05:24,930 --> 00:05:26,520
Puedes nombrarlo aquí como quieras.

85
00:05:26,790 --> 00:05:29,990
No tiene que ser el mismo nombre con el que lo exporta aquí.

86
00:05:30,450 --> 00:05:36,720
Lo único importante es que tiene que comenzar con un carácter en mayúscula aquí en Abcess y una importación desde la carpeta

87
00:05:36,720 --> 00:05:39,510
de componentes y son de la lista de objetivos.

88
00:05:39,780 --> 00:05:43,430
Y como mencioné anteriormente, puedes omitir D. extensión de archivo aquí.

89
00:05:43,620 --> 00:05:44,460
No es requerido

90
00:05:45,210 --> 00:05:52,710
Y luego aquí usas go list como un J. normal S. Elemento X, como un elemento H tim L normal, se podría

91
00:05:52,710 --> 00:05:53,040
decir.

92
00:05:53,310 --> 00:05:58,890
Pero dado que no tenemos contenido entre la etiqueta de apertura y cierre, podemos y tenemos que escribir una etiqueta de cierre

93
00:05:58,890 --> 00:05:59,460
automático aquí.

94
00:05:59,760 --> 00:06:00,960
Esto no estaría permitido.

95
00:06:01,050 --> 00:06:03,280
Siempre debes cerrar tax y jazz x.

96
00:06:03,990 --> 00:06:06,240
Entonces este sería mi componente de la lista de objetivos.

97
00:06:06,630 --> 00:06:10,230
Y por lo tanto, si tenemos seguridad, vemos la misma salida que antes.

98
00:06:10,980 --> 00:06:17,520
También obtenemos el mismo estilo porque los estilos aquí siempre se aplican globalmente, incluso si los importa a un

99
00:06:17,520 --> 00:06:19,140
archivo de componente específico.

100
00:06:19,590 --> 00:06:26,250
Y aún así, es una buena práctica configurar los estilos en el archivo CSX junto al componente al que pertenecen.

101
00:06:26,520 --> 00:06:28,610
Por lo tanto, agregaré una lista de objetivos C como archivo s.

102
00:06:29,040 --> 00:06:33,210
Agregar mi lista de objetivos Stollsteimer e importar esa lista de objetivos.

103
00:06:33,300 --> 00:06:36,450
CSX cae en el archivo JavaScript de la lista de objetivos.

104
00:06:36,720 --> 00:06:41,580
Esto no es obligatorio, pero facilita la búsqueda de los estilos que pertenecen a este componente.

105
00:06:41,880 --> 00:06:47,160
Tenga en cuenta que los estilos no tienen un alcance automático para un componente, aunque las reglas normales

106
00:06:47,220 --> 00:06:52,860
como se aplican porque todo este C es el siguiente, sin importar dónde los importe, se aplican globalmente a

107
00:06:52,890 --> 00:06:54,120
toda su página.

108
00:06:54,960 --> 00:06:57,540
Con eso, sin embargo, volvemos al mismo resultado que antes.

109
00:06:58,020 --> 00:06:59,220
Entonces, ¿por qué hicimos eso?

110
00:06:59,290 --> 00:07:02,280
¿Y por qué dividimos esto si tenemos el mismo resultado que antes?