1
00:00:02,190 --> 00:00:08,190
Creé el componente separado, A, por supuesto, para practicar la creación de sus propios componentes, pero B, también

2
00:00:08,220 --> 00:00:14,160
porque realmente es la filosofía central de reaccionar para dividir su aplicación en partes más pequeñas.

3
00:00:14,310 --> 00:00:17,120
Por supuesto, depende de ti lo pequeño que quieras dividirlo.

4
00:00:17,670 --> 00:00:22,140
Cada elemento de la lista, por ejemplo, también podría ser su componente anterior, y no habría nada de malo en

5
00:00:22,140 --> 00:00:22,380
eso.

6
00:00:23,040 --> 00:00:26,520
La idea simplemente es tener archivos de código pequeños y manejables.

7
00:00:26,910 --> 00:00:31,140
Y más tarde, una vez que agreguemos más lógica a la aplicación para que también podamos interactuar con ella.

8
00:00:31,170 --> 00:00:35,730
Y cambiamos una serie de objetivos, por ejemplo, al hacer clic en un botón, etc.

9
00:00:36,390 --> 00:00:41,370
Nosotros, por supuesto, queremos poder gestionar gran parte de la lógica en el componente de la lista de objetivos y

10
00:00:41,370 --> 00:00:42,150
no componentes obvios.

11
00:00:42,390 --> 00:00:49,470
Entonces, dividirlo realmente en componentes tiene la idea de separar las preocupaciones de mantener sus archivos pequeños, enfocados y manejables, lo

12
00:00:49,500 --> 00:00:55,830
que, si está trabajando en proyectos más grandes, es una gran victoria porque hace que sea mucho más fácil

13
00:00:55,830 --> 00:00:58,930
administrar y trabajar en tal proyecto más grande

14
00:01:00,000 --> 00:01:03,420
Ahora, hasta ahora, sin embargo, todo en nuestra aplicación está codificado.

15
00:01:04,290 --> 00:01:10,880
Ahora, sería más realista decir que nuestra lista de objetivos se gestiona aquí en la aplicación.

16
00:01:10,970 --> 00:01:12,660
Sí, como datos.

17
00:01:13,170 --> 00:01:20,160
Y queremos representar Digo list H elementos Timal o J como elementos X basados en esos datos.

18
00:01:20,640 --> 00:01:27,120
Ahora lo manejaré aquí en Abcess simplemente porque luego agregaré otro componente aquí que nos ayuda a crear

19
00:01:27,120 --> 00:01:28,230
nuevas metas.

20
00:01:28,530 --> 00:01:31,590
Pero por ahora, agreguemos una constante normal aquí.

21
00:01:31,830 --> 00:01:35,760
Componente funcional de Tudor porque es una función JavaScript normal.

22
00:01:35,940 --> 00:01:40,140
Por supuesto, puede hacer algo más que devolver J's X y el contenido del disco aquí.

23
00:01:40,520 --> 00:01:43,140
Tendremos los objetivos de mi curso.

24
00:01:43,200 --> 00:01:47,010
Puede nombrarlo como desee y será una matriz y sí una matriz.

25
00:01:47,340 --> 00:01:52,350
Cada objetivo puede ser un objeto JavaScript creado aquí con la notación literal del objeto.

26
00:01:52,560 --> 00:01:58,500
Por supuesto, también podría crear su propia clase o función constructora e instanciarla para crear dicho

27
00:01:58,500 --> 00:01:59,220
objeto.

28
00:02:00,030 --> 00:02:01,530
Ahora digamos que cada objetivo tiene una idea.

29
00:02:02,650 --> 00:02:06,880
C. SOL. uno para coro, llame a uno y luego tiene texto, digamos.

30
00:02:07,210 --> 00:02:10,030
Y el texto aquí es simplemente el texto.

31
00:02:10,060 --> 00:02:12,880
He codificado aquí, terminar el curso.

32
00:02:12,920 --> 00:02:13,960
Entonces copio eso.

33
00:02:14,440 --> 00:02:20,560
Y en esto aquí y dividiré en varias líneas para que sea más fácil de leer porque no solo tendré un

