Aprenda a fazer aplicativos móveis com o React Native usando JavaScript!

Introdução ao React Native

Aprenda a criar aplicativos móveis com o React Native com esse curso básico.

Tutorial Iniciante de React Native (Curso Prático Completo Gratis em Português)

Aprenda React Native na Prática - Tutorial do Zero (Curso Gratis Completo para Iniciante)

Oi pessoal, tudo bem?
Nessa série de vídeos, nós vamos aprender como usar o React Native para fazer aplicativos
móveis usando o JavaScript.
React Native é um framework muito novo, foi lançado em 2005, ano passado.
Já está na versão .32 aqui, e ontem estava 31, já mudou uma versão muito, muito rápido.
Então, com React Native, você vai fazer aplicativos móveis usando o JavaScript e usando o React.
React é um framework de JavaScript que é muito popular hoje em dia, foi criado no Facebook
e agora todo mundo está começando a usar muito.
Faz o front-end muito mais eficiente e mais fácil de manter o código.
Então, vamos começar isso.
Aqui é o website do React Native.
Agora é só em inglês, não tem muita documentação em português, é coisa muito nova, como falei.
Então, vamos passo a passo aqui para configurar.
Primeiro, nesse vídeo, a gente vai aprender a configurar.
Você vai precisar primeiro de tudo do Node, vai ter que ter o Node, que é tudo de JavaScript.
Eu aconselho você usar o Chrome para ser o seu navegador.
Estou usando o Chrome aqui.
Vamos ver aqui.
Vamos lá para o terminal e vamos começar a instalar as coisas.
Se você quiser seguir no website, também dá no site deles aqui.
Eu vou fazer para a plataforma do Mac, para iOS.
Se você tiver outro sistema, só seguir aí.
Mas esses vídeos, essas séries de vídeos, serão para iOS.
Vamos ver aqui.
Então, a primeira coisa, você vai ter o Node.
Você tem que ter o Brua aqui, que é para instalar os pacotes.
Package Manager, eu já tenho instalados.
Se você não tiver, Google, busca no Google e instala.
Então, vamos para o install Node, eu já tenho.
Então, não precisa.
Já tenho o Node aqui, a minha versão é essa.
E depois, instala o Watchman.
Também já tenho.
Então, instala o Node e o Watchman.
Quando você instala isso, a gente vai instalar o React Native.
Vamos para o Global, NPM, install.
Esse aqui para ser Global e React Native CLI.
Eu já fiz aqui a instalação, demora um pouquinho.
Se você tiver problema com permissão, acho que você tem que usar o sudo.
Mas depois de instalar isso, a gente vai criar o nosso projeto.
A gente vai usar o comando React Native.
React Native vai dar o init, aí o nome do seu projeto.
Vamos fazer o primeiro projeto.
Vou falar que é o primeiro projeto.
Você aperta aí, vai começar a criar.
Eu já fiz, porque demora um pouco.
Então, para economizar um tempo aqui,
vamos assumir que você já tem.
Depois disso, a gente vai entrar no diretor aí.
Vamos ceder.
Aqui, os arquivos que são generados pelo scaffold do init.
React Native init e o nome do seu projeto.
Depois de ir para a pasta do projeto, a gente vai executar um projeto
com esse comando aqui, React Native, espaço run iOS.
O React Native por um run iOS vai abrir o Xcode com o simulador do iPhone
e vai também abrir essa tela aqui do React Packager.
Então, vai ter essa tela e vai ter o simulador.
Eu já fiz, porque demora um pouco no meu computador.
Depois de fazer isso, você vai abrir o simulador.
Eu mudei a tela para 33% para ficar menor.
Se você quiser maior, só mudar para 50% e essas coisas.
No simulador, você clica em tela, que é o Window.
Aí vai Scale, 33%.
O meu está em inglês, então.
Seu deve estar em português.
Vamos ver aqui.
Depois disso, aqui tem o Package Manager.
Aí está aqui.
Se você quiser reload o app, o aplicativo é perto do comando R, comando R.
Está escrito aqui.
Para reiniciar o aplicativo aqui.
A atualizar, comando R.
Tem também o menu de opções aqui.
Aperta comando D, que vai aparecer essas opções.
Você pode clicar no segundo aqui, Debug GSM remotely.
Que é para você fazer o debug no Chrome, no navegador.
Vai aparecer a tela aqui.
Você clica aqui e abre o console.
Eu cliquei em Especial.
Aqui vai ser o...
Clicando no console aqui.
Aqui, que você faz o debug.
Se quiser fazer console log, essas coisas vão aparecer aqui.
Por exemplo, vamos reiniciar aqui e atualizar.
Você viu que já atualizou a página quando você faz lá.
Tem também outras opções aqui.
Você pode explorar.
Muito bom.
A inspecção aqui.
O inspector.
Inspector.
Para você clicar no negócio e ver qual é o estilo que tem.
Eu fiquei botar aqui.
Menor.
Eu cliquei naquele negócio ali.
Tem um estilo.
Aí fica dizendo as parâmetros aqui do estilo.
Tem um text componente.
Componente de text.
E outro aqui.
Aí tem os estilos aqui.
Text line, margin.
Essas coisas aqui.
Não sei se você dá para ver.
Vou aumentar aqui.
Os problemas que a minha tela não vai para cima.
Aqui eu.
Então, é só isso para a introdução de como instalar React Native e fazer o seu primeiro aplicativo.
Na próxima, a gente vai começar a modificar esse aplicativo demo aqui e vamos mudar as
coisas e entender como é que funciona as coisas no código de JavaScript.
Se você ver aqui no downls, um lista aqui, aparecem os arquivos.
Como eu estou fazendo para iOS, a gente vai ver esse arquivo aqui.
E vou usar o Atom.
Então, vamos só abrir aqui só para você ver.
Vou dar um preview para você que a gente vai ver no próximo vídeo.
Demora um pouco, meu computador.
Vamos ver.
Está aqui.
Então, aqui eu acho tudo o projeto.
As coisas que você precisa suprar para agora são esse index.
O index aqui.
ponto iOS, que é o que a gente está fazendo.
O que eu estou fazendo no iOS.
Se fosse Android, você começaria naquele outro aqui, Android.
Aqui é a estrutura do projeto.
A gente vai ver no próximo vídeo.
Basicamente, o que você faz é importar o React e o React Native, os componentes padrões
aqui que já vem incluído.
A gente faz uma classe aqui que é parte do ES6, a nova versão JavaScript, que vai ser
adotada como padrão.
E os estilos aqui no final, o que é que é só o negócio aqui para fazer o projeto executar
quando você roda o programa aqui.
Ele vai rodar essa classe aqui, esse componente que a gente fez.
Então, é só isso para esse vídeo.
No outro gente vai ver como o que é que está acontecendo nesse file, nesse arquivo index.
Obrigado por assistir.
Se você gostou, por favor, deixe nos comentários aí.
Valeu, tchau.


0001-01 Aprenda React Native na Prática - Tutorial do Zero (Curso Gratis Completo para Iniciante)

Estrutura do Arquivo de um Componente de React Native do App de Amostra

Muito bem, vamos continuar aprendendo React Native.
Então, no último vídeo a gente viu como fazer o setup, configurar, instalar os modules
e rodar a nossa primeira aplicativa, nossa primeira aplicativa, o móvel.
Aí o React Native cria, genera esse aplicativo dentro para a gente que tem umas coisas aqui.
A gente vai inspecionar, vamos dar uma olhada para ver o que está acontecendo aqui.
Então, aqui é o meu simulador, vou chover aumentar aqui, fazer maior.
Vamos botar aqui Live Reload.
Então, quando eu fizer umas mudanças no meu código aqui, vai automaticamente atualizar o meu aplicativo.
Isso é uma das vantagens de fazer um aplicativo móvel no React Native,
que funciona como se você estivesse fazendo um aplicativo web, aí você pode só atualizar.
Em vez de compilar as coisas e ter que esperar para todo o aplicativo,
esperar ele compilar como se fizesse Swift ou Java para o Android.
Então, aqui é só Reload, Command R, Command R.
Mas eu botei o Live Reload, então vai automaticamente mudar as coisas aqui.
Então, vou botar esse negócio no lado aqui, aí eu vou aumentar a tela aqui.
Então, vamos ver o que está nesse arquivo.
Eu sou primeiro de tudo no seu componente aqui, isso que a gente chama o componente,
o componente chamado primeiro projeto, é o componente que vai, que é,
primeiro lançado quando você roda a aplicação.
Então, as primeiras coisas que você faz é importar o React, que vai ser o framework que a gente está usando.
Então, importa o React do React aqui.
Aí depois importa os componentes do React Native.
Se você não sabe o que é que significa aqui, esse negócio é chamado de structuring, de estruturação.
O que a gente faz isso para não ter que escrever aqui, por exemplo, esse componente aqui,
se a fé é isso, mas o que é isso?
Dentro do objeto React, tem um negócio chamado component.
Aí, se eu não tivesse essa parte aqui, eu teria que botar assim.
Porque na verdade, component é isso aqui.
Dentro do React, do objeto React, tem outro chamado component.
Aí, quando você faz o structuring assim, é mesmo quando você fala,
eu quero que você extraia o component, o objeto.
Então, dessa maneira, eu não tenho que ficar todo o tempo falando React.react.
Eu só falo componentes.
Mas na verdade, é parte do módulo do React, desse objeto aqui.
Então, fica mais fácil escrever as coisas, não tem que escrever muito.
A mesma coisa com esses outros aqui.
Você está importando esses componentes aqui que está dentro do objeto,
que é fornecido por esse módulo aqui do React Native.
Então, eu não quero ter que digitar React Native. essas coisas todo o tempo.
Então, eu só dou um structuring aqui dentro dos braces.
E a gente pode falar view, text, e style, sheet, essas coisas sem escrever React Native.
Entendeu? Isso aqui é o chamado componentes.
Esses aqui são fornecidos pelo React Native e são os mais básicos,
já são dados a você e você só usa eles para fazer essa aplicação.
Mas a gente pode fazer os nossos próprios componentes,
que é baseado no uso dos componentes que já são fornecidos.
Então, aqui, depois de importar o React e o React Native, vem a classe.
A gente está usando o ES6, o ECMAScript 6, que é a nova versão de JavaScript,
que vai ser o padrão.
Agora, todos os navegadores suportam o ES5, o ES5,
mas já estamos nos... vamos mudar para o ES6 e o ES6 tem... agora tem classes,
tem as classes no JavaScript.
E ficam muito... as coisas ficam muito mais fáceis de digitar,
não tem que falar function todo o tempo.
É só botar um... esse negócio assim com a... com a... essa arrow function aqui.
Ok, mas vamos ver, aqui é o nome do componente.
Se o todo componente que você cria no React, você tem que extender do componente.
Esse aqui é para fazer inheritance, que é essa classe que deriva desse componente.
Se o todo componente que você cria deriva do componente,
que é dentro do... que é parte do framework do React que a gente importou ali.
Você vai sempre ser assim, classe o nome do seu componente, extends component.
Aí dentro do componente vai sempre ter a render function, a função de render.
Todo o componente tem que ter essa função e dessa função você retorna o que você quiser,
que seja render para a tela, assim.
Que é o mais básico... componente mais básico que você pode ter.
Ter que ter... você dá o nome a ele e tem que ter a função de render.
Aí você retorna qualquer coisa, pode ser... vamos fazer aqui só um texto aqui.
Essas coisas aqui.
Aí eu já salvei e já atualizo automaticamente aqui.
Então você vê que o texto está lá porque não tem nenhum estilo.
Está feio, mas não tem nenhum estilo.
Mas você vê que... essa é a ideia.
Vamos voltar para o que era antes.
Já tem esses aqui, um template.
Essa view que já fizeram aqui, com aqueles negócios.
Vamos salvar para atualizar automaticamente ali.
Já tem aí.
Aí depois disso, tem aqui os estilos.
Normalmente você põe aqui quase no final do arquivo.
Você declara com const, chama de styles e cria um style sheet.
Você usa esse componente que é chamado style sheet
para criar o seu, a sua style sheet.
Aí você passa um objeto que tem os estilos aqui, por exemplo.
Esse aqui é o nome do estilo, aí você define como é que você quer esse estilo.
Como é que você quer isso aí?
Aqui no React Native, eles usam Flexbox para o modelo de, não é o box model, é o flexbox.
Flexbox é uma alternativa nova para o modelo da Caixa, o box model, que é muito melhor.
Então, se você quiser dar uma olhada, busca aí flexbox.
Para ter um,
ter um,
para aprender o básico.
Mas aqui nesse vídeo a gente não vai ver muito disso não.
Então,
você tem que aprender aí que esse vídeo vamos focar no React Native.
Aqui em inglês, eu não suporto procurar um português aí.
Que eu estou em inglês aqui.
Caixa flexíveis,
essas coisas, tem um MDN.
Então aqui, sem projetilos aqui,
aí no final normalmente você
exporta o módulo ou,
nesse caso, como é o primeiro componente, o componente que roda a aplicação,
você tem que fazer esse app registry e registrar o componente.
Aqui é o nome e você passa uma função aqui que retorna o componente que é feito aqui.
Esse primeiro projeto aqui é o nome desse aqui.
Esse aqui é o Errol Function, a função de,
que é nova no ES6.
Esse aqui é como se fosse...


