Resumo do Vídeo

Oi, tudo bem? No vídeo passado a gente aprendeu a usar a função FAT para fazer o pedido de HTTP GET para obter informações de um banco de dados que a gente simulou usando o módulo do node chamado JSON Server. Nesse vídeo a gente vai continuar a fazer essa aplicativa aqui, mas nesse caso a gente vai fazer um pedido post. No vídeo passado a gente obteu as informações de um banco de dados falsos que a gente fez essa pasta chamado JSON a gente pôs esse arquivo lá e é só um arquivo que como se fosse um banco de dados que está sendo simulado e é tudo em JSON. Vamos rodar servidor JSON Server, dash dash watch, só rodar aqui o back end para a gente continuar. No node quando a gente usa JSON Server ele faz um serviço de RESTful. Então você só pode acessar, é só acessar esse local que já vem a pessoa se quiser. Pessoa número 2 está aí, tudo RESTful. Segue esse padrão. Então vamos lá, rodamos o back end, vamos voltar aqui no app, vou dar um refresh. A gente fez isso aqui antes, a gente clica atualizar, quando clica atualizar ele faz um pedido de HTTP GET para pegar a pessoa e pega os dados do JSON aqui, a gente pode olhar a data base que é o primeiro pessoal, um ideal, está aqui o pedido que foi requerido. Agora a gente quer criar uma pessoa usando o post. Então vamos começar, eu tenho um wireframe aqui que eu fiz, eu copiei esse da esquerda e fiz esse da direita, é isso que a gente quer fazer, é quase a mesma coisa, só botei esses campos de entrar informações e a gente não vai se preocupar com a avatar agora, tá vendo? A gente só vai botar esses input, text input, componentes e vamos clicar criar e vai fazer um record na data base, ok? Então vamos lá, primeiro eu quero comentar tudo que a gente fez nesse template aqui. Uma maneira de fazer isso é, pode fazer assim, ponho a chave aqui, call of grace e faz um comentário de múltiplas linhas, linhas múltiplas. Vamos ver se funcionou aqui, acho que vai dar erro, será que era eu ou não? Vou botar tudo bem agora. Então vamos só copiar esses negócios aqui. A gente ainda não aprendeu como fazer um aplicativo com cenas diferentes de navegação, então a gente vai só fazer desse jeito agora, tá bom? Então vamos botar esse negócio aqui do lado. Como é que tira essa barra aqui? Tira esse negócio aqui e... Fala. Vamos criar o perfil, não vou gastar muito tempo, perder muito tempo para mudar o estilo, se você quiser fazer o estilo para ficar igual a aquele, por favor faça, mas eu não vou se importar com o estilo agora, tá bom? Então essa imagem aqui vou deixar aí... O nome... a gente só muda no lugar de ter esse text, component text, texto, a gente vai por um text input. Então vamos aqui ver se já está incluído. Primeiro que a gente faz aqui, não tem text input, né? Vamos botar text input. Vai aqui, no lugar desse text aqui a gente vai por text input, tá bom? Então vamos por text input. Aqui, eu não voltei... Nada disso, vou cortar isso. Então o que a gente tem no text input? Vamos por um placeholder, primeiro, digite seu nome. Tá bom? Placeholder, vamos ver o que acontece. Nada ainda, né? Porque tem que aplicar um estilo para text input, senão não vai aparecer. Então vamos por um estilo, style. Vamos criar this.styles. Vamos criar... campo de texto, vou chamar ele. Vamos adicionar o estilo aqui no final, campo de texto. Vamos botar uma altura, sei lá... V30 aqui. Tá aí, já tá lá. Ah, espera, não. Tá aí. Só não. Vamos botar uma border width para ter borda. E... botar um padding. Botar igual do texto, botar 12. É demais, seis. Tá aí, né? Ponha uma margem. Seis também, 12. Tá aí. Vamos dar um pouco de padding. Vou botar a bola redundada. Uns quatro. Esqueci da liga. Esperar um pouco aqui que eu cliquei na negócio ali, por acidente. Ah, demora. Tá bom, vou clicar lá de novo. Só... Aí. Tá bom? Sonando aí. Agora vamos criar... Já deu o estilo. Aí tem um campo de entrar texto, né? Primeira coisa. Vamos fazer isso... Vamos fazer esse input. Se tornar um input controlado, ok? A maneira que faz isso, vamos associar o valor para o estado do componente. Vamos variar no estado do componente. Vamos associar isso com o nome. E quando a gente mudar o texto, vamos fazer um negócio aqui. Vamos usar a... Error Function. Função de Flash aqui. E quando eu mudar o texto, o que eu faço? Eu quero pegar o texto e setar o estado. E ver, set state. E eu quero que o texto seja o texto que eu digitei. Então, desculpa, nome aqui, né? Então, dessa maneira aqui, quando eu digito, o texto está dentro dessa variável, que é um argumento da função. E eu quero setar o estado, o nome, para esse texto. Tá bom? Para demonstrar como isso está funcionando, eu vou botar um texto aqui e associa com o valor do nome que está no estado. Aí, quando a gente digitar, vai aparecer, né? A gente aprendeu isso nos vídeos passados. Está aí, né? Agora, vamos remover isso. Quero te mostrar antes disso, te mostrar um negócio aqui. Então, aqui, vamos fazer isso mais conveniente aqui. Em vez de falar a texte, vamos botar o nome desse argumento para o nome. E aqui, vai se tornar o nome, né? Faz sentido isso, né? Que eu digito é isso e vai ser setado como o nome no estado. Funciona ainda. Aí, no ES6, ES6, a nova versão de JavaScript, você pode fazer assim. Pega aquela parte e remove. Tá bom? Aí, muito mais, não tem que digitar muita coisa. Então, ainda funciona, né? Até essa parte aqui, eu acho que pode remover o argumento, preciso nem ter o parênteses. Aí, funcionou, né? Se você quiser adicionar o parênteses, para clarificar, pode deixar. Vou botar assim, só para demonstrar como é possível fazer isso agora no ES6. Tá bom?