Resumo do Transcript

Depois de muita configuração, muita revisão, a gente finalmente vai começar a fazer as cenas, a nova cenas para o nosso aplicativo. Então, eu gostaria de fazer essa cena para o novo post. A gente vai adicionar o botão novo e vai direcionar o usuário ao novo cenas para criar o novo post. Então, vamos lá e criar essa cena primeiro. Vou lá no meu terminal aqui. Só para abrir o texto editado no seu projeto, vou usar o átomo. Já abri aqui. Cadê? Então, a gente vai... Primeiro, vai adicionar o componente aqui. Vamos ver que nome a gente vai dar. Vamos dar novo post. Talvez eu chame essa cena de post new, ou new post. Você pode escolher qualquer nome. Vou chamar de post new, tá bom? .js. Esse vai ser essa cena aqui, esse componente. Então, vamos lá. Aperta o control, comando KB, KB, para tirar a tela, a sidebar dali. Vamos lá começar do zero para o componente import, react, from react. E aquela pergunta sai. Componente de classe, componente funcional. Eu vou usar a componente de classe, porque a gente vai precisar lidar com o Redux, tá bom? A gente vai chamar um action creator aqui. Quando a gente clicar OK, vai chamar um action creator que vai fazer o pedido para criar novo post. Também temos esse formulário com título e conteúdo. E a gente vai armazenar esses dados dentro do estado do Redux. Então, também vamos injetar como props parte do estado do Redux, que vai armazenar as informações desse formulário. Então, vamos lá, aqui vou adicionar o componente, o objeto component, que está dentro do módulo react, por isso que estou dando destrutoramento. Para aqueles que esqueceram ou ainda não entendem o que destrutoramento é, por exemplo, se eu der import react, from react, o que isso acontece é que eu posso usar o módulo react dessa maneira, e toda vez que eu criar component, quiser usar esse component, eu tenho que dizer react.component. Mas se eu ficar... Não fica muito... Fica dá um cansaço, especialmente para outros tipos de componentes, toda a vida tem que digitar isso, digitar isso, react.component.component. Então, a gente faz o destrutoramento, destructuring, que é chamado, no inglês. Então, é a mesma coisa que fazer react.component, só em vez de dizer isso tudo, você pode pegar esse objeto que está dentro desse objeto chamado react, do módulo, e tirar para fora, extrair usando esses braces, né? Essas chaves. Então, quando você diz assim, from react, está dizendo que você pega esse cara, extraia, e toda vez que eu me referir ao component, na verdade estou referindo ao component que está dentro do react. Tá bom? Então, se prosseguindo, import react e o component que está dentro do react, extraído, vamos lá criar class, o nome do component post new, extends component, toda a vida tem que dar um inherit. Tem que inherit from component, né? E vamos lá definir a função render, que todo o component tem a função render, e retorna o template, que é a visão que a gente quer mostrar ao usuário. E no final, vou dar um export default, post new, para disponibilizar esse component em outros arquivos. Vou só por alguma coisa aqui, o bom view, que é do react native. Essa view é quando você for deve no react web, na HTML, vamos importar porque a gente está usando, e é parte do react native, e dentro do modo do react native, então vou destruturar react native. Se eu não tivesse o destructuring, essas coisas aqui, eu teria que dizer todo o tempo, react native.view, todo o tempo, e você note que não é legal ficar digitando todo o tempo, react native.view, se tivesse assim, react native from react native, tá bom? Por isso que é legal ter o destructuring, então a gente não precisa digitar muito. Não vivo botar também um texto, só para ver se vai funcionar. Adicionei o texto, que é um componente do react, vou adicionar aqui no destructuring, também é parte do modo react native. Salva, vamos testar esse componente, vamos adicionar ao roteador, o que eu vou fazer, vou no router.js, vou importar o meu novo componente, import, qual o nome? é post new, post new, deixa eu expandir a tela, post new from, cadê ele? Está dentro da pasta component, do mesmo diretor, então eu boto ponto barra, components, barra, post new, não precisa da extensão js, tá bom? Quando importar, tudo bem, agora vai aqui, adiciona a cena, tá bom? Aqui, pode dar um sine, isso é parte do react router flux, react native router flux, tem um router, tem um sine, sine é como se fosse a rota, se você sabe o react router do react web, é a mesma coisa que a route, tá bom? Então, a sine vai ter a propriedade chamada aqui, que vai ser o nome da função pra gente chamar pra mudar pra essa cena, vou chamar de post new. E o componente vai ser o componente que essa cena se refere, post new, esse que é o nome que a gente importou. E o título vai ser qualquer coisa que você quer que apareça na barra de estar, de baixo da hora, né? Você note que aqui, você tem lista de posts, essa barra aqui, que vai aparecer aqui. Vamos lá, vamos mudar, ok, novo post. Fecha o componente, salva, tá bom? Tudo ok, agora vamos linkar a página principal, lista, post new. Dentro do list, vai... aqui a gente tem que adicionar o que? Note que tem que adicionar esse cara no lado direito, né, da barra, como é que a gente vai fazer isso? Então, se você não vai no react native router flux, documentação tem dizendo como fazer react native router flux aqui no github, esse usuário axonove. Eu vou ver se já tá aqui nos docs. Não tem nada na página principal, só vou te direcionar onde ver, clique em API configuração. E eu já sei qual é a propriedade, propriedade é write title, tô dando a busca, tá bom? Esse aqui. É o texto pra dizer mostrar no lado direito, você também tem que definir o on right, propriedade on right, que vai ser o que a gente vai fazer quando a gente clica. Então, vamos lá, on right, tá aqui. Função que vai ser chamada quando o botão, o lado direito da barra de navegação for pressionada, né? Então, a gente vai fazer assim o write title e o on right. Tá bom? Então, vamos lá. Vamos voltar ao router. E aqui no router, vai aqui no no post. Deixa eu quebrar isso em multiplolins, que vai ficar muito longo. Vou usar o mesmo tempo aqui, e alim esse closing, o final, fechamento com abrimento, normalmente que eu faço. Vamos adicionar lá, como é write title, propriedade, vai ser o que a gente que aparece. Então, vamos lá, o que a gente vai usar? Pode usar novo, né? E write, on right, né? On right, vai ser a função que a gente vai chamar quando clicar naquele cara. A gente quer que mude de cena para o post new, né? Ah, desculpa, eu fiz uma coisa errada aqui. Senão, acho que eu estou usando post new, na verdade quero usar o list, né? Eu quero adicionar esse botão novo na lista de posts. Não é no post, né? Então, vamos desculpa aí. Vamos aqui nessa aqui, tá bom? Você tem que recortar esses caras aqui, e adicionar a lista aqui. Deixa eu só quebrar a linha, dar uma inetação. Bom, então deixa eu adicionar antes de inetio. Write title do list, tá bom? List, não é novo post. Write title do list, a gente quer botar esse para o palavra novo. E a função vai ser a gente quer mudar de cena para essa cena novo post. Para fazer isso, vamos usar o actions do react near router flux. Vamos mudar de cena, a gente chama actions, o object actions, ponto o aqui, né? Olha aqui da cena, que é post new, nesse caso post new chama como sua função, e é uma função, né? E isso vai mudar de cena. Para usar isso, você tem que importar aqui, como a gente não tem, vamos lá em cima. É parte do react near router flux, então está destruturado aqui actions, vamos salvar, então vamos anotar.