0001-02 Estrutura do Arquivo de um Componente de React Native do App de Amostra

O Componente Text, View e a Definição do Estilo com StyleSheet

Se for a mesma coisa, se fazer assim, FALA FUNCTION, aí assim, RETURN, como se fosse
assim.
Mas agora a gente não precisa mais falar function no ESX, que é muito...
Descreve muito, então a gente só ponha os parênteses.
Fica muito melhor agora, né?
Então vamos voltar aqui para o Render Function, a função de Render.
Então só relembrar que todo componente vai ter que ter no mínimo essa função aqui,
você define retornando como é que você quer que essa cena aqui apareça no seu celular
aqui, seu móvel, aplicativo móvel.
Então aqui tem vários componentes que são usados aqui, já vem com o React Native, esse
primeiro aqui vamos aprender o View.
Esse View aqui é a mesma coisa que se você estiver fazendo um aplicativo web, mesma coisa
que o Dev.
Então se você sabe Dev, mesma coisa que eu vi aqui, é o container aqui.
Então e o Text é como se fosse um span.
Aí todo o texto que você tiver, todo o texto tem que ser dentro do Text, entendeu?
Aí quando você retorna da função Render, você tem que sempre retornar somente um componente
assim.
Por exemplo, nesse caso tem um View, né?
Vamos fazer assim.
Tem um View, mas se eu tivesse assim outra View, tem duas Views, né?
Mas esse caso aqui não pode no React Native, no React, né?
Parte de React.
Você sempre tem que retornar somente um componente.
Então vai dar problema aqui, vamos ver.
Se você veio aqui, leu erro.
Leu erro aqui.
Então, a dizendo aqui não pode ter isso dois juntos.
Se você quer ter duas Views lá, você pode botar uma outra View e põe as duas dentro
dela.
Assim vai ficar bom.
Sem problemas.
E eu cliquei no negócio e agora vai abrir.
Que chato.
Esperar.
Então, quando você quer pôr estilo, quer mudar aparência aqui, do qualquer elemento,
quer componente, você põe o style igual, põe o braces aqui.
Como o nome do estilo style sheet é styles, você põe styles dot do ponto, o contero,
o nome da classe como assim.
Mas não é CSS, não é CSS, mas como se fosse assim.
Então o o está aqui, né?
O negócio funcionou então.
Vamos tirar isso e deixar como estava antes.
Está aí.
Então para os estilos, normalmente você define aqui, põe styles dot o nome do estilo
que você definiu aqui.
Nesse caso aqui vamos ver para esse texto aqui.
Welcome to React Native.
Então o estilo é welcome.
Vamos ver o que é.
Está aqui definido.
O tamanho da fonte é 20.
Aí está desenhando para alinhar o texto no centro e tem uma margem aqui.
Então vamos mudar isso, vamos aumentar a fonte para ver o que acontece.
Agora vai atualizar automaticamente que aumentou, muito grande agora.
Vamos mudar essa margem aqui talvez, um pouco a 30 aí que acontece, muito grande texto.
Botou a margem e agora o texto foi para a nova linha, o native, palavra native.
Aí é assim que põe os estilos.
Vamos ver essas instruções aqui, instructions.
Centro, co aqui, vamos botar outra co aqui, vamos botar vermelho aí, red.
Ver o que acontece.
Mudou a color do texto, color em vermelho.
Aí você pode adicionar os seus styles props também, vamos fazer um novo texto aqui,
um novo texto.
Aí sempre assim estamos usando o GSX.
Isso aqui não é HTML, parece, não é, é chamado GSX, JSX.
Parece o HTML, mas é na verdade o JavaScript, é funções de JavaScript que fazem isso.
Aqui são na verdade funções JavaScript que invocam uma função do react, yeah, create
element.
Se você não tivesse esse GSX aqui, JSX, você tinha que digitar todo o tempo, react.create
element.
E você já sabe que já digitar isso aqui é muita coisa, fica muito mais fácil de ver,
atualizar as coisas e fazer as coisas se você usar o GSX.
Então a gente vai fazer o texto aqui, vou botar uma mensagem aqui, olá, mundo, essas
coisas.
OK, sem assento nisso.
OK, vamos ver, botar o simulador, vamos salvar e vai automaticamente atualizar aqui.
Tá lá, mensagem, vamos adicionar um style, vamos fazer style igual, aí põe os braces,
aí vamos fazer styles, mensagem aqui.
Vamos criar mensagem aqui, vai no styles aqui, adiciona o novo objeto, botar o nome
e mensagem.
Vamos botar a back ground color, com o texto para ser branco, vamos ver o que acontece.
Tá aí.
Fundo, fundo, azul, texto branco.
Bota que eu sempre põe um vírgula aqui, só de precaução, às vezes a gente se esqueça
e dá problema, então eu sempre põe.
Tá tudo bem se você botar isso.
Eu te dou conselho de sempre botar, sim.
Algumas pessoas não gostam de ser muito...
Vamos ver aqui.
Mas a gente aprendeu aqui a adicionar um style no componente de texto e aprendeu a
fazer o nosso, o que é a função render.
Todo componente tem no mínimo a função render que retorna o template.
Retorno como você quer que se apareça na sua tela, na sua screen.
Aqui é o nome do componente, sempre deriva, extends do objeto componente, que é o componente
parte do react aqui.
E é isso por esse vídeo.
Você pode mudar, adicionar umas propriedades aqui para os estilos e ver como é que aparece
aqui para praticar e faz uns textos aqui, bota mais um aí.
Bota um avio, sei lá, faz umas coisas aí e bota uns estilos.
Vamos ver se funciona.
Funciona ou não, né?
Se lembra que eu disse que todo o texto tem que estar dentro do texto?
Então vamos pô.
Aí, aí eu usado de estilos, sei lá, pode também botar o estilo inliner.
Se não quiser declarar o estilo aqui, pode fazer aqui.
Então é só dar um objeto aqui.
Está aqui style, igual, põe os braces, aí põe mais outro brace porque você tem que
mandar um objeto, né?
Põe um objeto aí e põe a definição, não vê, vou botar color red para mudar o texto,
fonte.
Colar fonte agora é vermelho, aí é só botar virro aqui e botar mais propriedades.
Background color.
Vamos ver, e alô.
E aí?
Só assim, normalmente eu não tenho espaço aqui, mas eu só botei espaço para você
ver como é que você pode botar um objeto ali.
E se você depois quiser tirar isso aqui daqui e botar lá no final do arquivo, só
ir na style sheet, só recortar aqui, dar o nome a ele, sei lá, texto.
Aí vai aqui, define texto e cola lá.
Vou botar aqui, botar um virro ali, só de precaução.
E aí, está aí funcionando.
Então é, para esse vídeo é só, espero que tenha aprendido alguma coisa, só praticar
mais aí, esses, usando esses componentes básicos, a view e o text, e a adicionando estilo com
style e definindo seus próprios estilos aqui na style sheet que é criada no final.
E vê aí, você pode adicionar coisas com border.
Por exemplo, vamos adicionar esse welcome text, põe uma border, border width, nesse
caso, para botar um border aí, como explicou.
É, vai na documentação e vê os estilos, tem aqui, se você for no website, vai na
documentação para o componente que você está usando.
No meu caso aqui, vamos ver como é que muda o style aqui, cadê?
Vamos ver o text, por exemplo.
Está aqui todos os estilos que você pode aplicar, essas coisas.
React nestiles.
Vamos buscar aí e ver que o style, página aí, aí tem dizendo os exemplos aí.
Pode também olhar na documentação do flexbox para aprender flexbox, essas coisas.
Espero que tenha gostado do vídeo, muito obrigado por assistir e vamos praticar, hein?
Tchau.


0001-03 O Componente Text, View e a Definição do Estilo com StyleSheet

O Componente Image para Mostrar uma Imagem na Tela do Aplicativo Móvel

Fala galera!
No vídeo passado a gente aprendeu como rodar aqui
primeiro aplicativo, móvel usando o React Native.
A gente aprendeu sobre portação de módulos,
fazer uma classe para definir um componente
e dos estilos aqui, feito pelo componente Style Sheet.
Só eu lembrei de que o estilo no React Native usa o Flexbox,
que é o modelo para estilo que é diferente do Box Model,
o modelo de caixa que já é usado há muito tempo na web.
Flexbox, guia.
Fala, eu lembrei de que todo o componente definido com a classe
que vem do ES6, o ES6 é nova versão de JavaScript, que inclui classes.
Clases aqui, classes.
E cada componente tem que ter no mínimo a função Render.
E você sempre retorna o template,
com o que você deseja que esse template apareça na tela.
Neste vídeo, vamos aprender sobre outros componentes
que já são dados pelo React Native.
Vamos falar de images, o image componente para imagens,
para botar imagens no seu aplicativo.
E vamos também aprender como é que põe um botão,
como é que põe um touchable highlight.
A gente vai aprender touchable highlight, tudo no talk.
Você toca a tela, não é, se chama botão, não.
É um negócio que toca a tela, o elemento que toca, touchable, tocar.
Então vamos começar com a imagem aqui.
Se você for na documentação React Native,
só lembrei de que essas séries de vídeos
usando o React Native versão 0.32.
Então, o React Native muda muito rápido,
porque eu já tenho tecnologia que foi lançado em 2005,
ano passado, isso é muito nova.
Se lançaram agora, então, muda muito.
Só a versão nova, bem quadra, acho que é toda duas semanas,
não sei o que que veio lá.
Então, vamos ver o que o Mac põe a imagem aqui.
Aqui eu tenho minha aplicação, eu rodei meu projeto aqui.
Se você lembrar, eu tenho um projeto aqui,
primeiro projeto, meus arquivos.
A gente está focando no iOS, plataforma iOS da Apple.
Estou usando o Mac como sistema para assinar aqui,
para fazer o projeto e você tem preciso de Xcode.
Eu já abri aqui, eu rodei o comando React Native Run iOS
para rodar uma aplicação no iOS,
meu simulador aqui.
Então, aqui meu código,
vamos remover essas coisas aqui, é muito...
Coisas, vamos deixar só a view lá,
o componente view, que é como se fosse a div,
div no HTML, na web, agora não tem nada, né?
Vamos ver se o live reload está habilitado.
Esse terceiro coisa está habilitado,
então vamos continuar, que vai atualizar automaticamente.
O que eu quero fazer é te introduzir a imagem, né?
Primeiro de tudo, quando você quiser usar o componente
do React Native, você tem que importar, né?
Então vai lá para o começo do arquivo,
adiciona o componente, nesse caso é um componente image,
que já vem do módulo do React Native, e vou adicionar aqui, né?
Sempre goste de pôr uma vírgula aí,
porque às vezes a gente se esquece,
então só de para cá está sempre por pôr uma vírgula,
nem que seja a última coisa que aparece no objeto do JavaScript.
Isso não precisa de vírgula, mas eu gosto de pôr.
Vamos pôr lá, já temos o componente,
agora vai estar disponível aqui para a gente usar
no nosso componente aqui, primeiro projeto.
Esse aqui é um componente também,
é o nosso componente que a gente criou.
Agora vamos botar aqui as tags,
esse aqui, se você se lembra, o que se chama o JSX,
JSX, que parece HTML assim,
as tags, tags HTML, mas na verdade isso são funções do React,
que parece que a gente, o visual parece que ser tags
e é muito conveniente para a gente, fica mais fácil de programar assim,
eu gosto de JSX, né?
Então vamos lá adicionar o image component, né?
Nesse caso esse componente aqui não precisa de fechar a tag,
você pode fazer isso, mas é perca de,
eu quero digitar isso, mas fecha aqui no mesmo tempo.
São um detalhe que sempre no React você tem que fechar,
nem que seja um tag que não precise de tag de fechada,
tem que fechar com esse caráctere do slash aqui.
Aí a gente tem que dizer onde é que está a imagem.
Vamos ver, a gente usa as forças, ok?
Tá bom?
São detalhes no HTML a gente usa SRC,
SRC, mas aqui no React,
a gente pode like, React Native.
Isso aqui é chamado propriedade do componente,
HTML a gente chama attribute,
a gente chama tag, o elemento,
essas coisas e atributos,
mas na verdade no React a gente chama isso aqui o componente,
isso aqui a propriedade,
a gente está passando a propriedade para o componente image.
Vamos passar aqui uma imagem que eu salvei aqui,
vamos ver aqui, eu salvei uma imagem aqui, essa aqui,
e eu botei dentro do meu projeto aqui,
está aqui a imagem aqui, React Logo, entendeu?
Está aqui.
Aí já tem local, na imagem local,
se chama React Logo, ponto PNG.
O que a gente faz aqui, a gente faz um require
e põe ponto, põe o slash ali,
e põe o nome da imagem, React Logo, png.
Se está no mesmo diretório, eu põe esse aqui,
tá bom, não se esquece, e põe require.
Agora vamos ver o que acontece,
se eu pôe esse aí, está atualizando automaticamente,
já está lá, essa imagem aí.
Note que quando eu uso uma imagem que é local,
não precisa definir as dimensões da width and height,
que é definir altura e comprimento,
não precisa for imagem local usando require,
mas ainda assim, é uma imagem muito grande,
então a gente tem que aplicar um estilo aqui
para deixar a imagem menor, vamos fazer isso.
Então vou fazer um style,
e vou dar uma propriedade,
HTML a gente chama atributo, mas no React,
React a gente chama propriedade.
Vamos fazer aqui na folha de styles, style sheet,
eu vou fazer os styles,
eu estou fazendo referência a isso aqui,
e vamos chamar de imagem, vamos definir aqui,
vai lá no final, vamos definir imagem,
aí dá um object, botar uma virgula só de precaução,
vamos definir a width,
que vamos ser, talvez uns, vamos ver, 200,
e vamos definir uma height, vamos botar quadrado aí,
vamos ver o que acontece.
Olha aí, são quadrados aqui 200 por 200 aqui,
está bom aí, se você quer mudar aqui o que acontece,
fica mais só.
Vou botar para quadrado,
estou está aí,
definiu a altura, o comprimento e width and height.
E é isso como se adiciona uma imagem estática,
já está presente no seu computador local,
só adicionar o required aqui,
aí passa o, onde é que está a imagem,
nesse caso está no mesmo direitório aqui,
e eu ponho o ponto e o slash aqui.
Vamos agora ver como é que foi a imagem do,
usando o link, se a gente tivesse imagem,
que vamos ver essa imagem,


