Resumo da Aula sobre Componentes em React

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!