Resumo do Vídeo sobre Refatoração de Componentes em React

Se você chegou até aqui, meus parabéns, você agora já sabe quando controlar os componentes no React. Esse vídeo vai ser só sobre refactoring ou aprimoramento dos componentes que a gente tem. A gente criou um input type text input type text input type checkbox rádio e a gente deu um select que é o drop down. Agora a gente vai dar um refactor e aprimoramento no nosso código em vez de ter todo o código para cada tipo de input no mesmo componente app. A gente vai fazer o nosso próprio componente de input. Nesse caso a gente vai fazer o nosso próprio input type text, caixa de texto, nosso próprio checkbox, nosso próprio rádio, select e assim por diante. É bom? Esse é como se fosse um vídeo bonus, mas para aprimoramento de código e aprender como fazer seus próprios componentes. E normalmente o que vai acontecer é esse cara, por exemplo, input no seu que vai ser seu próprio componente, mas a gente vai passar o onChange como props para esse componente novo. A gente ainda vai definir o onChange no componente app, mas vai passar a definição para o novo componente. A mesma forma vai ser o value. É bom? Então vamos lá. Primeiro fazer o input type text. Nesse caso vamos aqui criar o componente src, vou criar um novo arquivo. Input. Pode chamar o que quiser, vou chamar de input text, o .js. Primeira coisa a gente vai fazer é importar o react. React. É bom? Como é no esse componente, você pode fazer componente class se quiser, mas eu vou fazer um componente funcional chamado state less functional component que não precisa usar class, é só definir uma função e retornar o template da função. Tá certo? Nesse caso vai ser o que? Vou dar um const input text, é o nome do componente, e vou definir uma função assim. Certo? Função de flash. O argumento para o input text vai ser as propres, propriedades dadas ao input text. Aí do input text você retorna o template, que é a mesma coisa do return, o valor de return da render, da função render do componente class. Tá bom? Só para ter uma ideia do equivalente, eu vou digitar aqui o equivalente desse cara. Tem a render e tem o return. Esse aqui é o equivalente. Esse que é o componente funcional, state less functional component, esse que é o componente class. Porque eu vou fazer de funcional? Porque eu não vou manter um estado dentro do input. Tá certo? O estado aqui vai ser mantido dentro do app. Nesse caso esse componente, o estado vai ser mantido aqui e a gente vai passar o valor do estado para o input text como propres, que já é disponível pelo argumento aqui. Certo? Vamos continuar. Nesse caso vai pro app. Vamos copiar ou recortar o código. Esse que eu agora aqui, input type text, não sei o que. Vou recortar. Colar aqui. Esse nórdico é muito longa, então é uma coisa que você pode fazer é quebrar tudo dessa maneira assim. Normalmente eu sempre deixo o fecho na mesma nível do que abre. Certo? Vamos fazer modificações para poder usar esse componente à fora. Então input type text, valor name, nome. Esse name aqui a gente poderia mudar e dado como props. Props.name, eu vou chamar name. Certo? O valor também vai ser dado com props em vez de o próprio estado. Nesse vez vai ser props.value. OnChange vai ser a mesma coisa. Props. OnChange. Esse nórdico que eu quero usar esse componente dessa maneira assim. Eu vou tipo input text, name. Pode usar qualquer coisa. Por exemplo, nome. Value vai ser this state. Nome. OnChange. Essa maneira aqui deixa eu quebrar. Software app. Eu quero usar esse componente dessa maneira em outros arquivos. Nesse caso vai ser o app, do app. A gente vai usar assim, importar o input text e passar essas propriedades dessa maneira. Se a gente fizer assim, esse nome aqui vai ser passado como props e vai ser substituído aqui. Props.name. Props.name se refere a esse cara. Mesmo maneira o value, props.value se refere ao value. Nesse caso vai ser o estado do nome. Nesse caso vai ser o state do app. E o onChange da mesma maneira, esse onChange aqui vai ser o props.onChange que vai ser esse aqui. Desse o nomChange do app. Certo? Agora eu vou recortar isso e vou colar no app. Input text. Name nome. Value não sei o que. Ok. OnChange. Vamos salvar e testar. Salva o app. Salva o input text. Vamos ver o erro. Input text is not defined. Não está definido. Resolver-se eu, vamos para o app e importar. Input. Input text. From. Input text. No mesmo diretório. Tem que ter o ponto barra. Porque a gente está no mesmo diretório que o app. Então tem que ter esse cara. Não precisa ter ponto js. Salva. Ainda vai dar erro. Por quê? O erro é porque a gente não exportou esse componente. Então aqui no final vou dar export. Default. Input text. De sua maneira vamos exportar o input text para ser disponibilizado em outros arquivos. Nesse caso o app. Voltando aqui. Testar. Sem problemas, né? Certo? Note que o label do. Desse. Desse campo. Está fora do input. Você poderia pegar esse label e inclui-lo dentro do próprio input text. Então a gente pode fazer mais um aprimoramento. É opcional, mas eu vou demonstrar como se faz. Esse nome aqui a gente não quer. Aqui a gente quer passar com um atributo chamado label para o input text. Então a gente quer dar o nome nome. Adicionar o label vai ser assim. Nome. Certo? Vou lá para o input text. Vou adicionar label. Agora vai ser props.label. O props vai receber propriedade label que a gente passou aqui. Ok? Agora o problema aqui. Esse problema aqui é porque o react você tem que sempre retornar somente um. Elemento um. Componente que inclui todos os outros. Então a solução é pôr uma div para incluir todos os outros. Você só pode retornar um. Somente um. Filho. One child. Salva. Agora tudo ok. Parece o props label, mas não é o valor que a gente passou. Por que? Porque eu esqueci de adicionar a chave. A chave pega a variável e substitui o valor. Então adicione a chave. Agora apareceu o nome. Bom se quiser adicionar um. Espaço le. Pode fazer assim talvez. Vamos ver se funciona. Pareceu né? Difícil de ver, mas apareceu o espaço. Assim se pôr o espaço assim não funciona. Tem que pôr a chave e pôr um espaço aqui. Bom. Note que talvez essa linha seja muito longa. Também posso fazer a mesma coisa que a gente fez antes e quebrar tudo em uma propriedade por linha. Dessa maneira.