0001-04 O Componente Image para Mostrar uma Imagem na Tela do Aplicativo Móvel

Criação de um Botão de Toque no React Native com o TouchableHighlight

Vamos agora ver como é que foi uma imagem usando o link.
Se a gente tivesse uma imagem aqui, vamos ver se a imagem eu tinha uma imagem aqui.
Vamos ver se eu copio o link aqui, se vê se funciona.
Vamos copiar esse link em vez de rodar, de carregar a imagem do local, vamos por o link.
O jeito que você faz aqui é, em vez de require, você vai aqui e adiciona um object.
E nesse object você tem a chave URI, URI aqui, aí você dá o URL, né?
Aí vai dar assim.
Vamos ver se funciona.
Eita, cada imagem.
Então um detalhe aqui, se você rodar, se você carregar imagens de outro servidor, olha aqui,
HTTP, dois pontos.
Não funciona no React Native aqui, se não tiver o HTTPS, se não for protegido, HTTPS
não vai rodar, não vai carregar.
Então eu vou aqui, eu achei outra imagem que é um servidor de HTTPS.
Se que é protegido, então ter o card lá, tá tudo bem, o React Native vai aceitar.
Vamos copiar o link lá.
Note HTTPS agora.
É um detalhe que quase ninguém nota.
Já tive, tava ajudando as pessoas nesse negócio e notei, eles estavam tentando adicionar
a imagem e notei, o que é que tá acontecendo nisso?
Ah, porque a imagem não é do servidor HTTPS.
Vamos ver como é que tá aqui.
Aí, agora tem imagem.
Então lembre, se for rodar a imagem de outro servidor, tem que ter HTTPS.
Só um...
Lembre-te aqui, se você rodar a imagem, carregar a imagem do servidor e não tiver estilo
aqui, eu removi o estilo.
Note que não aparece.
Se você ler a documentação do componente de imagem no React Native, ele diz que se
você adicionar a imagem localmente usando o require, as dimensões são automaticamente
incluídas.
Então ele vai saber com as dimensões.
Se você carregar a imagem de um website servidor de fora, diz aqui que você precisa
manualmente especificar as dimensões.
Por isso que não aparece.
Então vamos lá e adicionar o estilo de volta.
Tá bom?
Então lembre-te isso.
Sempre bom, define o width and height, as dimensões aí da imagem.
Tá aí.
Note que essa imagem é uma imagem diferente, né?
Eu escolhi outra.
É diferente da outra aqui.
Ah, vamos mudar aqui esse negócio.
Roda automaticamente.
É.
Eu acho que essa imagem não é a quadrada, por isso que não tá parecendo tudo.
Vamos ver.
Sei lá.
Enquanto não é.
Vamos continuar.
Então é isso como é que se adicionar a imagem com o componente image react-native.
É só botar a imagem, adicionar a propriedade do source.
Você pode pôr URI como object ou require, né?
Normalmente, melhor pôr localmente.
Vamos botar local require, mesmo diretório.
React logo, tng.
Lá.
Tá aí.
Tá aí.
Tá aí.
E propriedade estilo, pra definir o estilo da imagem, vamos definir dimensões, né?
Agora vamos aprender a adicionar um negócio de talk, fazer um espécie de botão.
Então o componente que a gente vai usar nesse caso, vamos usar o Totable Highlight.
Ok?
Se lembre, senso que adicionar o componente na sua...
Lembre no topo do arquivo, vai lá, adiciona os componentes pra importar.
Nesse caso é do react-native, então põe lá.
Totable Highlight.
Vamos pôr o Totable Highlight aqui, debaixo da imagem.
Abre a negócio, o tag.
Totable Highlight.
Nesse caso, dentro do botão, vai ter um texto, né?
Se não, não vai ter nada, a gente não sabe.
O que é que a gente vai clicar?
Clicar nada?
Então vamos botar um texto lá.
Lembre-se que se você digitar qualquer texto, tem que pôr dentro da tag de text.
A tag ou se falar mais certo, o componente.
Componente.
Vamos pôr aí.
Desse jeito já tá bom, já tá lá, não tem nenhum estilo, por isso que parece só
a texta.
Mas tá lá.
Não acontece nada quando eu clico, tô clicando, não acontece nada.
Porque a gente não adicionou a propriedade pro Totable Highlight pra fazer alguma coisa.
Vou adicionar um estilo aqui.
Esse botão é muito feio.
Vamos botar style, né?
Adiciona a propriedade do componente.
Vamos botar styles, porque se referência a folha aqui, style sheet, folha de styles
que a gente criou.
Vamos adicionar, sei lá.
Vamos chamar de botão.
A gente vai definir esse, bota botão a borda.
Vamos botar uma borda aí.
Botão, define a chave e o valor é um objeto de JavaScript.
Eu boto a vírgula pra calção.
Se esquecer depois, não dá erro.
Não dá erro aí.
Vamos pôr botão e eu quero pôr um botão aí.
Vamos pôr botão as duas.
Vamos ver o que acontece.
Vamos botar um padding que está muito feio.
O botão, o texto está se rossando com a borda.
Vamos botar uns pads de 20.
Vamos ver.
É muito?
Não.
Está bom aí.
Está demais.
Vamos botar um pê.
15, 15.
Está bom.
Deixa assim, né?
Eu não vou botar outras coisas.
Se quiser, você gosta de mexer com estilo, pode botar color, essas coisas.
Vou botar um color red aí pra você.
Pode até botar, eu acho, Gradius.
Bota o radius, 16.
Veio.
Adicionei uma cor vermelha pra borda e botou uma borda circular com borda radius.
Tem várias propriedades aí, se quiser explorar.
Tem também background color pra mudar o background, a cor.
Vamos botar aí um...
Eu gosto dessa cor aqui, antique white.
Sei lá, acho legal.
Vamos ver.
Deixe aí.
Agora pra mudar a cor do texto, você tem que ir no texto.
A gente mudou o botão, mas vamos no texto.
O texto, né?
A gente tem que adicionar o style pro texto.
Aí vamos botar aí...
Vamos ver.
Vamos criar um estilo também.
Texto do botão.
Sei lá, um texto do botão.
Essas coisas aí.
Vamos definir texto do botão.
Vamos botar um outro cor.
Sei lá.
Color...
Será que tem purple?
Roche.
Eita.
Tá aí.
Vamos botar um bold font-weight.
Aí.
Vamos aumentar...
tamanho, bota 20.
Font size.
É, legal, né?
A gente brincar com os estilos.
Mas vamos continuar agora.
Então tem esse botão aí, parre nada quando eu clico.
Esse touchable highlight.
A gente toca o que?
No celular, né?
Smartphone.
A gente usa nossos dedos pra tocar.
Não é mais botão, né?
Tá clicando em nada.
Só tela de vídeo.
Vamos ver aqui.
A gente definiu os estilos, mas não tá acontecendo nada.
A gente tem que adicionar a propriedade.
É o componente touchable highlight,
que é chamado on press.
Essa propriedade, quando você clica,
vai fazer o que você definida.
Lá.
Normalmente, eu tenho muita coisa aqui.
Se a linha for muito longa,
eu gosto de botar tudo no outro linha.
Aí você põe o indentation aqui.
A indentação.
E às vezes, se quiser botar esse cara ali,
pode por esse aqui.
Aí o que fica muito melhor de visualizar.
Aí botei um on press, né?
Deu erro.
O que aconteceu?
É eu não defini nada no on press.
Normalmente, você define a função aqui,
só o nome,
e aí você define fora aqui.
Mas agora,
vamos só definir a função lá, mesmo.
Vamos usar a função aqui.
Anônima
do IS6.
Isso aqui é a mesma coisa de falar
function
e essas coisas.
Return
qualquer coisa.
A mesma coisa, não precisa mais falar function.
Tira essa palavra
e ponha esse negócio aqui.
A gente chama error, error function.
Error function.
Como se fosse a flash, né?
Função de flash.
Esse negócio que parece um negócio apontando.
Aí não precisa mais
falar return aqui, nem esses negócios.
Só opcional, a gente.
A maioria de casos a gente põe.
Aí vamos fazer esse negócio aqui.
Vamos fazer...
O que a gente vai fazer quando clicar o botão?
Vamos ver...
Eu acho que tem uma alerta.
Mas vamos fazer um...
Uma coisa aqui.
Quando clicar o botão,
vamos de...
Vamos mudar...
Vamos mudar o texto?
Clica eu.
Vou fazer uma coisa aí.
Para isso a gente tem que manter...
O tal negócio não variável, né?
Mas o negócio, se você...
React tem o estado
do componente
e tem
as propriedades que foram dados
pelo pai
desse componente, né?
Eu estou...


0001-05 Criação de um Botão de Toque no React Native com o TouchableHighlight

O Estado de um Componente de React Native e o setState