34
00:02:20,560 --> 00:02:21,790
objetivo sino también gratis.

35
00:02:22,000 --> 00:02:25,480
Entonces las ideas son C. SOL. a NCG gratis, digamos.

36
00:02:25,900 --> 00:02:29,560
Y ahora simplemente copiaré todo ese texto aquí.

37
00:02:31,540 --> 00:02:34,010
En mis objetos aquí en Abcess.

38
00:02:34,780 --> 00:02:36,550
Además, ese último texto.

39
00:02:37,820 --> 00:02:44,030
De esta manera, y ahora también puedo deshacerme de ese ampersand aquí, no lo necesitamos aquí.

40
00:02:44,120 --> 00:02:47,480
Todos podemos poner el texto así y reaccionar lo representará correctamente.

41
00:02:48,410 --> 00:02:50,630
Así que ahora tenemos que arañar la matriz de Scholes ante mi idea.

42
00:02:50,660 --> 00:02:54,050
Ahora, ¿está eso en el componente de la lista de objetivos de estos objetivos?

43
00:02:54,080 --> 00:02:56,660
Esos datos aquí deberían al final salir.

44
00:02:56,870 --> 00:03:02,080
Por lo tanto, se debe generar de forma dinámica en este componente, en el componente de la lista de objetivos en lugar de ser difícil.

45
00:03:02,450 --> 00:03:03,800
Entonces podemos eliminar este código aquí.

46
00:03:04,220 --> 00:03:06,050
No, eso nos deja con dos problemas.

47
00:03:06,350 --> 00:03:10,810
Número uno, ¿cómo podemos generar una lista de datos dinámicamente en J como X?

48
00:03:11,270 --> 00:03:13,130
Pero más importante que eso en este momento.

49
00:03:13,400 --> 00:03:18,950
¿Cómo podemos obtener esa lista de datos que se define en el componente de la aplicación en el componente Gollust?

50
00:03:19,460 --> 00:03:23,300
Bueno, centrémonos en eso primero, porque sin eso, no podemos enfocarnos en el otro problema.

51
00:03:24,170 --> 00:03:31,820
Podemos pasar datos de componente a componente con un concepto llamado accesorios cortos para propiedades.

52
00:03:32,450 --> 00:03:34,100
Podemos definir el nuestro.

53
00:03:34,130 --> 00:03:39,800
Se podrían decir atributos que son estos accesorios en nuestros propios componentes.

54
00:03:40,250 --> 00:03:46,090
Entonces, por ejemplo, aquí en la lista de objetivos, podría decir que tenemos artículos, atributos u objetivos, atributos

55
00:03:46,160 --> 00:03:47,120
totalmente suyos.

56
00:03:47,630 --> 00:03:48,710
Iré con goles aquí.

57
00:03:49,680 --> 00:03:53,340
Y ese atributo o accesorio de oro es el término común.

58
00:03:53,370 --> 00:03:57,870
Entonces, ¿el accesorio de Gold pasa estos datos a ese componente?

59
00:03:58,380 --> 00:04:02,280
Ahora, para eso, no uso una cadena aquí, que quiero pasar, sino que

60
00:04:02,280 --> 00:04:08,250
quiero pasar mi matriz D de estructura de datos JavaScript aquí y para papá aquí, en realidad usamos un número

61
00:04:08,250 --> 00:04:12,210
especial Syntex y J como X. Usamos llaves simples de apertura y cierre.

62
00:04:12,780 --> 00:04:15,780
Parece que estamos creando un objeto de trabajo aquí, pero no lo estamos.

63
00:04:16,080 --> 00:04:19,420
Si haces esto dentro de J es X, que estoy haciendo aquí.

64
00:04:19,500 --> 00:04:29,190
Eso es J es X, entonces esto significa que desea fusionar su código J is X con alguna expresión de JavaScript al final.

65
00:04:29,460 --> 00:04:31,370
Y aquí podemos señalar las habilidades básicas.

66
00:04:31,410 --> 00:04:32,970
Esa es una expresión de JavaScript válida.

