Resumo do Transcript

Só para demonstrar que a versão do Android também está funcionando, eu abri aqui o meu Android Studio e rodei a aplicação no Android Emulator. Está aqui, você nota que é a mesma coisa. Tá bom? Tem um iOS e tem um Android. Agora vamos prosseguir e fazer outro componente. Se a gente voltar aqui para o meu sketch aqui. Então vamos fazer essa lista de posts aqui. Vamos fazer esse componente para essa lista. Tá bom? Então vamos voltar aqui e vou no SRC, essa pasta SRC e vou criar uma nova pasta dentro dessa. Vou usar um diretório chamado components que vou colocar todos os componentes nele. Essa pasta aqui. Vou criar um new file, vou chamar meu componente de list. Tá bom? Vou usar nomes em inglês, mas se você quiser pode usar nomes em português. List. E agora vou importar react do react. Eu tenho que decidir se isso vai ser componente de classe ou componente funcional. Componente de classe mantém o estado, o state, o componente. E também você pode ter acesso aos métodos de lifecycle. Então também tem que pensar sobre redux. Porque se eu voltar aqui. Aqui tem uma lista de posts. E esse post aqui, esses dados vão estar amazenados no application state do redux. Então eu vou precisar conectar essa lista com application state redux. E normalmente nesses casos, eu tenho que fazer o componente de classe. Tá bom? Então, o application state que a gente vai fazer. Vai ter o quê? Vai ter a lista de posts. Vai ter os posts. Vamos fazer um array. Vai ter essa array de posts. Post 1, 2. E cada post é um objeto. Tá bom? Show. Aqui. Então, uma das partes da application state que a gente vai ter é essa chamada post. O chamado de post que vai ser um array. Tá bom? Um array, um coletâneo de objetos. E cada objeto é um post. Da mesma maneira que tem no JSON placeholder aqui. Que eu falei no começo da série de vídeo, desse vídeo, nessa série. Então um array com vários objetos. Bom? E o outro peço do application state vai ser o post que foi selecionado. E essa pra essa outra cena aqui. Deixa eu dar um. Eu posso chamar de selected post ou alguma coisa assim. Eu vou chamar de selected post. E esse aqui vai ser só um objeto com o tarot, glory e talvez outras coisas. Vai ser somente um desses caras dentro da array, né? Esse notch tem o post 1, post 2, assim por diante. Então eu vou fazer só isso que a gente precisa dessa aplicativa. Preciso dessas duas partes do application state. Tem o post, coletâneo de posts, objetos. E tem o selected post que é um objeto que é só um deles. Então vai ser esses caras. Então voltando pro react, a gente vai ter que fazer o componente de classe. Porque a gente vai conectar o react component aqui com o redux, com esse post aqui. Esses caras aqui vão ser conectados. Esse vai ser conectado ao componente aqui. E o selected post vai ser conectado ao outro, outra cena aqui. Tá bom? Vamos lá. Então eu vou adicionar o component, botar um virgo. E vou destruturar o component dentro do module react. Tá bem. E vamos fazer o class list. Extends component sempre assim, né? Vou definir a função render, que todo o componente de class tem a função render. E vou retornar um template. Agora vou retornar um view só com os text aqui. Dessa maneira vou dar um... vou duplicar a linha, tá bom? Como eu estou usando o átomo é command shift D, comando shift D. Talvez seja o mesmo no sublime. Só para ter alguma coisa. E vamos ver o sal. E também no final vou exportar a sport default list. Para disponibilizar esse componente para os outros arquivos. Ah, não se esqueça de importar a view e o text porque a gente usou. Então import destrutura view e text do react native. Certo? Então tá tudo ok agora. E vamos ver, vamos adicionar essa list para o app aqui e ver se está funcionando. Vou voltar para o app.js. Em vez de ter esses negócios de oi, eu vou pôr a list. O componente list que a gente criou. E não se esqueça de importá-lo porque a gente está usando aqui. Vou dar um import list, from. Está dentro de componentes do diretório presente. Barra components, barra list. Não precisa da extensão js. Salva. Vou ver aqui no meu simulador. Dá um refresh. Está aí. Item, item, item, item. Está funcionando. Está bom? Voltando aqui. Então a gente tem os itens. Outra coisa que eu quero fazer é... Eu não falei disso, mas se você já está acostumado ao react, que eu... A gente tem que... Quebrar nossa UI. Interface do usuário. A gente chama UI em inglês. Em partes maiores. Então vai ter a list. Esse cara vai ser a list. E cada um dos itens vai ser uma list item. Eu não sei desenhar. Desculpa. Então cada um de eles vai ser um list item. Então, você já deve saber isso. Se você está assistindo esse vídeo, porque nos meus vídeos anteriores, eu já expliquei isso. Tá bom? Então vamos voltar aqui. Vamos criar um outro componente. List item. Vou chamar list item. E nesse caso, eu acho que não precisa manter a estada. Porque é só um componente que vai mostrar um pouco mais. É só um componente que vai mostrar um template. A gente vai talvez injetar os dados do post como uma props. Então eu só vou fazer componente funcional. Import react from react. Sempre assim, né? Eu não vou importar component, porque é componente funcional. Vou dar um const aqui, fazer uma variável com o nome do componente. E defino como uma função. Normalmente, tem um props aqui. Vamos deixar o props, que vai ser props que serão injetadas nesse componente. E dá um return do template. Nesse caso, eu vou só recortar o template dos caras que a gente fez anteriormente. Vou aqui. Eu vou tirar esse aqui. Copiar. Tá bom? Eu copiei essa linha do item item. E vou por aqui. E não se esqueça de importar text que a gente está usando do react native. Import text de estruturar com esses curly braces from react native. Tá bom? E no final, dá um export default para retornar, para disponibilizar esse cara como um componente para os outros arquivos. Tá aí. Esse item aqui, tá bom? Vou voltar para list e vou usar esse list item que a gente criou. Em vez desses caras aqui, eu vou dar um list item. Tá bom? E vou só... Podia fazer um loop, mas só para demonstrar, vou copiar, duplicar a linha. E como a gente usou isso, temos que importar. List item from... A gente está no mesmo direitório, a gente está usando list, mesmo direitório que list item, então não precisa do barra components. List item, tá aí. Salva ver o que acontece no simulador. Tá tudo funcionando, a mesma coisa, né? Mas só... Só dá no refactoring para fazer isso no jeito do react de componentes.