esse componente, né? Eu tô... Você tem que saber um pouco de React pra saber o que
que eu vou falar agora, mas eu vou tentar explicar um pouco. Todo componente tem um
estado que é como se fosse uma maneira de você armazenar dados pra aquele componente.
Mas se você... Seu componente se lembra de umas coisas e pode mudar esses estados.
Normalmente a gente vai fazer aqui o construtor.
A função de construtor constructor, que é nova, yesx, porque a gente faz uma classe agora.
Aí quando você cria o componente vai chamar essa função aqui.
Normalmente a gente faz aqui sempre chama o super pra chamar o construtor que já vem definido.
E depois disso a gente muda o estado aqui. A gente chama this.state.
This is o... é o componente. Se a fera é componente e sempre tem um estado, né? O state.
Porque no começo aqui a gente pode definir o state diretamente, mas depois disso não pode fazer mais isso não,
porque é imutável, não pode ser mudado. A gente tem que fazer o set state, depois de definir esse estado inicial.
Só não pode fazer isso aqui de novo, só que no construtor.
Então com isso na mente vamos definir um estado aqui. Eu quero mudar esse texto aqui do clicker eu, sei lá.
Vamos botar esse negócio aqui numa variável no estado do componente.
Vamos pôr aqui falar, sei lá, mensagem.
Vamos dizer mensagem, clica aí.
Assim, né?
Aí que esse componente vai armazenar esse mensagem aqui.
Normalmente a gente põe props aqui.
Acho que não precisa às vezes... Eu já... Eu sei que quando eu fiz isso aqui no react da web, no react normal,
nem que eu punha isso funcionava no mesmo jeito, mas só de precaução, põe aqui, porque esse aqui vai permitir que você
adicione propriedades a esse componente. Só para iniciar as aulas, deixa aí.
Então sempre assim, construtor, chama o super e passa os props, que já é argumento, e normalmente você
inicializa o estado do componente aqui. A gente vai botar a mensagem lá.
Aí como é que a gente se refere a esses... Como é que acessa isso aqui de fora dessa função?
É só chamar o vez.stage se quiser acessar.
Por exemplo, em vez de você clicar eu aqui, já está armazenando no estado, né?
Então a gente chama this.state.contoMessagem, que já está lá, né?
Inicialmente, inicializado. Aí vai aparecer.
Vamos ver o que acontece. Eu vou botar no aqui, que a gente não tem nada ainda, só para tirar esse erro aqui.
Ah, o que eu fiz aqui? Mensagem. Ah, me desculpa.
Eu esqueci depois esse negócio aqui, curly braces. A gente chama curly braces em inglês.
Tem que ester essas coisas, senão não vai substituir a variável, né?
Pensa que é só o texto. A gente adicione esses negócios aqui.
Aí substitui o valor que está armazenado na variável mensagem que está armazenado no state, no estado.
Clica eu. Aí, quando a gente clica aparece um negócio preto, que a gente definiu on press.
Nem que não faça nada aqui, já está clicando, né?
Então, a gente tem esse negócio armazenado no estado, mas a gente quer mudar, né?
Vamos mudar esse texto quando a gente clica o botão?
Como é que faz isso? Eu já disse antes que se quiser botar o estado, tem que ser falar assim.
This.state. A gente seta o state again. Set o state de novo.
Vamos fazer isso aqui. Quando você clica, né?
Esse propriedade on press. Quando você clica o botão, vai chamar essa função que você passa.
Na função, não está fazendo nada. Então, vamos botar o negócio aqui.
Vamos falar desse set state.
Aí, a gente... O argumento aqui é o objeto com a propriedade, a chave e o valor.
Mensagem. Vamos botar outra mensagem. Fui clicado.
Desse jeito, quando eu clico, vamos ajustar o estado do componente e mudar a mensagem para a nova mensagem.
Fui clicado.
Sempre assim.
Sempre fala desse ponto, set state, e passa o objeto com os valores, chave e valores que você quiser mudar.
Então, vamos ver o que acontece.
Eu salvei e vai atualizar automaticamente. Vamos clicar lá. Fui clicado.
Fui clicado.
Quando você clica, sempre muda. Mas sempre é o mesmo texto agora, né?
Porque é o primeiro vez que o estado iniciar o diferente.
E é assim, meu.
Vamos recapitular. Cada componente mantém o estado.
A gente inicializa o estado aqui no construtor, constructor.
Sempre assim, constructor tem um argumento props, que é propriedades, que são esses negócios aqui.
Aí, se fala desse ponto state, aí você inicializa com objetos de todos os chaves e valores.
Pode ser qualquer coisa.
Pode funcionar mais e mais e mais, né?
Ups, fui demais.
Sempre assim, quando você quer mudar uma dessas propriedades aqui do objeto, é só falar o des, ponto, set state.
Aí você passa como argumento um objeto com a chave e o valor da propriedade do objeto aqui.
Esse caso, quando você clica no touchable highlight, ou toca na tela,
vai chamar a função que você declarou, definiu aqui,
associou com essa propriedade chamada onpress.
Quando clicado, chame o des do set state e mude a mensagem para fui clicado.
Aí, como o texto aqui está associado com a mensagem que está dentro do estado, sempre vai mudar.
E note que no react aqui, quando a gente muda o estado, a função render é chamada de novo.
Muito importante entender isso.
Quando você muda o estado, quando você fala set state,
o componente vai desenhar de novo, vai render, vai chamar a função render novamente.
Aí vai desenhar tudo de novo, render, renderizar, né?
Muito importante, quando o estado é mudado, o react vai chamar render de novo.
Lembra-se disso.
Tá bom? Fui clicado. Beleza?
Então, é isso por esse vídeo aqui, acaba aqui.
A gente falou dos componentes image and touchable highlight do react nere.
A gente aprendeu como é que adiciona a imagem localmente,
usando a gente adicionar propriedade source para o componente image.
A gente pude o require lá, se for imagem local, adicionar o estilo com style.
A gente pode também adicionar a imagem de outro servidor, mas usando URA.
URA me desculpa. URI. URI, né?
Mais detalhe, tem que ser uma HTTPS, senão não vai carregar.
A gente aprendeu touchable highlight, botou um style nene para aparecer legal.
Fez um style aqui, aprendeu a botar umas bordas e mudar as cores, mudar a cor do texto, detalhe que use.
O estilo tem que ser aplicado no texto, ok?
Não no botão, né? Porque normalmente, se você botar o estilo da color no botão, se for web,
tudo que estiver dentro do botão vai se transformar, né?
Mas aqui não vai funcionar, tem que ter que botar no texto.
Aí a gente aprendeu como é que conecta um evento.
Quando clica o botão, vai chamar essa função definida,
associada com a propriedade on press do touchable highlight.
A gente aprendeu como é que o react, os componentes, o componente mantém um estado que pode ser...
A gente pode mudar usando set state, mas sempre no começo você faz assim dentro do construtor.
Depois de initializar aqui, você não pode mudar o state diretamente assim.
Não pode fazer esses aqui.
Porque já foi initializado e é imutável.
Se você sabe functional programming, programação functional, você sabe o que isso quer dizer.
Então set state, manda o objeto com novos chave-valores, entendeu?
Muito obrigado por assistir.
Por favor, subscreva, deixe comentários.
Eu vou fazer mais vídeos, eu gosto muito react native, acho que a tecnologia muito...
Que vai ser o futuro assim.
Porque você pode fazer aplicativo móveis usando JavaScript e você pode fazer versão Android e versão Java ao mesmo tempo.
Todo o código é muito similar a algumas coisas que você tem que mudar, ajustar, mas vai ser no final a mesma coisa.
Faz a mesma coisa e...
Se eu for aqui no website, se eu ler esse negócio aqui, react...
Você aprende uma vez, pode escrever ou fazer o seu aplicativo em qualquer canto.
Então react, você pode fazer aplicativo web e agora pode fazer aplicativo móvel.
Então você aprende uma vez, faz em qualquer canto.
E acho que até agora dá para fazer aplicativo de desktop, computador normal usando react.
Eu li no outro...
Lio um artigo que dá para fazer...
Já dá para fazer o aplicativo do, por exemplo, Linux, do MUTU, o Buntu com react.
Você vai em vez de programar no seu, C++, C++, Java...
Já só usa o react native JavaScript, pode fazer qualquer tipo de aplicativo, é o futuro meu.
Tá bom? Tchau!


0001-06 O Estado de um Componente de React Native e o setState

Como Fazer uma Caixa de Texto no React Native usando o TextInput

Oi pessoal vamos continuar a aprender de uma introdução react native.
No vídeo passado a gente viu aqui adiciona uma imagem na tela do seu aplicativo usando
o componente image e também aprendemos a fazer um botão sensível talk usando o componente
touchable highlight.
No último vídeo também aprendemos sobre o estado de um componente state e também
das props, propriedades que são dadas aos componentes que são escritas aqui do lado
do nome do componente.
Tem essa style, on press, essas são propriedades, são dadas ao componente.
Agora vamos continuar, vamos aprender agora como lidar com input, a gente vai aprender
a fazer usar o componente text input esse aqui, vai no documentação do react native,
vamos aprender usar o text input para permitir o usuário a digitar qualquer coisa, a gente
vai fazer o aplicativo fazer alguma coisa baseado no input dado.
Vamos lá, vamos criar a primeira coisa que você faz, adiciona o componente lá no topo
do arquivo, estamos em index.ios.js, vamos adicionar o componente na lista de imports,
vai importar.
A text input sempre põe uma vírgula só de precaução, o que é que deu errado aqui?
Deu erro, linha 29 coluna 32, linha 29 coluna 32, coluna 51, 32, deu erro aqui, ah não
tem esse negócio, tinha do último vídeo.
Vamos esperar, cliquei no negócio acidentalmente, vai demorar um pouco.
Então a gente vai usar o text input para permitir o usuário a digitar qualquer coisa na tela,
é como se fosse formulário no HTML, o input text, ok, tá funcionando agora vamos adicionar
aqui o componente, vamos pô, antes desse botão aqui, tem que o touch ou highlight,
vou botar um espaço aí, vamos pô, primeiro põe o nome do componente, text input, nesse
caso esse componente não precisa de outra tag para fechar, pode fazer só em um, vai
aparecer nada agora, né?
Porque não tem nada, a gente pode botar um placeholder, propriedade, que vai aparecer
o texto lá na cadeis, vai aparecer no porque não tem estilo, vamos pô um estilo aí,
esse é um, vamos criar um estilo, não pô sei lá, input text, vou criar um estilo input text,
vamos lá embaixo, no style sheet, vamos adicionar input text, aí o nome da propriedade, estilo,
vamos põe o objeto com a definição, vamos botar um height para altura, vamos botar
sei lá, 25, vamos ver o que acontece, salvei e atualizo automaticamente na tela, tá aí
apareceu agora, então você põe o input text, por padrão, se não tiver estilo vai aparecer
nada, e você não sabe por que, porque não definiu o estilo, se não adiciona um estilo,
botar um altura aí para ver o que o negócio está ali, aí você clicar lá, dá para
digitar alguma coisa, eu digitei rápido, mas ainda não tá parecendo, tá muito feio,
vamos adicionar um, sei lá, uma border, uma border aí, salva e ver o que acontece, tá
lá, vamos botar um padding, padding, tá melhor, vamos ver, e agora, que altura tá,
ok, tá bom agora, eu tirei a altura, que tava, detalhe, que é isso, vamos ver, se botar
50, tá aí, eu mudei a altura para ser maior e agora dá para ver o que está dentro, então
padding de 12 em cada lado aqui, padding aqui, padding no topo, no bottom e o right aqui,
vamos ver, então você pode digitar qualquer coisa, aí você pode associar essa caixa
aqui de texto a uma variável, nesse caso vamos ao estado para associar essa caixa com
uma variável, vamos ao estado do componente, então, o que eu quero fazer, quando eu digitar
qualquer coisa lá, eu quero mostrar a mensagem que eu digitei, é o mesmo tempo, antes dessa
imagem aqui do react-native, entendeu, quando eu digito aqui isso, oi, tudo bem, ah, fail
water complete, deixa aí, quero que apareça aqui, como é que a gente vai fazer isso,
então vamos ver, se eu quero botar esse cara que eu digito dentro do estado aqui, para
a gente fazer isso, vamos dar a propriedade, auto tax input, tá bom, primeiro quando você digita
alguma coisa, a gente quer que mude o estado da propriedade que a gente vai chamar, sei lá,
um texto por exemplo, vamos lá, aqui bota on change, deixa eu só olhar aqui a documentação,
no react normal é on change, nesse aqui é on change text, tem que adicionar text, vamos lá,
on change text, aí você põe o que é que você quer que aconteça, quando o texto do input mude,
ok, nesse caso eu vou pegar o texto que você digitar e eu vou setar o state, mudar o estado
e vou botar o texto, vou dizer que é esse texto aqui, então vou criar uma propriedade no
estado, chamar o texto e é a coisa que eu digitei aqui, que é associar com essa
argumento, vai ser dado como valor, entendeu, vamos ver o que acontece, vamos botar aqui antes
da imagem, vamos pôr um texto, component text e vamos associar o valor com o texto que tá dentro
do estado, entendeu, sempre põe esses negócios aqui, curly braces, chave, sei lá, vamos lá,
então quando eu digitar alguma coisa, vamos ver, ah, esqueci de botar o v, não se esqueça de sempre pôr
a palavra chave, v, quando você chama funções, v se refere ao componente, que é o primeiro
projeto, então esse componente priorito projeto tem um estado e a gente tá mudando o estado do
componente, vamos salvar a atualiza lá e vamos trantar novamente, olha aí, tantando outra vez,
ah, fica me corrigindo essa coisa, odeio, mas tá ali, né, esse negócio auto corrigiu,
aí muda, quando eu mudo essa caixa de texto, muda lá no topo, porque o topo tá mostrando
o valor do texto que tá dentro do estado e quando eu mudo o estado aqui, cada vez,
oh, desculpa esse, cada vez que eu mudo o texto da caixa de texto, chama essa função aqui que
seta o estado, muda o estado pra a coisa que eu digitei, tá bom?


0001-07 Como Fazer uma Caixa de Texto no React Native usando o TextInput

Implementação do Controle da Caixa de Texto (value, onChangeText)

