1 00:00:02,340 --> 00:00:06,210 Así que se habló mucho, se hicieron muchas cosas, ahora es el 2 00:00:06,210 --> 00:00:10,680 momento de hacer que este botón funcione y que agreguemos un objetivo aquí, justo 3 00:00:10,680 --> 00:00:11,780 y para eso 4 00:00:11,850 --> 00:00:17,040 necesitamos averiguar qué ingresó el usuario y, por supuesto, después escuche un toque en el botón 5 00:00:17,040 --> 00:00:23,850 y luego agregue el objetivo ingresado a una serie de objetivos que tenemos que administrar en algún lugar, que luego podemos 6 00:00:23,850 --> 00:00:26,460 mostrar en esta vista inferior, correcto, eso es 7 00:00:26,460 --> 00:00:26,850 lo 8 00:00:26,850 --> 00:00:29,630 que tenemos que hacer. Ahora, en este curso, 9 00:00:29,670 --> 00:00:35,600 usaré componentes funcionales solo con la función React hooks que es relativamente nueva, por lo que en 10 00:00:35,640 --> 00:00:41,550 caso de que aún no conozca React hooks, definitivamente aprenda sobre ellos primero, por ejemplo en mi 11 00:00:41,550 --> 00:00:42,120 Guía 12 00:00:42,120 --> 00:00:47,250 completa de React, cubro a fondo pero adjuntas también encontrará algunos otros recursos que 13 00:00:47,250 --> 00:00:54,000 lo ayudarán a comenzar a usar React hooks porque necesitaremos React hooks para, por ejemplo, obtener la entrada del usuario. 14 00:00:54,000 --> 00:01:00,280 Usamos el gancho useState para lo que importamos de React, no de React Native sino de React, 15 00:01:00,300 --> 00:01:02,070 es una característica central 16 00:01:02,220 --> 00:01:10,620 de React y luego aquí en este componente funcional, en este componente de la aplicación, podemos obtener el objetivo ingresado y también obtener 17 00:01:10,620 --> 00:01:19,110 el conjunto ingresó la función de objetivo para actualizar el estado con la ayuda de useState y, de manera predeterminada, tenemos un estado 18 00:01:19,110 --> 00:01:24,840 inicial que es una cadena vacía porque el usuario no ha ingresado nada al principio. 19 00:01:24,870 --> 00:01:27,330 Ahora podemos vincular esto a la 20 00:01:27,330 --> 00:01:33,870 entrada de texto, eso significa que cuando el usuario escribe un carácter, queremos actualizar nuestro estado y guardar el 21 00:01:33,870 --> 00:01:39,240 texto ingresado en el estado aquí al que luego podemos acceder a través del objetivo ingresado 22 00:01:39,240 --> 00:01:46,680 y pasaremos el objetivo ingresado volver a la entrada de texto. Ese es este enlace bidireccional, es un llamado componente controlado que también 23 00:01:46,680 --> 00:01:50,380 conoce de React para web con elementos de entrada HTML normales. 24 00:01:50,430 --> 00:01:57,340 Entonces, aquí podemos escuchar onChangeText, un accesorio proporcionado por la entrada de texto que toma una función que se 25 00:01:57,430 --> 00:01:59,930 ejecutará para cada pulsación de tecla. 26 00:01:59,970 --> 00:02:04,660 Ahora podríamos proporcionar una función en línea aquí, pero también podemos configurar una función separada para 27 00:02:04,660 --> 00:02:09,850 tener un código un poco más limpio y usted puede tener una función en una función y necesitamos 28 00:02:09,850 --> 00:02:17,770 tenerla aquí, para que podamos usar nuestro estado o establezca la función de objetivo ingresada aquí, simplemente agregando una nueva función aquí, el controlador de entrada de 29 00:02:18,990 --> 00:02:26,400 objetivo podría ser un nombre, aunque el nombre depende de usted. En esa función, obtendremos el texto ingresado automáticamente, 30 00:02:26,580 --> 00:02:34,170 que React o React Native pasarán aquí y luego podemos llamar al objetivo ingresado establecido y pasar el texto 31 00:02:34,200 --> 00:02:40,770 ingresado como un valor porque el texto ingresado aquí ya será un cadena porque conectamos el 32 00:02:41,100 --> 00:02:48,630 manejador de entrada de objetivo a onChangeText simplemente apuntándolo aquí. Ahora eso es importante, no agregue paréntesis allí porque esto 33 00:02:48,900 --> 00:02:54,300 ejecutaría esta función cuando se analiza este código, por lo que cuando la interfaz de 34 00:02:54,330 --> 00:02:59,880 usuario se procesa por primera vez. Sin embargo, no desea ejecutar esto de inmediato, 35 00:02:59,880 --> 00:03:05,940 desea ejecutarlo en cada pulsación de tecla y, por lo tanto, simplemente toma el nombre de la función, pasa ese 36 00:03:05,940 --> 00:03:12,210 nombre de la función a onChangeText y eso efectivamente le dice a React Native, oye, ese es el función que 37 00:03:12,210 --> 00:03:19,260 debería ejecutar para cada pulsación de tecla, así que no agregue paréntesis aquí para que esto pueda ejecutarse en cada pulsación de tecla. 38 00:03:20,010 --> 00:03:25,170 Ahora, en lugar de esta sintaxis de la función, por cierto, también puede usar una sintaxis diferente, que 39 00:03:25,170 --> 00:03:31,080 es la que usaré a lo largo del curso, donde crea una constante con ese nombre aquí y luego el 40 00:03:31,080 --> 00:03:38,190 valor de esa constante después del signo igual es simplemente un función usando esa sintaxis de función de flecha, entonces esta es su lista 41 00:03:38,180 --> 00:03:44,490 de argumentos y este es el cuerpo de la función. Esa es la sintaxis normal de Javascript, es compatible 42 00:03:44,490 --> 00:03:49,470 con el código Javascript React Native puede ejecutarse y, por lo tanto, esta es la sintaxis 43 00:03:49,470 --> 00:03:56,820 que usaré, conéctela a onChangeText exactamente de la misma manera que antes. Bien, ahora que tenemos esta función conectada, actualizamos nuestro estado 44 00:03:57,090 --> 00:04:01,050 con lo que el usuario ingresó en cada pulsación de tecla, 45 00:04:01,050 --> 00:04:07,800 ahora también tenemos que pasar ese texto nuevamente a la entrada de texto, para que se muestre allí correctamente simplemente 46 00:04:07,800 --> 00:04:14,190 vinculando la propiedad de valor a objetivo introducido, por lo que nuestro estado cambiará con cada pulsación de tecla. 47 00:04:14,870 --> 00:04:20,400 Y con eso, tenemos acceso a la entrada del usuario porque ahora 48 00:04:20,400 --> 00:04:27,010 siempre se almacenará en un objetivo ingresado. Ahora, cuando el usuario presiona el botón, queremos usar ese 49 00:04:27,040 --> 00:04:33,730 objetivo ingresado, así que para eso agregaré otra función aquí, agregar el controlador de objetivos y eso es solo una convención de nomenclatura 50 00:04:33,940 --> 00:04:39,310 que estoy usando para estas funciones aquí, puede nombrarlos como sea lo que quiera, sea lo que sea que 51 00:04:39,310 --> 00:04:45,820 esté acostumbrado de sus aplicaciones React, al final el nombre de la función simplemente debe describir lo que va a suceder y 52 00:04:45,820 --> 00:04:52,920 que aquí manejará presionar ese botón que al final agregará un objetivo. Aquí la función no tomará ningún argumento, pero en el cuerpo de la 53 00:04:52,920 --> 00:04:58,150 función, quiero agregar mi objetivo ingresado a una lista de objetivos y todavía no tenemos una lista, así que por 54 00:04:58,230 --> 00:05:04,830 ahora lo que hago aquí es el registro de la consola, que es compatible con React Objetivo nativo ingresado para que al menos veamos que 55 00:05:04,830 --> 00:05:10,710 esto se guardó correctamente y que esta función se ejecuta. Sin embargo, para que esto se ejecute, 56 00:05:10,710 --> 00:05:16,680 debemos conectarlo al botón, allí podemos agregar el accesorio onPress y apuntar al controlador de 57 00:05:16,680 --> 00:05:24,160 agregar objetivo, nuevamente sin paréntesis para que esto no se ejecute de inmediato, sino solo cuando ocurre una presión. 58 00:05:24,540 --> 00:05:33,720 Y ahora guardemos todo eso y regresemos y quizás ingresemos a Learn React Native y lo bueno es que puede usar su teclado real aquí 59 00:05:33,720 --> 00:05:41,560 y presionar agregar y debería ver aquí en su terminal este registro, también verá esto por cierto en sus herramientas de desarrollo 60 00:05:41,560 --> 00:05:48,130 de exposición aquí en la pestaña del navegador. Allí, si hace clic en uno de los 61 00:05:48,150 --> 00:05:52,670 dispositivos conectados, en el que simplemente hace clic en el botón en mi 62 00:05:52,670 --> 00:05:57,730 caso, el dispositivo Android, allí en la parte inferior también verá Learn React Native. 63 00:05:57,730 --> 00:06:05,350 Y, por supuesto, también funciona en iOS, aprenda todo sobre React Native, si ingresamos esto aquí y hacemos clic en agregar, también 64 00:06:05,350 --> 00:06:12,840 vemos que se registra aquí y también en las herramientas de desarrollo de exposiciones, si hacemos clic en el iPhone en el 65 00:06:12,840 --> 00:06:16,810 Muy abajo, vemos este registro. Bien, entonces estamos obteniendo la 66 00:06:16,910 --> 00:06:21,530 entrada del usuario, la estamos almacenando, la estamos registrando en la consola, por 67 00:06:21,530 --> 00:06:27,530 supuesto, no queremos que la consola la registre, en su lugar, queremos mostrarla debajo de nuestra entrada, queremos 68 00:06:27,530 --> 00:06:35,000 un lista de nuestros objetivos debajo de esta área de entrada. Entonces, para eso, necesitamos esa segunda vista aquí que debería mostrar nuestra lista de elementos. 69 00:06:35,030 --> 00:06:40,250 Entonces, entre las etiquetas de apertura y cierre, quiero generar todos los elementos que 70 00:06:40,280 --> 00:06:45,740 agregamos, todos los objetivos que agregamos. Para eso, en primer lugar, debemos administrar nuestros objetivos 71 00:06:46,400 --> 00:06:51,780 y podemos configurar otro estado para el que inicialmente es una matriz vacía, por lo tanto, paso una matriz 72 00:06:51,860 --> 00:06:58,010 vacía como un valor para usar State y allí tenemos nuestros objetivos del curso y un conjunto de objetivos del curso. función. 73 00:06:58,010 --> 00:07:03,070 Ahora estos nombres siempre dependen de usted, pero deben describir qué hay en su estado y 74 00:07:03,070 --> 00:07:04,230 cómo puede actualizarlo. 75 00:07:04,240 --> 00:07:10,330 Así que ahora, cuando agregamos un objetivo, quiero actualizar los objetivos de mi curso para agregar el nuevo 76 00:07:10,330 --> 00:07:20,840 objetivo y para eso, puedo llamar a establecer objetivos de curso y ahora establecer objetivos de curso a una nueva matriz donde tomo mis objetivos de curso anteriores y agrego un 77 00:07:20,840 --> 00:07:21,740 uno nuevo. 78 00:07:21,740 --> 00:07:25,100 Ahora, esta es la sintaxis que quizás no conozcas, ese es 79 00:07:25,100 --> 00:07:30,470 el llamado operador de propagación, es una función de Javascript que toma una matriz existente y los objetivos 80 00:07:30,470 --> 00:07:38,030 del curso son una matriz, es nuestra instantánea del estado actual antes de la actualización y extrae todos los elementos de esa matriz y luego 81 00:07:38,030 --> 00:07:43,280 los agrega aquí a una nueva matriz, por eso tengo los corchetes circundantes, sin estos corchetes circundantes 82 00:07:43,280 --> 00:07:43,840 esto 83 00:07:43,850 --> 00:07:49,310 no funcionaría, pero ahora creamos una nueva matriz y agregamos todos los elementos de la matriz anterior y ahora 84 00:07:49,310 --> 00:07:51,100 podemos También agregue un nuevo elemento. 85 00:07:51,110 --> 00:07:53,370 Entonces, aquí, agrego una coma para agregar 86 00:07:53,390 --> 00:08:00,310 un elemento adicional después de todos los elementos que estoy sacando aquí y el elemento que agrego aquí es mi objetivo ingresado, por supuesto. 87 00:08:00,320 --> 00:08:04,680 Entonces, ahora actualizamos nuestra lista de objetivos con la lista anterior 88 00:08:04,730 --> 00:08:10,250 de objetivos, inicialmente una lista vacía, pero luego crecerá con el tiempo porque también 89 00:08:10,250 --> 00:08:17,380 agregamos un nuevo objetivo cuando presionamos ese botón. Ahora, una pequeña nota al margen, cuando se trabaja con 90 00:08:17,380 --> 00:08:21,410 objetivos establecidos del curso, los objetivos del curso aquí son nuestro 91 00:08:21,460 --> 00:08:28,210 estado anterior y la forma en que React actualiza el estado, esta siempre debe ser su instantánea de estado 92 00:08:28,360 --> 00:08:32,750 más actual, pero no está 100% garantizado, tener esa garantía 100% , 93 00:08:32,920 --> 00:08:39,250 cuando actualiza su estado en función del estado anterior, puede usar la forma de función de esta función 94 00:08:39,250 --> 00:08:39,950 de 95 00:08:40,060 --> 00:08:46,870 conjunto donde no pasa el valor de su nuevo estado aquí, sino que lo pasa en una función, generalmente una 96 00:08:46,990 --> 00:08:53,850 función anónima donde obtenga su estado actual o sus objetivos actuales, por lo que su instantánea del estado actual y 97 00:08:53,860 --> 00:09:01,240 luego devuelve su valor actualizado, así que aquí devuelvo mi matriz actualizada con esa sintaxis de función de flecha en línea donde 98 00:09:01,240 --> 00:09:06,640 si solo tiene una expresión, puede omitir las llaves y el declaración de devolución e ingrese 99 00:09:06,640 --> 00:09:08,650 el valor que desea devolver y 100 00:09:08,680 --> 00:09:13,310 se devolverá y eso es todo JavaScript normal aquí, nada React Native específico. 101 00:09:13,450 --> 00:09:21,070 Entonces, aquí, tomo mis objetivos actuales y luego agrego mi objetivo ingresado. Esta sintaxis es un poco mejor, la otra sintaxis 102 00:09:21,070 --> 00:09:26,170 habría funcionado también, pero está garantizado que siempre funcionará porque React Native siempre 103 00:09:26,200 --> 00:09:33,520 seguirá adelante y le dará la garantía, la última instantánea de estado antes de que luego aplique su cambio 104 00:09:33,550 --> 00:09:35,050 de estado aquí. 105 00:09:35,260 --> 00:09:42,410 Ahora todo está bien, ahora tendremos una lista, una serie de objetivos gestionados aquí. ¿Cómo podemos ahora sacar esto?