67
00:04:33,060 --> 00:04:34,590
Solo apuntamos a una constante.

68
00:04:34,990 --> 00:04:36,450
Y lo que Disneylandia significa está muerto.

69
00:04:36,870 --> 00:04:38,640
La reacción pasará.

70
00:04:38,670 --> 00:04:39,870
Objetivos del curso aquí.

71
00:04:40,170 --> 00:04:44,700
El valor almacenado en esta constante en este caso, esta matriz en este lugar de J es X.

72
00:04:44,880 --> 00:04:47,390
En este caso, en este accesorio, por lo tanto.

73
00:04:47,940 --> 00:04:53,140
Entonces, los objetivos serán un accesorio que tiene una referencia a esta matriz ahora.

74
00:04:54,120 --> 00:04:58,370
Ahora dentro de la lista de objetivos, ahora podemos recibir el accesorio de ese oro.

75
00:04:58,770 --> 00:05:02,340
Así que vamos a la lista de objetivos y veamos cómo funciona eso en la lista de objetivos.

76
00:05:02,370 --> 00:05:03,360
Tenemos una función, ¿verdad?

77
00:05:03,600 --> 00:05:04,830
Un componente funcional.

78
00:05:05,610 --> 00:05:08,670
Ahora, esta función en este momento no obtiene ningún parámetro.

79
00:05:09,090 --> 00:05:09,930
Podemos cambiar esto.

80
00:05:10,170 --> 00:05:12,240
Podemos recibir un parámetro de accesorios aquí.

81
00:05:12,900 --> 00:05:20,820
Cada función que se usa como componente de reacción, lo que significa que devuelve J es X, también recibe accesorios.

82
00:05:22,620 --> 00:05:28,160
¿Este objeto pasa a su componente funcional de reacción automáticamente al reaccionar?

83
00:05:28,580 --> 00:05:34,070
Y es el objeto que agrupa todos los accesorios que pasó al componente.

84
00:05:34,190 --> 00:05:37,070
Entonces, en nuestro caso, los objetivos son un solo accesorio que tenemos.

85
00:05:37,400 --> 00:05:44,420
Entonces, aquí tendremos un objeto que tiene una propiedad con el nombre de objetivos que tiene el valor pasado para

86
00:05:44,420 --> 00:05:45,170
ese accesorio.

87
00:05:46,270 --> 00:05:53,110
En otras palabras, aquí, podría bloquear la consola, objetivos de inicio de apoyo, objetivos de punto, porque nombré por objetivos de

88
00:05:53,110 --> 00:05:54,130
Propp aquí.

89
00:05:54,430 --> 00:05:59,680
Si elige un nombre diferente aquí, que está perfectamente bien, debe usar el nombre diferente aquí.

90
00:06:00,580 --> 00:06:03,640
Ahora, si guardamos eso, ya no veremos nuestros objetivos en este momento.

91
00:06:04,090 --> 00:06:08,140
Pero si abrimos las herramientas de desarrollador, vemos que estos Arae están bloqueados aquí.

92
00:06:08,230 --> 00:06:13,870
Y el registro de papá proviene de la línea seis de la lista de objetivos, como puede ver, que

93
00:06:13,870 --> 00:06:20,860
por supuesto, es este registro aquí y allá, vemos nuestros datos de objetivos, lo que significa que sí, llega con éxito dentro del componente Gollust.

94
00:06:21,670 --> 00:06:28,420
El concepto de accesorios es un concepto súper importante en reaccionar, porque esto es lo que le permite pasar datos

95
00:06:28,420 --> 00:06:34,510
del Componente A, el componente de la aplicación al componente B, el componente de la lista de objetivos.

96
00:06:34,540 --> 00:06:35,230
En este caso.

97
00:06:35,830 --> 00:06:42,790
Ahora echemos un vistazo a cómo podemos generar una lista de datos dinámicamente en J como X, porque aquí tenemos una lista

98
00:06:42,790 --> 00:06:48,940
de objetivos, una serie de objetivos, y queremos generar esto como elementos de lista aquí en nuestra lista

99
00:06:48,940 --> 00:06:49,360
desordenada.