Só uma coisa aqui no ISX-S6 versão JavaScript que vai se tornar vadrão para todos os navegadores.
Não precisa mais, se você tiver uma chave, um valor assim que é o mesmo, tem o mesmo
nome, não precisa mais digitar duas vezes, por ser falar assim, é a mesma coisa.
Então eu vou remover aqui o texto.
Quando eu falo set state, eu passo um objeto e eu passo o texto, é a mesma coisa de falar
texto, dois pontos de texto, tá bom?
Eu vou remover, vamos salvar e ver se ainda tá ok.
Tá aí, funciona né?
Então é o shortcut do ISX.
Vamos continuar agora.
Vamos ver como é que a gente põe o valor inicial para essa caixa de texto, porque
agora quando você inicia aplicativo não parece nada.
Tem um placeholder que a gente põe aqui, se tirar isso aqui vai tirar esse texto que
tá em cinza.
Mas eu vou deixar lá, mas eu também quero botar um valor inicial talvez, se você que
pôs isso é com o value, o propriedade value, você dá propriedade value ao tax input,
aí você dá o valor inicial, entendeu?
Valor inicial.
Mas se eu pô assim, vamos ver o que acontece.
Valor inicial tá lá, mas o que acontece quando eu tento apagar?
Não apaga, mas por que?
Porque o valor tá sempre associado a esse value aqui.
Então cada vez que eu mude, nem que eu mude, nunca vai mudar porque o valor é sempre estático,
sempre fixo.
Então o que a gente normalmente faz é associa o value com a variável do estado, nesse caso
texto, né?
Note que a gente não iniciou o estado com o texto nenhum algum.
Normalmente se você quiser pode pôr lá, pode valor inicial, né?
Aqui, botar um virgo de precaução, salvar aqui.
Então vamos ver o que acontece se eu mudar, apagando aqui, agora funciona, né?
Valor apagado.
Então você tem que associar o value com a variável do estado, text, texto, né?
Aí no constructor aqui você inicia com o valor inicial.
Desta maneira quando você change text, muda o texto, vai mudar o estado, mas como o valor
o value tá associado ao estado, então o text import vai mudar.
Antes a gente tinha o value associado a uma string que nunca mudava, né?
Não tava associado ao estado.
Então associar o estado para ter um valor inicial e poder mudar depois.
Tá bom?
Agora o que é que eu vou fazer?
Não quero o valor inicial, não.
Eu vou botar esse aqui.
Mudar, vou botar uma string vazia, ok?
Então eu gosto normalmente de fazer isso.
Eu ponho o value explicito, explicito aqui, associa com o state e inicializo, inicio ele
com uma string vazia.
Desta maneira eu sei o que é que está no estado e o que é que vai mudar aqui, porque
eu poderia não ter isso, vai funcionar do mesmo jeito.
Mas aí eu não tenho ideia sem ler o que está acontecendo aqui, eu não tenho ideia
o que é que se inicia no estado.
Então eu vou pôr lá.
Pra todo o caixa de texto eu vou ter esse negócio aqui, iniciar para um valor inicial,
normalmente vazio.
Vamos ver se tá tudo bem?
É, tudo bem.
Esse negócio de autocomplets é muito chato, então tem uma opção de desabilitar.
Tem várias opções para esse caixa de texto.
Veja a documentação do React Native, aí tem aqui, vai essas propriedades, entendeu?
Eu odeio esse aqui.
Auto correct, né?
Não gosto que me corrigem.
Então se você quiser, vai por padrão, desabilitar essa opção aqui, você faz na propriedade,
encontra, escreve aqui.
Aí põe aqui auto correct, eu vou botar o valor que ele quer, false, né?
False.
Aí agora não vão mais me corrigir, que é muito chato.
Tá bom, hein?
Tem várias outras opções, por exemplo, da senha, você pode pôr secure aqui, essa aqui
opção, secure text, gente.
Vamos botar it to true para se tornar uma senha.
Secure text, entry.
True.
Isso vai fazer com que cada caracter é uma bola, né?
Bullet point.
Aí não dá para ver aqui, é óbvio que eu consigo ver diretamente porque eu pus um
texto aqui, mas o que está aqui não aparece.
Take your text entry.
Tem várias outras propriedades só a ver a documentação para achar uma coisa que você
se procura, tá bom?
Então vamos continuar a aprender umas coisas.
Vamos ver o que acontece.
Vamos associar o texto do botão com coisa que eu digito aqui só para você ver.
Eu não quero...
Vou mudar aqui onde é que está o botão, esse touchboll highlight, né?
Esse botão aqui.
O texto que está dentro é esse, está associado ao quê?
Está mostrando essa mensagem aqui.
Vamos mudar mensagens para o texto.
Viu o que acontece?
Não tem nada no botão.
Aí aparece aqui no botão e aqui em cima.
É muito legal, hein?
Vamos ver o que acontece quando clica.
Entendeu?
Nada acontece, né?
Porque a gente, quando clica, o sete o estado da mensagem.
Mas aqui não está mostrando mensagens, está mostrando o texto.
Então vamos mudar só para estar com o anse.
Aí.
Tá bom?
Esse aqui é o fim desse vídeo.
A gente aprendeu como usar o text input, componente que permite você digitar, o usuário
de digitar alguma coisa no caixa de texto.
Pode ser uma senha, seu e-mail, essas coisas, qualquer informação para ser digitada.
Você pode pegar a informação.
Normalmente associa um...
Por exemplo, o estado do componente.
A gente associa o texto dentro do estado.
E quando você muda o texto, um change text, chama uma função que muda o estado do texto.
Tem opções, propriedades que permitem você também remover, desabilitar o alt-correct
para não decorrigir e para habilitar o senha.
Mostrar como se fosse uma senha.
Seguro.
Secure text entry.
E tem várias outras propriedades que você olha na documentação do React Native.
Valeu.
Muito obrigado por assistir.
Se você gostou, por favor subscreva.
E se tiver alguma pergunta, comentário, se por favor deixe.
Tenha um bom dia.
Tchau.


0001-08 Implementação do Controle da Caixa de Texto (value, onChangeText)

Uso do json-server como API para Facilitar o Desenvolvimento Frontend Móvel

Oi, tudo bem? Vamos lá continuar a aprender React Native?
Então, no último vídeo a gente aprendeu como usar o componente text input para fazer
uma caixa de text para usar, digitar alguma coisa.
A gente vai fazer o que quiser com valor creditado.
Agora vamos aprender a fazer uma coisa mais avançada, porque a gente precisa conectar com o servidor,
com o back end. A gente tem o nosso aplicativo aqui usando React Native, mas aqui é só o front end.
É só o que o pessoal vê, onde é que está os dados, cadê o banco de dados?
Está tudo no back end, né?
O que a gente vai fazer? A gente vai fazer uma página, uma cena aqui, perfil.
Muito simples, a gente vai botar uma imagem do perfil da pessoa, botar o nome e a idade.
Emeta o botão aqui, sensível talker, para a gente, quando toca, atualizar com os dados, que vão ser...
Os dados vão vir do back end. A gente vai fazer um back end, simular um back end, a gente não vai fazer
um back end verdadeiro, mas vamos fazer um negócio aqui usando um módulo do node chamado JSON server.
Então, aqui é o wireframe que eu fiz, a gente vai fazer esse negócio.
Para fazer a primeira coisa que eu fiz, eu comecei um novo projeto também.
Comecei um novo projeto chamado segundo projeto, que a gente estava trabalhando com o primeiro projeto.
Então, se você quiser criar de novo, vai React Native Net, segundo projeto.
Eu já fiz porque demora um pouco para meu computador, para carregar tudo e gerar os arquivos.
Depois de fazer isso, vai aparecer aqui a pasta, segundo projeto.
Vai na pasta, no projeto, abre seu editor de texto, vamos editar o index.ios.js.
Se você quiser rodar a aplicação, React Native faz run IOS.
Para rodar, vai abrir o simulador do Xcode e vai abrir o package manager do React.
Então, vai ser assim, vamos lá para o editor de texto, tem o meu átomo já aberto.
Estamos no index, doraios.js.
Vamos remover essas coisas aqui, que eu não quero saber mais.
Vamos ativar o debug aqui, para eu ver o browser.
Clica aqui.
Aí vai para o Chrome, vai abrir essa tela.
Vou clicar em pack, inspecionar para abrir o console aqui, para debug.
Vamos também habilitar o Live Reload, para atualizar automaticamente, quando eu salvo o arquivo.
Quando eu salvo meu core.
Então, se eu fizer uma coisa que mudo, já automaticamente mudo aqui.
Então, para começar, antes disso, vamos fazer o back-end falso.
O fake back-end.
Estou aqui no meu projeto.
Eu vou instalar esse módulo chamado JSON Server.
Tá bom?
Se você quiser instalar global, ponta, conhecim, eu já tenho.
Se você quer salvar no seu node modules, diretor node modules, você põe save.
E vai salvar a dependência no package JSON.
Tá bom?
Pode fazer.
Deixa eu botar no package JSON.
Então, se eu ver aqui o package JSON, as dependências só têm react react native.
Mas agora vou adicionar o módulo JSON Server, para a gente simular o back-end.
Demorar um pouco aí, vai adicionar aqui.
E esse módulo é muito útil.
Vai simular o back-end, que você precisa só um arquivo de texto que tem os dados no formato JSON.
Vamos começar a fazer um negócio aqui, enquanto esse negócio está rodando.
Vamos criar um diretório aqui.
Tá bom?
No seu projeto, crie um diretório chamado JSON.
Vamos criar um arquivo dentro dele, chamado db.json.
Tá bom? Aqui vai ser o nosso banco de dados, que vai ser tudo em JSON.
No nosso caso, trabalhamos com perfil de pessoas.
Então, a gente só precisa do nome da pessoa, da idade e da link para a imagem do perfil.
Vamos ver o wireframe de novo, a imagem, o link para imagem, o nome e a idade.
Então, o que a gente vai fazer para criar esse back-end?
Vamos abrir o objeto do JSON.
Vamos pôr pessoas aqui.
Vamos botar um array.
Vamos criar um objeto para cada pessoa.
Vou botar um id e tem que ter JSON.
Então, tem que ter essas coisas aqui, porque é JSON.
Não se esqueça das caracteres.
Vamos botar o nome.
Esqueci de novo.
Nome, sei lá.
Vamos botar.
E a idade?
Idade, sei lá, insert.
Vamos botar o URL.
Vamos copiar de local aqui.
Memoro um pouco.
Escolhe, sei lá.
Preciso de HTTPS, senão não vai funcionar React Native.
Será que eu acho um HTTPS?
É difícil.
Aqui, acho que vamos pôs aqui.
Vamos quebrar esse time-out.
Vou botar as linhas.
Tá aí.
Vamos botar as pessoas dentro do array.
A gente está seguindo RESTful.
Hot as RESTful, usando REST.
Vai seguir isso para a dron, gente.
O JSON saiu e o padrão no REST.
Vamos seguir isso.
Tem aqui as pessoas no plural.
Todas as pessoas dentro do array, cada pessoa é um objeto.
JSON, id, nome, idade e o link.
Vamos copiar umas três, talvez.
Id, dois, três.
Não sei.
Vou botar RU, 32.
Time-out.
Vamos deixar tudo no mesmo link, tá bom?
Então, assim que a gente já fez o banco de dados, falso.
Solpou assim e vamos ver se está funcionando.
Vamos voltar ao retornal terminal.
Você vê que terminou a instalação.
Vamos verificar o package JSON.
Aqui, adicionei o JSON Server, as dependências.
Tá bom?
Agora, vamos rodar.
Primeiro de tudo, vai um cd para o JSON.
Não se esqueça de fazer isso, senão,
se você fizer o comando do JSON Server
e não estiver dentro da pasta JSON,
vai incluir os seus arquivos no servidor do JSON.
Então, por favor, vá para a pasta, o diretório JSON primeiro.
Execute o comando JSON Server, a opção dash, dash, watch.
If and watch.
E o nome do banco de dados, dever JSON.
Vamos secutar.
Acho que eu esqueci nada aqui.
Vamos ver.
Nenhum problema, tá bom.
Funcionando agora.
Então, o back-end vai estar nesse local aqui.
Vamos ver o que aqui é.
É o RESTful API.
Então, API RESTful, tá bom?
Isso que o JSON Server faz.
API.
Mostro aqui que você pode acessar os recursos, pessoas.
Aí, clique em pessoas.
Pode ver que já retono JSON.
A gente vai usar isso do nosso React Native, ok?
Agora, já temos os dados.
O banco de dados está configurado.
Simulado lá.
A gente deixa aqui rodando o JSON Server.
A gente pode fazer um requerimento, request.
Request get para pegar informação.
Isso que a gente fez no navegador.
A gente fez um get.
Barra pessoas.
A gente abteu os recursos, informação.
Agora, vamos voltar ao nosso React Native.
Começar a fazer a aplicação.
Já que temos o banco de dados simulado.
Já.
Vamos...
Então, vamos fazer primeiro um pouco de estilo aqui.
Se eu botar aqui perfil,
aí, ponho imagem, nome e idade.
Vamos ver esse negócio aqui.
Isso que eu fiz com o GoMockingbird.
Então, vamos botar um test, text, perfil.
Já está incluído aqui o componente, não importa.
Não importa.
Perfil.
Vamos ver o negócio aqui do Flexbox.
O padrão aqui que fiz é o Tattoo do centro.
Então, aparecer no centro.
O padrão do FlexDirection do Flexbox aqui do React Native é Column.
Tá bom?
Esse aqui é o padrão. Impressionante digital.
Mas é digitaí explícito.
Explicito?
Você sabe que é isso.
No React Web, eu acho que o Flexbox para Web, o padrão é Row.
Tá bom?
Mas quando você põe coluna, o Axis é o vertical aqui.
Então, vai vindo assim.
Aí, quando você adiciona mais, o desses vai verticalmente,
adicionando, entendeu?
Que é o MainAxis.
MainAxis do Flexbox.


