Reaccionar con un proyecto de TypeScript

1. Introducción: Muy bien chicos, bienvenidos a este curso sobre cómo construir un proyecto usando reaccionar con TypeScript. Por lo que para este proyecto vamos a construir una lista de contactos. Entonces déjame darte una demo aquí. Voy a agregar un nombre para estos usuarios. Por ejemplo, John, la edad va a ser de 25 años y es un desarrollador de software. Voy a dar click en el usuario y luego voy a añadir otro usuario. Por ejemplo, Jessica, tiene 20 años y es enfermera. Voy a dar clic en Agregar usuario. Entonces cada vez que agreguemos un usuario, lo veremos aquí abajo apilándose. Y entonces obviamente podemos eliminar usuarios de nuestra lista de contactos. Digamos que quiero eliminar a John. De acuerdo, eliminé a John de nuestra lista de contactos. Ahora bien, ¿cuáles son los requisitos para este proyecto? Para este proyecto, es necesario conocer los fundamentos de reaccionar. Entonces si eres completamente nuevo con React, este curso no es para ti. Esto es solo para personas que ya conocen React, al menos los fundamentos de ello, pero quieren aprender a querer TypeScript en él. Recuerda que TypeScript va a ser una forma para que realmente agreguemos los tipos y sepamos qué tipo de valores están regresando nuestras funciones y así sucesivamente. Aprenderás todos estos en este curso y cómo construir su proyecto, por supuesto. Por lo que espero que estés emocionado de iniciar este curso y te veo en el siguiente video. 2. Instalación y de react y Typescript: Muy bien chicos, Hoy vamos a crear un proyecto con reaccionar y TypeScript. He visto muchos tutoriales por ahí solo explicando qué es TypeScript y solo algunos tutoriales simples sobre él. Pero pensé que sería una mejor idea crear realmente algo con él. Entonces déjame mostrarles el proyecto que vamos a construir. Tenemos es esta es una especie de lista de cosas por hacer, pero con algunos usuarios. Entonces estamos teniendo aquí un formulario donde podemos poner, por ejemplo, un nombre, edad y un trabajo por ejemplo, de un usuario. Y luego cuando hacemos clic en él, podemos agregar estos usuarios a nuestra lista. Entonces sólo voy a poner aquí, por ejemplo, por mi nombre, voy a poner aquí 20 y voy a poner aquí, por ejemplo, pilotos. Y voy a dar clic en Agregar usuario. Y luego voy a poner aquí a John. Entonces John es por ejemplo 45 y E es, por ejemplo, enfermera va a poner aquí. Entonces tenemos a estos dos usuarios y ahora podría hacer clic en cualquiera de ellos. Por ejemplo, el, el empleado fallecido. Esto sería como para una empresa, por ejemplo, si está agregando estos usuarios. Entonces esto es sólo un proyecto sencillo. Vamos a empezar con estos ahora. Entonces, sí, vamos por ello. En nuestro Código Visual Studio. Simplemente elige un lugar donde quieras instalar tu proyecto. Y ahora para ello necesitas escribir el siguiente comando. Entonces vamos a hacer NP x, Create React app. Vamos a darle nuestro nombre. Voy a llamar a esto, por ejemplo, usuario menos TypeScript. Y ahora voy a hacer un guión, plantilla de guión y otro espacio. Y esta vez voy a poner tipo script. Entonces vamos a instalar ahora un nuevo proyecto React completo, pero con TypeScript incorporado ya. De acuerdo, entonces voy a presionar Enter, voy a dejar que se instale. Y luego cuando esté listo, sólo podemos continuar. Muy bien, entonces ahora que el proyecto está instalado, solo podemos abrirlo en nuestro código de Visual Studio. Eso es exactamente lo que hice. Por lo que he estado aquí mi nuevo proyecto completo. Voy a abrir la terminal y ahora asegurarme de que estés en el camino correcto para iniciar este proyecto. Entonces voy a hacer aquí PWD. Por lo que estoy dentro de mis proyectos de desarrollo entre mi lista de usuarios carpeta TypeScript, que es ésta. Voy a revisar ls. Y me dieron los módulos de nodo package.json y así sucesivamente, que son todas estas carpetas, estamos en el lugar correcto para iniciar nuestra aplicación. Voy a hacer un inicio de NPM para empezar. Y ahora debería ver aquí en el navegador, solo estoy presionando aquí. Sí, solo tengo que hacer esto porque también tengo estos otros proyectos funcionando. Entonces esa parte es como conflictiva. Entonces estoy abriendo estos en el puerto 3000 y uno, y eso es todo. Estamos empezando básicamente desde el principio. Está bien, así que vayamos dentro de nuestra fuente. Como puedes ver ahora, antes cuando apenas estábamos creando una aplicación React por defecto, tendríamos, por ejemplo, estas carpetas aquí con el app.js y así sucesivamente. Ahora, en lugar de tener estas extensiones de ab.js, tenemos la extensión de punto TSX, ¿de acuerdo? Entonces, solo eliminemos un par de cosas aquí, así que no necesito estos logotipos. Yo creo. Yo también voy a borrar todo dentro de estos. Entonces dentro de esta función arriba, voy a borrar todo. Sólo voy a poner aquí por ahora. Al igual que TypeScript, no conozco a alguien así sólo para asegurarme de que podamos ver. Entonces TypeScript, tenemos un H1 aquí. Eliminemos el logotipo. No necesitamos este logo aquí en el lado izquierdo. Y creo que eso es todo por ahora. De acuerdo, entonces si entras en tu navegador, deberías ver aquí TypeScript. Muy bien, entonces ¿Cuál es el punto que realmente estamos haciendo aquí sobre como, por qué deberíamos usar TypeScript y así sucesivamente. Esto se debe a que sólo queremos asegurarnos de que cada variable que creemos, tengan un tipo específico. Y ese tipo no va a cambiar porque por defecto, JavaScript, si creas una variable como esta, por ejemplo, edad, y lo vas a poner igual a 20. Más adelante, podrías simplemente ir y cambiar esta variable a, por ejemplo, 20 como cadena. Y esto realmente no es una buena práctica. Desea asegurarse de que cuando cree una variable, ese tipo de esa variable va a ser consistente en toda su aplicación. Entonces, ya sabes, TypeScript nos permite controlar este tipo de cosas. Y también te permite controlar, por ejemplo, qué funciones regresan, etcétera. Y, pero ahora vamos a aprender todo sobre estos. Entonces permítanme simplemente borrar estos. Déjame ver aquí el proyecto. Entonces probablemente lo que voy a hacer, voy a descomponer en partes separadas. Y sólo voy a dejar el estilo para el final porque creo que algunas personas, sólo quieren empezar con. Entonces dejemos el estilo para el final y centrémonos aquí en primer lugar en esto. Entonces hagámoslo. Podría tener que romper estos en un par de videos diferentes porque podría ser un poco demasiado largo, ¿verdad? Entonces Vayamos dentro de nuestro regreso. En primer lugar, y quiero crear un formulario. En primer lugar, pongamos aquí en la IV. Entonces estos div aquí dentro va a ser una especie de nuestro contenedor. Entonces voy a poner aquí ClassName del contenedor. De acuerdo, así que tenemos el nombre de clase del contenedor. Voy a poner dentro un H1 va a decir reacciona con TypeScript. Y por dentro sólo voy a hacer un formulario. De acuerdo, entonces conseguimos el formulario. Y ahora dentro de esta forma, voy a tener algunas etiquetas. Entonces básicamente lo que vamos a hacer con estas etiquetas, esto es lo que has visto aquí. Esta cosa, el nombre, la edad, el trabajo, etcétera. Entonces para la primera etiqueta, sólo voy a poner nombre. ¿ De acuerdo? Entonces tenemos el nombre aquí, y voy a poner unas entradas. ¿ Todo bien? Y estos ingresando aquí va a ser con DNI. Por lo que voy a poner aquí una identificación para poder dar click en esta etiqueta y luego seleccionar esta, mirar así. Si hago clic en la etiqueta, es como seleccionar estos que tenemos aquí. De acuerdo, así que voy a darle, por ejemplo, un nombre de usuario. De acuerdo, tenemos el nombre de usuario ahí dentro. Vamos a poner un poco más de estos parámetros. Entonces solo voy a estilo es un poco mejor. Por lo que esta entrada aquí va a ser con un tipo de texto. A continuación, queremos tener un nombre. Entonces el nombre sólo va a ser después para que realmente almacenemos estos valores que tenemos aquí dentro en el estado. Para que pudieras darle cualquier nombre que quisieras. Yo sólo voy a poner aquí nombre, ¿de acuerdo? Y por último, vamos a tener algún valor. Esto sólo va a ser más adelante para que nosotros almacenemos este valor también en el estado. Dejémoslo vacío por ahora. Entonces conseguí estos. Creo que todos estamos bien hasta ahora. ¿ Me estoy perdiendo algo? Tenemos esto. Nos dieron la forma 0. Había algo aquí dentro. Entonces déjame solo poner aquí también un HTML cuatro. Y ahora esto va a ser para el nombre de usuario. Entonces cuando pones estos HTML4 necesita ser del mismo nombre, como estos ID. Y luego solo puedes hacer click en la etiqueta. Y se va a seleccionar, poner en foco estas entradas que estás usando. De acuerdo, así que tenemos este. Vamos a copiar esto porque vamos a tener tres de ellos va a ser lo mismo. De acuerdo, vamos a copiar esto. Entonces solo voy a darle estilo a estos. Por lo que esto va a ser por correo electrónico del usuario. Esto se va a decir, es correo electrónico h. Esto es h, Esto es h aquí. Esta va a ser la edad del usuario ID. El tipo de estas entradas va a ser un número porque sólo quiero escribir nuestros números. Si escribes algo aquí no va a funcionar, pero si va a ser un número va a estar bien. Entonces tenemos éste. El nombre de esto va a ser h, podría ser cualquier cosa. Voy a poner edad, Valley era así y tenemos otra etiqueta. Entonces estas etiquetas para el trabajo, vale, entonces trabajo de usuario, vamos a tener aquí salto y tenemos una entrada con un usuario. Job, se va a cobrar el nombre. Y creo que eso es todo. Lo último que necesitamos dentro de esta forma va a ser un botón. Y este botón va a ser con un tipo de presentación. Y lo que vamos a poner aquí en este botón sólo va a decir Agregar usuario por ahora. De acuerdo, déjame asegurarme de que estoy poniendo anuncios usuario. De acuerdo, entonces creo que tenemos todo lo que necesitamos correctamente. Echemos un vistazo a nuestra página. Déjame sólo aumentar el zoom para que ustedes puedan ver un poco mejor. Por el momento. Deberíamos tener este nombre correcto, edad, empleo, y agregar usuario. Está bien, así que eso debería ser todo para este video. No quiero hacerlos como demasiado largos. Entonces sí, vamos a romperlo aquí. Y luego cuando volvamos a la siguiente, lo que vamos a hacer es empezar a llenar estos valores y los vamos a almacenar aquí en el estado, creando las variables con TypeScript y así sucesivamente. Entonces eso es todo. Está bien, te veré en el próximo. 3. Crea la formulario de usuario: Muy bien chicos, bienvenidos de nuevo. Entonces empecemos aquí haciendo lo que queremos. Entonces queremos empezar a escribir algo aquí, agarrar estos valores, y luego hacer algo con ellos. Muy bien, así que primero que nada convertíamos aquí en la parte superior, nuestro componente de función, nuestro componente de aplicación para estar con algunos reaccionan unas pautas aquí. Por lo que no reacciona TypeScript. Entonces vamos a hacer cambiar estos fondos de una declaración de función. Vamos a cambiar estos a una función de flecha. Entonces hagámoslo const. Y voy a explicar qué es esto en un segundo. ¿Todo bien? Entonces vamos a poner aquí un punto React AFC. Y esto es así, y deberíamos estar bien, de acuerdo, así que cuando estés creando un componente con TypeScript, necesitas decírselo con este colon después para decir, vale, esto va a ser un React componentes funcionales. Entonces cuando estamos usando TypeScript, entonces esta es la parte que vamos a empezar a tocar en TypeScript en realidad. Entonces como sabes que por ejemplo, en JavaScript, cuando creas una variable, digamos edad. Si crea estas variables y la asigna, por ejemplo, para 20 como número. Más adelante, solo puedes ir y decir que la edad es igual a 20. Esto se puede hacer porque JavaScript no es un lenguaje que es como fuertemente tipado, en realidad está débilmente tipado. Por lo que esto significa que se puede crear una variable. No es necesario especificar qué tipo de datos tiene aquí. Y luego más adelante puedes simplemente cambiarlo sin ningún problema. Por lo que estos pueden introducir muchos problemas en tu proyecto, especialmente cuando estás trabajando en grandes, grandes empresas, como con muchos usuarios, muchos desarrolladores. Y así cuando estás creando una variable en con TypeScript, tienes la capacidad de entrar aquí y decir, ok, Qué estas variables, cuál es el tipo de ella. Puedo decir que este es el tipo de un número. De acuerdo, Entonces por el momento sólo tenemos este tipo de líneas ardientes aquí porque está diciendo que nunca la usamos. Si me limitara a hacer aquí, por ejemplo, un registro de punto de consola de h. ¿De acuerdo? Ya ves que esto se ha ido porque sólo lo usamos. Por lo que especifiqué al escuchar estas variables cuando creé que este valor necesita ser con un tipo de número. Si entrara aquí y lo pondría como una cuerda. De acuerdo, mira, ahora me está dando este error. El número de tipo buscado no es asignable al tipo string. ¿ De acuerdo? Por lo que esta podría ser una forma de asignar, por ejemplo, el tipo de esta variable. Otra forma que podrías hacer sería, por ejemplo, crear un tipo que podrías usar en múltiples variables. Entonces voy a llamar a esto, por ejemplo, tipo. Mi número. Por lo que realmente no importa cuál es el nombre que le des. Podría ser cualquier cosa. Entonces creamos un tipo, dale un nombre. Y entonces decimos: Vale, ¿qué tipo de tipo es éste que queremos crear? Este es un número. Entonces cuando tenemos aquí un número, esto es como la palabra clave de JavaScript que en realidad te está diciendo, mira, este tipo que quieres pasar 20 variable necesita ser con un tipo de número. De acuerdo, así podría entrar aquí, vamos a deshacernos de esto. En lugar de anotar aquí número, podría simplemente entrar aquí y decir: Mira, este es mi número porque sabes que estos tipos aquí arriba que creamos es en realidad un número, ¿de acuerdo? Por lo que podrías hacer de una manera u otra si quieres. Podrías simplemente hacer así. ¿ De acuerdo? Por lo que esto debería ser suficiente por ahora para que sólo sigamos con el resto. Entonces déjame simplemente deshacerme de esto. Entonces ahora que tenemos esta entrada aquí, Empecemos a aplicar aquí algunos eventos de OnChanges. Para que podamos agarrar los valores que tenemos aquí dentro. Y luego lo vamos a almacenar en un estado. Entonces, vamos a crear ese estado aquí. En primer lugar, hagamos un CONST. Vamos a decir Users state, por ejemplo. Y voy a decir set, set users, set user state. ¿ De acuerdo? Entonces esto va a ser igual a usar estado. Y voy a poner esto como un objeto por ahora, ¿de acuerdo? Como de costumbre, Mira, estás teniendo aquí a estos Estados Unidos, así que necesitabas importarlo en la parte superior de React. Y todo esto está bien. Lo que queremos tener dentro de estos ahora mismo es que queremos tener un usuario actual, un usuario actual. ¿ De acuerdo? Entonces queríamos tener un usuario actual que va a ser el que vamos a estar escribiendo. Entonces cada vez que estamos escribiendo estos valores, queríamos almacenar esto en nuestro estado, en esta parte aquí dentro. Por lo que aquí arriba creamos nuestro estado. Este es el nombre de nuestro estado. Esta es una función que ejecutamos siempre que queremos actualizar el estado. Y este es el valor de nuestro estado, ¿de acuerdo? Por lo que quiero tener el valor de mi estado es un objeto con una clave de usuario actual. Entonces este va a ser el usuario actual que estamos escribiendo en este momento. Y entonces, ¿cuáles van a ser los valores de estos en este usuario actual? Por lo que quería tener un nombre. Entonces sólo voy a poner esto así. Entonces esto va a ser un objeto quiero tener un nombre. Por ahora. Sólo voy a ponerlo vacío, ¿de acuerdo? Entonces quiero tener ¿qué más? Yo quería tener, por ejemplo, un trabajo. Y no estaba ahí una H Sí, había una edad. Entonces voy a poner todavía cada Y luego trabajo. De acuerdo, así como esto. Entonces creamos aquí un objeto con nombre, edad, y trabajo. Pero como especificamos antes con TypeScript, siempre que estamos creando algún tipo de variables u objetos y así sucesivamente. Es necesario especificar qué tipo de tipos tienes aquí. Entonces porque quien es dueño de este objeto es en realidad nuestro estado estadounidense. Después de nuestro Estado de Estados Unidos aquí. Podemos pasar estos aquí. Algún tipo de, algunas personas lo llaman llaves de cocodrilo. Entonces podríamos entrar aquí y simplemente pasar, por ejemplo, queremos que nuestro estado estadounidense sea un objeto, como se puede ver. Y quiero que este objeto tenga una clave de usuario actual. ¿ De acuerdo? Y ese usuario actual va a tener un nombre que quiero ser una cadena. Entonces tenemos una H que quiero ser una cuerda. Digamos por ejemplo, vamos a cambiar esto después, no te preocupes, porque lo pusimos como un número ahí dentro. Y entonces tenemos un trabajo que es una cuerda también. De acuerdo, Entonces pasamos eso dentro de estos estado de usuario. Sabemos que vamos a echar un vistazo. Si lo pasas, vas a tener un objeto con un usuario actual con un nombre que es cadena, edad, que es una cadena y un trabajo que es una cadena. De acuerdo, entonces tenemos todo declarado. Pero como se puede ver aquí dentro, este tipo que ponemos dentro de una mirada, no se ve tan genial porque está tomando mucho espacio. Entonces siempre que queramos realmente y crear algún tipo de un tipo para este tipo de objetos que tienen muchas claves. Podríamos crear algo que llamamos interfaz. Por lo que voy a crear esta interfaz aparece. Entonces para crear una interfaz, una interfaz va a ser solo una forma para que creemos como múltiples tipos para un objeto. Entonces voy a poner aquí interfaz, y voy a poner, llámalo por ejemplo, user int, que es sólo la abreviatura de interfaz. Y ahora quiero que esto sea qué? Esto va a ser un objeto. Como pueden ver, tenemos la apertura y cierre del objeto. Y voy a poner aquí que este va a ser un nombre, ¿de acuerdo? Va a ser un nombre. Esto va a ser una cuerda. Lo mismo para la edad, necesita ser una cuerda. Y luego voy a poner el trabajo que va a ser una cuerda. ¿ De acuerdo? Por lo que creamos nuestra interfaz. Recuerda que solo usamos una interfaz cada vez que estamos tratando pasar este tipo de tipos a un objeto como éste. De acuerdo, entonces ahora dentro de mi estado estadounidense, quiero que mi usuario actual, que es este objeto que tenemos aquí dentro. Quiero que estos usuarios actuales sean con el tipo de esa interfaz que acabamos de crear. Por lo que ahora no necesito precisar todo esto. Creamos la interfaz, y ahí está. Mira, tenemos nuestra interfaz ahí dentro. Entonces si todavía pasa el cursor sobre esto, tenemos ahora que nuestro estado de usuario es un objeto con una clave de usuario actual. Y estos usuarios actuales aquí es con el tipo de usuario INT. Ellos el usuario INT es éste. Entonces todos estamos bien por ahora. De acuerdo, entonces ahora que tenemos esto, lo siguiente que quería hacer ahora es en realidad empezar a poner algún tipo de valores de onchange en escuchar nuestros insumos. Entonces vamos a entrar aquí por el cambio. Entonces, cada vez que cambie algo, ¿ qué quiero hacer? Quiero llamar a una función llamada, por ejemplo, en cambio. Handler, llámalo lo que quieras. Esta es sólo una función que ejecutaremos cada vez que estemos escribiendo algo en nuestra entrada. Entonces voy a copiar esta misma función en todas mis entradas así. Está bien, así que ahora nos está dando un error en nuestro navegador porque aún no creamos estas funciones. Entonces hagámoslo. Entonces voy a hacer aquí const en manejador de cambios. Entonces esta va a ser una función como esta. Entonces, ¿qué va a hacer esta función? Sólo vamos a comprobar. En primer lugar, solo quiero hacer algunas cosas dentro de esta función y no quiero devolver nada de esta función. Por lo que escribimos TypeScript. Se puede decir que por después de tu paréntesis que te dieron en año, puedes ir y sólo hacer aquí un vacío, así como esto. Mira, puedes hacer después del paréntesis, haces este colon y pones vacío. Entonces esto significa que esta función va a hacer algo, pero nunca va a devolver algo, ya sabes, como cuando estás tratando de devolver algo como un número o lo que sea, esta función no va a devolver nada. Simplemente va a hacer algún trabajo y luego parar y no devolver nada. Entonces lo ponemos aquí, vacío. Si por alguna razón estás haciendo esta función que está haciendo algo así como, por ejemplo, regresar, devolver un nombre, Digamos volver, hola, digamos en ella se especifica, ¿de acuerdo? Esta función va a devolver una cadena si harías algo así. De acuerdo, así que vamos a deshacernos de estos porque no voy a devolver nada. Ahora, dentro de una función, siempre necesitas especificar qué tipo de cambios o qué tipo de parámetros vas a poner aquí. Digamos que pondrías un nombre aquí. Entonces este sería un parámetro que necesitas especificar, ok, Este parámetro que tienes aquí es de qué tipo? Digamos que pasas otra. Sería la edad. Este sería, por ejemplo, un número. No lo sé. Por lo que es necesario especificar dentro todos los tipos de estos parámetros que pones dentro. Pero esto no es lo que queremos ahora mismo. Queremos que siempre que estemos haciendo aquí un evento onchange, vamos a ejecutar esta función. Y lo único que quiero agarrar de aquí va a ser el evento. Entonces ya sabes, cuando estás escribiendo algo hay un evento. Por lo que en realidad puedes agarrar, por ejemplo, el valor de punto objetivo de punto de evento. Por lo que podemos agarrar los valores de estos insumos. Entonces sólo vamos a poner aquí E, podríamos poner cualquiera, cualquier nombre que queramos porque así es como puedes agarrar los eventos aquí dentro. Podrías escribir evento o solo podrías tener E realmente depende de ti. Bueno, necesitamos especificar este evento es qué tipo de evento es este evento en React con el tipo de reaccionar. Entonces esto es algo que probablemente solo tengas que hacer alguna búsqueda rápida en Google si no sabes de eso. Entonces vamos a poner aquí evento de cambio reaccionar. ¿ De acuerdo? Y así este es el evento que estamos haciendo, React dot change event. Y entonces necesitamos especificar, ok, En qué elementos estamos haciendo esto, esto va a estar en este elemento que es HTML. Y entonces tenemos entradas, elemento de entrada. ¿ De acuerdo? Entonces ahora que tenemos esto, deberíamos poder simplemente entrar aquí. Por ejemplo, si estamos haciendo algo como imaginar evento dot, evitar que la apariencia predeterminada incluso se acerca. Si queremos hacer algo. Por ahora, solo quiero hacer un console.log del punto de evento. Mira, cuando pongo el punto hasta se me acerca. Todo lo que podemos hacer con eso, está bien, Así que el evento tiene las burbujas canceladas, nivel es de confianza, y así sucesivamente. Yo quería agarrar este blanco punto-punto. Si quiero poner otro punto, mira, ahora, puedo conseguir muchas otras cosas. Lo que quiero agarrar es que el valor debería ser más probable aquí abajo en la V. Eso es todo. ¿ De acuerdo? Entonces cuando estamos haciendo algunos cambios en estos insumos, vamos a tener acceso al evento que ya especificamos el tipo. Y debido a que especificamos el tipo de este evento, podemos obtener acceso a todos estos valores sin tener que buscarlos. De acuerdo, así que vamos a comprobar si esto está funcionando. Abramos la consola. Vayamos aquí. Hagamos una consola. Déjenme aclarar estos. Yo sólo voy a poner por ejemplo, T E L M0. Y como puedes ver, cada vez que estamos escribiendo algo viene como lo que sea que escribas ahí, lo cual es genial. De acuerdo, Entonces todo esto está bien. Ahora, vamos a guardar estos valores ahora antes de que terminemos este video se está haciendo un poco largo. Y vamos a salvar esto bajo estado. Entonces hagámoslo. Para actualizar nuestro estado, necesitamos ejecutar esta función llamada set user state. Entonces hagámoslo. Voy a hacer establecer estado de usuario. Entonces esto tiene que ser ¿qué? Necesita ser el usuario actual porque eso es lo único que nos metimos ahí en este momento. Tenemos aquí un usuario actual. Y dentro de lo que voy a hacer es que sólo voy a estar actualizando cada uno de estos valores, como individualmente. Entonces, por ejemplo, si solo estoy escribiendo el nombre, solo estoy actualizando este. Entonces no lo hago, si solo pongo aquí, por ejemplo, nombre y luego algún valor, voy a perder todas las demás propiedades. Por lo que necesito usar el operador de descanso, que es el punto punto-punto. Y luego voy a hacer estado de usuario. Entonces este es mi estado. Yo quiero ir dentro de los puntos. Usuario actual, y voy a agarrar todo lo que hay dentro de ahí. Y luego, está bien, voy a actualizar el nuevo valor. Ahora bien, ¿cuál es este nuevo valor que voy a estar actualizando? Voy a poner aquí este tipo de array. Porque lo que voy a hacer aquí dentro, que voy a explicar en un segundo, es los Puntos, valor de punto objetivo. Ahora bien esto es o nombre de punto objetivo. Entonces, básicamente, cuando se quiere especificar una clave de un objeto dinámicamente así, sin tener que poner, por ejemplo, nombre, edad, trabajo, o lo que sea. Estamos diciendo que mira, si estoy escribiendo esta entrada, esta entrada, esta es la que estoy haciendo mi onchange. Estoy ejecutando mi manejador onchange cada vez que estamos escribiendo en él. ¿ De acuerdo? Por lo que esto, tenemos acceso al evento. Y debido a que tenemos acceso a los eventos, puedo decir, vale, Siempre que voy a actualizar esto, estoy actualizando el estado, el usuario actual. Y aquí dentro voy a agarrar E dot nombre de punto objetivo. Por lo que el nombre de punto objetivo de punto de evento va a ser este valor que tenemos en aquí nombre. Entonces sé que en mi estado aparecen, voy a actualizar estas claves aquí, ya sea nombre de punto objetivo. Entonces así es como puedes agarrar las llaves dinámicamente. Entonces ahora aquí, solo voy a hacer E dot targets valor de punto. ¿ De acuerdo? Entonces voy a poner en esta clave que tenemos aquí, el valor que tienes en ese insumo que sólo estás poniendo. De acuerdo, así que esto debería estar bien aquí. Ahora. Creo que ahora deberíamos estar todos bien. Deberíamos estar todos bien. Ahora, solo, después de que hagamos esto, hagámoslo. Y vamos a hacer un console.log de estos del estado de usuario. Sólo asegúrate de que esto está funcionando console.log de. Voy a quitar este aquí arriba para que no complete usuario estado dot usuario actual. Está bien, probémoslo. Tan solo refresca. Voy a poner un T E L M0. Y ahora, Vale, falta algo aquí. Lo que nos falta ahora recuerdo lo que nos falta es que en nuestra ventana de entrada, como pueden ver, configuramos el valor de la entrada para que esté todo el tiempo como vacío. Por eso es como reiniciarse todo el tiempo. Queremos que estos valores que tienes en año sean todo el tiempo. El mismo valor que tenemos aparece en el estado. Entonces voy a poner por este valor de la primera entrada, quiero ser lo que esté dentro del estado del usuario, punto, usuario actual. Como puedes ver, nombre de punto, ves, tienes todas estas cosas viniendo a ti por TypeScript. Entonces, solo copiemos esto. Vamos a hacer lo mismo aquí ahora para la H, lo que sea que esté en el estado. Y luego lo mismo aquí abajo para el trabajo. De acuerdo, vamos a refrescar esto. Vamos sólo a entrar aquí. Voy a poner t L M0. Y como pueden ver, después de que escribiera, todo viene aquí en la consola que mi estado está teniendo h, Nada, trabajo, nada. Nombre Thelma. Si voy a poner aquí ahora, por ejemplo, 35. Como puedes ver, tenemos ahora edad 35, nombre Thelma. Y pongamos un trabajo. ¿ Dónde está? Entonces vamos a poner, por ejemplo, un desarrollador de software. Y ahí está. Ahora estamos agarrando todos estos valores que queremos y salvando, salvándolos en el estado. Está bien, Así que eso es todo para este video se está poniendo un poco demasiado largo. Y luego en el siguiente, realidad podemos agarrar estos valores que tenemos aquí y simplemente añadirlos aquí en la página. Está bien, así que te veré en el próximo. 4. Mostrar lista de usuarios en el navegador: Muy bien, bienvenido de nuevo. Entonces ahora vamos a agregar estos usuarios que acabamos de escribir. Vamos a agregarlo a nuestra página. Por lo que en primer lugar, tenemos aquí un formulario con todas estas entradas y tenemos un botón con el tipo de envío queremos crear aquí un nuevo evento el cual va a estar en enviar. Entonces básicamente estos eventos, onsubmit significa que cada vez que pulses ese botón aquí abajo de enviar, vas a enviar todos estos valores y hacer algo. Entonces veamos qué podemos hacer ahora. Vamos a crear aquí función llamada enviar formulario, así. Entonces vamos a crear esta forma. Entonces, entremos aquí. Hagamos const enviar formulario. Está bien, entonces ahora esto va a ser lo mismo aquí dentro. Esta función, no vamos a devolver nada. Entonces, especificémoslo como vacío. ¿ Está bien? Y luego dentro de ella, vamos a tener en otro otro tipo de evento diferente. Y el evento que queremos tener aquí para cuando estés enviando un formulario, es un punto React viendo evento tético, ese es el uno. Por lo que siempre que envíes un formulario y quieras tener acceso al evento que tienes ahí dentro. Este evento de aquí va a ser con un tipo de reacciona en ese evento. Y ahora, como saben, cuando envíes un formulario, básicamente vas a enviar este formulario a otra página o a esta misma página, y vas a recargar la página. Entonces si hacemos eso, vamos a perder nuestro estado y todo lo que tenemos aquí dentro. Por lo que queremos evitar que cada vez que enviemos este formulario, queremos hacer un evento. Y como puedes ver, mira, la primera vez que hice E dot es incluso renunciar a todos los diferentes tipos de opciones que puedo hacer con este tipo de eventos. Entonces voy a poner aquí ese punto prevenir default. Yo solo estoy haciendo esto para evitar que la página se recargue. Puedes probarlo si quieres. Entonces ahora que tenemos esto, lo que quiero hacer es aquí arriba, chicos, ¿recuerdan cuando teníamos este estado de usuario con el usuario actual dentro? Yo quiero que el estado ahora mismo tenga ¿qué? Tener un usuario actual, pero también tener aquí un todos los usuarios. Y estos todos los usuarios que vamos a tener aquí dentro va a ser una matriz porque va a tener muchos de estos usuarios dentro. Entonces va a ser una matriz con muchos de estos usuarios. Como pueden ver, ahora, estamos teniendo algunos, algunos errores aquí diciéndonos esa mirada. Dijimos que nuestro usuario estado aquí, mira, especificamos el tipo. Dijimos, vale, nuestro estado de usos va a ser un objeto con el valor del usuario actual. Y entonces cada uno de estos usuarios actuales va a estar con el tipo de una interfaz de usuario que es nombre distaff, namestring h, string y así sucesivamente. Muy bien, entonces nos estamos perdiendo a todos nuestros usuarios. Por lo que podría entrar aquí ahora y poner, por ejemplo, a nuestros todos los usuarios y demás. Pero esto se está haciendo demasiado tiempo ahora, creo que es mejor para nosotros crear realmente. Y ahora esa interfaz, esta vez para nuestro estado de usuario, acuerdo, creo que esa es una mejor idea. Entonces hagámoslo. Vamos a entrar aquí y hacer una interfaz. Porque queríamos crear estos para un objeto básicamente. Y vamos a llamar a esto a todos los usuarios int como corto solo para interfaz. Creo que me perdí algo aquí arriba. Entonces esto, cuando estás creando una interfaz, en realidad no necesitas pasar estas comas, solo necesitas pasar estos puntos y coma. Entonces cuando creas una interfaz no es como realmente un objeto. Por lo que solo puedes hacer nombre, cadena, h, cadena, y así sucesivamente sin tener que pasar las comas. Por lo que estamos creando estas interfaz para este estado de usuario. Entonces básicamente lo que nuestro estado de usuario tiene ahí dentro, tenemos un usuario actual. Entonces pongamos eso aquí. ¿ Cuál es el tipo de este usuario actual? Ya dijimos, Ok, el tipo de este usuario actual es este objeto que tenemos aquí dentro. De acuerdo, así que pongamos que esta es una interfaz de usuario como lo hicimos aquí arriba. De acuerdo, entonces para este, todos estamos bien. De acuerdo, ¿cuál es el siguiente valor que tenemos dentro de nuestro estado de usuario? Tenemos a todos los usuarios. Entonces vamos a agarrar eso. Pongámoslo aquí. Y ahora, lo siento, porque tenemos aquí una matriz, ¿de acuerdo? Tenemos que especificar aquí como esta matriz. Y así esta es la forma en que puedes decirle a TypeScript que el valor que tenemos aquí es una matriz. Usted dice, esto es una matriz. Y ahora con estos menos que, mayores que firmar este tipo de llaves de cocodrilo, tienes que decir: Vale, ¿qué tipo de arreglos lo, qué tipo de cosas vas a poner dentro de este objeto? las cosas que voy a poner dentro de estos objetos, van a ser objetos como estos van a ser objetos con nombres, edad, y trabajos. Porque esto va a ser como múltiples usuarios que vas a poner dentro. ¿ De acuerdo? Entonces si lo que vamos a poner dentro de esta matriz va a ser todas las cosas como nombre, edad, y objeto. Al igual que para Z, vamos a poner como varios de estos objetos como este. De acuerdo, cada uno de estos objetos, tienen la forma, tienen esta interfaz. Entonces vamos a decir, vale, estos todos los usuarios que tenemos aquí va a ser una matriz. Y dentro de la matriz, lo que vamos a tener son estos objetos con esta interfaz de usuario. De acuerdo, entonces todos estamos bien aquí. Entonces ahora que tenemos esta interfaz lista para nuestro estado de usuario, cuando estamos especificando aquí nuestro estado de EU. Simplemente eliminemos todo lo que hay dentro de aquí porque estaba ocupando demasiado espacio. Y ahora dentro de estos estados norteamericanos, ¿cuál es la forma de estos estados norteamericanos? Qué tipo de tipos deberíamos tener ahí dentro. Este, todos los usuarios de la interfaz. Sólo pasémoslo aquí y miren, todo está funcionando bien ahora. Entonces vamos a decir mira nuestro estado estadounidense, estado usuario, el volumen que vamos a pasar al estado estadounidense va a ser una interfaz de todos los usuarios. Por lo que significa que esto va a ser un objeto con un usuario actual. Mira, es el usuario actual aquí. La forma de este usuario actual, ese tipo de estos usuarios actuales va a ser una interfaz de usuario. Mira con el nombre de edad de cuerda. Eso es todo. Esto es lo que tienes. Y entonces también tenemos a todos los usuarios, que es una matriz en este momento está vacía, pero sí importa. Entonces decimos que es una matriz. Y lo que sea que esté dentro de esta matriz es, va a ser este tipo de interfaces de usuario. Van a ser objetos como este. De acuerdo, ya tenemos esto. Entonces ahora mira, TypeScript incluso nos está diciendo algunos errores aquí. Mira, porque desde nuestra función anterior, el manejador onchange, cuando estábamos actualizando el estado, mira, estamos diciendo eso, vale, vamos a actualizar el estado. Habríamos solo usuario actual, pero ahora tenemos este aquí que todos los usuarios. Entonces lo que podemos hacer es, vale, desde nuestro estado de usuario, en lugar de solo pasar esto, Traigamos el estado de los usuarios del operador spread. Y ahora lo que queríamos traer de nuestro estado de usuario va a ser el ¿Qué más? El, oh, sí, sólo queremos traer esto. Simplemente queremos traer esto el estado de usuario. Entonces, básicamente cuando dices, vamos a traer el estado de usuario, significa que vamos a traer todos estos. Esto es lo que hace el operador de spread. Vamos a copiar todos estos. Y luego, de acuerdo, vamos a sobrescribir a este usuario actual con estos nuevos valores. Entonces básicamente haciendo esto, copias todos estos aquí. Por lo que ya tenemos este valor ahí dentro. Y entonces estamos como reemplazar estos viejos por éste. De acuerdo, entonces todos estamos bien aquí. Ahora en nuestro Formulario de Enviar, ¿ qué queríamos hacer? Entonces déjame solo ver, conseguimos nuestro Formulario de Enviar y queríamos actualizar nuestro estado. Por lo tanto establecer el estado del usuario. Nosotros queremos, en primer lugar. Hacer un usuario actual. Entonces en el usuario actual, lo que voy a hacer es como cuando voy a agregar un nuevo usuario, quiero que se restablezcan nuestros valores que tenemos en nuestras entradas. Entonces voy a hacer nombre vacío así. Yo lo voy a hacer a la edad vacía también. Y voy a hacer un trabajo vacío así. Por lo que restablecemos todos los valores del usuario actual básicamente, por lo que el, la entrada se ha ido todo. Y luego vamos a actualizar a nuestros todos los usuarios. Entonces esta es una matriz. Y ahora lo que vamos a tener en una matriz, porque podríamos estar agregando múltiples usuarios. Siempre se quiere hacer un operador de spread del estado del usuario. Uops, usuarios, Estado dot todos los usuarios. Entonces esto significa que si por alguna razón agregaste ya varios usuarios, quieres traer a todos los usuarios que ya están dentro de esta matriz. Entonces eso es lo que estamos haciendo con el operador de spread. Y luego puedes agregar tu nueva. Usuarios estacas puntan usuario actual. Por lo que el usuario estado dot usuario actual. Entonces los vas a agarrar a todos que eran entonces MP4 y luego vas a agregar tu nueva. De acuerdo, entonces creo que todos estamos bien en este momento, déjame simplemente borrar esto. Entonces voy a hacer aquí console.log del estado del usuario para ver si esto realmente está funcionando. Correcto. Entonces vamos a refrescar la página que voy a poner aquí. Cuéntame. Voy a poner aquí 32. Voy a poner aquí, por ejemplo, esto va a ser un desarrollador de software. Y ahora voy a presionar Agregar usuario. De acuerdo, Entonces esta es nuestra consola que tenemos. Tenemos a nuestros todos los usuarios y mira eso dentro de nuestros todos los usuarios. Tenemos a estos usuarios, sólo el que lleva el nombre de Tom. Ah, 32, nombre del puesto y demás. De acuerdo, entonces ahora todo esto está bien. Vamos a poner estos aquí dentro de nuestra y de nuestra página para que podamos ver que su valor. Por lo que podemos hacer eso rápidamente. Podemos hacerlo creando estas variables. Vamos a entrar aquí y los contras a todos los usuarios va a ser igual a nuestro estado de usuario punto todos los usuarios. Y luego vamos a hacer un mapa de puntos. Muy bien, y así básicamente una función de mapa de puntos en JavaScript te permitirá recorrer una matriz y luego hacer lo que necesites hacer con ella. De acuerdo, Entonces vamos a hacer aquí una función. El primer volumen va a ser el usuario por el que vas a recorrer. Este va a ser el valor de su matriz. Y el segundo va a ser el índice de la misma. ¿ De acuerdo? Por lo que la función is.na tiene acceso a estos índices, que va a ser la primera vez que ejecute el bucle. El índice es 0, la segunda vez es una y así sucesivamente. Y el usuario va a representar el objeto que cada vez que estás recorriendo en bucle en la matriz. De acuerdo, así que tenemos que hacer aquí, en realidad, mira, tendrías que hacer algo como esto. Este es nuestro mapa del punto está funcionando así que necesitas volver siempre así y luego pasar lo que quieras dentro. Pero en lugar de tener disfunción con estos tirantes rizados así, sólo voy a reemplazarlos así por estos paréntesis normales. Entonces cuando tienes este tipo de paréntesis, significa que vamos a devolver lo que esté dentro de aquí, que no tengas que tener esa palabra clave de retorno. Entonces lo que sea que quiera regresar aquí en este momento sólo va a ser, por ejemplo, un div. Esto es igual que rápido hacer algo. Por ejemplo, un H2 va a tener el nombre de usuario. Entonces porque esto va a representar estos valores. Entonces tenemos el trabajo de agente de nombres. Entonces hagámoslo. ¿ Dónde estaba? ¿Dónde estaba aquí? Entonces nombre de usuario, voy a hacer copiar esto más. Entonces nombre de usuario, edad del usuario, y trabajo del usuario. Muy bien, así que tenemos todos estos. Pasemos aquí una llave. ¿ De acuerdo? Entonces esto es solo reaccionar quiere que pases una clave única a cada uno de estos elementos cada vez que los estés creando. Y eso es todo. Entonces usemos esta variable de todos los usuarios. Y sólo pasemos que nuestra forma. Entonces sólo voy a ponerlo aquí, necesito poner estos entre llaves. Muy bien, veamos si esto está funcionando. Vamos a refrescar la página. Vayamos aquí. Dime que voy a poner 33. Voy a poner aquí eso es un piloto y vamos a presionar Agregar usuario. Ahí está, termo, éste, y éste. De acuerdo, entonces todos estamos bien aquí. Vamos a intentarlo de nuevo. Digamos David. David va a tener 35 años y va a ser desarrollador de software. Voy a presionar Agregar, y como pueden ver, estamos agregando cada una de ellas aquí. Está bien. Entonces sí, todos estamos bien aquí dentro. Entonces creo que eso va a ser todo para este video. En el siguiente, sólo vamos a aprender cómo podemos realmente hacer clic aquí en cada uno de estos elementos y al igual que eliminarlos. Entonces si quieres eliminar a cada uno de estos usuarios, bien, así que eso es todo para este video y te veré en el siguiente. 5. Eliminar el usuario de la lista: Muy bien, entonces es hora de que empecemos a eliminar todos estos valores que estamos agregando. Entonces para eso, voy a entrar aquí y donde tenemos a estos todos los usuarios que tenemos aquí dentro. Voy a pasar aquí probablemente como un botón. Y este botón va a decir que el usuario principal podría ser cualquier cosa. Sólo voy a llamarlo borrar usuario. Y voy a poner aquí un evento onclick. Por lo que siempre que voy a dar clic en este botón, quiero realmente eliminar a este usuario. Entonces voy a poner aquí un manejador de Eliminar. ¿ De acuerdo? Esta va a ser nuestra función que nunca ejecutaremos cada vez que queramos eliminar a estos usuarios. Entonces los muchachos entran aquí. Hagamos un manejadores de eliminación. Por lo que toneladas Eliminar manejador. Esta va a ser una función igual a esta. Y ahora la cosa es, quiero que esta función sea igual a estas en nuestra función. Y yo quería pasar el valor del índice porque como puedes ver, mira, cuando estamos pasando aquí esta función, ¿de acuerdo? Y queremos agarrar el índice de estos usuarios en particular, por lo que sabemos qué usuario somos en realidad, qué usuario nos gusta en realidad tratar de eliminar. Por lo que esta función aquí dentro está tomando este perímetro de índice. Entonces pasemos aquí en la parte superior. Esto va a ser un índice y el tipo de esto va a ser un número porque eso es lo que estamos pasando aquí es un número y esta función no está devolviendo nada. Entonces pongamos aquí vacío. Muy bien, entonces, ¿qué va a hacer esta función? En primer lugar, voy a crear una nueva variable llamada, por ejemplo, const, usuarios de filtro. Porque los vamos a filtrar. Y lo que vamos a hacer son usuarios. Por lo que los usuarios Estado punto, todos. Entonces, entonces usuarios, ¿por qué no es esto? A veces se pone un poco más lento porque me olvidé de poner el signo de igual aquí. Por eso. Entonces tenemos estado de usuario, todos los usuarios. Ahí es donde queremos ahora recorrer estos. Y voy a hacer aquí un filtro de puntos. Entonces básicamente el filtro de puntos, lo que hace es otra de estas funciones de JavaScript que recorreremos una carrera. Entonces cada vez que voy a recorrer el array de mis todos los usuarios. Entonces si recuerdas que todos los usuarios tienen algunos objetos dentro, como con el nombre, la edad y así sucesivamente. Entonces vamos a representar cada uno de esos objetos con este perímetro de usuario. Y entonces voy a poner aquí ese índice. Entonces este va a ser el índice actual del bucle por el que vamos a pasar. Entonces vamos a poner esto aquí, y voy a poner paréntesis, no llaves. Por lo que puedo igual que devolverlos de inmediato. En realidad, no, voy a poner aquí esta vez los tirantes rizados, sólo para que ustedes puedan ver que se puede hacer de una manera u otra. ¿ De acuerdo? Entonces cada vez que pones estas llaves rizadas, como lo hicimos, ahora, tenemos que entrar implícitamente aquí y solo hacer retorno de lo que quieras devolver. De acuerdo, entonces aquí dentro, ¿ vamos a devolver qué? Entonces vamos a recorrer todos los valores del estado y sólo queremos devolver a los usuarios que el índice. Entonces si recuerdas, estos índices aquí es del usuario aquí abajo en el que hiciste clic. Solo se desea devolver al usuario. Si el índice que haces clic aquí abajo va a ser diferente estos índice de todos los usuarios que estás tratando de igual igual que bucle. Entonces básicamente lo que estamos haciendo es como imaginar que estoy dando click en el primer usuario. Este es el usuario 0 porque esa es la forma en que indexan cuenta, cuenta desde 012, como una matriz. Entonces imagina que haces clic en el usuario 0. Cuando estemos ejecutando estos usuarios filtrados, vamos a decir, Ok, esta vez voy a recorrer en bucle a todos los usuarios. Estoy recorriendo el primero, el 0 es mi índice. Éste al que doy clic aquí abajo. Este es el 0. ¿ De acuerdo? Por lo que pasamos aquí un 0 es 0. El frente. Entonces estas IA, que va a ser 0, no, no son diferentes, son iguales. Por lo que significa que a estas primera persona en la que estamos haciendo clic se va a quitar y vamos a devolver todas las demás porque el índice va a ser diferente para los demás. Entonces eso es lo que puedes hacer con una función de filtro. Y así ahora que estamos filtrando aquí, nuestros usuarios, lo que podemos hacer es solo actualizar el estado. Entonces voy a poner aquí el estado celular del usuario. Y voy a poner el punto-punto. Tenemos que agarrar el estado de usuario, lo que fuera que hubiera ahí de antes. Y esta vez, lo que podemos hacer es que vamos a hacer a todos los usuarios. Esto es lo que hay dentro de nuestro estado. Y el nuevo valor va a ser lo que haya aquí en los usuarios del filtro. Entonces sólo voy a tratar de explicar un poco más rápido. Entonces, antes de que me mueva chicos, solo recuerda que cuando hagas el filtro de puntos, lo que haga va a crear una nueva matriz basada aquí, este usuario de filtro variable va a ser una nueva matriz. Y cuando estés filtrando a través de todos estos valores, recuerda que necesita estar basado en una condición de verdadero o falso. Así funciona la función de filtro. Y si usted está haciendo bucle, por ejemplo, para el primer usuario, usted revisando es el índice que hace clic aquí abajo. Diferente al índice actual de estos bucle. Si son iguales, que se ven en la primera vez que vas a poner aquí es 0 que haces clic aquí abajo, diferente a 0, que es el primer bucle. No, esto no es cierto. Entonces significa que estos usuarios aquí no se van a pasar a la, a esta matriz. Entonces si le pasas al segundo usuario, lo que vamos a hacer es como Look, haces clic a este usuario, esto sigue siendo lo mismo. Se hace clic en el primer usuario con el índice de 0. Vamos a entrar aquí. En el segundo bucle. El índice es uno. Entonces vamos a decir que este índice donde hicimos clic viniendo de aquí arriba es diferente de uno. Sí. De acuerdo, entonces vas a regresar, por ejemplo, al segundo usuario. No sé lo que fuera que fuera ahí. Y así como eso. Está bien. Entonces estoy seguro de que ustedes ya saben todas estas cosas. Yo era como tratar de explicar un poco más. Muy bien, entonces ahora que tenemos aquí el estado de usuario establecido, deberíamos poder ahora eliminar a ese usuario en el que estamos haciendo clic. Está bien, déjame, ya tenemos estos aquí. Busca, voy a dar click en este primer usuario. Voy a hacer clic en el tardío EU, ya se ha ido. Voy a dar click en el segundo usuario y se ha ido. Y, y creo que eso asientos, y creo que eso es realmente lo que tenemos aquí dentro. Ahora. Lo único que voy a hacer ahora hay como dos pasos extra ahora para terminar este proyecto, que va a ser, y podríamos tratar de desacoplar un poco más estos. Vamos a tratar de mover estas cosas que tenemos aquí, estos todos los usuarios y demás. A lo mejor podríamos convertir estos en su propio componente porque por el momento estamos haciendo todo en un componente no es como una idea realmente buena. Entonces en el siguiente video, Vamos igual que tratar de separar estos un poco más en un componente diferente y así sucesivamente. Y luego el último video, sólo nos vamos a gustar, estilo a todo para que sea agradable si quieres. Está bien, así que eso es todo. Te veré en el próximo. 6. Refactor y optimiza el código: Muy bien, bienvenido de nuevo. Entonces, empecemos con estos refactor de nuestro proyecto. Entonces vamos al interior de nuestra carpeta fuente y voy a crear una carpeta llamada componentes. Entonces esto podría ser si quieres crear como múltiples componentes y así sucesivamente. Entonces lo que voy a hacer aquí es que voy a crear un nuevo archivo, un nuevo componente llamado user.email ASX. Recuerda que estamos usando TypeScript, así que necesitas poner estas extensiones y solo voy a crear por ahora también un CSS de punto de usuario así. Entonces esto debería ser todo bueno. Ahora, solo creemos aquí estos proyectos. Entonces ahora voy a hacer importación. Voy a importar React desde React. ¿ De acuerdo? Voy a importar el punto slash usuario dot CSS. Esto tiene que ser mayúscula porque ese es el nombre del archivo. De acuerdo, tenemos todos estos. Ahora, hagámoslo, vamos a crear el componente. Hagamos usuario const. Y esto va a ser un reacciona puntos f, c. ¿De acuerdo? Por lo que esto va a ser un React componentes funcionales. Y voy a poner esto aquí así. Muy bien, entonces ahora que hemos creado nuestros componentes funcionales React y vamos a tener retorno interno. Y lo que queremos volver aquí. Voy a tener un diff con un nombre de clase. Yo sólo voy a poner aquí algunos nombres de clase que vamos a aplicar porque en el siguiente video, realidad nos va a gustar el estilo. Entonces solo voy a poner las clases ahora por ahora y entonces podemos hacer el resto. Entonces aquí, voy a tener un div con un nombre de clase de fila. Justo así. Y, y insights, voy a tener un H2 que llamemos, ¿de acuerdo? Y luego un párrafo al que vamos a tener el nombre, por ejemplo John o lo que sea. De acuerdo, entonces tenemos este nombre y luego John, y luego vamos a hacer una regla horizontal como esta. Creo que esto necesita estar dentro de aquí. De acuerdo, vamos a asegurarnos de que estamos organizando bien el código. De acuerdo, pues mira, tenemos estas tarjetas. Tenemos una fila con este. Tenemos una regla horizontal solo para crear como alguna división. Y luego voy a poner otra fila, déjame simplemente copiar estos en realidad. Y luego voy a pasar estos también. Creo que va a ser muy similar a lo que estamos haciendo. Sí. Entonces voy a copiar estos una vez más. Así. Entonces esto va a ser, ¿no fue h? Y voy a poner aquí, por ejemplo, 23. Y voy a poner aquí abajo, esto es h, y este es John. De acuerdo, así que esto va a ser un chofer. Esto no necesita esto. Y por último, sólo necesitamos un botón. Y vamos a necesitar estos nombre de clase necesita ser capital. Y vamos a poner aquí botón de borrar. Y vamos a decir borrar usuario podría ser cualquier cosa. De acuerdo, así que tenemos aquí nuestros componentes. Entonces básicamente solo vamos a quitar las cosas que teníamos en el otro componente de la app. Entonces, solo hagamos una exportación de nuestro usuario. De acuerdo, así que hagamos exactamente eso. Exportar valor predeterminado. Exportar valores predeterminados usuario igual que eso. Está bien, así que está todo bien. Creo que todos estamos bien aquí dentro. Tenemos una importación React. Eso es mejor. Creo que había como algún tipográfico ahí dentro. De acuerdo, así que volviendo a nuestra app dot TSX, donde tenemos a nuestros viejos usuarios. Ahora bien, no queremos estar teniendo estas cosas todo el tiempo, este tipo de div aquí, porque básicamente acabamos de crear nuestro propio componente. De acuerdo, entonces hagámoslo. Solo comentemos este fuera. Y qué vamos a regresar cuando estemos buceando por todos los usuarios del estado. Lo que vamos a hacer es que vamos a tener nuestro componente de usuario. Ahora, obviamente, si tenemos este componente de usuario aquí, necesitamos importarlo en la parte superior porque nunca lo importamos. Entonces vamos a importar eso. Hagamos importación. Voy a decir usuario. No necesito tener las llaves porque sí exportamos por defecto. Siempre que realices la exportación predeterminada, no necesitas poner esas llaves. Entonces, ¿de dónde queremos exportar esto? Voy a poner slash de puntos para que podamos mirar en el mismo nivel de directorio. Queremos ir dentro de los componentes y queremos agarrar nuestro archivo de punto de usuario TSX. Simplemente puedes hacer usuario dot. Esa reacción entenderá que ese es el expediente que estás tratando de agarrar. De acuerdo, tenemos al usuario. Ahora, aquí está la cosa. ¿ Cuál es mi bucle? En tanto que el bucle, está aquí. Ahora dentro de este componente, aquí es donde realmente necesitamos empezar a pasar esos valores que necesitas agarrar. Entonces los valores que voy a pasar. Entonces esto es básico de React, pero solo soy como decírtelo. Por lo que necesitamos pasar algunas propiedades dentro de estos componentes para poder agarrarlos luego dentro con los apoyos. Entonces voy a poner aquí, crear una propiedad de nombre. Y el valor de la misma va a ser el usuario. Nombre de punto de nuestro bucle que hicimos aquí. Justo así. Entonces creando esto, creamos otra que va a ser la H y otra propiedad que va a ser el usuario dot h. Y finalmente, voy a pasar uno que va a ser el salto. Y este va a ser el trabajo de punto de usuario. Ahora, hay un problema aquí, chicos, que es en el momento en que creamos nuestro componente, nuestro usuario, nunca especificamos qué tipo de propiedades vamos a pasar a él. Nunca especificamos qué tipo de tipos tenemos aquí. Entonces necesitamos hacer eso. Muy bien, entonces en nuestro usuario.email ESX, necesitamos especificar aquí, vale, podrías pasar aquí, por ejemplo, indicaciones como este porque así es como agarras todas estas propiedades. lo tanto, graficaría, por ejemplo, nombre de punto de los props, puntales de punto, trabajo de punto, y así sucesivamente. Con esto. O podrías entrar aquí ahora. Y en lugar de tener los apoyos, estos pueden estructurar este objeto y simplemente agarrar estos valores de inmediato como estos, como nombre A la edad y ¿qué más fue? El nombre, edad y trabajo. Ahora, obviamente, por el momento, no sabemos nada de estos valores. Nunca especificamos el tipo de esto. Entonces qué podemos hacer aquí para especificar el tipo de esto, Vamos a volver a nuestro app.js x. y ¿recuerdas cuando creamos estas interfaz para cómo debería verse un usuario, como con la cadena, la edad, el trabajo y string. Vamos a cortar esta interfaz. Pintar. Acabemos de seleccionar, cortarlo desde aquí. Vamos a nuestra interfaz de usuario, nuestros componentes de usuario. Vamos a pegarlo aquí. Y ahora podemos decir mira, estos componentes que estamos creando, que es un componente funcional React. Pongamos aquí este tipo de soportes angulares. Y vamos a decir, vale, estos valores que tenemos aquí, el nombre, la edad y el trabajo, necesitan tener esta forma de estas interfaces, vale, así. De acuerdo, porque mira, yo sólo podría quitar este de aquí y sólo entrar aquí. Mira, esto es una cuerda y esto es algo que potencialmente podríamos hacer eso, pero sólo podemos pasar aquí, ¿cuáles son los valores que vamos a pasar por dentro? Entonces hagamos user int, pasémoslo aquí, y todos estamos bien. De acuerdo, Entonces estamos usando todo lo que necesitamos. Ahora, hay un problema porque si recuerdas aquí, cuando estábamos creando nuestra interfaz para el estado, dijimos, vale, el usuario actual va a tener una interfaz de interfaz de usuario. Pero ahora no tenemos éste aquí. No lo tenemos. Entonces porque no lo tenemos. Esta interfaz que tenemos aquí dentro que estamos usando para este componente en particular, en realidad podemos exportarlo, ¿de acuerdo? Por lo que podemos exportar estos interfaz. Por lo que luego podemos usarlo en el archivo app.js exe. Entonces hagámoslo. Voy a hacer importación. Y ahora voy a poner aquí estos así, debería estar bien. Sí, voy a poner usuario. En realidad, voy a agarrar esto porque ya estamos importando algo de este archivo. Entonces hagámoslo. Por lo que el usuario int. Entonces estoy usando este corchete angular, estas llaves porque solo lo estamos exportando. No por defecto. Por defecto es el propio componente aspecto. Por lo que el componente en sí es por defecto no necesitas llaves y este solo es exportar. Necesidad de pasar los tirantes rizados. Muy bien, entonces ahora que tenemos la interfaz de usuario ahora se está usando aquí correctamente. Eso da miedo que estos importantes que tuve, sólo cancela esto. Está bien. Entonces todos estamos bien ahora con todos estos. ¿ Nos falta algo? Déjenme sólo doble comprobación. Sí, nos falta algo ahora. Nos falta ahora algo que es básicamente ahora este botón, cuando hacemos clic en él, por el momento no está haciendo nada. Permítanme simplemente borrar esto. Entonces mira, en realidad ni siquiera vemos ni siquiera vemos, vemos, vemos el nombre, vemos la edad y la eliminación. Una mirada al hacer clic aquí en el Eliminar, no está pasando nada. De acuerdo, entonces necesitamos pasar esta función aquí abajo. Entonces hagámoslo. Entonces, ¿dónde vamos a recorrer? ¿ Dónde estamos paseando por aquí? Pasemos la llave también. Si ustedes recuerdan, siempre necesitamos pasar solo una llave solo para asegurarnos de que eso no se queje de estos. Entonces este es el yo y necesitamos pasar aquí, luego la función de borrar básicamente. Entonces déjame ver. Voy a descomponer estos en diferentes líneas para que podamos ver esto mejor. Se puede descomponer esto también si se quiere. Para que puedas ver mejor. Entonces voy a poner aquí el usuario de borrar. Este va a ser el nombre de mi utilería. Y lo que estamos haciendo aquí es igual que lo hicimos aquí arriba es lo mismo. Ok, Eliminar manejador I. Así que como puedes ver en nuestro usuario, especificamos esta interfaz la cual tiene un nombre, edad, y trabajo. Pero nunca especificamos esta función del usuario delete. De acuerdo, mira, mira nuestro nombre de interfaz, edad, trabajo, pero nunca especificamos el usuario de borrar. Entonces debido a que estamos pasando esta propiedad, eliminar usuario. Entonces vamos a entrar aquí, poner borrar usuario. Estos necesitan ser con un tipo de una función que no devuelva nada. Entonces así es como especificas el tipo de una función que no devuelve nada. Si esta función estuviera devolviendo una cadena, pondría, por ejemplo, algo como esto. Si pasaras una propiedad aquí, por ejemplo, como color, pasaría algo como esta cadena. Entonces déjame solo quitar esto porque no necesitamos solo estoy tratando de explicar esta parte. Entonces me voy a quedar vacío. Por lo que ahora deberíamos poder, cada vez que hacemos clic en estos botones. Por lo que voy a poner en click onclick. Vamos a ejecutar la función que necesitamos importar de aparecer, que es que el lead, el usuario lead. De acuerdo, entonces vamos a agarrar esto onclick. Vamos a ejecutar esto. Y creo que eso es todo. ¿ Me estoy perdiendo algo? propiedad le falta el lead al usuario. Sí. Entonces aquí en la parte superior, usuario actual, que dijimos aquí arriba, es una interfaz de usuario. Por lo que significa que nos falta esa función ahí también. Tenemos que pasarlo. Entonces hagámoslo. Hagamos justo como una función. Por lo que este es el usuario principal. Y esta función sólo va a ser una función que no devuelve nada como un, un objeto vacío. Eso está bien. Entonces una cosa que lo conseguimos todo. Así que vamos a ver, propiedad delete user le falta un tipo pero requerido en el usuario. ¿ Qué puse aquí? Entonces tenemos al usuario principal. Tenemos al usuario principal. Entonces, ¿qué le falta? Línea 39. Por lo que la propiedad del usuario actual eliminar usuario le falta tipo, cadena de nombre, h, cadena de trabajos. Entonces tenemos todos estos, ¿verdad? Entonces es cuando estamos actualizando el estado. Entonces cuando estamos actualizando el estado como estamos restableciendo todo en el Formulario de Envío. También necesitamos pasar como una función vacía. Porque estamos restableciendo, tenemos que poner todo en eso. Así que así como eso. Entonces el usuario principal, una función que no devuelve nada. De acuerdo, Entonces deberíamos estar todos bien. Creo que todos estamos bien ahora, solo eliminemos las cosas que ya no necesitamos. Creo que todos estamos bien. Vamos a intentarlo. Voy a poner Talmud, voy a poner la edad. Voy a poner desarrollador de software son usuario, eliminar usuario y todos estamos bien. De acuerdo, Así que déjame añadir, esto va a ser pilotos y voy a añadir otro usuario que va a ser Peter. La edad va a ser 18 y es un artista. De acuerdo, agreguemos al usuario. Permítanme que ahora haga clic en el usuario principal o algo así. Entonces vamos a hacer sólo la tapa. Eso es todo. Eliminar, Eso es todo. De acuerdo, Sólo una cosa más que me gustaría cubrir antes de terminar este video, que sería, en realidad se puede, ya sabes, cuando se están especificando todas estas diferentes formas de campos, potencialmente se podría pasar algunos, por ejemplo, la h que tenemos aquí como campo opcional. ¿ De acuerdo? Entonces cuando pasas aquí este signo de interrogación después de este tipo de tipo que estás diciendo. Por lo que significa que se puede crear un objeto con todos estos valores para parecerse a nombre, edad, trabajo, etcétera. Por defecto, te requerirá todos estos valores. Pero cuando pases aquí, este tipo de interrogantes va a ser como opcional el valor, ¿de acuerdo? Entonces porque tenemos estos así, ahora, podría haber algunas cosas que necesitamos actualizar. Entonces éste, por ejemplo aquí arriba, estos de la edad, lo que queremos hacer es si se define la edad, vale, así que voy a poner fin. Y ahora voy a poner aquí paréntesis. Entonces solo podemos hacer esto así. Entonces si a la H le falta algo, Sí, solo necesito ponerlo así y deberíamos estar bien. Entonces este es el padre. Entonces, ¿por qué esto no funciona? Porque necesito cerrar estos tirantes rizados. Entonces digo aquí es que si tenemos una H, Queremos mostrar esta parte aquí, esta fila que dice la edad y demás. Si no, no lo mostramos. Déjame ver si me falta algo más de aquí ahora. Creo que todos deberíamos estar bien. Entonces esto debería ser igual que opcional, ¿verdad? Vamos a intentarlo una vez más. Voy a pasar aquí sin la H, voy a poner desarrollador de software al usuario. Entonces mira, tenemos nombre y trabajo. Entonces esto no requirió eso. Otra cosa que quiero pasar antes de que me olvide es que en los foros, quiero poner todas estas formas requeridas. Entonces este es un HTML atributos que puedes pasar a los foros como este requirió que básicamente cuando estás tratando de enviar esto, te requerirá ponerlo no voy a poner en la edad porque la edad es opcional. Pero mira, si intentas presentar esto, te requerirá algún valor. Como puedes ver, mira, ahora solo se está quejando de este. Está bien. Entonces eso es todo. Yo solo estoy poniendo aquí Servicios ser Julius. Esto va a ser de 45 años y esto va a ser pintor y raro. Por lo que estos usuarios estaban sin edad, y esto es con la edad. Y podemos eliminarlos. Perfecto. De acuerdo, entonces llegamos al final de este proyecto, chicos. Yo solo voy a hacer un video más solo para darle estilo a estos porque esto podría ser potencialmente un buen proyecto para poner en tu página web de portafolio o lo que quieras hacer con estos realmente. Esto es igual que para que aprendas un poco más sobre TypeScript y reaccione y así sucesivamente. Entonces el siguiente video, que es el último que no tienes que hacerlo es solo opcional. Pero si quieres que esta aplicación se vea bien, solo hagámoslo. Está bien, así que te veré en el último video. 7. Añade diseño CSS: Muy bien, Así que bienvenido de nuevo. Entonces hagámoslo. Simplemente empecemos a peinar estos. Esto no debería llevar mucho tiempo ahora. Entonces lo primero que voy a hacer aquí es que tengo algunos estilizados aquí a un costado, así que solo los voy a agarrar y tú puedes igual que seguir adelante. Entonces voy a eliminar todo lo que tengo en mi app dot css. Y lo primero que voy a hacer es aplicar al fondo, este tipo de color verde. Está bien, así que hasta puedo deshacerme de esto que tenemos aquí. Entonces tenemos este aquí. Ahora en mi app dot TSX. Por lo que mi componente principal, tengo estos nombre de clase de contenedor. Entonces lo que quiero hacer ahí dentro es que solo estoy copiando esto. Simplemente puedes básicamente, no me va a gustar teclearlo cada uno de ellos porque solo puedes pausar el video y simplemente copiarlo. Por lo que tenemos un contenedor con estos margen de ancho máximo 0 auto y así sucesivamente. Entonces sólo va a centrar estas cosas aquí en la página. Entonces voy a alinear mi H1 en la página. Por lo que teníamos estos H1 con título. Entonces solo alinearlo aquí en la página. Y luego nos dieron unas cartas así. Entonces, ¿me perdí algo? Creo que tenía la tarjeta en algún lugar de aquí. Déjame solo doble comprobación. Entonces en mi app.js x, déjame solo revisar. Nos pillamos conteniendo tenemos a nuestros cuatro. Sí, mi forma. Yo quiero pasarle un nombre de clase de tarjeta. Está bien. Y lo que esto hace es en nuestra forma, solo dale este bonito color de fondo de blanco con este tipo de radio borde-y así sucesivamente. Eso es lo que hicimos. De acuerdo, ¿qué más nos estamos perdiendo ahora mismo? Queríamos apuntar a la etiqueta dentro de nuestra forma. Entonces voy a hacer aquí, auto la etiqueta. Y queremos apuntar también, las entradas, solo para darle un buen estilo también. De acuerdo, entrada de tarjeta. Por último, tenemos el botón de enviar. Ese es el último que necesitamos sólo seleccionar. Entonces sólo voy a agarrarlo. Yo sólo voy a entrar aquí, copiarlo. Y es sólo algo simple silenciado. Esto, este video realmente no se trata. Entonces voy a pasar el botón ciudad n. Así nombre de clase de tan aseado BTN. De acuerdo, así que sólo para lucir un poco mejor que simplemente restablecer mi Zoom que tenía en la página. Entonces todo esto se ve mejor. Entonces si iba a poner aquí, así que este es el anuncio de empleo. Mira, estos por sí solo se ven mucho mejor ahora. Entonces sólo nos faltan si no me equivoco, el este. De acuerdo, así que hagámoslo. Vayamos aquí. Voy a hacer mi CSS que necesito para eso. Entonces tenemos, vamos a entrar en el usuario TSX. Déjame ver, ¿tengo un contenedor de usuario ahí dentro? No tengo por el momento, no. Correcto. Entonces hagámoslo. Hagamos eso. Yo sólo voy a agarrar alguna fila que tienen aquí. Pongamos la fila aquí. Eso es lo que necesitamos. Queremos agarrar dentro de la fila y el H2 también. De acuerdo, entonces tenemos éste. Entonces tenemos nuestras filas, tenemos nuestro H2S. Queremos apuntar ahora a los párrafos, que es éste. Entonces agreguemos un poco de estilo ahí, algún margen diez. Y por último, sólo vamos a darle estilo al botón. Entonces hagámoslo. Copiar eso. Entra aquí. Y deberíamos estar bien. Ahí está. Mira, sólo voy a pasar a otro usuario. Entonces esto va a ser, dime, esta va a ser la edad y este va a ser el piloto. Uops, voy a añadir este. Entonces Peter, edad, no voy a poner NEH y voy a poner aquí esto va a ser médico. Por lo que Dr. add usuario y ahí está. Mira, todos eran usuarios. Este es opcional para el H. puedo borrar y agregar todo. Muy bien, llegamos al final de este proyecto con reaccionar y TypeScript. Entonces por supuesto no fue como una extensa donde puedes usar todo lo que puedes hacer con TypeScript, pero creo que es un buen proyecto para que solo empiezas a ver cómo puedes usar TypeScript y simplemente te familiarices un poco más. Está bien, así que espero que disfruten de este curso y los veré en el siguiente. 8. Correcciones finales: O puedo así antes de que finalmente termináramos estos, sólo hay una pequeña cosa que tenemos que sumar aquí porque lo contrario no vamos a ver aquí valores dinámicos. Entonces si agrego aquí dos usuarios diferentes como verás. Entonces si agrego por ejemplo, John, de 25 años, desarrollador de software, Luke va a venir john, 23 años y conductor, no pusimos esto. Y si tratamos de agregar otro usuario, por ejemplo, como Peter, y esto va a ser 18 y el trabajo va a ser un look de piloto lo que va a pasar. Viene todo el tiempo, los mismos valores. Entonces no queremos eso. Realmente queremos poner aquí en nuestros componentes de usuario, el nombre, la edad, y el trabajo que viene aquí desde los accesorios. Entonces actualicemos estos rápidamente donde tenemos a John, no queremos que estos valores sean todo el tiempo iguales. Pero ahora pongamos llaves e inyectemos el nombre. Entonces pasemos aquí el nombre aquí abajo donde tenemos, si tenemos alguna edad, queríamos pasar un lado agente que no va a tener 23 años, pero él va a ser la propiedad de la edad en sí. Y finalmente luego aquí abajo donde tenemos trabajo, No pongamos solo conductor. Bueno, pongamos aquí el trabajo en sí que debería venir aquí desde estas propiedades. De acuerdo, con estos, ahora, nuestros proyectos deberían estar completamente terminados. Ahora, vamos a refrescar la página y vamos a intentarlo para asegurarnos de que está funcionando. Entonces voy a poner a John, voy a poner 28, por ejemplo. Y esto va a ser un desarrollador de software. Voy a dar clic en Agregar usuario. Y como puedes ver, John, cualquier desarrollador de software de ayuda. Entonces sólo voy a poner un ahora un nuevo nombre. Yo sólo voy a poner por ejemplo a Jessica. Y la edad va a ser de 20 años y el trabajo va a ser, por ejemplo, enfermera, voy a dar clic en Agregar usuario. Y luego tenemos a Jessica 20 y ella es enfermera. Intentemos eliminar a uno de los usuarios. Asegúrate de que esto esté funcionando. Probemos con John, y que son chicos. Ahora nuestra aplicación está completamente terminada, nuestro proyecto está completamente hecho. Entonces realmente espero que ustedes hayan disfrutado de esto y los veo en el siguiente.