Reagir com projeto TypeScript

1. Introdução: Muito bem pessoal, bem-vindos a este curso sobre como construir um projeto usando reagir com TypeScript. Então, para este projeto, vamos construir uma lista de contatos. Então deixa-me dar-te uma demo aqui. Vou adicionar um nome para esses usuários. Por exemplo, John, a idade vai ser 25 anos e é um desenvolvedor de software. Vou clicar no usuário e depois vou adicionar outro usuário. Por exemplo, Jessica, ela tem 20 anos e é enfermeira. Vou clicar em Adicionar usuário. Então, toda vez que adicionamos um usuário, vamos vê-lo aqui em baixo empilhando. E então, obviamente, podemos excluir usuários de nossa lista de contatos. Digamos que eu queira deletar John. Ok, eu apaguei John da nossa lista de contatos. Agora, quais são os requisitos para este projeto? Para este projeto, você precisa saber os conceitos básicos de reagir. Então, se você é completamente novo com React, este curso não é para você. Isso é apenas para pessoas que sabem Reagir já, pelo menos o básico, mas eles querem aprender como querer TypeScript nele. Lembre-se que TypeScript vai ser uma maneira para nós realmente adicionar os tipos e saber que tipo de valores nossas funções estão retornando e assim por diante. Você vai aprender tudo isso neste curso e como construir seu projeto, é claro. Então eu espero que você esteja animado para começar este curso e eu vou vê-lo no próximo vídeo. 2. Como instalar React e o Typescript: Tudo bem caras, Hoje vamos criar um projeto com reagir e TypeScript. Eu vi um monte de tutoriais lá fora apenas explicando o que é TypeScript e apenas alguns tutoriais simples sobre ele. Mas pensei que seria uma ideia melhor criar algo com ele. Então deixe-me mostrar a vocês o projeto que vamos construir. Temos é isso é algum tipo de uma lista de afazeres, mas com alguns usuários. Então estamos tendo aqui um formulário onde podemos colocar, por exemplo, um nome, idade e um emprego, por exemplo, de um usuário. E então, quando clicamos nele, podemos adicionar esses usuários à nossa lista. Então eu vou colocar aqui, por exemplo, para o meu nome, eu vou colocar aqui 20 e eu vou colocar aqui, por exemplo, pilotos. E eu vou clicar em Adicionar usuário. E então eu vou colocar aqui John. Então John é, por exemplo, 45 e E é, por exemplo, enfermeira vai colocar aqui. Então nós temos esses dois usuários e agora eu poderia clicar em qualquer um deles. Por exemplo, o, o empregado atrasado. Isso seria como para uma empresa, por exemplo, se você estiver adicionando esses usuários. Então este é apenas um projeto simples. Vamos começar com isso agora. Então, sim, vamos nessa. Em nosso Visual Studio Code. Basta escolher um lugar onde você deseja instalar seu projeto. E agora, para isso, você precisa digitar o seguinte comando. Então nós vamos fazer NP x, Create React app. Vamos dar-lhe o nosso nome. Eu vou chamar isso, por exemplo, usuário menos TypeScript. E agora eu vou fazer um traço, traço modelo e outro espaço. E desta vez eu vou colocar o tipo de script. Então, vamos instalar agora um novo projeto React completo, mas com TypeScript incorporado já. Ok, então eu vou pressionar Enter, eu vou deixá-lo instalar. E quando estiver pronto, podemos continuar. Tudo bem, agora que o projeto está instalado, podemos abri-lo em nosso código do Visual Studio. Foi exatamente o que eu fiz. Então eu estive aqui meu novo projeto completo. Vou abrir o terminal e agora ter certeza de que você está no caminho certo para iniciar este projeto. Então eu vou fazer aqui PWD. Então eu estou dentro de meus projetos de desenvolvimento entre minha lista de usuários pasta TypeScript, que é este. Vou checar “ls”. E eu tenho o nó módulos package.json e assim por diante, que é todas essas pastas, estamos no lugar certo para iniciar nossa aplicação. Vou fazer um NPM para começar. E agora eu deveria ver aqui no navegador, eu só estou pressionando aqui. Sim, eu só tenho que fazer isso porque eu tenho esses outros projetos em execução também. Então essa parte é como conflitante. Então eu estou abrindo estes na porta 3000 e um, e é isso. Estamos começando basicamente do início. Certo, então vamos entrar na nossa fonte. Como você pode ver agora, antes quando estávamos apenas criando um aplicativo React por padrão, teríamos, por exemplo, essas pastas aqui com o app.js e assim por diante. Agora, em vez de ter essa extensão de ab.js, nós temos a extensão de dot TSX, ok? Então vamos deletar algumas coisas aqui, então eu não preciso desse logotipo. Eu acredito. Vou apagar tudo dentro deles também. Então dentro desta função para cima, eu vou apagar tudo. Eu só vou colocar aqui por enquanto. Como TypeScript, eu não conheço alguém assim só para ter certeza de que podemos ver. Então TypeScript, temos um H1 aqui. Vamos apagar o logotipo. Não precisamos deste logótipo aqui no lado esquerdo. E acho que é isso por enquanto. Ok, então se você entrar no seu navegador, você deve ver aqui TypeScript. Tudo bem, então qual é o ponto que estamos realmente fazendo aqui sobre como, por que devemos usar TypeScript e assim por diante. Isso é porque nós só queremos ter certeza de que cada variável que criamos, eles terão um tipo específico. E esse tipo não vai mudar porque, por padrão, JavaScript, se você criar uma variável como esta, por exemplo , idade, e você vai colocá-lo igual a 20. Mais tarde, você pode simplesmente ir e mudar essa variável para, por exemplo, 20 como uma string. E esta não é uma boa prática. Você quer ter certeza de que quando você criar uma variável, esse tipo dessa variável será consistente em toda a sua aplicação. Então, você sabe, TypeScript nos permite controlar esse tipo de coisas. E também permite que você controle, por exemplo, quais funções elas retornam, assim por diante. E, mas nós vamos aprender tudo sobre isso agora. Então deixe-me deletar isso. Deixe-me ver o projeto aqui. Então provavelmente o que eu vou fazer, eu vou quebrar isso em partes separadas. E eu vou deixar o estilo para o final porque eu acredito que algumas pessoas, eles só querem começar. Então vamos deixar o estilo para o final e vamos nos concentrar aqui antes de tudo nisso. Então vamos fazer isso. Talvez eu tenha que quebrar isso em alguns vídeos diferentes porque pode ser um pouco longo demais, certo? Então vamos entrar no nosso retorno. Primeiro de tudo, e eu quero criar um formulário. Primeiro de tudo, vamos colocar aqui no IV. Então estes div aqui vai ser tipo de nosso contêiner. Então eu vou colocar aqui className do recipiente. Certo, então temos o nome da classe do contêiner. Eu vou colocar dentro de um H1 vai dizer reage com TypeScript. E por dentro vou fazer um formulário. Certo, então temos o formulário. E agora dentro deste formulário, vou ter alguns rótulos. Então, basicamente, o que vamos fazer com esses rótulos, isso é o que você viu aqui. Essas coisas, o nome, a idade, o trabalho, e assim por diante. Então, para o primeiro rótulo, eu vou colocar o nome. Ok? Então nós temos o nome aqui, e eu vou colocar uma entrada. Tudo bem? E esta entrada aqui vai ser com uma identificação. Então eu vou colocar aqui um ID para que eu possa clicar neste rótulo e, em seguida, selecionar este, olhar como este. Se eu clicar no rótulo, é como selecionar estes que temos aqui. Ok, então eu vou dar, por exemplo, um nome de usuário. Ok, nós temos o nome de usuário lá dentro. Vamos colocar um pouco mais desses parâmetros. Então eu só vou para o estilo é um pouco melhor. Então esta entrada aqui vai ser com um tipo de texto. Em seguida, queremos ter um nome. Então o nome só vai ser depois para nós realmente armazenar esses valores que temos aqui no estado. Então você pode dar o nome que quiser. Eu só vou colocar aqui o nome, ok? E finalmente, vamos ter algum valor. Isso só vai ser mais tarde para nós armazenar esse valor no estado também. Vamos deixar vazio por enquanto. Então eu tenho estes. Acho que estamos todos bem até agora. Estou a faltar alguma coisa? Nós temos isso. Temos o formulário 0. Havia algo aqui dentro. Então deixe-me colocar aqui também um HTML quatro. E agora isso vai ser para o nome de usuário. Então, quando você coloca estes HTML4 precisa ser o mesmo nome, como estes ID. E então você pode apenas clicar no rótulo. E ele vai selecionar, colocar em foco essas entradas que você está usando. Ok, então nós temos este. Vamos apenas copiar isso porque nós vamos ter três deles vai ser a mesma coisa. Certo, vamos copiar isso. Então, eu só vou estilizar estes. Então isso vai ser para e-mail do usuário. Isto vai dizer, é e-mail h. Isto é h, este é h aqui. Esta será a idade do usuário ID. O tipo dessas entradas vai ser um número porque eu só quero escrever nossos números. Se você digitar algo aqui não vai funcionar, mas se vai ser um número vai ficar bem. Então nós temos este. O nome disto vai ser H, pode ser qualquer coisa. Eu vou colocar idade, Valley era assim e nós temos outra gravadora. Então esses rótulos para o trabalho, ok, então trabalho de usuário, nós vamos ter aqui saltar e nós temos uma entrada com um usuário. Job, o nome vai ser cobrado. E eu acho que é isso. A última coisa que precisamos dentro deste formulário vai ser um botão. E este botão vai ser com um tipo de submissão. E o que vamos colocar aqui neste botão só vai dizer Adicionar usuário por enquanto. Ok, deixe-me ver se estou colocando anúncios usuário. Certo, acho que temos tudo o que precisamos corretamente. Vamos olhar para a nossa página. Deixe-me aumentar o zoom para que vocês possam ver um pouco melhor. No momento. Devemos ter esse nome correto, idade, trabalho e adicionar usuário. Tudo bem, então deve ser isso para este vídeo. Eu não quero fazê-los ficar muito tempo. Então, sim, vamos quebrar isso aqui. E então quando voltarmos no próximo, o que vamos fazer é começar a preencher esses valores e vamos armazená-los aqui no estado, criando as variáveis com TypeScript e assim por diante. Então é isso. Está bem, vemo-nos na próxima. 3. Como criar o formulário do usuário: Muito bem, pessoal, bem-vindos de volta. Então vamos começar aqui fazendo o que queremos. Então, queremos começar a digitar algo aqui, pegar esses valores, e então fazer algo com eles. Tudo bem, então vamos primeiro de tudo converter aqui no topo, nosso componente de função, nosso componente de aplicativo para estar com alguns reagir a diretrizes aqui. Portanto, não reagir TypeScript. Então vamos mudar esses fundos de uma declaração de função. Vamos mudar isto para uma função de seta. Então vamos fazer const. E eu vou explicar o que é isso em um segundo. Tudo bem? Então vamos colocar aqui um ponto React AFC. E isso é assim, e nós devemos estar bem, ok, então quando você está criando um componente com TypeScript, você precisa dizer com este dois pontos depois de dizer, ok, isso vai ser um componente funcional React. Então, quando estamos usando TypeScript, então esta é a parte que vamos começar a tocar em TypeScript na verdade. Então, como você sabe que, por exemplo em JavaScript, quando você cria uma variável, digamos idade. Se você criar essas variáveis e atribuí-la, por exemplo, para 20 como um número. Mais tarde, você pode ir e dizer que idade é igual a 20 anos. Você pode fazer isso porque JavaScript não é uma linguagem que é como fortemente digitado, é realmente fracamente digitado. Então, isso significa que você pode criar uma variável. Você não precisa especificar que tipo de dados você tem aqui. E mais tarde você pode simplesmente mudá-lo sem nenhum problema. Portanto, estes podem introduzir muitos problemas em seu projeto, especialmente quando você está trabalhando em grandes empresas, como com muitos usuários, muitos desenvolvedores. E então, quando você está criando uma variável com TypeScript, você tem a capacidade de entrar aqui e dizer, ok, o que essas variáveis, qual é o tipo dela. Posso dizer que este é o tipo de número. Ok, então no momento nós só temos esse tipo de linhas rabiscadas aqui porque ele está dizendo que nós nunca usamos. Se eu pudesse fazer aqui, por exemplo, um registro de pontos de console de H. ok? Você vê que isso se foi porque nós apenas usá-lo. Então eu especifiquei em ouvir essas variáveis quando eu criei que esses valores precisam ser com um tipo de número. Se eu entrasse aqui e colocasse como uma corda. Está bem, olha, agora está a dar-me este erro. O número de tipo olhou não é atribuível ao tipo string. Está bem? Então esta pode ser uma maneira que você pode atribuir, por exemplo, o tipo dessa variável. Outra maneira que você poderia fazer seria, por exemplo, criar um tipo que você poderia usar em várias variáveis. Então eu vou chamar isso, por exemplo, tipo. O meu número. Então não importa qual é o nome que você dá. Pode ser qualquer coisa. Então criamos um tipo, dê-lhe um nome. E então dizemos, Ok, que tipo de tipo é esse que queremos criar? Este é um número. Então, quando temos aqui um número, isso é como a palavra-chave do JavaScript que está realmente dizendo, olha, esse tipo que você deseja passar 20 variável precisa ser com um tipo de número. Ok, então eu poderia entrar aqui, vamos nos livrar disso. Em vez de escrever aqui o número, eu poderia entrar aqui e dizer, olha, este é o meu número porque você sabe que este tipo aqui que nós criamos é na verdade um número, ok? Então você pode fazer de um jeito ou de outro, se quiser. Você poderia apenas fazer assim. Está bem? Portanto, isto deve ser suficiente por agora para continuarmos com o resto. Então deixa-me livrar-me disto. Então agora que temos esta entrada aqui, vamos começar a aplicar aqui alguns eventos OnChanges. Então podemos pegar os valores que temos aqui. E então nós vamos armazená-lo em um estado. Então vamos criar esse estado aqui. Primeiro de tudo, vamos fazer um CONST. Vamos dizer que os usuários estão, por exemplo. E eu vou dizer set, set users, set user state. Está bem? Então isso vai ser igual para usar estado. E eu vou definir isso como um objeto por enquanto, ok? Como sempre, olha, você está tendo esses Estados Unidos aqui, então você precisava importá-lo no topo do React. E isto está tudo bem. O que queremos ter dentro deles agora é que queremos ter uma corrente, um usuário atual. Está bem? Então queríamos ter um usuário atual que vai ser aquele que vamos digitar. Então, sempre que estamos digitando esses valores, queríamos armazenar isso em nosso estado, nesta parte aqui. Então, aqui em cima criamos nosso estado. Este é o nome do nosso estado. Esta é uma função que executamos sempre que queremos atualizar o estado. E este é o valor do nosso estado, está bem? Então eu quero ter o valor do meu estado é um objeto com uma chave de usuário atual. Então este vai ser o usuário atual que estamos digitando no momento. E então quais serão os valores destes neste usuário atual? Então eu queria ter um nome. Então eu vou colocar isso assim. Então este vai ser um objeto que eu quero ter um nome. Por agora. Vou pô-la vazia, está bem? Então eu quero ter o que mais? Eu queria ter, por exemplo, um emprego. E não era lá um H Sim, havia uma idade. Então eu vou colocar cada um e depois trabalho. Certo, assim mesmo. Então criamos aqui um objeto com nome, idade e trabalho. Mas como especificamos antes com TypeScript, sempre que estamos criando algum tipo de variáveis ou objetos e assim por diante. Você precisa especificar que tipo de tipos você tem aqui. Então, porque quem é dono deste objeto é, na verdade, o nosso estado dos EUA. Depois do nosso Estado americano aqui. Podemos passar isto aqui. Algum tipo de, algumas pessoas chamam de aparelho de crocodilo. Então nós poderíamos entrar aqui e apenas passar, por exemplo, queremos que nosso estado americano seja um objeto, como você pode ver. E eu quero que este objeto tenha uma chave de usuário atual. Está bem? E esse usuário atual vai ter um nome que eu quero ser uma string. Então temos um H que eu quero ser uma corda. Digamos, por exemplo, que vamos mudar isso depois, não se preocupe, porque nós colocamos como um número lá dentro. E então temos um trabalho que é uma corda também. Certo, então passaremos isso dentro desse estado de usuário. Sabemos que vamos dar uma olhada. Se você passar o mouse, você terá um objeto com um usuário atual com um nome que é string, idade, que é uma string e um trabalho que é uma string. Certo, então temos tudo declarado. Mas como você pode ver aqui, esse tipo que colocamos dentro de um olhar, não parece tão bom porque está ocupando muito espaço. Então, sempre que queremos realmente e criar algum tipo de um tipo para esses tipos de objetos que eles têm muitas chaves. Poderíamos criar algo que chamamos de interface. Então eu vou criar esta interface aparecer. Então, para criar uma interface, uma interface vai ser apenas uma maneira para nós criar como vários tipos para um objeto. Então eu vou colocar aqui interface, e eu vou colocar, chamá-lo por exemplo, user int, que é apenas curto para interface. E agora eu quero que isso seja o quê? Isso vai ser um objeto. Como podem ver, temos a abertura e o fechamento do objeto. E eu vou colocar aqui que isso vai ser um nome, ok? Vai ser um nome. Isto vai ser uma corda. A mesma coisa para a idade, precisa ser uma corda. E então eu vou colocar o trabalho que vai ser uma corda. Está bem? Então criamos nossa interface. Lembre-se que nós apenas usamos uma interface sempre que estamos tentando passar esses tipos de tipos para um objeto como este. Ok, então agora dentro do meu estado americano, eu quero esse meu usuário atual, que é esse objeto que temos aqui. Eu quero que esses usuários atuais estejam com o tipo de interface que acabamos de criar. Então agora eu não preciso especificar tudo isso. Nós criamos a interface, e lá está ela. Olha, temos a nossa interface lá dentro. Então, se você ainda passar o mouse isso, temos agora que nosso estado de usuário é um objeto com uma chave de usuário atual. E esses usuários atuais aqui é com o tipo de usuário INT. Eles usam INT é este. Então, estamos todos bem por enquanto. Ok, então agora que temos isso, a próxima coisa que eu queria fazer agora é realmente começar a colocar algum tipo de valores onchange em ouvir nossas entradas. Então, vamos entrar aqui na mudança. Então, sempre que mudo alguma coisa, o que eu quero fazer? Eu quero chamar uma função chamada, por exemplo, na mudança. Handler, chame o que quiser. Esta é apenas uma função que vamos executar sempre que estamos digitando algo em nossa entrada. Então eu vou copiar esta mesma função em todas as minhas entradas assim. Tudo bem, então agora ele está nos dando um erro em nosso navegador porque nós ainda não criamos essas funções. Então vamos fazer isso. Então eu vou fazer aqui const no manipulador de mudanças. Então esta vai ser uma função como esta. Então, o que essa função vai fazer? Vamos apenas verificar. Primeiro de tudo, eu só quero fazer algumas coisas dentro desta função e eu não quero retornar nada desta função. Então nós datilografado. Você pode dizer que depois de seu parêntese que você tem no ano, você pode ir e apenas fazendo aqui um vazio, exatamente como este. Olha, você pode fazer depois do parêntese, você faz este dois-pontos e você coloca o vazio. Então isso significa que essa função vai fazer algo, mas ele nunca vai retornar algo, você sabe, como quando você está tentando retornar algo como um número ou algo assim, esta função não vai retornar nada. Só vai fazer algum trabalho e depois parar e não devolver nada. Então nós colocamos aqui, vazio. Se por algum motivo você está fazendo essa função que está fazendo algo como, por exemplo, retornando, retornando um nome, Vamos dizer retorno, olá, digamos que é especificado, ok? Esta função vai retornar uma string se você faria algo assim. Certo, então vamos nos livrar disso porque eu não vou devolver nada. Agora, dentro de uma função, você sempre precisa especificar que tipo de mudanças ou que tipo de parâmetros você vai colocar aqui. Digamos que você colocaria um nome aqui. Então este seria um parâmetro que você precisa especificar, ok, Este parâmetro que você tem aqui é que tipo? Digamos que você passe outro. Seria idade. Este seria, por exemplo, um número. Eu não sei. Então você precisa especificar dentro de todos os tipos desses parâmetros que você coloca dentro. Mas isso não é o que queremos agora. Queremos que sempre que estamos fazendo aqui um evento onchange, vamos executar esta função. E a única coisa que quero pegar daqui vai ser o evento. Então você sabe, quando você está digitando algo há um evento. Então você pode realmente pegar, por exemplo, o valor do ponto de destino do ponto do evento. Então podemos pegar os valores dessas entradas. Então vamos colocar aqui E, podemos colocar qualquer nome que quisermos, porque é assim que você pode pegar os eventos aqui. Você poderia escrever evento ou você poderia apenas ter E é realmente com você. Bem, precisamos especificar este evento é que tipo de evento este evento em React é com o tipo de reagir. Então isso é algo que você provavelmente só tem que fazer alguma pesquisa rápida no Google se você não sabe sobre isso. Então nós vamos colocar aqui reagir evento mudança. Está bem? E então este é o evento que estamos fazendo, Reagir evento mudança ponto. E então precisamos especificar, ok, Em que elementos estamos fazendo isso, isso vai ser neste elemento que é HTML. E então temos entradas, elemento de entrada. Está bem? Então agora que temos isso, devemos ser capazes de entrar aqui. Por exemplo, se estamos fazendo algo como imaginar ponto de evento, evitar aparência padrão está chegando. Se quisermos fazer alguma coisa. Por enquanto, eu só quero fazer um console.log do ponto do evento. Olha, quando eu colocar o ponto está chegando até mim. Tudo o que podemos fazer com isso, ok, então o evento tem as bolhas canceladas, nível é confiável, e assim por diante. Eu queria pegar esse alvo de um ponto. Se eu quiser colocar outro ponto, olhe, agora, eu posso conseguir muitas outras coisas. A coisa que eu quero pegar é que o valor deve ser mais provável aqui em baixo no V. É isso. Está bem? Então, quando estamos fazendo algumas mudanças nessas entradas, vamos ter acesso ao evento que já especificamos o tipo. E porque especificamos o tipo deste evento, podemos obter acesso a todos esses valores sem ter que procurá-los. Ok, então vamos apenas verificar se isso está funcionando. Vamos abrir o console. Vamos entrar aqui. Vamos fazer um console. Deixe-me limpar estes. Vou colocar, por exemplo, T E L M0. E como você pode ver, toda vez que estamos digitando algo está surgindo como qualquer coisa que você digita lá, o que é ótimo. Ok, então isso está tudo bem. Agora, vamos apenas salvar esses valores agora antes de terminar este vídeo está ficando um pouco longo. E vamos apenas salvar isso sob estado. Então vamos fazer isso. Para atualizar o nosso estado, precisamos executar esta função chamada set user state. Então vamos fazer isso. Eu vou fazer definir o estado do usuário. Então isso precisa ser o quê? Precisa ser o usuário atual porque essa é a única coisa que temos lá no momento. Temos aqui um usuário atual. E dentro do que eu vou fazer é estar apenas atualizando cada um desses valores, como individualmente. Por exemplo, se estou apenas a escrever o nome, só estou a actualizar este. Então eu não, se eu colocar aqui, por exemplo, nome e depois algum valor, eu vou perder todas as outras propriedades. Então eu preciso usar o operador de descanso, que é o ponto-ponto. E então eu vou fazer o estado do usuário. Então este é o meu estado. Eu quero ir para dentro dos pontos. Usuário atual, e eu vou pegar tudo o que está dentro de lá. E então, ok, eu vou atualizar o novo valor. Agora, qual é esse novo valor que eu vou atualizar? Vou colocar aqui este tipo de matriz. Porque o que eu vou fazer aqui, o que eu vou explicar em um segundo, é o valor dos pontos alvo. Agora este é o nome do ponto de destino. Então, basicamente, quando você deseja especificar uma chave de um objeto dinamicamente como este, sem ter que colocar, por exemplo, nome, idade, trabalho, ou qualquer outra coisa. Estamos dizendo que olhar, se eu estou digitando essa entrada, essa entrada, este é o único onde eu estou fazendo meu onchange. Estou executando meu manipulador onchange sempre que estamos digitando nele. Está bem? Então isso, temos acesso ao evento. E porque temos acesso aos eventos, eu posso dizer, ok, Sempre que eu vou atualizar isso, eu estou atualizando o estado, o usuário atual. E aqui eu vou pegar o nome do ponto do alvo E ponto. Então o nome do ponto de destino do evento ponto vai ser esse valor que temos aqui nome. Então eu sei que no meu estado aparecer, eu vou atualizar essas chaves aqui, ou nome do ponto de destino. Então é assim que você pode pegar as chaves dinamicamente. Então agora aqui, eu só vou fazer E dot alvos ponto valor. Está bem? Então eu vou colocar nesta chave que temos aqui, o valor que você tem nessa entrada que você está colocando. Ok, então isso deve ficar bem aqui. Agora. Acho que devemos ficar bem agora. Devemos estar todos bem. Agora, vamos apenas, depois de fazermos isso, vamos apenas fazer isso. E vamos apenas fazer um console.log destes do estado do usuário. Apenas certifique-se de que isso está funcionando console.log de. Eu vou remover este aqui em cima para que ele não complete usuário estado dot usuário atual. Ok, vamos tentar. Apenas atualize. Vou colocar um T E L M0. E agora, está faltando algo aqui. O que estamos perdendo agora eu me lembro do que estamos perdendo é que em nossa janela de entrada, como você pode ver, nós configuramos o valor da entrada para ser o tempo todo como vazio. É por isso que ele está reajustando o tempo todo. Queremos que esse valor que você tem no ano seja o tempo todo. O mesmo valor que temos aparece no estado. Então eu vou colocar para este valor da primeira entrada, eu quero ser o que está dentro do estado do usuário, ponto, usuário atual. Como você pode ver, nome do ponto, você vê, você tem todas essas coisas chegando até você por causa do TypeScript. Então vamos copiar isto. Vamos fazer a mesma coisa aqui agora para o H, seja lá o que for sobre o estado. E a mesma coisa aqui para o trabalho. Certo, vamos refrescar isso. Vamos entrar aqui. Vou colocar o L M0. E como você pode ver, depois que eu digitei, tudo está vindo aqui no console que meu estado está tendo h, nada, trabalho, nada. Nome Thelma. Se vou colocar aqui agora, por exemplo, 35. Como podem ver, temos agora 35 anos, nome Thelma. E vamos colocar um emprego. Onde é que está? Então vamos colocar, por exemplo, um desenvolvedor de software. E aí está ele. Agora estamos pegando todos esses valores que queremos e salvando, salvando-os no estado. Tudo bem, então é isso porque este vídeo está ficando um pouco longo demais. E então no próximo, podemos realmente pegar esses valores que temos aqui e adicioná-los aqui na página. Está bem, vejo-te na próxima. 4. Exiba a lista de usuários no navegador: Tudo bem, bem-vindo de volta. Então agora vamos adicionar esses usuários que acabamos de digitar. Vamos adicioná-lo à nossa página. Então, primeiro de tudo, nós temos aqui um formulário com todas essas entradas e nós temos um botão com o tipo de envio que queremos criar aqui um novo evento que será em enviar. Então basicamente esses eventos, onsubmit significa que sempre que você pressionar esse botão aqui em baixo de enviar, você vai enviar todos esses valores e fazer alguma coisa. Então vamos ver o que podemos fazer agora. Nós vamos criar aqui função chamada formulário de envio, assim. Então vamos criar este formulário. Então, vamos entrar aqui. Vamos fazer const enviar formulário. Tudo bem, então agora isso vai ser a mesma coisa aqui. Esta função, não vamos devolver nada. Então vamos especificá-lo como vazio. Tudo bem? E então dentro dele, vamos ter em mais um tipo diferente de evento. E o evento que queremos ter aqui quando você está enviando um formulário, é um evento tetico React dot vendo, esse é o único. Então, sempre que você enviar um formulário e você quiser ter acesso ao evento que você tem lá. Este evento aqui vai ser com um tipo de reacções nesse evento. E agora, como você sabe, quando você envia um formulário, você basicamente você vai enviar este formulário para outra página ou para esta página em si, e você vai recarregar a página. Então, se fizermos isso, vamos perder o nosso estado e tudo o que temos aqui. Portanto, queremos evitar que sempre que enviamos este formulário, queremos fazer um evento. E como você pode ver, olha, a primeira vez que eu fiz E dot é até mesmo desistir de todos os tipos diferentes de opções que eu posso fazer com este tipo de evento. Então eu vou colocar aqui que ponto prevenir padrão. Só estou fazendo isso para evitar que a página se recarregue. Pode tentar, se quiser. Então, agora que temos isso, o que eu quero fazer é aqui no topo, vocês se lembram quando tivemos esse estado de usuário com o usuário atual dentro? Quero que o estado agora tenha o quê? Ter um usuário atual, mas também ter aqui um todos os usuários. E esses todos os usuários que vamos ter aqui vai ser um array porque ele vai ter muitos desses usuários dentro. Então ele vai ser um array com muitos desses usuários. Como você pode ver, agora, estamos tendo alguns, alguns erros aqui nos dizendo esse olhar. Nós dissemos que o nosso estado de usuário aqui, olha, nós especificamos o tipo. Nós dissemos, ok, nosso estado de usos vai ser um objeto com o valor do usuário atual. E, em seguida, cada um desses usuários atuais vai ser com o tipo de uma interface de usuário que é nome distaff, nomeestring h, string e assim por diante. Tudo bem, então estamos perdendo todos os nossos usuários. Então eu poderia entrar aqui agora e colocar, por exemplo, todos os nossos usuários e assim por diante. Mas isso está ficando muito longo agora, eu acho que é melhor para nós realmente criar. E agora essa interface, desta vez para o nosso estado de usuário, ok, eu acho que é uma idéia melhor. Então vamos fazer isso. Vamos entrar aqui e fazer uma interface. Porque queríamos criá-los para um objeto basicamente. E nós vamos chamar isso de todos os usuários int como curto apenas para interface. Acho que perdi algo aqui em cima. Então isso, quando você está criando uma interface, você realmente não precisa passar essas vírgulas, você só precisa passar esses ponto-e-vírgula. Então, quando você cria uma interface não é como realmente como um objeto. Então você pode apenas fazer nome, string, h, string, e assim por diante sem ter que passar as vírgulas. Então, estamos criando essas interfaces para este estado de usuário. Então, basicamente, o que nosso estado de usuário tem lá, nós temos um usuário atual. Então vamos colocar isso aqui. Qual é o tipo de usuário atual? Nós já dissemos, Ok, o tipo desse usuário atual é esse objeto que temos aqui. Tudo bem, então vamos colocar que esta é uma interface de usuário como fizemos aqui em cima. Ok, então para esta, estamos todos bem. Qual é o próximo valor que temos dentro do nosso estado de usuário? Temos todos os usuários. Então vamos pegar isso. Vamos colocá-lo aqui. E agora, desculpe, porque temos aqui uma matriz, ok? Precisamos especificar aqui como esta matriz. E então esta é a maneira que você pode dizer TypeScript que o valor que temos aqui é uma matriz. Você diz que isto é um array. E agora com estes menos que, maior do que assinar este tipo de aparelho de crocodilo, você precisa dizer, Ok, que tipo de matrizes, que tipo de coisas você vai colocar dentro deste objeto? As coisas que eu vou colocar dentro desses objetos, eles vão ser objetos como esses vai ser objetos com nomes, idade e empregos. Porque isso vai ser como vários usuários que você vai colocar dentro. Ok? Então, se o que vamos colocar dentro desta matriz vai ser todas as coisas como nome, idade, e objeto. Como para Z, vamos colocar como vários desses objetos como este. Ok, cada um desses objetos, eles têm a forma, eles têm essa interface. Então nós vamos dizer, ok, todos esses usuários que temos aqui vai ser um array. E dentro da matriz, o que vamos ter são esses objetos com essa interface de usuário. Ok, então estamos todos bem aqui. Então, agora que temos esta interface pronta para o nosso estado de usuário, quando estamos especificando aqui nosso estado dos EUA. Vamos apagar tudo o que está dentro daqui porque estava ocupando muito espaço. E agora dentro desse estado americano, qual é a forma desse estado americano? Que tipo de tipos deveríamos ter lá dentro. Esta é a interface de todos os usuários. Vamos passar por aqui e ver, tudo está funcionando bem agora. Então nós vamos dizer olhar nosso estado dos EUA, estado do usuário, o volume que vamos passar para o estado dos EUA vai ser uma interface de todos os usuários. Então isso significa que isso vai ser um objeto com um usuário atual. Olha, é o usuário atual aqui. A forma deste usuário atual, esse tipo de usuário atual vai ser uma interface de usuário. Olhe com o nome da idade da string. É isso. Isto é o que você tem. E então nós também temos todos os usuários, que é um array no momento está vazio, mas isso importa. Então dizemos que é um array. E o que quer que esteja dentro desta matriz é, vai ser este tipo de interfaces de usuário. Vão ser objetos como este. Ok, nós já temos isso. Então agora olhe, TypeScript está até mesmo nos dizendo alguns erros aqui. Olha, porque da nossa função anterior, o manipulador onchange, quando estávamos atualizando o estado, estamos dizendo que, ok, vamos atualizar o estado. Nós só tínhamos usuário atual, mas agora temos este aqui que todos os usuários. Então o que podemos fazer é, ok, do nosso estado de usuário, em vez de apenas passar isso, vamos trazer o estado de usuários do operador de propagação. E agora o que queríamos trazer do nosso estado de usuário vai ser o Que mais? O, oh, sim, nós só queremos trazer isso. Nós só queremos trazer isso para o estado de usuário. Então, basicamente, quando você diz, vamos trazer o estado do usuário, isso significa que vamos trazer tudo isso. Isto é o que o operador de propagação faz. Vamos copiar tudo isso. E então, ok, vamos sobrescrever esse usuário atual com esses novos valores. Então, basicamente, fazendo isso, você copia tudo isso aqui. Então nós já temos esse valor lá dentro. E depois somos como substituir estes antigos por este. Ok, então estamos todos bem aqui. Agora, no nosso Formulário de Envio, o que queríamos fazer? Então deixe-me ver, nós temos nosso Formulário de Submissão e nós queríamos atualizar nosso estado. Então defina o estado do usuário. Queremos, em primeiro lugar. Faça um usuário atual. Então, no usuário atual, o que eu vou fazer é como quando eu vou adicionar um novo usuário, eu quero que nossos valores que temos em nossas entradas sejam redefinidos. Então eu vou fazer o nome vazio assim. Eu vou fazer na idade vazia também. E eu vou fazer um trabalho vazio como este. Então nós redefinimos todos os valores do usuário atual basicamente, então o, a entrada é tudo ido. E então vamos atualizar todos os nossos usuários. Então este é um array. E agora o que vamos ter em um array, porque poderíamos estar adicionando vários usuários. Você sempre deseja fazer um operador de propagação do estado do usuário. Oops, usuários, Estado ponto todos os usuários. Então isso significa que se por algum motivo você já adicionou vários usuários, você deseja trazer todos os usuários que eles estão dentro desta matriz já. Então é isso que estamos fazendo com o operador de propagação. E então você pode adicionar seu novo. Usuários stakes dot usuário atual. Então o usuário estado ponto usuário atual. Então você vai pegar todos eles que eles eram então MP4 e, em seguida, você vai adicionar o seu novo. Ok, então eu acredito que estamos todos bem agora, deixe-me apenas apagar isso. Então eu vou fazer aqui console.log do estado do usuário para ver se isso está realmente funcionando. Certo. Então vamos atualizar a página que vou colocar aqui. Me diga. Vou colocar aqui 32. Vou colocar aqui, por exemplo, isso vai ser um desenvolvedor de software. E agora vou pressionar Adicionar usuário. Ok, então este é o nosso console que temos. Nós temos todos os nossos usuários e olhar para isso dentro de todos os nossos usuários. Temos esses usuários, só aquele com o nome de Tom. 32 anos, nome do trabalho e assim por diante. Ok, então agora isso está tudo bem. Vamos apenas colocar estes aqui dentro da nossa e da nossa página para que possamos ver que o seu valor. Então podemos fazer isso rapidamente. Podemos fazer isso criando essas variáveis. Vamos apenas entrar aqui e contras para todos os usuários vai ser igual ao nosso estado de usuário ponto todos os usuários. E então vamos fazer um mapa de pontos. Tudo bem, e então basicamente uma função de mapa de pontos em JavaScript permitirá que você faça um loop através de uma matriz e, em seguida, faça o que você precisa fazer com ela. Ok, então nós vamos fazer aqui uma função. O primeiro volume vai ser o usuário que você está indo para loop através. Este vai ser o valor da sua matriz. E o segundo vai ser o índice dele. Ok? Então a função is.na tem acesso a esses índices, que será a primeira vez que você executar o loop. O índice é 0, a segunda vez é um e assim por diante. E o usuário vai representar o objeto que cada vez que você está fazendo loop na matriz. Certo, então precisamos fazer aqui, na verdade, você teria que fazer algo assim. Este é o nosso mapa del dot está funcionando então você precisa sempre voltar assim e, em seguida, passar o que quiser dentro. Mas em vez de ter disfunção com essas chaves encaracoladas como essa, vou substituí-las assim por parênteses normais. Então, quando você tem esse tipo de parêntese, isso significa que nós vamos retornar o que está dentro aqui, então você não precisa ter essa palavra-chave de retorno. Então, o que eu quiser devolver aqui agora vai ser, por exemplo, um div. Isto é como rapidamente fazer alguma coisa. Por exemplo, um H2 vai ter o nome de usuário. Então, porque isso vai representar esses valores. Então temos o trabalho de agente de nome. Então vamos fazer isso. Onde estava? Onde estava aqui? Então, nome de usuário, eu vou fazer copiar isso. Então nome de usuário, idade do usuário e trabalho do usuário. Tudo bem, então temos tudo isso. Vamos passar aqui uma chave. Ok? Então isso é apenas reagir quer que você passe uma chave única para cada um desses elementos sempre que você está criando-os. E é isso. Então vamos usar essa variável de todos os usuários. E vamos passar a nossa forma. Por isso, vou pô-lo aqui, preciso de pôr isto entre as chaves. Muito bem, vamos ver se isto está a resultar. Vamos apenas atualizar a página. Vamos entrar aqui. Diga-me que vou colocar 33. Eu vou colocar aqui que é um piloto e vamos pressionar Adicionar usuário. Aqui está, Thermo, este, e este aqui. Ok, então estamos todos bem aqui. Vamos tentar de novo. Digamos que David. David vai ter 35 anos e vai ser um desenvolvedor de software. Vou pressionar Adicionar, e como podem ver, estamos adicionando cada um deles aqui. Tudo bem. Então, sim, estamos todos bem aqui. Então eu acho que vai ser isso para este vídeo. No próximo, vamos apenas aprender como podemos realmente clicar aqui em cada um desses elementos e assim como excluí-los. Então, se você quiser excluir cada um desses usuários, tudo bem, então é isso para este vídeo e eu vou vê-lo no próximo. 5. Apagar o usuário da lista: Certo, então é hora de começarmos a excluir todos esses valores que estamos adicionando. Então, para isso, eu vou entrar aqui e onde temos todos esses usuários que temos aqui. Vou passar por aqui, provavelmente, como um botão. E este botão vai dizer que o usuário principal pode ser qualquer coisa. Vou chamá-lo de “apagar usuário”. E eu vou colocar aqui um evento onclick. Então, sempre que eu vou clicar neste botão, eu quero realmente excluir este usuário. Então eu vou colocar aqui um manipulador Delete. Ok? Esta vai ser a nossa função que nunca será executado sempre que queremos excluir esses usuários. Então rapazes entram aqui. Vamos fazer um manipuladores de exclusão. Então toneladas Delete manipulador. Isto vai ser uma função como esta. E agora a coisa é, eu quero que esta função seja exatamente como esta em nossa função. E eu queria passar o valor do índice porque como você pode ver, olhe, quando estamos passando aqui esta função, certo? E queremos agarrar o índice desses usuários em particular, para que saibamos qual usuário somos na verdade, qual usuário estamos tentando excluir. Então esta função aqui está tomando este perímetro de índice. Então vamos passar por aqui no topo. Isto vai ser um índice e o tipo deste vai ser um número porque é o que estamos passando aqui é um número e esta função não está retornando nada. Então vamos colocar aqui o vazio. Tudo bem, então o que essa função vai fazer? Primeiro de tudo, vou criar uma nova variável chamada, por exemplo, const, filtrar usuários. Porque nós vamos filtrá-los. E o que vamos fazer são usuários. Então usuários Estado ponto, todos. Então, então usuários, por que isso não é? Às vezes fica um pouco mais lento porque esqueci de colocar o sinal de igual aqui. É por isso. Então temos o estado do usuário, todos os usuários. É aí que queremos agora passar por estes. E eu vou fazer aqui um filtro de pontos. Então, basicamente, o filtro de pontos, o que ele faz é outra dessas funções JavaScript que vamos percorrer uma corrida. Então cada vez que eu vou fazer loop através da matriz de todos os meus usuários. Então, se você se lembrar que todos os usuários têm alguns objetos dentro, como com o nome, idade e assim por diante. Então vamos representar cada um desses objetos com esse perímetro de usuário. E então eu vou colocar aqui esse índice. Então este vai ser o índice atual do loop que vamos passar. Então vamos colocar isso aqui, e eu vou colocar parênteses, não chaves. Então eu posso apenas como devolver estes imediatamente. Na verdade, não, eu vou colocar aqui desta vez o aparelho encaracolado, só para que vocês possam ver que podem fazer de uma maneira ou de outra. Ok? Então, sempre que você colocar essas chaves, como nós fizemos, agora, precisamos implicitamente vir aqui e apenas fazer o retorno do que você quiser devolver. Ok, então aqui dentro, nós vamos devolver o quê? Então vamos percorrer todos os valores do estado e só queremos retornar os usuários que o índice. Então, se você se lembra, este índice aqui é do usuário aqui em baixo que você clicou. Você só deseja retornar o usuário. Se o índice que você clicar aqui para baixo vai ser diferente destes índice de todos os usuários que você está tentando apenas como loop. Então basicamente o que estamos fazendo é como imaginar que estou clicando no primeiro usuário. Este é o usuário 0 porque essa é a maneira que eles indexam contagens, contagens de 012, como uma matriz. Então imagine que você clique no usuário 0. Quando estamos executando esses usuários filtrados, vamos dizer, Ok, desta vez eu estou passando por todos os usuários. Estou fazendo loop através do primeiro, o 0 é o meu índice. Este que eu clico aqui em baixo. Este é o 0. Ok? Então passamos aqui um 0 é 0. A frente. Então estes AI, que vai ser 0, não, eles não são diferentes, eles são os mesmos. Então isso significa que essa primeira pessoa em que estamos clicando vai ser removida e nós vamos retornar todos os outros porque o índice vai ser diferente para os outros. Então é isso que você pode fazer com uma função de filtro. E agora que estamos filtrando aqui, nossos usuários, o que podemos fazer é atualizar o estado. Então eu vou colocar aqui o estado da célula do usuário. E eu vou colocar o ponto-ponto-ponto. Precisamos pegar o estado de usuário, o que quer que estivesse lá de antes. E desta vez, o que podemos fazer é fazer todos os usuários. Isto é o que está dentro do nosso estado. E o novo valor será o que estiver aqui nos usuários do filtro. Então, vou tentar explicar um pouco mais rápido. Então, antes de seguir em frente caras, lembre-se que quando você fizer o filtro de pontos, o que ele faz vai criar um novo array baseado aqui, esse usuário de filtro variável vai ser um novo array. E quando você estiver filtrando todos esses valores, lembre-se que precisa ser baseado em uma condição de verdadeiro ou falso. É assim que funciona a função de filtro. E se você estiver fazendo loop, por exemplo, para o primeiro usuário, você verificar é o índice que você clica aqui. Diferente do índice atual desses loop. Se eles são os mesmos, que eles são olhar na primeira vez que você está indo para colocar aqui é 0 que você clicar aqui em baixo, diferente de 0, que é o primeiro loop. Não, isso não é verdade. Então isso significa que esses usuários aqui não vai ser passado para o, para este array. Então, se você for para o segundo usuário, o que nós vamos fazer é olhar, você clica neste usuário, isso ainda é a mesma coisa. Clique no primeiro usuário com o índice de 0. Nós vamos entrar aqui. No segundo ciclo. O índice é um. Então, vamos dizer que esse índice onde clicamos vindo daqui de cima é diferente de um. Sim. Ok, então você vai retornar, por exemplo, o segundo usuário. Eu não sei o que era lá dentro. E assim mesmo. Tudo bem. Tenho certeza que vocês já sabem todas essas coisas. Eu estava tentando explicar um pouco mais. Tudo bem, então agora que temos aqui o estado de usuário definido, devemos ser capazes agora de excluir o usuário que estamos clicando. Muito bem, deixa-me, já temos isto aqui. Procure, eu vou clicar neste primeiro usuário. Eu vou clicar no final dos EUA, ele se foi. Vou clicar no segundo usuário e ele se foi. E, e eu acho que isso assenta, e eu acho que é realmente o que nós temos aqui. Agora. A única coisa que eu vou fazer agora é como dois passos extras agora para terminar este projeto, que vai ser, e nós poderíamos tentar dissociar estes um pouco mais. Vamos tentar mover essas coisas que temos aqui, esses todos os usuários e assim por diante. Talvez pudéssemos convertê-los em seu próprio componente porque no momento estamos fazendo tudo em um componente não é como uma boa idéia. Então, no próximo vídeo, Vamos apenas tentar separar estes um pouco mais em um componente diferente e assim por diante. E então o último vídeo, nós vamos apenas gostar, estilo de tudo para torná-lo agradável, se você quiser. Tudo bem, então é isso. Vejo-te no próximo. 6. Refactor e otimize o código: Tudo bem, bem-vindo de volta. Então vamos começar com esses refatores do nosso projeto. Então vamos entrar na nossa pasta de origem e eu vou criar uma pasta chamada componentes. Então isso pode ser se você quiser criar como vários componentes e assim por diante. Então o que eu vou fazer aqui é criar um novo arquivo, um novo componente chamado user.email ASX. Lembre-se que estamos usando TypeScript, então você precisa colocar essas extensões e eu vou apenas criar por agora também um usuário ponto CSS como esse. Então isso deve ser bom. Agora, vamos criar aqui esses projetos. Então agora eu vou fazer importação. Vou importar Reagir de Reagir. Ok? Eu vou importar o ponto barra usuário dot CSS. Isso precisa ser um capital porque esse é o nome do arquivo. Certo, temos tudo isso. Agora, vamos fazer, vamos criar o componente. Vamos fazer const user. E isso vai ser um reage pontos f, c. Ok? Então este vai ser um React componentes funcionais. E eu vou colocar isso aqui assim. Tudo bem, então agora que criamos nossos componentes funcionais React e vamos ter retorno interno. E o que queremos devolver aqui. Eu vou ter um diff com um nome de classe. Eu só vou colocar aqui alguns nomes de classe que nós vamos aplicar porque no próximo vídeo, nós realmente vamos gostar de estilo deles. Então, eu só vou colocar as aulas agora por enquanto e então nós podemos fazer o resto. Então aqui, eu vou ter um div com um nome de classe de linha. Assim como este. E, e insights, eu vou ter um H2 que nós nomeamos, ok? E então um parágrafo que teremos o nome, por exemplo, John ou o que for. Ok, então nós temos um nome e depois John, e então nós vamos fazer regras horizontais como esta. Acho que isso precisa estar dentro daqui. Certo, vamos nos certificar de que estamos organizando bem o código. Ok, então olha, nós temos esses cartões. Temos uma briga com este. Temos uma regra horizontal só para criar como uma divisão. E então eu vou colocar outra linha, deixe-me apenas copiar estes na verdade. E então eu vou passar estes também. Acho que vai ser muito parecido com o que estamos fazendo. Sim. Então eu vou copiar estes mais uma vez. Como isso. Então isso vai ser, não é h? E eu vou colocar aqui, por exemplo, 23. E eu vou colocar aqui, este é o H, e este é o John. Ok, então isso vai ser um motorista. Isto não precisa disto. E finalmente, só precisamos de um botão. E vamos precisar que esse nome de classe precisa ser capital. E vamos colocar aqui o botão de apagar. E vamos dizer que excluir usuário pode ser qualquer coisa. Tudo bem, então nós temos aqui nossos componentes. Então, basicamente, vamos apenas remover o material que tínhamos no outro componente do aplicativo. Então vamos apenas fazer uma exportação de nosso usuário. Certo, então vamos fazer exatamente isso. Exportar padrão. Exportar padrões usuário assim. Tudo bem, então está tudo bem. Acho que estamos todos bem aqui. Temos um React de importação. Isso é melhor. Acho que havia um erro de digitação lá. Ok, então voltando para o nosso aplicativo dot TSX, onde temos nossos usuários antigos. Não queremos ter essas coisas o tempo todo, esse tipo de div aqui, porque basicamente criamos nosso próprio componente. Certo, então vamos fazer isso. Vamos apenas comentar esta. E o que vamos retornar quando estivermos passando por todos os usuários do estado. O que vamos fazer é ter nosso componente de usuário. Agora, obviamente, se temos este componente de usuário aqui, precisamos importá-lo no topo porque nunca o importamos. Então vamos importar isso. Vamos fazer a importação. Eu vou dizer “usuário”. Eu não preciso ter as chaves porque nós exportamos padrão. Sempre que você exportar padrão, você não precisa colocar essas chaves ao redor. Então, de onde queremos exportar isso? Eu vou colocar ponto barra para que possamos olhar no mesmo nível de diretório. Queremos ir dentro de componentes e queremos pegar nosso arquivo TSX ponto de usuário. Você pode apenas fazer ponto usuário. Essa reação vai entender que esse é o arquivo que você está tentando pegar. Certo, temos o usuário. Agora, aqui está a coisa. Qual é o meu loop? Considerando que o laço, está aqui. Agora, dentro deste componente, é aqui que realmente precisamos começar a passar os valores que você precisa pegar. Então os valores que eu vou passar. Então, isso é o básico do React, mas eu estou apenas dizendo a vocês. Então precisamos passar algumas propriedades dentro desses componentes para que possamos pegá-los depois dentro com os adereços. Então eu vou colocar aqui, criar uma propriedade de nome. E o valor disso vai ser o usuário. Nome do ponto do nosso loop que fizemos aqui. Assim como este. Então, criando isso, nós criamos outro que vai ser o H e outra propriedade que vai ser o usuário ponto h. E finalmente, eu vou passar um que vai ser o salto. E este vai ser o trabalho do usuário ponto. Agora, há um problema aqui, pessoal, que é no momento em que criamos nosso componente, nosso usuário, nunca especificamos que tipo de propriedades vamos passar para ele. Nunca especificamos que tipo de tipos temos aqui. Então precisamos fazer isso. Tudo bem, então no nosso user.email ESX, precisamos especificar aqui, ok, você pode passar aqui, por exemplo, prompts como este porque é assim que você pega todas essas propriedades. Então você grava, por exemplo, adereços nome do ponto, adereços do ponto, trabalho do ponto, e assim por diante. Com isto. Ou você pode entrar aqui agora. E em vez de ter os adereços, você pode estes estruturar este objeto e apenas pegar esses valores imediatamente como estes, como nome Em idade e o que mais era? O nome, a idade e o trabalho. Agora, obviamente, no momento, não sabemos nada sobre esses valores. Nunca especificámos o tipo disto. Então, o que podemos fazer aqui para especificar o tipo deste, vamos voltar para o nosso app.js x. E você se lembra quando criamos essa interface para como um usuário deve se parecer, como com a string, idade, trabalho e string. Vamos cortar essa interface. Pintura. Vamos apenas selecionar, cortá-lo daqui. Vamos para nossa interface de usuário, nossos componentes de usuário. Vamos colá-lo aqui. E agora podemos dizer olhe, esses componentes que estamos criando, que é um componente funcional React. Vamos colocar aqui este tipo de suportes angulares. E nós vamos dizer, ok, esses valores que temos aqui, o nome, idade e trabalho, eles precisam ter essa forma dessa interface, ok, assim. Tudo bem, porque olha, eu poderia apenas remover este daqui e apenas entrar aqui. Olha, isso é uma string e isso é algo que poderíamos fazer potencialmente isso, mas podemos simplesmente passar aqui, quais são os valores que vamos passar por dentro? Então vamos fazer o usuário int, passá-lo aqui, e estamos todos bem. Certo, então estamos usando tudo o que precisamos. Agora, há um problema porque se você se lembrar aqui, quando estávamos criando nossa interface para o estado, nós dissemos, ok, o usuário atual vai ter uma interface de interface de usuário. Mas agora não temos este aqui. Nós não temos isso. Por isso, porque não o temos. Esta interface que temos aqui que estamos usando para este componente em particular, nós podemos realmente exportá-lo, ok? Então, podemos exportar essas interfaces. Então, podemos usá-lo no arquivo app.js exe. Então vamos fazer isso. Eu vou fazer importação. E agora vou colocar aqui assim, deve ficar tudo bem. Sim, eu vou colocar usuário. Na verdade, vou pegar isso porque já estamos importando algo desse arquivo. Então vamos fazer isso. Então, o usuário int. Então eu estou usando esse colchete angular, essas chaves porque estamos apenas exportando. Não por padrão. Por padrão é o próprio componente olhar. Portanto, o componente em si é, por padrão, você não precisa de chaves e este é apenas exportar. Precisa passar as chaves. Tudo bem, então agora que temos a interface de usuário agora está sendo usado aqui corretamente. É assustador que esses importantes que eu tinha, apenas cancele isso. Está bem. Então estamos todos bem agora com tudo isso. Estamos perdendo alguma coisa? Deixe-me checar duas vezes. Sim, estamos perdendo algo agora. Estamos faltando agora algo que é basicamente agora este botão, quando clicamos nele, no momento não está fazendo nada. Deixa-me apagar isto. Então olhe, na verdade nós nem sequer vemos, nós vemos, vemos o nome, vemos a idade e a exclusão. Um olhar quando você clica aqui no Excluir, nada está acontecendo. Certo, então precisamos passar essa função aqui embaixo. Então vamos fazer isso. Então, onde é que estamos a passar? Onde estamos passando por aqui? Vamos passar a chave também. Se vocês se lembram, precisamos sempre passar uma chave só para ter certeza que isso não reclama disso. Então este é o eu e precisamos passar aqui, então a função delete basicamente. Então deixe-me ver. Vou dividi-los em linhas diferentes para que possamos ver isso melhor. Você pode quebrar isso também, se quiser. Então você pode ver melhor. Então eu vou colocar aqui o usuário excluir. Este vai ser o nome do meu adereço. E o que estamos fazendo aqui é como fizemos aqui em cima é a mesma coisa. Ok, Excluir manipulador I. Então, como você pode ver em nosso usuário, nós especificamos esta interface que tem um nome, idade, e trabalho. Mas nunca especificamos essa função do usuário delete. Olhe para o nome da interface, idade, trabalho, mas nunca especificamos o usuário deletar. Então, porque estamos passando esta propriedade, excluir usuário. Então vamos entrar aqui, colocar excluir usuário. Estes precisam ser com um tipo de função que não retorna nada. Então é assim que você especifica o tipo de uma função que não retorna nada. Se esta função estivesse retornando uma string, ela colocaria, por exemplo, algo assim. Se você passasse uma propriedade aqui, por exemplo, como cor, passaria algo como esta string. Então deixe-me remover isso porque não precisamos. Só estou tentando explicar essa parte. Por isso, vou anular. Então agora devemos ser capazes, sempre que clicarmos nesses botões. Então eu vou colocar no clique onclick. Vamos executar a função que precisamos importar de aparecer, que é que o lead, o usuário lead. Ok, então vamos pegar este onclick. Vamos executar isso. E eu acho que é isso. Estou perdendo alguma coisa? A propriedade está faltando o lead para o usuário. Sim. Então aqui no topo, o usuário atual, que dissemos aqui, é uma interface de usuário. Então isso significa que estamos faltando essa função lá também. Precisamos passar por isso. Então vamos fazer isso. Vamos fazer como uma função. Então este é o usuário principal. E esta função vai ser apenas uma função que retorna nada como um, um objeto vazio. Isso é bom. Então uma coisa que temos tudo. Então vamos ver, propriedade delete usuário está faltando um tipo, mas necessário no usuário. O que eu coloquei aqui? Então temos o usuário principal. Temos o usuário principal. Então, o que está faltando? Linha 39. Portanto, propriedade de usuário atual excluir usuário está faltando tipo, string de nome, h, cadeia de trabalhos. Então temos tudo isso, certo? Então, é quando estamos atualizando o estado. Então, quando estamos atualizando o estado como estamos redefinindo tudo no formulário Enviar. Também precisamos passar como uma função vazia. Porque estamos reajustando, precisamos colocar tudo nisso. Então, só assim. Então, o usuário principal, uma função que não retorna nada. Certo, então devemos ficar bem. Acho que estamos todos bem agora, vamos apagar as coisas que já não precisamos. Acho que estamos todos bem. Vamos tentar. Vou colocar Talmud, vou colocar a idade. Eu vou colocar desenvolvedor de software são usuário, excluir usuário e estamos todos bem. Ok, então deixe-me acrescentar, isso vai ser pilotos e eu vou adicionar outro usuário que vai ser Peter. A idade vai ser 18 anos e ele é um artista. Certo, vamos adicionar o usuário. Deixe-me apenas agora clicar no usuário principal ou algo assim. Então vamos fazer a tampa. É isso. Apagar, é isso. Ok, só mais uma coisa que eu gostaria de cobrir antes de terminarmos este vídeo, que seria, você pode realmente, você sabe, quando você está especificando todas essas diferentes formas de campos, você poderia potencialmente passar alguns, por exemplo, o h que temos aqui como um campo opcional. Ok? Então, quando você passa aqui este ponto de interrogação após este tipo de tipo que você está dizendo. Então isso significa que você pode criar um objeto com todos esses valores para assemelhar-se como nome, idade, trabalho, e assim por diante. Por padrão, ele exigirá todos esses valores. Mas quando você passar por aqui, esse tipo de ponto de interrogação será como opcional o valor, ok? Então, porque temos essas coisas assim, agora, pode haver algumas coisas que precisamos atualizar. Então este aqui, por exemplo, aqui em cima estes da idade, o que queremos fazer é se a idade for definida, ok, então eu vou acabar. E agora vou colocar aqui parênteses. Então podemos fazer isso assim. Então, se temos algo faltando no H, sim, eu só preciso colocar assim e ficaremos bem. Então este é o pai. Então por que isso não está funcionando? Porque eu preciso fechar essas chaves. Então eu estou dizendo aqui é que se nós tivermos um H, queremos mostrar esta parte aqui, esta linha que diz a idade e assim por diante. Se não, não mostraremos. Deixe-me ver se estou perdendo mais alguma coisa daqui agora. Acho que devemos estar todos bem. Então isso deve ser opcional, certo? Vamos tentar mais uma vez. Vou passar aqui sem o H, vou colocar o desenvolvedor de software no usuário. Então olha, temos nome e trabalho. Então isso não exigiu isso. Outra coisa que eu quero passar antes de esquecer é que nos fóruns, eu quero colocar todos esses formulários necessários. Então este é um HTML atributos que você pode passar para os fóruns como este exigido que basicamente quando você está tentando enviar isso, ele vai exigir que você para colocá-lo Eu não vou colocar na idade porque a idade é opcional. Mas olha, se você tentar enviar isso, vai exigir algum valor. Como você pode ver, olha, agora está apenas reclamando sobre isso. Tudo bem. Então é isso. Eu só estou colocando aqui Serviços ser Julius. Esta vai ser a idade de 45 anos e este vai ser um pintor e estranho. Então, esses usuários estavam sem idade, e isso é com a idade. E podemos deletá-los. Perfeito. Ok, então chegamos ao fim deste projeto, pessoal. Eu só vou fazer mais um vídeo apenas para estilizar estes porque este poderia ser potencialmente um bom projeto para colocar em seu site portfólio ou o que você quer fazer com eles realmente. Isso é exatamente como para você aprender um pouco mais sobre TypeScript e reagir e assim por diante. Então o próximo vídeo, que é o último que você não precisa fazer é apenas opcional. Mas se você quiser fazer este aplicativo parece bom, Vamos apenas fazê-lo. Está bem, vejo-te no último vídeo. 7. Como adicionar estilizar CSS: Tudo bem, então bem-vindo de volta. Então vamos fazer isso. Vamos começar a estilizar estes. Isso não deve demorar muito agora. Então a primeira coisa que vou fazer aqui é eu tenho alguns estilos aqui ao lado, então eu vou pegá-los e você pode apenas seguir junto. Então eu vou excluir tudo o que eu tenho no meu aplicativo dot css. E a primeira coisa que vou fazer é aplicar ao fundo, este tipo de cor verde. Tudo bem, então eu posso até me livrar disso que temos aqui. Então, temos este aqui. Agora no meu aplicativo ponto TSX. Então, meu componente principal, eu tenho esses nome de classe do recipiente. Então o que eu quero fazer lá dentro é que eu estou apenas copiando isso. Você pode basicamente, eu não vou gostar de digitar cada um deles porque você pode apenas pausar o vídeo e apenas copiá-lo. Então, temos um contêiner com estes max-width margem 0 auto e assim por diante. Então, ele só vai centralizar essas coisas aqui na página. Então eu vou alinhar meu H1 na página. Então tivemos esses H1 com um título. Então apenas alinhá-lo aqui na página. E então temos algumas cartas assim. Então, perdi alguma coisa? Acho que tinha o cartão algures por aqui. Deixe-me checar duas vezes. Então, no meu app.js x, deixe-me apenas verificar. Nós pegamos contendo nós temos nossos quatro. Sim, o meu formulário. Quero passar-lhe um nome de classe do cartão. Está bem. E o que isso faz é como na nossa forma, basta dar-lhe esta cor de fundo agradável de branco com este tipo de raio de fronteira e assim por diante. Foi o que fizemos. Certo, o que mais estamos perdendo agora? Queríamos segmentar o rótulo dentro do nosso formulário. Então eu vou fazer aqui, carro a etiqueta. E nós queremos atingir também, as entradas, apenas para dar um bom estilo também. Ok, entrada de cartão. Finalmente, temos o botão enviar. Esse é o último que precisamos selecionar. Então, eu só vou pegá-lo. Eu só vou entrar aqui, copiá-lo. E é apenas um simples silenciado. Isto, este vídeo realmente não é sobre. Então eu vou passar o botão cidade n. Então o nome da classe de BTN tão puro. Ok, então só para olhar um pouco melhor do que apenas redefinir meu Zoom que eu tinha na página. Então, tudo isso parece melhor. Então, se eu fosse colocar aqui, então este é o anúncio de emprego. Olha, estes por si só estão parecendo muito melhor agora. Então nós estamos apenas desaparecidos se eu não estiver errado, este aqui. Certo, então vamos fazer isso. Vamos entrar aqui. Vou fazer o meu CSS que preciso para isso. Então nós temos, vamos para o usuário TSX. Deixe-me ver, eu tenho um contêiner de usuário lá? Eu não tenho no momento, não. Certo. Então vamos fazer isso. Vamos fazer isso. Eu só vou pegar um pouco de linha que eles têm aqui. Vamos colocar a fila aqui. É disso que precisamos. Queremos agarrar dentro da fila e o H2 também. Tudo bem, então nós temos este. Então nós temos nossas linhas, nós temos nosso H2S. Queremos apontar agora os parágrafos, que é este. Então vamos adicionar um pouco de estilo lá, alguma margem dez. E finalmente, vamos apenas estilizar o botão. Então vamos fazer isso. Copie isso. Entra aqui. E devemos ficar bem. Lá está ele. Olha, eu só vou passar por outro usuário. Então isso vai ser, diga-me, esta vai ser a idade e este vai ser o piloto. Ops, eu vou adicionar este aqui. Então, Peter, idade, eu não vou colocar NEH e eu vou colocar aqui isso vai ser um médico. Então Dr. adicionar usuário e lá está ele. Olha, vocês eram todos usuários. Este é opcional para o H. Posso apagar e adicionar tudo. Tudo bem, chegamos ao fim deste projeto com reagir e datilografado. Então, é claro que não era como um extenso onde você pode usar tudo o que você pode fazer com TypeScript, mas eu acho que é um bom projeto para você começar a ver como você pode usar TypeScript e apenas ficar um pouco mais familiarizado. Tudo bem, então eu espero que você aproveite este curso e eu vou te ver no próximo. 8. Correções finais: Ou posso fazê-lo antes de finalmente terminarmos estes, há apenas uma pequena coisa que precisamos acrescentar aqui, porque caso contrário não veremos aqui valores dinâmicos. Então, se eu adicionar aqui dois usuários diferentes como você vai ver. Então, se eu adicionar, por exemplo , John, 25 anos, desenvolvedor de software, Luke virá John, 23 anos e driver, nós não colocamos isso. E se tentarmos adicionar outro usuário, por exemplo, como Peter, e isso vai ser 18 e o trabalho vai ser um olhar de piloto o que vai acontecer. Está vindo o tempo todo, os mesmos valores. Então, não queremos isso. Nós realmente queremos colocar aqui em nossos componentes de usuário, o nome, a idade, e o trabalho que está vindo aqui dos adereços. Então vamos atualizar estes rapidamente onde temos John, não queremos que esses valores sejam sempre iguais. Mas agora vamos colocar chaves e injetar o nome. Então vamos passar aqui o nome aqui em baixo onde temos, se tivermos alguma idade, queríamos passar por um lado agente que não vai ser 23, mas ele vai ser a própria propriedade da idade. E, finalmente, aqui em baixo, onde temos trabalho, não vamos colocar apenas motorista. Bem, vamos colocar aqui o trabalho em si que deve vir aqui a partir destas propriedades. Ok, com estes, agora, nossos projetos devem estar completamente acabados. Agora, vamos atualizar a página e vamos tentar certificar-se de que está funcionando. Então eu vou colocar John, eu vou colocar 28, por exemplo. E isso vai ser um desenvolvedor de software. Vou clicar em Adicionar usuário. E como você pode ver, John, qualquer desenvolvedor de software de ajuda. Então eu vou colocar um agora um novo nome. Vou colocar, por exemplo, a Jessica. E a idade vai ser 20 e o trabalho vai ser, por exemplo, enfermeira, vou clicar em Adicionar usuário. E depois temos a Jessica 20 e ela é enfermeira. Vamos tentar excluir um dos usuários. Certifica-te de que isto está a funcionar. Vamos tentar o John, e isso são caras. Agora nossa aplicação está completamente finalizada, nosso projeto está completamente feito. Então eu realmente espero que vocês tenham gostado disso e eu vou ver vocês no próximo.