0001-09 Uso do json-server como API para Facilitar o Desenvolvimento Frontend Móvel

Implementação da Página de Perfil Pessoal – Aula de React Native na Prática

do flexbox. Se eu mudar isso aqui para row, vamos ver o que acontece. Esqueci disso, comentário
aqui lá. Deixa eu pô aqui, comentário. Tá aí. Tá aí. Viu agora o axis, o main axis
é horizontalmente, né? Se você botar coisa, vai acontecer lado a lado. Mas vamos voltar
para a coluna. Se você que botar comentários no gsx, nessa parte do gsx react nêre, você
pode ser que for assim e botar os braces aqui. Não se esqueça, esqueça por comentário.
Vamos pôr o nome e idade, né? A gente tem um botão, vamos usar o touchable highlight,
que a gente aprendeu antes. E então se esqueça de adicionar nos componentes importados,
o touchable highlight. Tá bom. Num ponto textual lá, atualizar. Tá aí. Tem nenhum estilo
agora. Perfio na umidade. Vamos fazer uma imagem de baixo do perfil, né? Source.
Lembre-se de adicionar o componente aqui no import. Adicionei image. Vamos ver agora.
Tá lá. Agora não tem nada. Vamos ver essa imagem aqui. Já tá lá. Tá bom. Vamos botar um
texto aqui para ser o placeholder do seu nome. Meu nome. Copiar isso. Minha idade. Note que não
importa se eu posto as coisas lado a lado ou não. O que importa é o estilo do factbox. Tá na coluna.
Fiz isso. Vamos melhorar esse botão aqui. Botar um style, né? Propriedade. Aí vai na
coluna de styles. Folha de style aqui de estilo. Adicione style. Vamos botar atualizar. Botão. Sei lá.
Vamos botar o sabotão lá. Vamos botar a border. Colar. Vamos botar um padding. Doze. Vamos botar
um color. Pela gray. Você pode notar que não sou muito bom de estilo. Vamos postar o
tag styles.botão. A gente fez. Tá aí. É uma coisa assim. Aí vamos botar um estilo para o
teste. Styles. Test do botão. Vamos criar esse estilo. Bigula. Test do botão. Vamos só mudar a cor. White.
Tá bom isso não. Front weight. Botar negrito. Vamos mudar isso. Tá aí. Deixa isso assim mesmo. Agora
vamos ver os outros. Vamos botar um negrito para o perfil e para o nome e a idade. Vamos criar um estilo. Vamos chamar
label. Etiquez. Vou criar label aqui. Vamos botar front weight bold. Tá aí. Vamos mudar aquela
cor de libo. Vamos botar um estilo. Styles. Abatar. Vamos botar abatar. Cria aqui abatar. Vamos botar
um width e uma height. Vamos botar 100 por 100. Vamos ver o que acontece. Vou botar a bordo. Tá aí. A gente quer fazer
um círculo lá. Se você o jeito que a gente faz a bordo ficar circular é botar bordo radius. É um quadrado. Tem que pôr no metade da
altura ou da largura. Então metade de 100 é 50. Vamos ver o que acontece. Aí tá um círculo. Sempre a metade do lado do
quadrado para botar o bordo radius para virar um círculo. Tá quase bom. Agora a gente só falta conectar o back end. Eu não vou fazer
mais estilo agora. Vou deixar para depois. Quero só focar na funcionalidade. Agora vamos conectar o back end. A primeira coisa que
eu vou fazer eu vou fazer o construtor aqui. Função. Vou declarar lá. Se lembra de pôr os props no argumento. Chama o super.
Ele é o construtor mais básico. A gente vai me indiciar o estado aqui do componente. Vamos iniciar para todos os atributos que a gente tem
aqui. A gente tem o nome. A gente tem a idade. A gente tem o avatar URL. O link do avatar. Então vamos pôr aqui. Vamos pôr nome e vamos iniciar
para para ter nada ainda. Ou a gente pode pôr o que tem lá. Vamos pôr meu nome. Meu nome. Depois a gente muda para vazio. A idade
vamos pôr. Sei lá. 30. Avatar URL. Eu botar nada. Só assim. Agora vamos associar os valores que tem aqui com o estado. Vamos ser
this state. Nesse caso é o nome. Vai aparecer lá. E essa minha idade vamos associar a state com a idade que está dentro do estado.
E esse imagem source aqui também. This state. Avatar URL. Mas como é uma imagem você está adicionando uma imagem de externa.
Tem que botar um objeto com a chave URI. URI. E aqui tem que ser o link. Vamos mudar o estado inicial para ver se realmente está
funcionando. Conectado ligado. O estado. O texto desse cara ligado ao estado. Está aí meu BBB. Idade 25. Está ligado já. Agora só falta a gente conectar
com o backend para mudar isso para as informações corretas. Para isso vamos criar. Quando a gente clicar esse botão atualizar vamos conectar o
backend e pegar a informação e atualizar essa cena. Essa página. Então vamos adicionar o onpress. Pro touchable highlight.
Em vez de botar a função aqui eu vou criar uma função aqui. Vamos chamar.
This atualizar. Info. OK.


0001-10 Implementação da Página de Perfil Pessoal – Aula de React Native na Prática

fetch para Efetuar uma Requisição HTTP e Obter Informações do Banco de Dados

Vou criar uma função aqui.
Vamos chamar...
Des, atualizar info.
Vamos botar aqui, atualizar...
Tuariza info.
Criar essa função do componente.
Quando eu clicar, vai chamar aquela função.
Cliquei.
Vamos pôr um console log aqui.
Para ver se está funcionando.
Atualizar info foi chamado, vai mostrar...
Quando eu clicar.
Vamos voltar para o browser, para o navegador, para ver...
O debug aqui se vai aparecer.
Cliquei.
Atualizar foi chamado, está funcionando aqui.
Aqui.
Mas tem um detalhe.
Vamos...
Tem um detalhe aqui, tem que usar um bind.
Se você usar a keyword, a palavra-chave-des, dentro dessa função.
A gente vai falar disso depois, quando o problema aparecer.
Então, vamos comentar isso, ou deletar.
E vamos fazer a chamada para o back-end.
A gente vai fazer isso já no comando o fat.
Tá bom, a função fat.
Se você quiser ir na documentação do React Native,
está no networking aqui.
Aqui, networking.
Aí, usem fat, né?
Aí, usem fat, né?
Vamos usar o fat para fazer uma get.
O padrão é get.
Então, a gente vai botar primeiro, qual é o local que a gente do servidor.
Vamos copiar onde é que o Jason sir está.
Essa aí é o URL, né?
Vamos pegar uma pessoa especificamente, vamos pegar a pessoa com o João aqui.
Slash one, né? Se você pôr um, barra um, vai para o João só.
Aí, vou usar só o João, nesse exemplo.
Aí, é o link.
Tá bom?
Aí, vai fazer um requerimento get request.
A gente tem que...
O fat vai retornar uma promise, uma promessa do JavaScript.
A gente tem que handle the promise.
A gente tem que lidar com a promessa.
Gente, a gente faz isso com o Dan, né?
Fala Dan.
Aí, vou botar aqui response, que é resposta.
O que é que eu vou fazer?
Eu vou mudar essa resposta para um objeto de JavaScript.
Fazendo assim, response, Jason.
Tá bom? E isso aqui também retornar uma promessa.
Então, eu tenho que usar o Dan de novo.
Vou mudar aqui para outra linha.
Tá bom?
Botar outro Dan.
Se aqui response.
Jason.
Vou botar...
O que é que eu quero fazer quando eu pegar as informações?
Vamos console-ov?
O response Jason para ver o que é.
Então, vamos deixar isso aí e ver o que acontece.
Quando eu clico atualizar, volta para o navegador no seu debug.
Vamos clear aqui.
Clico atualizar.
Olha o que aconteceu.
Ele foi no back-end,
pegou a informação e retornou aqui.
A gente deu o console-log no response Jason,
que é um objeto.
Entendeu?
Esse objeto tem o ID, a idade e o nome que é o João.
Então, está tudo certo. Um objeto do JavaScript.
O que a gente vai fazer com o objeto?
A gente vai setar o estado.
Então, vamos lá. Vamos comentar esse negócio.
Vamos comentar esse negócio aqui.
Vamos setar o estado. Como é que a gente muda?
Desce set state, né?
E dá o objeto com as coisas que você quer mudar.
Nesse caso, eu vou mudar o nome para response Jason.nome, né?
O response Jason é um objeto que tem essas chaves.
ID, nome, idade, avatar. Então, vamos botar.
A idade, response Jason, idade.
Uavatar URL, response Jason.
Avatar URL. Está aí.
Então, vai mudar o estado quando eu clicar.
Tá bom?
Mas eu acho que a gente vai ter um problema agora.
Então, vamos ver o que vai acontecer.
Eita, o que é que aconteceu?
Não mudou nada, né?
O que é que tem um problema aqui?
Vamos ver esse negócio.
Nada acontece? Por quê?
E se você ver aqui, no debug,
vamos clicar lá.
E fala, this set state not a function.
Falando que não é uma função.
Ele não sabe que é isso.
O problema aqui é na palavra-chave, this.
Tá bom?
Porque no contexto dessa função atualizar,
o this e dentro desse fet aqui, o this,
não é o componente segundo o projeto.
Não é.
Para você ter uma ideia de o que é,
você pode falar com o solo, this aqui.
E vamos ver o que é o this no contexto lá.
Vamos ver o que é.
Olha aí.
O this parece que é o botão, né?
É o botão.
Quando você tem esse this dentro dessa função aqui,
mas ela foi chamada do propriedade do
on-press, do Totable Highlight, que é o botão.
Então, o this é esse componente, mas tá errado, né?
A gente quer se referir ao this, como se fosse o objeto,
o componente segundo o projeto.
Para fazer isso, a gente põe o bind this.
Aqui no on-press, põe o bind this.
Nesse caso, você tá mudando o contexto dentro da função.
Quando você se referir ao this,
vai se referir ao objeto, ao componente segundo o projeto.
Porque nesse contexto aqui, o this, nesse contexto todo aqui,
se refere ao segundo o projeto.
Então, tem que fazer isso, senão não vai funcionar o set state.
Porque tá tentando setar o state aqui, do componente do botão,
que não faz sentido pra gente.
Então, vamos consolar o this de novo com o bind.
A gente adicionou o bind this.
Vamos ver no blog aqui.
Clicatualizar, olha aí.
Agora a gente recebeu o segundo projeto, o componente,
quando a gente deu o consolo.
Tá bom?
Não se esqueça de pôr sempre o bind this.
Nesse caso, pra setar, determinar o contexto da palavra chave.
Então, vamos remover isso.
Se você esquecer disso, sempre ponha o console log this
pra entender o que é o contexto,
o que é realmente que o this se refere.
Agora vai funcionar.
O this aqui se refere ao segundo projeto, o componente, né?
Vamos lá.
Vamos ver o que acontece aqui.
Vou ver esse aqui.
Vamos atualizar.
Aí, clica atualizar.
Olha aí.
Nome é João, idade 27, agora tem uma imagem.
Legal, hein?
Pôr no back end.
Nesse endereço.
Converteu aquele JSON, que era o sol texto,
pro objeto e retornou outra promessa, que foi lidada com esse den,
outro den.
E esse cara aqui é um objeto JavaScript.
A gente usou esse objeto, os propriedades dele pra setar o nosso
estado do segundo, do componente segundo projeto que tá aqui.
E isso como está linkado, está ligado ao textos aqui via o estado,
apareceu aqui.
Tá bom?
Isso como se usou FAT pra fazer um GET, GET request.
Vamos remover esse negócio aqui só pra terminar.
Eu vou mudar esse nome, iniciar pra nada, idade, eu vou botar NULL.
E o que acontece?
Inicialmente não tem nada, né?
Mas é quando clicar atualizar, aparece.
Nada, tá aí.
Tá bem? Muito obrigado por assistir o vídeo.
Se você gostou, pra você subscrever, deixe comentários, perguntas.
E na próxima, a gente vai explorar mais essa função FAT pra fazer outro
tipo de request.
A gente aprendeu a usar o GET pra pegar a informação do servidor, a gente fez
um simulom back-end usando o JSON server, módulo do node muito útil.
Tchau.


0001-11 fetch para Efetuar uma Requisição HTTP e Obter Informações do Banco de Dados

Caixa de Texto no React Native para Editar o Nome na Página de Criar Perfil

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?


0001-12 Caixa de Texto no React Native para Editar o Nome na Página de Criar Perfil

Caixa de Texto para a Idade e Requisição HTTP com o fetch pra Criar um Novo Perfil

