Resumo do Vídeo

Antes de continuar, eu gostaria de contar com seu apoio para continuar a fazer vídeos. Por favor, subscreva o meu canal do YouTube, NBK Tutor. Amei-te-o, disponível nas redes sociais do Twitter e no GitHub, como o usuário NBK-HOPE, NBK Hope. Muito obrigado e vamos continuar. Então, a gente acabou de definir o reducer para a autenticação. E agora a gente tem que começar a fazer esse formulário. Agora não tem nada, então se note nosso sketch aqui no wireframe, vai precisar de quê? Vai precisar do text input para digitar alguma coisa. Vai precisar do text para mostrar texto. Nesse caso vai ser o etiqueta, o label, para esse cara. Vai precisar de touchable highlight. Talvez eu use touchable opacity. Vamos ver, um botão, sensible talk. E é isso. A gente poderia usar esse componente do jeito que a gente está. Mas, na verdade, o que você quer fazer? Normalmente a gente cria os nossos próprios componentes para o botão, para o input, para o spinner. Então, a gente vai começar a fazer os nossos próprios componentes que vão usar o text input. Se for o componente input, vamos usar o touchable opacity. Talvez, se for o componente de botão e assim por diante. Então, para ilustrar isso, a gente vai precisar do quê? Nesse caso, deixa eu só fazer um novo aqui, aqui. A gente vai precisar de... Eu vou criar um componente chamado pattern para ser esse botão aqui. Também vou fazer input para ser esse caixa de texto. Vou fazer spinner, talvez, que vai ser um ícone de carregando, que vai aparecer. Quando a gente clica, talvez, entrar o carrastar, vai ficar processando e enviar o pedido. E, em vez de botão ainda aparecer, vai aparecer um spinner que vai ficar significando, que está carregando ainda e essas coisas. Então, vamos começar. Vou para o meu editor de texto, o que? Pasta src dentro do componente. Vou criar outra pasta chamado comas. A gente quer re-usar, utilizar novamente esses componentes. Então, vamos criar common, criar button, vou criar input, vou criar spinner. Então, a razão de gente ter uma pasta como é que esses componentes serão re-usáveis. Então, você pode usar quantas vezes quiser e, talvez, até você pode importar para outros projetos no futuro. Então, vamos ter esses componentes re-usáveis, re-usable components, inglês, que vai servir de como se fosse os building blocks, os blocos de construção para construir nosso aplicativo, ou outros que virão no futuro. Então, vamos definir aqui o button. Vamos botar aqui import react, from react. Vamos fazer componente funcional, tá bom? O botão. Então, vou fazer const button, uma função de flash. Retornar o template aqui e export, default, button no final. Nesse caso, eu vou usar qual? Tem várias maneiras de fazer um botão src-fotoque no react, né? Tem um touchable highlight, tem um touchable opacity. Então, qual que a gente vai usar? Vamos ver. Vamos ver aqui. Você pode escolher qualquer um quiser. Eu vou escolher touchable opacity porque não fica aquele negócio do background, do fundo preto, quando a gente clica. Tá bom? Então, vou usar touchable opacity. Fecha. Então, se você se lembra, o botão acertível, touchable opacity, vamos importar do react native. Touchable opacity é parte do react native, tá bom? E sempre tem um on press, né? O que acontece quando você toca o botão, tá? Nesse caso, eu vou receber o on press, como uma propriedade injetada a esse componente, tá bom? O que a gente quer usar o botão assim, por exemplo? A gente quer usar button on press, a gente vai passar qualquer coisa, a função que seja o on press desse cara. Então, para fazer isso, a gente vai usar as props que foram dados. Nesse caso, quando você cria um novo botão assim e passa essa propriedade on press, vai aparecer dentro desse argumento aqui da função de flash, como props, né? E esse cara vai ser acessado como props.onpress, né? Recordar aqui, pô, aqui. Vai aparecer assim, tá bom? Mas como eu posso destruturar esse cara, se eu quiser? Se não quiser digitar props, eu posso tirar esse props daqui e botar on press aqui, tá bom? Mesma coisa. Então, esse cara, passado com propriedade, vai ser aqui. Esse cara aqui, vai aparecer aqui. Tá bom? Dentro do botão, a gente vai ter alguma coisa, o texto, né? Vamos botar um text. E a gente pode definir de várias maneiras como esse texto aqui vai ser injetado no componente. A gente pode botar, talvez, uma etiqueta assim, click me, uma coisa assim. Essa é uma das maneiras. Como propriedade, eu posso também botar como um filho do componente, maneira que eu vou digitar assim, por exemplo. A gente pode fazer assim. Por exemplo. Então, essa é outra maneira. Então, eu vou fazer dessa maneira, tá bom? Então, eu vou botar o texto que é dentro, entre as tags, entre os componentes, vou botar aqui dentro. Tá bom? Mas como é que eu vou pegar essa informação e pôr aqui dentro desse texto? Se não é propriedade. Não é propriedade. Mas tem um detalhe aqui. Todo componente, você pode ter acesso aos filhos, aos children, né? Esses caras aqui, usando props.children, tá bom? Nesse caso, vai estar dado aqui no props.children, tá bom? Vai ser props.children, esse cara aqui. Como eu já destruturei esse cara, eu também vou destruturar children. Então, não precisa digitar props.children, tá bom? É assim que a gente vai pegar esse cara aqui. E é assim que a gente vai usar o botão. Esse componente prop que a gente está criando. Se a gente também deve adicionar uns estilos aqui para esses caras. Então, a maneira de fazer isso, vamos ver aqui. Vamos adicionar o estilo para o texto. Ah, esqueci de um detalhe, desculpa. Esse children aqui tem que estar dentro do color libre. Então, não vai ser substituído pelo valor da variável. Se botar children, vai aparecer o texto children, em vez do valor da variável children. Então, esqueci desse detalhe. Bom? Então, com isso, deixa eu só comentar esse negócio, que é só de referência para você ver como a gente vai usar esse componente. Outra coisa, estilos. Vamos lá. Vamos dar um estilo do texto. Style. Vamos botar styles. Sei lá, que a gente pode chamar de qualquer coisa. Eu vou chamar, sei lá, textile. Uma coisa assim. Tá bom? Ou text, style. Defende você. Tá aí o estilo. Não definimos ainda. Vamos também adicionar o estilo para o touch. Vou para a próxima aqui. Vou botar style. Styles. Vamos botar o quê? Bota um style, sei lá. Tá bom? Agora a gente tem que definir essa variável, chamando styles. Vamos aqui const styles. Vamos usar stylesheet. Stylesheet do react native. stylesheet won't create. Passe um objeto com todos os estilos. Esse caso, button style. Passe um objeto. Ainda não defini. Vírgula ou outro estilo, textile. Ainda não defini. Deixa aí. Tá bom? São detalhes, a gente tem que portar stylesheet. Vamos aqui. Stylesheet import do react native. Tá bom? Agora, se quiser, pode definir seu próprio style. A gente não sabe ainda como é que vai parecer esse botão. Vamos definir alguma coisa aqui, sei lá. Vamos para o textile font size, o tamanho do text para esse cara. Vamos para, sei lá, um pouco. Talvez a 18, 16, sei lá. Você escolhe. Vou botar a 18 aqui para ver o que acontece. Talvez seja muito grande, não sei. Também a gente pode fazer o texto do botão ser negrito, font weight, bold, por exemplo. Se quiser mudar a cor, pode usar color. Se quiser centralizar o texto do botão, você pode usar o align self. Para ser center. Tá bom? Uma das maneiras. Agora para o botão, vamos adicionar o estilo. Só rapidinho aqui. Vamos ver. A gente pode adicionar uma borda. Se quiser. Um. E arredondar, sim. Para arredondar as bordas. Bota quatro. Se quiser uma margem, sei que sabe, se quiser uma margem na direita, esquerda, essas coisas. Vamos só deixar assim. Ainda não vemos como vai aparecer. Então criei o botão, botei um estilo inicial. Vamos testar esse componente. Vamos aqui, vou no meu simulador, o Xcode. Para testar isso, vou no meu login form, tá bom? E vou importar aqui. Import. Button from. Está dentro do diretório common. Assim. Vamos usar aqui dentro. Entre esses re-re-re eu vou botar o button. Dessa maneira. Tá bom? Detalhe que a gente tem que mandar o WordPress, que a gente não... Eu vou botar uma função de flash aqui, retorno no, então não vai acontecer nada. Atualizando. Ah, text not the fine. Por quê? Vamos voltar o botão? O que a gente esqueceu? De importar o text, né? Então vamos adicionar. Text aqui, se notar. Adicionei o text importado do react-native. Salva um b. Tá aí. Se não acho que tem um botão, mas não tem nada, porque a gente não pode text. Se notar aqui a gente tem que usar assim e botar o texto do botão entre as tags, né? Então vamos lá, vamos botar aqui.