Resumo do Vídeo sobre Componentes Controlados no React

Oi pessoal, tudo bem? Nos vídeos passados, nós aprendemos a fazer componentes controlados no React. Nós fizemos o input type text, input type checkbox, caixa de seleção, input type radio, rádio e o select que é um drop down. O código para esse projeto está no GitHub, acabei de adicionar aqui. Se você for no meu GitHub, barra nbk-h-r-p-nbk-houp, vai para os repositores e busca por componentes controlados, já está aqui. Se você quiser o RL está aqui acima, GitHub.com, barra nbk-houp, barra componentes, ifm, outras controladas. Certo? O código que usamos nesse vídeo está lá, quiser ter referência assim. Obrigado. Ok? Então, também estou no Twitter se você quiser conectar o mesmo nome que o GitHub, twitter.com, barra nbk-houp. Obrigado e vamos continuar. Então, nos vídeos passados, como eu já falei no início, fizemos nossos próprios componentes, o input text, checkbox, checkbox list, rádio list e o select. Agora, gostaria de organizar mais os nossos projetos nesse vídeo. Senorte que todos os componentes que a gente criou estão nessa parte de nome src, que significa source, o código fonte. Normalmente, é melhor criar mais partas dentro dessa src para melhor organizar o seu código. O que eu quero fazer neste agora? Duas coisas. Tá bom? A gente vai refatorizar da refactoring. Primeiro, a gente vai criar um componente para ter todos os formulários, que agora o formulário está dentro do app, mas normalmente você quer criar um componente para o próprio formulário. Tá bom? Emvolver todas essas coisas para dentro do formulário. Esse cara aqui, todo esse cara todo aqui vai ser seu próprio componente chamado formulário. Essa é a primeira coisa que nós iremos fazer. A segunda coisa é organizar os arquivos, os componentes com a melhor estrutura de pasta. Nesse caso, você note que a gente criou nossos próprios componentes, que são essas pastas do formulário. Vamos pôr em uma pasta e vamos fazer como se fosse uma espécie de módulo. Você note que quando a gente dá um import, tem que fazer um import para cada componente. Mas aí, se tiver vários, os vários ficam muito chatos. Tem que digitar todo o tempo import no seu key from. O que a gente vai fazer? A gente quer fazer assim. Em vez de botar quatro import, a gente só botar um. Dessa maneira aqui. Entendeu? A gente quer mudar esse cara para só uma linha, desta maneira, de alguma coisa, uma espécie de módulo. Entendeu? A gente quer mudar todos esses caras por um só. Certo? Deixa eu deixar esse aqui comentado que a gente vai fazer depois. Certo? Vamos começar, então. O que é um formulário? No arquivo aqui dentro da pasta src chamado formulário.js, vou chamar de formulário. A boa é fazer um componente. Vamos fazer de classe. Tá bom? Então vamos lá. Primeiro import react. Form react. Mas como a gente vai fazer componente de classe, a gente vai precisar do react.component. Como eu não quero digitar o react.component, eu vou dar um destructo. De estruturar, eu vou extrair o componente dentro do modo do react, para a gente poder usar. Só chamando component. Vamos lá fazer classe, formulário, extends, component sempre. Se devido a inheritance. No final, vou dar um export. Default formulário. Vamos exportar o formulário para que possa ser importado ou requerido de outro arquivo. E é numa classe que formulário, extension component, todo o componente tem a função o quê? Função render. Então digita render. O que é que vai retornar? Qual é o template? O template está no outro arquivo, que é o app. Então vamos lá. De vaga, vai no app. Você está aqui no app, vai lá para baixo para render. E a gente vai selecionar só a parte que tem o form. Tudo que está dentro dessa tag, o componente chamado form. Até o form, vou recortar. Cheguindo, voltando ao componente formulário, vamos colar aqui dentro do return da função render. Está certo? A indentação está correta. Tudo ok. Certo? Se note aí. E agora? Agora você note que a gente está usando desco, não sei o quê, desco.state, assim por diante. A gente pode mover tudo isso desse cara aqui. Mas antes de fazer isso, vamos ver o que vai ter aqui entre essa diva aqui. Vai ter o formulário. Então a gente substitui todas as coisas que tinha antes pelo formulário. A gente formulário está aqui. Mas para poder usar isso, tem que definir acima ou importar. Vamos lá em cima. Vou com esse. E aqui eu vou importar depois do react import formulário from formulário. Certo? Então a gente tem que definir esses caras aqui dentro de formulário. Então vamos lá. Vamos recortar primeiro esses imports que não vão ser usados mais dentro do app, mas sim dentro do form. Vou recortar. Deixa eu recortar esses caras. Voltando o formulário lá em cima, depois esses import react colar. Agora vamos recortar as funções, o estado primeiro. Vou cortar o estado. Vou pôr aqui dentro do formulário. E agora todos os event handlers, chamado on change, as funções, todas elas vão mover. Vou recortar. Depois do state eu vou colar. Vê se a initação está correta. Tudo ok. Salvar. Voltando o app de novo. Pô, não limpeze aqui. Ainda está restando essas variáveis com o array. Vamos pegar todas elas. E eu não vei aqui. 1, 2, 3. Senor de que está dentro do render, não é? Mas eu gostaria de extrair esses para fora. Como são constantes, normalmente eu ponho um arquivo chamado constant. Então vamos fazer isso. Vamos recortar esses caras. Vamos criar um arquivo aqui. Eu vou criar um pasta chamado constantes. Constantes. E vou criar meu arquivo index aqui, o tujs. E vou colar todas as aquelas opções. Tá bom. Pode ser que seja usados em algum local, mas é melhor também ter em outro arquivo para ficar mais organizado. Mas você tem que exportar todos esses caras para que possam ser usados dentro do formular. Então o que você vai fazer? Você dá o export antes da const. Vamos exportar todas essas variáveis para ser disponibilizadas em outro arquivo. Nesse caso vai ser o formular. Então depois de dar o export em todos eles. Tá bom. Vamos lá. Vamos dar lá em cima para ver de novo. Deixa eu deixar aqui no mesmo... A gente vai dar uma limpeza depois, mas vou deixar uma linha para você ver que é algo diferente. Importa o quê? From... Cadê constants? Constantes. Importa qual é o nome aqui. País options, general options e fruit options. Vamos lá. Fruit options, general options, país options. Espero que digitei... tenha digitado tudo certo. Tá bom. A gente vai importar esses caras que estão dentro do arquivo index do constants. De note que eu não ponho index aqui, porque se o arquivo vai chamar index automaticamente, não precisa... é opcional você digitar. Não se esqueça do ponto bar, nem que seja o diretor, vai dar no index.js do diretor chamado constants. Certo? Dessa maneira também de definir outro arquivo. A gente só define as constantes uma vez. Da maneira que a gente tinha antes, as constantes eram definidas dentro do render, mas a função render é chamada toda vez que o state é mudado. Por causa disso, sempre estava redefinindo a variável. Tava sempre redefinindo fruit options, general options, não sei o quê. É melhor que a gente tire de dentro da função render e ponha fora. Dessa maneira, essas variáveis só são definidas uma vez. Então vamos lá. Vamos tirar esse cara. Vamos ver se está tudo certo. Estou no app.js. Importamos o formulário. Usamos o formulário. E no formulário. O formulário tem o state, tem os onChanges e tem o template. Tudo ok. E a gente importou as constantes. Aqui a gente criou um arquivo index dentro da pasta constants. E exportou cada um. Se não é de quando a gente faz o export constant, fruit options, ele cria um espécie de módulo. Dessa maneira, deixa eu voltar aqui para explicar. Pro index. Desse cara, quando a gente dá o export constant, sem ser default, senão se não tem default, ele vai criar um espécie de módulo com objeto. Dessa maneira aqui. País options. E agora general. Ah! Generou. Porque é um objeto assim, a gente tem que importar com essas chaves. E essas chaves, na verdade, é da dano de structuring, né? Se não tivesse isso, a gente teria que digitar o nome desse módulo aqui. Ponto fruit options. Ponto general options. E assim por diante, se por exemplo, módulo fruit options. Módulo general options. Assim por diante, mais uma de chaves. Então a gente faz o structuring para extrair cada objeto, cada valor, cada propriedade desse objeto aqui. Então vamos limpar aqui e continuar. Nossa, tudo certo? Os imports são tudo ok? Vamos lá checar, ver se não deu problema aqui. Console, eu não entendo nem o erro. Vê se clica. Tudo ok? Legal. Tudo legal, hein? Na de país. Tá certo? Por esse vídeo é só um próximo vídeo, vamos fazer, organizar mais os arquivos, tá bom? Valeu.