para demonstrar como é possível fazer isso agora no esx.
Então vamos continuar, fazer os inputs.
Vamos fazer esse outro aqui, eu vou recortar esse idade aqui do estado, vou fazer o text input.
Vamos adicionar as propriedades. Placeholder, vamos botar quantos anos você tem.
Vamos para um estilo, campo de texto que eu fiz.
Vamos botar um valor, já recortei, um change text.
Vamos fazer a mesma coisa que a gente fez ali.
Vamos para o idade, como argumento, vamos setar o state.
E vamos só por idade aqui, tá bom?
Aí é só isso.
Agora vamos mudar esse botão para criar.
Em vez de se atualizar input, vamos fazer criar.
Info, criar a pessoa talvez.
A gente não criou ainda, então vamos criar aqui essa função, por isso que está dando erro.
Vamos criar aqui, criar a pessoa.
Tá bom?
Quando eu clicar, vai chamar essa função aqui.
Então, vamos ver se está tudo certo agora.
No wireframe, criar o perfil.
Tudo ok, né?
Deixar assim.
Então, quando a gente clicar no criar, a gente vai fazer um pedido HTTP com o método post para o back-end.
Se você ver que o código que a gente fez para atualizar input vai ser usando a mesma função fetch.
Então, vamos usar fetch.
O primeiro argumento é sempre a URL, o r.
Então, vamos copiar esse aqui.
Mas como é um restful service, serviço rest, usa o rest, padrão rest, então é só fazer a post vai ser na pessoas.
Slash, barra pessoas, né?
Aí, o segundo argumento vai ser um objeto, tá bom?
E esse objeto, primeira coisa, vamos botar o método, vai ser um post.
Aí, no outro propriedade, a gente vai botar os headers.
Aí, esse header vai dizer que a gente está mandando e aceita JSON, tá bom?
Então, vamos botar accept.
Application.
Deixa eu ver se estou fazendo certo, sempre esqueço.
Está aqui, no documentação react native.
Accept, application JSON, tá bom?
Só olhar a documentação.
Botar o content type também vai ser a mesma coisa.
E eu esqueci, tem que ser barra.
Scoop.
Tá bom?
Aí, os headers.
Aí, tem o body, que é finalmente os dados que a gente quer enviar ao servidor.
Nesse caso, a gente vai enviar essa pessoa, o perfil dessa pessoa, que vai ser criada no servidor.
Nesse caso, a gente passa um objeto, né?
Nesse objeto, a gente pega o objeto JavaScript e transforma o objeto no formato JSON, que é só texto, né?
Uma forma de fazer isso é usando o JSON, objeto JSON, que é parte do JavaScript, e chama a função stringify.
E o que a stringify faz é pegar o objeto de JavaScript e converte para texto no formato JSON.
Você for a seu browser aqui e clica, abrir o console para te dar um exemplo.
Por exemplo, pessoa, vou botar aqui var.
Essa é um objeto com nome, não, idade, o 3, por exemplo.
Está aí pessoa, né?
Aí, pessoa é um objeto JavaScript.
Então, se você pega o JSON aqui, está vendo aqui esse objeto do JavaScript?
Tem duas funções que são os parts e o stringify.
E elas são ações opostas, que a gente quer converter o objeto para o formato JSON.
Então, o formato JSON.stringify.pesso aqui.
Está vendo? Ele retorna uma string com o JSON, formatado no JSON.
Então, a gente vai fazer isso aqui.
Nesse caso, vamos fazer um objeto e vamos pôr o nome.
Vai ser o thisStateName, né?
Vamos pôr idade.
Que está associada ao text input lá, né?
Aqui e aqui.
No caso da imagem, eu não estou me preocupando agora, mas a gente pode botar alguma coisa aqui
só para dizer que, só para ver se funciona.
Vamos botar qualquer coisa aqui.
Cadê, vamos copiar dos outros que estão no back-end.
Vamos já copiar esse aqui.
Você pode botar qualquer imagem que você quiser.
Então, está aí.
Então, vamos revisar isso de novo.
Quando a gente clica no botão criar, a gente vai chamar o fat, função fat.
O primeiro argumento é sempre a URL, o local, que a gente vai fazer o pedido de HTTP.
E segundo argumento, no caso de fazer um pedido post, a gente vai passar um objeto
com o método methodPost e vai passar uns headers de HTTP que vão dizer que é tudo
que a gente tem que ver no formato JSON, applicationJSON, accept, e o contentType.
Aí depois, mais um que é o body, que vai ser os dados que serão enviados ao servidor.
Nesse caso, a gente está enviando nomidade e o avatar aqui da pessoa que a gente criou.
Mas como é um objeto JavaScript, a gente tem que converter isso para uma string que está formatada como JSON.
A gente usa o objeto JSON, a função stringify desse objeto para fazer isso.
Então, quando a gente mandar isso, a gente vai ter que esperar um pouquinho para ver o servidor mandar a resposta.
Então, a gente pode tentar fazer isso agora e ver se está funcionando.
Aqui o servidor back-end rodando.
Vamos ver se vai criar e vou abrir meu DB aqui, o database, para ver se vai criar alguma coisa aqui.
Então, vou estar aqui...
Criar.
Tá bom?
O que é que aconteceu?
Criou um novo pessoa aqui com o nome George, idade 34.
Ele já põe um ID importante, esse fato do JSON Server já adiciona um ID se você não fornecer.
E aqui foi o avatar.
Tá bom?
A gente criou, está na data base.
Vamos ver o que aconteceu quando a gente clicou, criar.
Vamos voltar para o código, onde está criar o botão.
Vamos press criar a pessoa.
Tá bom, vamos lá.
Criar a pessoa, press, faz o fetch.
Vamos fazer de novo a data base.
Não sei o que nome pô.
Criou, né?
Está aí.
Entendeu?
Até que o servidor tem pedido post.
Tá bom?
Eu disse só por esse vídeo.
Nos próximos vídeos a gente vai aprender a usar os pedidos patch e delete para atualizar um pessoa, os dados de uma pessoa e para delatar uma pessoa.
Tá bom?
Muito obrigado por assistir.
Se você gostou dos vídeos, por favor subscreva.
E se tiver alguma pergunta, sugestões ou alguma coisa para falar, por favor deixe comentários.
Muito obrigado.
Tchau.


0001-13 Caixa de Texto para a Idade e Requisição HTTP com o fetch pra Criar um Novo Perfil

Botão de Editar e Deletar o Perfil e Alinhamento Flexbox do App de React Native

Oi, tudo bem?
Vamos aprender a usar a função FAT para fazer pedidos PAT e DELETE agora para a gente
poder editar o perfil e também deletar o perfil de eu, pessoal.
Então o que a gente vai fazer?
Vamos olhar aqui no wireframe.
Eu modifiquei esse wireframe, botei o botão editar e dela está aqui.
O que eu quero fazer na verdade?
Eu quero deixar esses campos, mas eu quero botar esses botões aqui.
Quero copiar aquilo, mano.
Por exemplo, em vez de criar, vou botar eles aqui, tá bom?
Isso que a gente vai fazer agora.
Então eu quero inicialmente, quando eu rodar aplicativo, o seu nome e a idade já vão
estar aqui automaticamente.
Então a gente vai poder editar, digitar outra coisa, modificar o nome e clicar editar para
atualizar no banco de dados.
E o outro botão, a gente vai, quando clicar, deletar esse perfil desse cara e vamos ver
como é que faz no FAT.
Vamos voltar aqui e já tenho os campos aqui.
Vamos tirar esse criar e eu quero pôr o botão editar e o botão de dólar.
Vamos só comentar isso.
Vamos fazer assim.
Tá bom?
Todo entre esses chaves e esses comentários aqui.
Você comentário, comentado aqui.
Vamos tirar esse botão e vamos para o outro.
Vamos por aqui.
Vamos botar um touch de highlight para o botão.
Põe o outro aqui para fechar e dentro tem que ter o texto.
Qual que é o texto aqui?
Vamos botar editar.
Vamos botar o style para acessar os botões e vamos botar on press para fazer alguma coisa.
Quando apertar ou tocar esse botão.
Tá bom?
Vamos botar o estilo para o texto, style, styles, textos do botão.
Tá bom?
Só copiando o que já tem aqui.
Já tá lá.
Vamos botar um outro.
Copie outro aqui.
E esse botão, nos casos, vamos fazer esse VG editado, eletar.
Agora vamos botar o on press aqui.
Vou definir como não agora, só para ver como é que aparece lá.
Se você não definir o propriedade on press vai dar erro.
Tá aí.
Mas eu quero botar no mesmo, a mesma linha.
Então agora o flexbox, você se lembra do flexbox?
O padrão vai por coluna, o flex direction aqui.
Eu botei explícito aqui, mas o padrão coluna vai de linha por linha.
Então o eixo principal, o main axis, é aqui, verticalmente.
Então eu quero pôr para essa área aqui, um eixo principal horizontalmente.
A gente pode botar uma vio aqui, dentro dessa vio vai ter esses dois botões.
Tote-bo highlights.
E eu botar o flex direction row, que vai ser na mesma linha.
Então o eixo principal dessa vio vai ser assim, horizontal.
Então vamos fazer isso.
Vamos pegar esses caras e botar dentro de uma vio.
Vio, fecha o vio aqui.
Tá bom.
E vamos botar um estilo aqui.
Vamos botar styles.
Vamos chamar de, sei lá, botões de baixo, sei lá.
E vamos definir aqui, botões de baixo.
Vamos botar uma flex direction row.
Vê o que acontece.
Tá aí, né?
Vamos ver aqui, o ver está comando D.
Vou botar, mostrar o inspector, show inspector.
E vou clicar aqui.
Esse cara aqui, eu quero saber o que é que ele está contendo.
Parece que não dá para clicar na vio aqui.
Porque acho que você botar assim.
Esse aqui é o eixo principal.
Então eu quero fazer...
Align self-stretch.
Vê se isso vai funcionar.
Ok, vou botar aqui.
Tá aí.
Eu botei o align self-stretch para a vio.
Essa vio aqui poder ocupar toda a linha.
Espaço dessa linha aqui.
Antes estava só ocupando no meio, assim, dessa parte aqui para essa parte aqui.
Por isso que eu não podia clicar, mas agora posso clicar aqui.
Então as contências do botão.
Se eu quiser alinhar esses botões no meio, o que a gente vai fazer é assim.
Primeiro a gente ver qual é a direção flex.
A direção flex é row.
Então vai da linha.
Então o eixo principal, o main axis, né?
Main axis.
É aqui, horizontalmente.
Então a gente quer alinhar horizontalmente no main axis, no centro.
Para fazer isso a gente vai usar o quê?
Vamos ver aqui.
Se a gente ver isso aqui, né?
No justify content, vamos botar aqui.
Center.
Vamos ver o que acontece.
Bom, então o justify center vai alinhar os itens dentro do container flex.
Vai alinhar no eixo principal, o eixo principal horizontal, né?
Então vai alinhar no centro do eixo principal, que é aqui.
Se eu botar esse flex start, vai ser no começo do eixo principal, que é horizontalmente, porque é row.
E que se eu botar n, vai ser aqui, né?
Tem também esse space around, que deixa assim, entendeu?
Então vamos usar esse space around.
Deixa aí.
Se eu clicar aqui, tá vendo o que acontece com o space around?
Então vamos tirar esse inspector, hide inspector.
Então vamos voltar aqui e definir essas funções aqui.
Vamos chamar isso de editor.
Perfio, ou pessoa, sei lá.
Vamos fazer isso primeiro.
Deixa o outro para depois, tá?
Então vamos voltar aqui.
Defini o editor, o prefio.
Editor, perfil.
Tá lá definido, né?
Tá bom, nada acontece, porque a gente não tem nada.
Vamos só botar um console log para ver.
Vou botar a função.
Função editor perfil chamada.
Vou abrir o meu navegador, Google Chrome e vou para o meu debugger aqui.
Debugger está aqui.
Vou abrir o console.
Console.
Quando eu clicar nesse cara, tá aí.
Editor perfil not defined.
Será?
Por que não está definindo?
Será que eu talizei?
Not defined.
Por que?
Porque eu esqueci botar o des.
Cadê?
Ah...
Aqui.
Sempre esqueço.
Não se esqueça da palavra chave des.
Des.
Vamos voltar aqui, clicar editar, está funcionando.
Está aqui.
Tá bom.
Agora, antes de a gente ver esse editor, a gente tem que ter os dados, né?
Mas agora não está...
Quando a gente inicia o aplicativo, não tem nada escrito, não tem nada digitado.
Então o que a gente quer fazer é quando a gente inicia o aplicativo,
a gente quer pegar os dados do perfil automaticamente.
Uma maneira de fazer isso é, todo componente tem uma função chamada component.
De mount.
Você pode também usar component.
Will mount.
Tá bom?
Tanto faz.
Então, deixa eu botar aqui.
Component.
Did mount.
Aqui é um exemplo de outro life cycle method.
O método life cycle.
Você sabe que o render, né?
Essa função é chamada toda vez que o estado do componente é mudado.
E essa função component. did mount é chamada uma vez,
no momento depois que monta o componente.
Tá bom?
Quando monta o componente, ele faz alguma coisa.
E também o component. Will mount.
Que é muito parecido, é certo?
Que é chamada um pouco antes do componente.
Mount.
Pode usar o component.2, vou usar o component.d mount.
Então o que a gente quer fazer?
Na verdade eu quero pegar as informações, né?
Mas a gente já fez isso aqui, não é?
Se lembra dessa atualiza info, a gente definiu essa função.
Que faz um chama fat.
Para requerir as informações da pessoa número 1.
Vamos chamar essa função aqui.
Só para não ter que digitar de novo.
Então quando o componente montar, vamos chamar essa função.
Que vai requerir os dados e botar no estado, atualizar o estado.
E eu esqueci da palavra chave desde novo.
Hoje eu estou esquecendo, muitas coisas.
Vamos ver, tá bom, né?
Você notou que demorou um pouquinho?
Porque a função component.d mount, chamada logo após que monta o componente.
Eu já tá aí.
Tá bom?
Ah, o que é que eu tois?
O que aí não tá no inspector? Se eu tirei?
Tá aí, de um um.
Ah, deu erro aqui no text input.
Para a idade.
Por que?
Tá dizendo que é inválido.
Porque no banco de dados, se você notar a idade, é um número.
Number, né?
Objeto número.
Tipo número.
Então o text input.
Ele recebe um string.
Tá bom?
Uma maneira de aliviar isso.
Só para agora.
É só converter a string para o número.
Então vamos voltar aqui.
Eu vou supôr nessa idade aqui.
Quando a gente atualizar informação.
Tá bom?
A gente está na idade aqui, não é?
Mas essa idade é um número.
Mas agora que a gente tá usando text input, só aceita string.
Então o que que eu vou fazer?


