Resumo do Código

Antes de continuar eu gostaria de ir por maiorar o nosso código aqui. Nesses componentes que a gente fez, a gente fez button, fez input e fez spinner. Vamos para o button aqui. Se dá uma olhada aqui, eu estou usando styles.txt, botbuttonstiles.txt. Se você usar mais de uma vez pode destruturar também. A mesma maneira que eu fiz aqui você pode fazer com os styles. Por exemplo, pack.const destruturar, botstiles.txt. Está onde? Está dentro dos styles. Então, botstiles aqui. Então, não precisa mais digitar style.txt. Vou pegar, selecionar todos e remover. Fica melhor assim, né? Só isso. Vamos fazer a mesma coisa com os outros. Só para ver, vamos testar se ele não deu o pau. Se ele não deu o erro aqui, testando. E ainda está funcionando. Vamos voltar, vamos fazer a mesma coisa com o input. Vou no input. Se esse cara está usando três vezes, vamos lá. Antes do return, mudar const. Destruturar container style. Label style. E o input style. Do styles, né? Esse cara aqui. Esse cara aqui é esse. Vamos passar e vamos remover esse cara aqui. Não precisa mais. Está aí. Mesma coisa com o spinner. Se quiser. Ah, nem estou usando muito, mas se quiser deixar, só eu fiz uma vez, pode deixar, né? Está bem? Então, outra coisa que eu queria fazer é te mostrar como usar esse, fazer nossos componentes serem destruturados de algum módulo. Fazer o módulo para a gente. Porque a maneira que a gente está importando aqui, a gente tem que importar cada componente. É uma linha, mas seria legal a gente poder fazer isso aqui, né? A mesma maneira que fazer lá. Para fazer isso, o que é que eu vou fazer? Eu vou pegar esses caras, todos, dentro do common, e vou botar dentro de um módulo, chamado common. Para fazer isso, como é que eu vou fazer? Primeiro, eu vou fazer um index. Index.js. Aqui que a gente vai exportar todos os caras com um módulo todo, tá bom? Então, eu vou precisar do button input e spinner. O que a gente vai fazer? A gente vai dar export, star, tá bom? Star significa tudo. Vamos exportar do... do arquivo, do button, do input, e do spinner, cada linha, tá bom? Então, from, qual é o arquivo do button? Mesmo diretório, button. Faz a mesma coisa com o input. Star from input. Sport star from... spinner. Mas tem um detalhe, você tem que modificar os arquivos para exportarem, não default, mas exportarem como se fosse a chave, tá bom? Você tem que exportar com a chave button, chave input, chave spinner. Tá, vamos no button aqui, no final não pode mais fazer default, desse jeito aqui, para poder funcionar do jeito que a gente quer. A gente tem que fazer assim, export, passa um objeto, tá bom? Exportar um objeto cuja aqui a chave, o propriedade button, vai ser esse cara aqui, o componente, vai ser o button. Então, eu estou me referindo a chave button, vai referir ao button, que esse cara é esse componente aqui, tá bom? Faz a mesma coisa em todos os outros arquivos dentro de como. Como eu estou usando o S6, não preciso de estar duas vezes a mesma coisa, posso tirar esse negócio que vai ser a mesma coisa, tá bom? Mas não se confunda, se que é a mesma coisa que esse. Então, vamos botar na mesma linha, se quiser, assim, fica mais melhor de se ver. Faz a mesma coisa com o input, no final, fez de fazer default, faz um objeto cuja chave é input, e o valor é também input. Mesma coisa em spinner. Passa um objeto exportado com a chave spinner, e o valor também é o spinner. Dessa maneira, esse index aqui vai exportar tudo e vai dar um objeto assim, por exemplo, vai estar button, vai ser o button, vai dar o input, vai ser o input, e vai dar o spinner, e o spinner, né? Que esse cara vai ser ferido, e o button vai dar o input, e o spinner, e quando a gente for importar, a gente só importa assim, import, button from common. E é assim que a gente vai fazer nos outros arquivos. Então, vamos lá, vou recortar isso, tirar isso aqui, deixa aí, salvar, vou voltar o login form e ver se tem esses três caras, o que é que eu vou fazer? Import button, import input, e o spinner tudo ao mesmo tempo from common. Como é no index, não precisa digitar index. Desses jeitos e sal, então, não precisam digitar muitas vezes a mesma coisa. Só fazer isso, button input spinner do common. Vamos salvar, ver se não deu algum erro. Ainda funcionando, tudo ok, então ficou muito melhor de importar os nossos componentes. Por isso é só por esse vídeo.