1 00:00:02,160 --> 00:00:08,820 Ahora, para generar nuestra lista de objetivos, aquí en la vista, quiero simplemente generar un par de componentes de texto por ahora, donde 2 00:00:08,820 --> 00:00:16,290 simplemente imprimo mi objetivo y, para hacerlo, podemos ingresar una expresión dinámica aquí con llaves de apertura y cierre simples y ahora nos referimos a 3 00:00:16,290 --> 00:00:17,910 los objetivos del curso, que 4 00:00:18,390 --> 00:00:25,860 es esta variable que obtuvimos aquí con la desestructuración de la matriz. Los objetivos del curso son nuestra variedad de objetivos y ahora, 5 00:00:25,860 --> 00:00:27,890 al igual que en React normal, 6 00:00:28,110 --> 00:00:34,620 que es una diferenciación que realmente no me gusta porque estamos usando React normal aquí al final, así que 7 00:00:34,800 --> 00:00:36,350 tal como lo 8 00:00:36,750 --> 00:00:43,590 sabes de React para proyectos web, ahora puedes mapee esta matriz de datos en una matriz de componentes con el 9 00:00:43,590 --> 00:00:50,280 método de mapa, que es un método Javascript normal. El método map toma una función que se ejecuta en cada 10 00:00:50,280 --> 00:00:52,230 elemento de la matriz, por lo 11 00:00:52,230 --> 00:00:53,180 que aquí 12 00:00:53,190 --> 00:01:00,810 obtenemos nuestro objetivo y luego tiene que devolver un nuevo componente aquí. Nuevamente, usaré esta sintaxis de función de flecha en 13 00:01:00,810 --> 00:01:07,230 línea donde, en lugar de tener llaves y luego devolver algo, omito las llaves y omito la 14 00:01:07,230 --> 00:01:11,340 declaración de retorno, esta es una sintaxis válida de JavaScript, esto 15 00:01:11,370 --> 00:01:13,980 también devolverá lo que ingrese aquí. 16 00:01:14,160 --> 00:01:17,740 Lo que quiero devolver es un componente de texto, por lo 17 00:01:17,880 --> 00:01:26,430 que este componente de texto que importamos de React Native y con esto, ahora podemos generar nuestro objetivo aquí porque un objetivo en los objetivos del curso solo será 18 00:01:26,430 --> 00:01:32,280 un texto porque lo que agregamos a los objetivos del curso es el objetivo ingresado y el objetivo ingresado es 19 00:01:32,280 --> 00:01:36,100 lo que obtenemos de la entrada de texto y eso es solo texto. 20 00:01:36,570 --> 00:01:42,210 Así que aquí, ahora solo estamos enviando algo de texto y estoy asignando todos mis objetivos del curso 21 00:01:42,390 --> 00:01:49,630 en componentes de texto que se mostrarán en esta vista aquí. Y con eso, si guardamos esto, ya deberíamos 22 00:01:49,720 --> 00:01:51,130 poder comenzar 23 00:01:51,220 --> 00:01:59,260 a agregar algunos objetivos, así que aprender React Native es una cosa que puedo ingresar aquí, presionar agregar 24 00:01:59,260 --> 00:02:00,950 y aquí está, aprenderlo 25 00:02:01,050 --> 00:02:06,300 de verdad y también obtenemos esto y si también quieres hacer 26 00:02:06,300 --> 00:02:11,610 algunos panqueques, puedes hacerlo también y, por supuesto, esto también funciona en 27 00:02:11,980 --> 00:02:18,480 iOS, aprender React Native de verdad y, por supuesto, todavía quiero hacer algunos panqueques. 28 00:02:18,550 --> 00:02:23,960 Así que esto está funcionando y así es como podemos generar una lista simple y muy trivial de elementos aquí. 29 00:02:23,980 --> 00:02:29,830 Ahora, por supuesto, estos elementos se ven bastante aburridos, así que tal vez podamos aplicar un poco de estilo allí 30 00:02:29,830 --> 00:02:33,120 para que se vean mejor. Sin embargo, antes de hacerlo, 31 00:02:33,340 --> 00:02:36,680 tenga en cuenta que tenemos un error aquí en nuestro terminal. 32 00:02:36,730 --> 00:02:41,350 Ahora nuestra aplicación funciona claramente, pero el error que estamos obteniendo aquí es que cada niño en una 33 00:02:41,350 --> 00:02:46,190 lista debe tener un accesorio clave único y esa es una regla de reacción normal, nada específico de React Native. 34 00:02:46,300 --> 00:02:52,930 De hecho, siempre debe, al asignar esto a una lista de widgets, asignar una clave aquí para que React pueda actualizar 35 00:02:52,930 --> 00:02:58,750 eficientemente esta lista detrás de escena si es necesario. Para ello, agregue un accesorio de clave aquí y luego 36 00:02:59,110 --> 00:03:01,730 la clave debe ser un identificador único, por ahora 37 00:03:01,780 --> 00:03:05,890 vamos con el objetivo en sí que no es estrictamente único, podría ingresar el mismo 38 00:03:05,890 --> 00:03:09,970 objetivo con el mismo texto dos veces, lo que le daría un error, pero 39 00:03:10,240 --> 00:03:12,650 por ahora supongamos que no está haciendo eso, 40 00:03:12,670 --> 00:03:17,720 por lo tanto, podemos usar el objetivo como clave y, si lo hacemos, nos desharemos de esa advertencia. 41 00:03:17,720 --> 00:03:21,850 Si ahora aprendí React Native, puedo agregar esto sin un error. 42 00:03:21,850 --> 00:03:27,610 Nuevamente, si agrego el mismo texto dos veces, técnicamente ni siquiera recibo un error aquí, pero esto estaría mal, 43 00:03:27,610 --> 00:03:28,040 aquí 44 00:03:28,040 --> 00:03:32,170 está, aquí está el error porque obtuve dos hijos con la misma clave. 45 00:03:32,200 --> 00:03:35,650 Entonces, por ahora solo asumiremos que no haces 46 00:03:35,770 --> 00:03:40,580 eso, esa es la regla clave normal que tienes también en React normal. 47 00:03:40,780 --> 00:03:46,210 Entonces, supongamos que no ingresa el mismo objetivo dos veces y continuemos con el diseño de estos elementos porque 48 00:03:46,210 --> 00:03:48,910 en este momento, no se ven demasiado emocionantes.