0001-14 Botão de Editar e Deletar o Perfil e Alinhamento Flexbox do App de React Native

Implementação da Função para Efetuar a Modificação do Perfil no Backend

Então eu vou converter a idade aqui que é o número number para um string, entendeu?
Vamos aqui no navegador, então uma maneira de converter o número para um string é assim, tá bom?
Nesse caso, tem que ter o parâmetro desse aqui.
Outra maneira é só fazer um string com nada dentro e adicionar o número, tá bom?
E esse aqui talvez seja mais rápido.
Temos de performance, tá bom? Qualquer um dos dois.
Vamos ver aqui. Vou fazer esse aqui. Eu vou botar um string vazia e vou adicionar o número, o number.
E assim vai se tornar um string, tá bom?
Vamos aqui, então a gente sete o estado com a idade como se fosse um string.
Vamos ver o que acontece agora.
Aí, pegou a idade, pegou o nome, tá bom, né?
Agora vamos continuar e fazer o editor aqui.
Então quando o editor, a gente clica em editar, a gente quer mandar quase a mesma coisa aqui do patch para criar,
o pessoal vai sete o método vai ser patch, tá bom?
Vai mandar patch.
Então vamos tentar e a gente no body vai fazer a mesma coisa.
Você vai mudar os campos para alguma coisa.
E vai atualizar no servidor, no banco de dados.
Então vamos chamar o patch, qual é a URL?
Tem que passar o que? A gente tem um perfil, né?
Tem que passar barra pessoas, barra o ID dessa pessoa.
Nesse caso eu acho que a gente tá pegando a pessoa 1, atomaticamente.
Então vamos copiar esse aqui, tá bom?
E o segundo argumento é um objeto.
Nesse objeto vamos botar o método patch, tá bom?
Vamos botar os headers.
Accept, application, JSON.
E vai ser o content type, só copiar e mudar o content type aqui.
Tá bom? E vamos botar o data, né? Body.
Body vai ser um objeto cujo nome é o estado ID, name, nome, idade e avatar.
Vou só copiar esse cara aqui, tá bom?
Mas ao invés de se avatar ser já definido aqui, a gente tem que botar o estado.
Porque pode mudar.
Agora a gente não tem essa maneira de mudar a foto, mas fazendo assim,
se tiver essa função de mudar a foto vai funcionar.
Então a gente passa o patch, muito importante lembrar que é patch.
Normalmente a gente usa o put, né? Pra fazer um update.
Aqui a gente vai usar patch, for patch.
Então, vamos tentar fazer isso e ver o que acontece.
A gente clicar, editar, vamos ver aqui, clicar, editar.
Vai chamar essa função.
Estou usando uma função flash aqui, notis.
Então vamos ver aqui no back end.
O João, né? Vamos mudar a idade pra 29.
Ah, tem um detalhe também que eu esqueci de falar da...
A idade é uma string aqui, né? Mas aqui é um número.
Vê o que acontece.
Deu erro aqui, pera aí.
Vamos ver aqui.
Deu um detalhe de novo.
Então deu erro.
A supported body need type.
O que é que aconteceu?
Vamos ver aqui.
Editar, perfil.
Body, ah.
E aí, o que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?
O que aconteceu?


0001-15 Implementação da Função para Efetuar a Modificação do Perfil no Backend

Implementação da Função para Remover o Perfil no Backend

Eu esqueci de uma coisa aqui no buddy.
Então a gente está mandando esse objeto JavaScript para o servidor.
Mas o servidor só aceita JSON, né? A gente está fazendo JSON.
Então a gente esqueceu de stringify.
Esse objeto para transformar o objeto JavaScript
em texto, em formato JSON.
Então vamos tentar novamente.
Vamos mudar para tu... 28, está aí.
Vamos aqui a dar a base.
Clicar editar.
Está aí.
Seu nome, né?
28.
Agora vamos voltar aqui para...
Ah, cadê?
Você note aqui que nesse caso eu botei...
...this, eu usei this, this, this.
Lembra antes que a gente tem que fazer o bind, né?
Cada vez que a gente tinha usado this, this, this,
não é aqui, ó.
Eu acho que esse botou bind, em criar a pessoa, né?
Mas por que a gente não precisou de fazer isso aqui?
Quando eu queira editar.
Note que eu estou usando a função de flash.
A função de flash já seta o contexto da palavra this
para ser não desses caras aqui, mas para o componente.
O segundo projeto, né?
Cadê esse componente?
Então, se você usar a função de flash, não precisa botar o bind, this, tá bom?
Só um detalhe, por isso que eu deixei assim.
Nesse caso aqui, eu vou fazer esse outro aqui depois,
mas sem a função de flash, eu vou estar...
...deleta, perfil, bind, this, tá bom?
Só comparando os dois.
Mas vamos voltar aqui.
Então...
É porque a gente está dando erro porque eu não defini.
Só defini aqui, dela tá perfil.
Tá bom?
Editar, dela tá perfil, botar nada.
Ainda.
Tá bom? Só para definir, tá sem erro.
Então, o que eu quero fazer agora é...
Vamos ver o que a gente quer...
...que é que é retornado o servidor quando a gente faz esse pedido aqui.
Se lembra que o FAT sempre retora o promessa, né?
Promise.
Então, promessa a gente pode botar o then e vai ter um response, né?
Vamos consolar, Giz.
O que é que essa é a response?
Vai ser um promise, né?
Vamos ver o que acontece.
Vou botar aqui...
Clicar, editar... Aí.
Então, minha resposta foi a response, né?
Isso aqui, né? Eu gosto aqui.
Então, o que é que tem aqui?
Tem o URL, essas coisas.
Headers, Map.
Mas depois disso, a gente tem que fazer...
Isso aqui, né?
Lembra?
E outro then.
Vamos consolar o que é que é isso?
Ela já tem ali, né?
Ah, que é isso, né? Me botei isso.
Que 29, editar.
Só um editar... Ah!
Tá dando reload aqui.
Ah, que é isso.
Preserve logo. Vou clicar aqui para não dela estar.
Eu nem cliquei, está dando bugs aqui.
30 aí.
Tá bom? Então, o que aconteceu aqui, ó?
A gente recebeu esse objeto aqui.
De volta.
Então, João, idade 30.
Então, o nosso JSON server aqui...
retorna...
Quando a gente faz a patch, retorna o objeto.
Tá bom?
E...
Esse aqui converte o resposta para o objeto JavaScript.
A gente tem um console logo, só para ver o que é.
Se você quiser fazer alguma coisa com a resposta, pode fazer aqui.
Tá bom?
Então...
Vamos ver como é que faz o delete.
Ela é tarpe, fio aqui.
Quando a gente clica dela, queremos dela até esse cara.
Vamos fazer patch, né?
Põe a URL.
Quando a gente faz o delete, tem que ter a pessoa, o ID da pessoa também.
Específico, né?
Vamos botar...
Objeto method delete.
Assim, né?
Vamos ver se funciona só assim.
E eu quero fazer um anden aqui para lidar com essa promessa,
só para ver o que é que eu obtenho com a resposta, né?
Nem preciso de parênteses aqui, né?
Mas eu vou por...
Vamos com o console logo também, só para ver o que é.
Então...
Quando a gente clica, vai dar o delete.
Também quero fazer outra coisa aqui, quando a gente recebe a resposta de sucesso, né?
Eu quero também deletar todos esses campos aqui e tirar essa foto.
Então vamos fazer um set state.
D, set state, né?
Nome vai ser nada, vazio, idade.
Sei lá, vazio também ou no.
Vamos botar no, né?
E vamos por avatar URL...
Botar no.
Para ver, acho que estava dando erro porque eu tinha...
Sempre dá o mensagem de erro porque eu botei avatar URL para ser vazio, botar no, ver o que acontece.
Você vai tirar essa mensagem?
Não dá, não é?
Não pode ser não.
Volta.
Então não pode ser não, ó.
Ah, que é isso.
Vamos tirar, botar aqui de novo.
Tá bom, então vamos fazer o D, set state.
Só para limpar esses estudos, quando o delete está.
Então vamos ver, dar a base aqui.
João está aí.
Vamos deletear o João.
Vê se funciona.
Eita.
O cara está fora, né?
Se foi, né?
Acabou.
Apareceu on the phone porque deu um...
Atualizou a aplicação aqui.
Porque toda vez que muda a...
A dada base, alguma coisa.
Ele fica atualizando.
Ele pode desabilitar isso.
Disable Live Reload, tá bom?
Vamos tirar isso, né?
Gosto que é só atualizando quando é muda os arquivos.
Então o João se foi.
Mas a gente pode botar ele de volta.
Botei comando Z aqui, para voltar.
Vamos fazer de novo aqui.
João, vamos editar.
Vamos botar 32.
Editar.
Agora está 32.
Note que não atualizou aqui porque o desativou o Live Reload.
Agora vamos deletar esse cara.
Se foi, tá bom?
Se foi.
O que aconteceu?
Editar isso.
Só de curiosidade.
O que acontece?
Nada aconteceu.
Vamos ver o console aqui.
Dei um objeto sem nada.
Vou clicar de novo.
Objeto sem nada.
Vazio, né?
Tá bom?
E a danca de dados?
Sem o João.
Então assim que a gente faz o delete.
E a gente também fez o patch para fazer um update.
Então vamos avisar aqui.
Para fazer, quando a gente clicar, editar o perfil aqui.
Vai chamar a função.
Estou usando a função de Flash.
Não preciso usar o binders para ajustar o contexto do palavra chave.
Aí vai chamar aqui.
Editar perfil.
Vou chamar a função.
E o URL e vou fazer um objeto aqui.
Ter que ser o método patch para atualizar na localidade.
E não esqueça de a string 5 com os dados novos.
Que serão atualizados.
Ah, eu vou ter essa ideia aqui.
Acho que não preciso.
Desculpe.
Tentar novamente.
Vou ter o João de volta.
Carregando.
24, vamos ver.
Tá aí. Preciso de ID não, né?
Eu tinha um like eu estava fazendo nos testes.
Então, vamos ver o deletear aqui.
Deletear, a gente faz o patch.
Ter que ser essa pessoa específica.
O ID.
Método delete.
Aí quando for sucesso aqui.
Eu só tirei tudo dos forms.
Esvazia esses caixos de texto.
Tá bom.
Obrigado por assistir.
Tem algum...
Pergunta ou sugestões?
Alguma coisa para falar?
Fábora deixar nos comentários.
Se gostou dos vídeos, por favor, subscreva.
E...
Por hoje é só.
Para esse vídeo...
Nesses últimos vídeos a gente aprendeu a usar a função patch.
A gente já pode fazer
Operação CRUD, né?
CRUD,
Create, Read, Update, Delete.
A gente pode fazer o Create com Post.
Fazer um Read
com o Get, né?
Que é o padrão do patch.
Fazer o Update com Patch
e o Delete com Delete.
A gente já faz...
Pode fazer CRUD.
E...
Nos...
Nesse próximo vídeo a gente vai aprender
algumas coisas mais...
Avançadas, né?
A gente já...
Perdeu os básicos.
A gente já sabe quando é que tá o servidor.
Então...
Até lá. Até logo, hein?
Tchau.
