Reagir, vento adicional e base de fogo: como criar um site de blog moderno

1. Introdução ao curso: Ei, pessoal, meu nome é Joel D Muller, e eu estarei no topo deste curso, criando um site de blocos simples que reage ao criando um site de blocos simples que Steeling CSS Neste curso, vamos passar por diferentes processos de criação de um site em bloco, criação de nosso blog, upload para nosso banco de dados e recuperação de nosso banco de Usaremos para nosso banco de dados, usaremos o Pier base e, para nosso estilo, em vez do CSS normal ou do CSS básico que conhecemos antes, usaremos os casos em que você precisa um pouco de ideia para o estilo deste curso. Além disso, todos nós sabemos a eficiência do react que usaremos para que esse custo seja preciso. E depois do curso, se estiver claro para você, após o upload do curso glow, colocamos o link Para na descrição abaixo Você pode conferir, clicar e verificar o código sozinho e até mesmo copiá-lo. Se quiser, confie em mim, este curso você me deixará anotar e aproveitará o curso sem precisar mais que eu faça quando eles começaram. 2. Como configurar o ambiente: Então, para começar, vou precisar executar meu ambiente, danificar para iniciar meu Damages, vou criar uma nova pasta foi e vou chamá-la, posso chamá-la de nome, mas vou chamar esse bloco. Em seguida, vou abri-lo no meu código do Visual Studio. Então, depois disso, preciso instalar meu react e iniciar tudo corretamente. Preciso instalar meu react e meu t css. Vamos instalar o Firebase mais tarde, pois isso será no final do tutorial, antes de começarmos a implementar a base de fogo Então, para eu criar minha reação, existe essa forma padrão de criar reatores MPM create react, mas eu não vou usar isso porque leva um pouco de tempo para usar MPM Portanto, há uma alternativa para isso. Isso torna tudo mais fácil. Você torna sua reação mais leve e mais rápida. Então, eu vou usar o T. Então, felizmente, eu posso instalar meu VT também junto com meu sensor de cauda. Então este é o comando, você pode acessar o guia tail.com Então, acesse este guia de estrutura. Então vá porque vamos usar VT. Então você pode simplesmente copiar esse particular. Não copie tudo. Não preciso de tudo. Basta copiar este MPM para criar o Tartest porque precisamos que a versão mais recente do react ou a versão mais recente do t seja instalada Coloque-o em seu terminal, seu irmão, para que ele atue como nome do projeto. Então, vamos chamá-lo de blog ou posso chamá-lo de meu nome, J Blog. Você pode usar o nome para isso. Joel Blog clique em enter Então, vai ter para o blog com o nome do pacote Portanto, você deve tomar nota ao selecionar a visualização de bananas ou ao usar o react react. Não estamos usando script de tipo. Não estamos usando nenhum script de trabalho para isso. Então, por que você clica nele, acesse o CD to J blog e depois instale o MPM para instalar a dependência necessária para este aplicativo Então, após a instalação, agora você pode executar o MPM para executar o aplicativo e o S está funcionando corretamente Então você pode clicar neste controle de controle de controle de áudio e clicar em. Então, vamos ver o aplicativo aparecendo. Portanto, conseguimos configurar nosso aplicativo de reação ambiental com facilidade, mas ainda precisamos instalar nosso pacote tailwind Então copie isso e você poderá abrir um terminal diferente para isso. Portanto, você precisa vê-lo seu blog ou em qualquer nome que você o chame e controlar. Então, isso instalará o CSS para t win. Depois disso, você precisa instalar o PC para enrolá-lo. Então você cola isso também. Então, depois disso, temos nosso arquivo de conflito CSS e temos nosso, se você verificar este lugar, seu código-fonte ou você tem seu índice CSS e outras coisas dentro. Então, depois disso, dentro de nossa configuração final js, precisamos copiar isso e colar dentro do nosso conteúdo Precisamos copiar isso e colar d. Este simplesmente simboliza que qualquer alimento qualquer arquivo que tenha esse índice de índice HTML, ou em Tx, poderemos trabalhar nele Se isso não estiver incluído no TCS, não poderemos trabalhar em nossa propriedade E também em nosso CSS de índice, precisamos copiar isso no CSS de índice anterior. Então você pode simplesmente colocá-lo por cima e depois disso, acho que estamos prontos para começar. Além disso, para este tutorial, eu preciso importar algumas fontes que vou usar para este Tutoria, existem algumas fontes específicas que vou usar para esta Então, vou importar essa fonte do Google. Você também pode copiá-la e fazer o mesmo: abrir San Inter Barbers e amar, essas são as fontes formais que vou Então, para eu implementar esse frontal, preciso adicioná-lo ao meu arquivo TV.cc Então não se preocupe. Dentro da configuração. Eu adicionei muitas coisas. Então, dentro da equipe, saiba que sua equipe estava meio vazia antes, mas eu adicionei a família de fontes estendida dos extensores Então, para cada fonte, esses são os fundos que eu precisava. Então, eu posso chamar essa fonte a qualquer momento na minha reação, na minha página ou qualquer coisa Então, essa cor, então eu não quero adicionar cor toda vez, talvez sempre que eu quiser usar a cor primária Eu só tenho que adicionar esse A 535 toda vez. Então, eles facilitarão que, se eu adicioná-la aqui, eu possa simplesmente chamar talvez a cor de fundo de primária. Então, se eu mudar a cor aqui, ela mudará para todas as outras páginas que eu precisar, ou eu uso essa cor primária em vez de ir de uma página para outra para mudar a cor. Então, depois disso, eu preciso da pasta de crisma. Primeiro de tudo, minha pasta de páginas e depois minha pasta de componentes. Então, dentro da pasta da página, é aí que temos todas as páginas necessárias para este aplicativo ou talvez, talvez a página de política ou a página de futebol ou qualquer outra página. E o componente, você sabe, o componente react é como um código reutilizável, em vez de eu reescrevê-lo para cada página, posso simplesmente agrupá-lo e usá-lo nessa Portanto, há outras que também precisam ser feitas. Então, dentro dos meus aplicativos.6 Não precisamos de tudo isso. Ok, vamos verificar se talvez nossa reação, nossos sentidos caudais, estejam funcionando. Então, dentro disso , por favor. Deixe-me ver. Então, para você usar seu vento de cauda, você precisa dizer o nome da classe Sim, esse nome de classe. Deixe-me ver, o plano de fundo deve ser lido. G seis. Deixe-me ver, talvez isso funcione, não está funcionando. Provavelmente, deixe-me reiniciar minha coisa. Oh, você pode ver agora. Então, depois de instalar o ten sass, você precisa fechar o servidor em execução e reiniciá-lo novamente. Então você pode ver que nosso t ss está funcionando bem agora. Mas não precisamos disso em nosso servidor. Não precisamos dessa página. Portanto, precisamos de uma página totalmente diferente. Então, para eu fazer isso, eu já tenho um código. Vamos explicar, vou apenas copiar e colar e depois explicar mais tarde. Então, o que eu simplesmente faço agora é instalar minha rota para que eu possa avaliar em diferentes páginas no meu distin, mas não vai funcionar agora porque eu não instalei meu roteador react doom Então, para instalar isso, basta copiá-lo e colá-lo em seu dist check PPG sell para instalá-lo em seu navegador em seu aplicativo Então, basta copiar este comando e vir aqui para o seu So após a instalação, pode voltar ao seu plano. Então, definitivamente, será um plano porque não tenho uma página carregada nele. Então, é isso que vamos usar mais tarde. Essas são as páginas que vamos criar. Precisamos da página inicial, da página de contato, da página diferente do blog. Então, precisamos dos detalhes do blog e criamos o blog. Então, primeiro de tudo, precisamos do nosso navegador e do nosso rodapé. Se você conferir aqui, ok. Desculpe. Então, se verificarmos aqui, temos nosso nu a pesquisa e o nome do logotipo e outras coisas, e temos nosso rodapé Essa é a que vamos submeter. Então, todas as outras páginas serão renderizadas dentro desses dois componentes Portanto, há dois componentes que precisamos criar agora, o d Nerva e o pé 3. Navbar e rodapé: Então, após a instalação, posso voltar para o seu p. Então, definitivamente será planejado porque não carrego nenhuma página nele. Então, isso é o que vamos usar mais tarde. Essas são as páginas que vamos criar. Precisamos da página inicial, da página de contato, da página diferente do blog. Em seguida, precisamos dos detalhes do blog e criamos o blog. Então, primeiro de tudo, precisamos do nosso Nerva e do nosso rodapé. Se verificarmos lá. Então, se verificarmos lá, temos nosso núcleo a pesquisa e o nome do logotipo e outras coisas, e temos nosso rodapé Essa é a que vamos submeter. Então, todas as outras páginas serão renderizadas dentro desses dois componentes Portanto, há dois componentes que precisamos criar agora, os cabeçalhos Nerva e o Então, para começar com isso. Então, prefiro que tudo junto na tela, em primeiro lugar, fique em uma tela relativa isolada e, quando a tela for meio grande, o pico da barragem p esteja horizontal e vertical, o preenchimento seja zero Se a tela for pequena. O preenchimento será oito em todos os lados e o fundo deverá ser branco e outras coisas assim Então, eu também exibo flex. Então, flexione menos uma e outras coisas. Esses são apenas os básicos, atreva-se ou não, siga em frente. Então eu preciso criar meu final, há nerve.sx, e minha foto GSX e Então, eu reajo, se você estiver usando o react, você precisa importar tudo para poder chamar essas funções fora dessa reserva específica, você tem seu ponto de índice de índice. Isso permitirá que você chame esses dois componentes ou qualquer outro componente que esteja dentro, por favor, a qualquer momento. Então, basicamente, exporte cada dois componentes agora. Então, dentro do meu número, você pode digitar esse comando. Se você instalou, há uma estação de entrada que você precisa restaurar para que a reação seja gasta. Então, eu vou ser capaz de fazer o que estou prestes a fazer agora. Desculpe, RSC. Então, isso ajudará você a criar a página para fazer isso. Você também pode fazer a mesma coisa aqui também em seus ceramistas talvez possa trabalhar em nosso Vamos ver nossos componentes. Estamos internando esses dois componentes agora, nervo e roteador Desculpe. Ok. Então Nava, então esses dois, digamos que talvez eles estejam aparecendo Você pode ver os dois componentes que já estão sendo exibidos em nossa página de reação. Portanto, principalmente, precisamos agrupar esse principal em um roteador para que possamos rotear por páginas diferentes. Então, acabei de adicionar esse roteador de navegador a partir da reação que instalamos no time e montamos para que, toda vez que estivermos percorrendo páginas, possamos. Quando clicarmos em uma página específica, possamos correr para aquela página e ir para aquela página sem nenhum erro Então, agora podemos ver que nosso bar está funcionando como um trabalho inútil. Então, só precisamos implementar algum design nele. Então, para começar. Vou apenas examinar alguns códigos. Eu acredito que você tem alguma ideia sobre isso. Eu não sigo apenas código muito simples, vou escrever um código complexo, um simples script gama, o ato Vou dar alguma explicação, se necessário. Preciso criar um objeto para ter links nele para chamar cátion. Então, estou basicamente declarando o nome de um link específico e o roteamento Essa é a página para a qual eu queria encaminhar. Por exemplo, eu queria direcionar para o local da página. Eu queria encaminhar para o blog spot. Então é assim que basicamente vai ser lá. Então, eu vou copiar isso. Então é para isso que eu vou fazer. Isso também é. Então, acabei de adicionar outros, como spot this way she. Agora eu criei o roteamento do lado do campo, mas é assim que eu quero que ele seja roteado para um campo diferente Então não se preocupe. Vou mostrar como vamos direcionar para uma página diferente. Então, em seguida, preciso criar uma função para design responsivo para que, quando elas sejam peças Por exemplo, agora, verifique isso. Quando o aplicativo estiver em um tamanho menor, quero que você mostre esse botão e possa abrir essas páginas Então, eu preciso criar uma função para isso para que, quando chegar a esse estado específico, mostremos isso. Então, eu preciso adicionar o. Preciso inseri-lo para poder usá-lo. Então, dentro disso, eu preciso um d do lado ruim do Então, esse link precisa ser importado do . Se você tiver alguns sintomas nele, você pode importar essa coisa diretamente pela guia que você precisa importar e colocar o latão cíclico Do sótão Então, este será o logotipo, o logotipo do aplicativo, esse logotipo em particular A maneira como estou agrupando os links para que, ao clicar no logotipo de qualquer página, eu também possa voltar para a página Então, deixe-me colocar um estilo em cada um deles. Estou fazendo uma correção para que o Na esteja sempre no topo, mesmo quando estou escalando o Naver, nós apenas existimos na página Então, o link significa que, quando eles clicam nele, aonde eu quero ir , então eu quero pular. Então, deixe-me dar um pouco de estilo também. E para o nome da classe de imagem, eu deveria ser o e o logotipo em si, o logotipo em si. Eu preciso importar. Este é o logotipo que eu quero usar e exportá-lo aqui para que eu possa chamá-lo de qualquer lugar. Então, eu só preciso exportá-lo. Deixe-me chamá-lo de logotipo aqui. Então, você pode ver a importação automática Isso é importação de Visual Stud para mim. Então, vamos verificar se talvez isso esteja realmente funcionando em nosso aplicativo. Você pode ver que temos o logotipo aqui. Então, permanecem na barra de inclinação e nos outros links. Então, eu preciso criar o botão também para que, quando eles usarem um formulário móvel, o botão seja aplicado. Então é isso que eu quero criar agora. Então eu preciso do ícone, esse é o ícone de ponto, você sabe. Uh, esse ícone D. Então, basicamente, estará pronto, você pode marcar zero ícones. Existem muitos ícones nos quais você pode ver para copiá-los e importá-los para o seu aplicativo. Mas antes de tudo, antes de importá-lo, você precisa instalá-lo em seu projeto. Isso significa que esse ícone zero primeiro, copie e cole nessa coisa. Você vai ver esse. Portanto, você precisa importá-lo primeiro por meio seu terminador antes de poder avaliá-lo ou usá-lo. Então eu tenho que importar e importar e o segundo é X M para aconselhamento Então, eu também posso estudá-lo. O que isso significa simplesmente que, quando é grande, a tela é grande. Esses ícones devem estar aquecendo. Em particular, deve ser o aquecimento. Mas quando a tela é menor do que grande, essa é a outra. Deixe-me estudar o clique, quero executar uma função configurada para celular como verdadeira. Então, é tão simples quanto isso, então vamos verificar. Vamos verificar por que isso não está sendo exibido. Desculpe, há um erro, então já passou. Sim, esse é o problema. Então você pode ver que o botão está aparecendo. Então, quando a tela é pequena, o botão aparece quando a tela é grande, o botão não está sendo exibido. Isso é principalmente o que se deseja alcançar com isso. Então, ninho, precisamos criar nosso. Então, inicialmente, eu quero que a pesquisa seja aquecida a partir de algo menos do que médio. Então, de médio para cima, o problema da tela é o mecanismo de busca. Então, eu não quero que apareça quando a tela é pequena. Então, isso é principalmente o que eu quero alcançar. Então, vamos verificar quando mostramos e isso nossa busca na tela menor não é para mostrar, mas nas maiores para mostrar. Isso é principalmente o dano. Então, agora precisamos criar nossos links. Então, nosso Então, conseguimos alcançar hoje em dia, o que queremos dizer com nossos links. Então é isso que vamos conseguir agora com isso. Então, outro d. Então, a partir do d, vamos mapear o objeto de navegação que criamos na outra vez. Então, para cada um de vocês, quero um link. Então, definitivamente, você precisa colocar a chave, que são os itens. É quando eles clicam para conectar o ponto H do item Você também precisa estilizá-lo. Portanto, o texto deve ser pequeno, o formato c deve estar em semi negrito, à esquerda. Então, se você não entende um pouco dessa coisa, você pode simplesmente colocar essa coisa nela, seu cursor sobre ela mostrará o que ela está encontrando C. Então, para seis à esquerda, simplesmente significa linha na vertical Isso é 1,5. É assim no CS. Quando eu volto, quero a cor primária. Eu quero que a cor seja primária. Então, esses são os nomes que eu quero ser, para mostrar que talvez funcionem bem Eles já estão mostrando o que está empilhado. Vamos ver o que podemos fazer ao estilizar o padrão. Nome da classe, Os roubos deveriam ser catamarã. Não me lembro de roubos que são inseridos por vez. Rastreamento, amplo. Portanto, esse branco de rastreamento significa simplesmente um espaçamento entre letras. Então, quando a tela é grande, eu queria mostrar. Então, quando a tela é grande, o programa mostra essa cor de link. Então, vamos ver a cor inicial do texto Mas lembre-se, por que clicamos nisso. Este não está mostrando a lista dessa coisa como esta. Por que clicamos nisso, mostrando a lista de funções, como a lista de páginas para as quais podemos encaminhar. Para conseguir isso, para conseguir isso depois do nosso, precisamos criar um diálogo. Então, para usarmos esse diálogo, temos que inseri-lo. Assim, podemos acessar esse diálogo a partir de também está em uma reação. Nascimento do cinto, o senhor comeu o pão do nascimento da menina Então, conseguimos criar nossos números Então você vê mudando para um pequeno. Então, o ninho somos só nós para trabalhar no rodapé. Então, nosso destino está funcionando. Então, nosso rodapé, precisamos trabalhar nele. Portanto, para o nosso rodapé, precisamos apenas de um processo muito simples, não precisamos importá-lo em especial Uma seção que está mostrando tudo, essa div com o nome imputa para se inscrever e algumas outras coisas Então, sem, vamos começar. Eu vou usar você pode deixá-lo como D, mas você pode usar a seção em vez disso. Seção dentro da seção, temos D. Digamos uma carta de notícias diárias. Então, depois disso, temos um formulário. Então, vamos estilizá-lo para que tudo o que fazemos faça sentido. Vamos dar uma olhada nisso. Então, vamos estilizá-lo e ver como vamos ficar. Então, vamos dar uma olhada no W. S, na verdade do que queremos que seja. Mas basta trazer um pequeno anúncio que não é. Não está cheio como os outros, então só precisamos trabalhar conectados a um pequeno toque e será exatamente o que queremos que seja. Sim, então vamos verificar novamente por que isso está aparecendo de forma idiota e vamos verificar se nosso índice ou CC provavelmente é esse ou aquele que não removemos na outra vez Então, provavelmente são eles que estão cruzando a nossa página. Então, vamos deixá-los e rotular este que está funcionando. Então, conseguimos alcançar nossa barra nervosa e nosso oleiro. Então, a próxima coisa é apenas a nossa página. Essa é a página agora. Então, no controle deslizante, podemos aninhar e ver fotos diferentes, os ícones de mídia social e as diferentes postagens do blog, a última postagem e usar o formulário de contato e o. Isso será alcançar o próximo vídeo, estado. 4. Componente e página inicial (a): Então, voltamos, pessoal. Então, na próxima parte, trabalharemos com nossa própria página e alguns outros componentes que precisam ser criados ou funcionar corretamente. Eu criei meus próprios cinco arquivos e exportei uma mensagem inserindo seu componente, em páginas, para que eu possa chamá-lo Assim, posso usar o que chamei de home a partir de páginas e posso percorrê-lo. Então, se verificarmos o , você verá que já está lá. Então, só precisamos adicionar um pequeno código a ele e fazê-lo funcionar. Então, vamos conferir os trabalhos anteriores. Você vê aqui na página daquela que queremos seguir. Tem um controle deslizante. Esse controle deslizante é o componente por si só, o autônomo. Tem esse código, tem um blog diferente. Tem uma seção de blog diferente. Temos a política, os negócios, a tecnologia, o esporte, o entretenimento, e cada um deles tem suas próprias cartas diferentes. Temos o botão e o botão de ler mais. Portanto, essa placa também é um componente que podemos chamar de diferentes. Não precisamos escrever, copiar e colar em tudo. Você só precisa criá-lo como um componente e repeti-lo para outras pessoas. Então, precisamos dessa página de contato. Essa página de contato também é um componente. Vou explicar por que é um componente. É um componente porque eu o estou chamando dentro da página inicial dele, e também tenho uma seção chamada contato, que é a mesma coisa. Então, eu não quero ter talvez depois de escrever o código para contato. Agora vou voltar a esta coleção e escrever outro código para contato Então, vou criar esse formulário como um componente, e o chamaremos de dentro de dois deles. Eu acho que isso deve funcionar bem. Então, isso deve ser para nossa página de contato, nossa própria página na qual vamos trabalhar. Então, para começar, deixe-me começar criando nosso componente deslizante Vou te dar o nome chamado meu controle deslizante. É meu trabalho nisso. Então, para isso, preciso instalar o componente deslizante que vamos usar no react Há um controle deslizante específico que usaremos no react para não escrevermos nosso próprio slide porque esse é apenas um homem que não gosta de uma empresa ou de um blog forte Quero saber o básico sobre como blogar, por isso é importante que eu também coloque o link porque teremos esses ícones lá Então, eu quero clicar nele, ele direciona para uma determinada página de mídia social do bloco. OK. Além disso, precisamos importar um CSS específico que siga o controle deslizante e os diferentes ícones Esse é o nosso ícone do Facebook, ícone de estagrama, ícone, ícone de entrada e ícone do Twitter Portanto, é o antigo ícone do Twitter. Há um novo X. Então você só vai usar o antigo apenas para isso Esses são os CCs necessários. Assim, precisava ser usado com esse componente deslizante. Então, a seguir, precisamos ter um objeto ou uma matriz, uma matriz que contenha o objeto de cada botão que teremos, você sabe, como uma matriz é um botão de ária ou tem dois componentes principais dentro do objeto. Portanto, a área tem objetos diferentes. Então, cada objeto do nome e do RH. O HF significa o link para cada um deles. Então, se eu clicar neste Facebook agora, ele deve me levar a uma página específica do Facebook. Então, depois de clicar nele. Então, deveria ter um nome. Então, o nome conterá o ícone que eu precisava e o link estará abaixo do H. Então, vou chamá-lo de cost Okay. Então, eu estou usando o ícone. Não estou usando um ícone de erro agora, estou usando o ícone que tem um ícone diferente que você pode usar. O Icon também é uma biblioteca muito boa que você pode conferir. E você pode pesquisar diferentes ícones que você precisa. E depois de pesquisar no Facebook, basta clicar nele e copiar o código. Então, depois de copiá-lo coloque-o dentro desse espaço. A outra forma de denunciar isso é vir aqui e dizer que é a Fase F. Então, quero chamá-la inicialmente antes de chamá-la pela principal Então, eu não vou colocar nenhum link. Mas apenas para fins de prática. Deixe-me colocar, deixe-me ver se o padrão é colocar talvez o google dot Então, eu quero sempre que eu clicar nisso. Vou apenas copiar e colar. Vou copiar e colar como para os outros e vou mudar a gramática Então, vou para o Twitter, YouTube, Insta e Então, em vez de colocar WW em u google.com, coloquei web dot Facebook, twitter.com, Instagram.com e link in.com não estão relacionados a uma conta específica, apenas para a conta padrão apenas para A próxima coisa que resta são os dados que nosso controle deslizante processará Você vê agora esta foto, a primeira foto aqui mostra as últimas notícias e depois tem os detalhes. Isso é exatamente como o padrão e isso até agora. Eu não tenho um beatle para colocar lá. Então, acabei de colocar algo nesse IP para mostrar que algo está lá , algo estará lá O mesmo acontece quando uma estrela se move de um ângulo para o outro em cada uma delas. Então, queremos colocar esses detalhes dentro de um objeto, ou seja, uma matriz de objetos. Então, o nome será, vamos chamá-lo de dados deslizantes Eu acho que está tudo bem. Portanto, ele conterá o URL da imagem específica e também a descrição. Na descrição, você está simplesmente mostrando que, ok, essa imagem da qual ele está falando talvez seja notícia de última hora ou sobre as últimas notícias esportivas, talvez Chelsea entre Mao e Chelsea, qualquer coisa de qualquer clube de futebol favorito do futebol ou entre tecnologia, talvez essa seja a tecnologia mais recente que está Então é isso que este simplesmente significa. Vai ser como um ponteiro para So colocar algo lá Vou encontrar um link aleatório na Internet. Assim, você pode simplesmente verificar aquele que se encaixa perfeitamente no que você deseja fazer. Talvez notícias de última hora, defina uma imagem sobre esportes, uma boa imagem sobre notícias , uma imagem sobre tecnologia , uma imagem sobre entretenimento e assim por diante. Então, vou copiar uma parte que eu já tenho. Então, depois disso, eu vejo as fotos e os detalhes dentro delas. Então, a seguir, use esse componente deslizante agora. Então, vou excluir esses colchetes de componentes e chamar o componente deslizante de maior Então, os componentes do controle deslizante dentro do componente deslizante, eu vou ter os dados do controle deslizante Vou dar uma olhada no mapa de dados deslizante do controle deslizante Então, vou dar uma dica de que o desenvolvedor conterá a chave. Eu vou ter uma imagem. Portanto, para que a imagem seja uma imagem de ponto D. Para começar com isso Então, a estrela, precisamos de um nome de classe. Isso é agora. Precisamos estar saturados. Isso significa que estamos mudando um pouco a qualidade para realçar um pouco de beleza, não apenas trazendo algo normal diretamente da Internet. Queria estar um pouco saturado em 150, para que pudéssemos verificar o CSS normal. Isso é o ponto de partida C. Então, o objeto deve cobrir. Então, temos outro div dentro Temos nossa etiqueta H one. Portanto, o H conterá a descrição do up que é a descrição do ponto de dados do nosso controle deslizante Então, depois disso, será nossa outra que conterá o ícone de cada um dos aplicativos para cada uma das coisas de mídia social que queremos acessar. Então, temos que marcar o ícone e também os ícones que ele faz dentro. Portanto, o ícone estará em formato de link. Portanto, se tivermos um alvo chave em branco, ao clicarmos nele, ele será aberto em uma página totalmente diferente. Não que isso vá se abrir dentro dessa mesma distância. E é aí que queremos fazer o ícone. Portanto, também tem o nome daquele ícone pontilhado. É aí que o logotipo vai aparecer. Então, o logotipo vai aparecer dentro desse lugar. Então, precisamos estilizar alguns dos nossos trabalhos. Vamos estilizar esse H. Ah. Então, provavelmente o problema é que abrimos outra definição com outra div Você deveria abrir isso dentro desse disco específico que abrimos. Então é isso que realmente está causando o problema. Então, a próxima coisa que precisamos começar é esse estilo específico. O estilo do link. Então, precisamos começar essa edição em particular Então, para verificarmos essa participação, temos que chamá-la de dentro de nossa própria página, porque se formos até esta página agora, obviamente, nada vai aparecer Então, temos que chamá-lo dentro nossa própria página para você mostrar. Então, antes de ligarmos, precisamos trabalhar nisso na página, então, você sabe, esse texto está escondido sob o nervo. Então, precisamos trabalhar nisso e torná-lo um pouco grande. E a tela deve ser grande e deve cobrir a tela. Então, depois disso, vamos ver se podemos chamar o nervo diretamente pelo controle deslizante deste lugar Então você vê como o chamamos, ele aparece diretamente, mas há um problema, você vê nosso terminal mostrando que há um problema Portanto, o problema provavelmente estará dentro deste local, sem portas de saída. Então eu acho que isso deve resolver isso e vamos ver. OK. OK. Então, precisamos instalar isso, certo? Lembre-se de que P está usando o link do MPN para baixá-lo. Ícone direito. O outro que estamos usando na outra vez foi o ícone de erro. Acabei de apresentar este também para que você possa ver como usar vários ícones. Você pode usá-la. Eu posso decidir usar um. Quando você estiver trabalhando nos projetos principais, basta decidir usar um para a história, considerando que você pode usar vários ícones Tem, tem fontes que eu. Há muitas delas que eu posso usar. Portanto, depende apenas de qual deles você deseja usar exatamente. Portanto, isso definitivamente deve resolver todo o erro. Brilho. O problema é que agora isso está dentro do bloco co e pode ser irritante em algum Agora temos nosso ícone lá. Vamos notar uma coisa. Isso não está mostrando o ícone e mostrando o nome que colocamos lá. Nossas fotos não estão aparecendo. Você não consegue ver a imagem. Não está carregando. Vamos ver o que está cruzando isso. Primeiro de tudo, isso deveria ser igualmente saudável , definitivamente funciona O que está atrasando a exibição de nossas fotos , chamamos isso de URL EMG Vamos ver se isso deve funcionar agora. 5. Componente e página inicial (b): Mas não é algo, podemos ver que não estamos vendo o próximo botão. Esses são os botões ali. Então, o que podemos fazer é importar as configurações específicas que podemos usar aqui. Ter que introduzir algumas configurações. Então, chamamos isso de configurações ou você pode chamá-lo de configuração deslizante ou qualquer coisa Então, será uma variedade de configurações. Portanto, as dezenas precisam ser apresentadas para passar. O próximo passo é isso e o cartão. Definitivamente, isso está dentro da nossa página inicial. Vamos escrever um pouco de código em nossa própria página e depois seguir em frente. Dentro da seção, seção, temos uma. Vamos dar uma olhada. Então, qual é a próxima coisa que precisamos fazer. Então, precisamos criar essa seção diferente do bloco. Então, depois da seção, precisamos criar outro di. Separe um. A primeira é a política política como primeira. Então, precisamos criar um código separado para colocar todos esses discos, como todos esses cartões dentro, para que, mesmo que sejam mais do que isso, ele saiba Essa div ainda faz parte do V one. Isso é política, mas separado dos outros. Dentro desse lugar, é onde teremos esse bloco que criaremos um componente posteriormente. Deixe-me ficar assim agora. OK. Então, depois disso, temos um bot botin que lê mais bot. Então, just read bot estará dentro de um link que. Então, para usarmos isso, eu acho, temos que importá-lo. Então, deixe-me dizer que definitivamente será no blog que vamos trabalhar com nosso n. Para política, esse é o link para política. Criamos que isso é definitivamente o que será mais tarde. Então, se notarmos, temos uma flecha. A seta precisa ser importada do ícone ou ícone de seta. Assim, você pode escolher quem quiser. Precisamos estilizar isso também além de estilizar nosso botão e fornecer alguns Portanto, o ícone que vamos usar , usaremos. Para você possa iniciar o ícone, diga também margem esquerda. Não queremos que você fique com o nome, em parte alguma. Então, topos emergentes que se unem. Veja 0.5. Então, vamos dar uma olhada. Você pode ver? Nós já o temos. Mas, devido a isso, não há nenhuma carta no meio, é aí que tudo está trancado. Então, temos uma carta específica, a carta que deveríamos ter e que não vai ficar junta. Vai ficar em um lugar separado. Então, eu preciso repetir isso também para. Isso é para negócios, tecnologia, esporte e entretenimento, o que vou fazer agora. Então, repito a mesma coisa para os outros. Essas ideias significam simplesmente identificá-lo como um livro de identificação separado. Qualquer livro de identificação que danifique é uma seção separada por si só. Para que tenhamos seções diferentes agora. Precisamos criar o cartão que seria usado. É esse cartão. Precisamos criar esse cartão. A primeira coisa que precisamos fazer é criar um componente para o cartão que importamos para esse local. Portanto, o componente do cartão usará props props no react. Provavelmente está apenas passando alguns valores dentro de um componente em uma página separada Então é isso que vamos usar. Preciso criar outro arquivo chamado blog card. Então, como juiz. Portanto, precisamos declarar que o componente será um determinado adereço Então, quais são os adereços de que precisamos que sejam aceitos? Precisamos do título. Estamos ansiosos para saber se verificaremos aqui. Nós temos a imagem, isso é a adição do título dois, a descrição. A adição e os tipos são diferentes. O título pode ser o título é tecnologia. Portanto, o acréscimo serve para orientar o cliente durante uma empresa certeza de que a descrição é os dados e a hora. Então, isso é principalmente o que precisamos segunda descrição em nossa imagem, UR Auto. OK. Clique. Quando eles clicam nele, precisamos realizar uma ação específica. Então, em clique também e hora. Esses são os sete principais adereços que usaremos. Portanto, você pode ignorar a mensagem de erro sem a validação do adereço Portanto, não precisamos realmente datar , esse é um problema totalmente diferente. Então, precisamos criar nosso interior de tinta. Precisamos criar uma tag de imagem. Então, o C será essa imagem UR. Depois disso, precisamos de outro de. Precisamos de outro de falar sobre o Tyson Okay. Depois disso, precisamos de outro há um parágrafo falando sobre a descrição. Depois de mergulhar na div, você precisa de um parágrafo dois parágrafos Um falando sobre o automóvel. E o segundo falando sobre o tempo. OK. E foi notado esse formato de hora. Você precisa trabalhar nisso para que , ao obter a hora, não se engane, pois não mostre dados inválidos porque você precisa formatar a hora Você precisa formatá-lo da forma como deveria ser exibido. Mas, principalmente, estamos usando dados padrão. Na verdade, não estamos obtendo um horário do banco de dados agora. Então, vamos deixar assim por enquanto. Então, dentro deste parágrafo, precisamos da extensão. Portanto, é dentro desse período que temos tempo. Então, precisamos estilizá-lo, obviamente. Porque se verificarmos não podemos vê-lo agora porque o apagamos. Então, planeje, precisamos que ele seja flexível para ser preciso. O que? Então, neste lado, você pode simplesmente importá-lo junto com isso. Então, dentro de um dos nossos t, você pode simplesmente sair. A primeira é que, se a moeda pode diminuir, é a carta que está mostrando a carta, mas não está sendo exibida adequadamente porque precisamos passar alguns valores para ela Você precisa colocar alguns adereços nele. E para passarmos alguns adereços para danificá-lo, precisamos ter alguns dados para testar com isso É por isso que eu já tenho esses dados do GSX. Então, esses são os dados que estamos usando apenas para testá-los. Um exemplo de blog diferente. É a mesma repetição, mas eu gosto de usá-la para testar a devolução pendente que vamos vincular às contas de incêndio e testar de forma adequada Então eu preciso importar esses dados para o meu reator aqui em cima. Então, eu importo tudo do lado melhor. Então eu tenho que mapeá-lo dentro deste lugar. Então, vou ligar para a primeira vez que há a polwsp de notícias políticas dentro dela, vou passar Então, vou passar por ele, vou mapeá-lo e chamá-lo de post the index. Então, dentro desse lugar, chave será o índice. Então eu vou passar os dados. Essas são todas as informações necessárias para passar por este posto de chamada. Sim. Então, o clique abaixo do clique por enquanto ficará vazio. Deixe-me dizer que não execute nenhuma ação. Digamos que isso talvez realmente funcione em nosso P. Wow. Você pode ver que eu estava funcionando perfeitamente. Então, testamos com nossos dados forçados. Precisamos testar a tecnologia comercial. Então, é basicamente a mesma coisa que você vai fazer ao copiar isso. É isso mesmo. Vá para a política. Vá para a base de negócios e transforme a política em negócios. OK. Você pode ver. Agora temos um bom bloco para curtir uma boa página de blog. Então, agora, notamos que se você verificar alguns sites de bloqueio, você não exibe todos os blocos em toneladas. Você não exibe todas as notícias em toneladas. Então, depois de exibir alguns deles, colocamos esse botão para que, ao limpá-lo, coloque-o em uma rota para a página correta que precisávamos estar. Então, para fazermos isso, temos que dividir os dados. Há uma função nos javascripts que tem permissão para dividir os Então, onde você corta, você pode deslizar de zero a 30 a quatro, de zero a cinco como dados de fala cinco Isso é principalmente o que é. Então, vamos ver. Então, basicamente, vamos escolher os primeiros três ou quatro primeiros dados Então, para este, basta dizer fatia. 04. Coloquei Sta em vez de st. Vamos verificar agora, em vez de todos os seis dados que mostram apenas quatro, podemos reduzi-los para Sim. Então, vamos apenas contar uma história. Então você pode copiar isso e colar também. Então, repita todos eles. Então, o próximo passo é a página do contador, que abordaremos junto com algumas funções principais no próximo vídeo. 6. Página de contato, detalhes do blog: Bem-vindos, pessoal. Nesta seção do curso, criaremos esse formulário de contato que será um componente que chamaremos nesta parte desta página inicial e também na página de contato. Depois disso, lidaremos com os detalhes da visualização. É quando clicamos neste lugar, queremos que ele veja os detalhes do blog e poderemos pressionar Voltar para voltar. Então, nele, teremos o tópico, os dados publicados e algumas informações sobre ele e o automóvel em que essa pessoa os publicou. Então, depois disso, trabalharemos com amigos, páginas muito diferentes de cada seção. Então, teremos a página spot, a página de política, a página de negócios e a página de tecnologia e entretenimento. Então, primeiro de tudo, vamos trabalhar com nosso quatro contatos para começar Você precisa criar um arquivo GSX de contato dentro da pasta de componentes Então, depois de digitar o RF CU. Sting, você tem isso no seu sistema. Então, temos que criar tudo em nosso Dpcpris. O que precisamos agora é desse cabeçalho e de uma caixa de texto diferente com o bot e outras informações consignando o interior da caixa de texto, temos dentro dessa profundidade, temos outra profunda Então é profundo que compusemos essa caixa laranja. Então, dentro do nosso H, H um que diz engajar. Depois disso, temos o formulário Então, dentro do formulário, temos um di di, outro di. Então, temos uma etiqueta que será o primeiro nome. Primeiro nome. Depois do rótulo, temos o impute que será a área do texto Dentro da entrada, temos a e colocada nela. Então, esses imputes estarão dentro do também. Então, depois disso, eu só preciso estilizar tudo porque o primeiro será copiar e colar em outros aspectos. Vou apenas copiar e colar nele, copiar e colar nos outros porque temos estrutura e design semelhantes. OK. Então, depois de criar isso, o principal é copiar isso , colar e duplicar Basicamente, a mesma coisa que estará lá. Então, por último, basta recriar isso e vamos colocar esses dois para que você possa fazer isso Então temos esse e-mail um e a mensagem um. Então, mudamos para o sobrenome. Então você pode dizer isso. Depois disso, precisamos da nossa seção de mapa, aquela caixa de mapa. Mas por e-mail, podemos copiar e colar este e simplesmente mudar algo em nosso design. Então, podemos copiar isso e colar, então não vai ficar nesse eu, vai ficar lá fora. Preciso de um separado. Sim, senhor , deveria ser que eles deveriam ser. Sim. Então, mudamos isso para e-mail. Sim. Então, precisamos editar esse lugar e colocar um pouco de estilo nele. Eu preciso estudar isso apenas para acompanhar o que está acontecendo aqui. Podemos importar isso para nossa página de instruções e, em seguida, talvez fazer o acompanhamento e ver o que estamos fazendo. Portanto, antes do último tipo, podemos ver o contato. OK. Vamos supor que seu navegador armazene postagens. Sim, navegador. Vamos dar uma olhada em talvez. Sim. Você pode ver. Então, já temos os engates, a caixa de texto, a tag e o m. Então, o próximo é apenas a caixa de mensagem Esse é o chá. Então, vamos detalhar alguns detalhes sobre ele. Portanto, o texto da mensagem é semelhante a Este e-mail faz isso em vez de inserir alterações na área de texto. Então, isso vai ser meio grande. Então, quando o ID e as outras coisas são semelhantes. Só temos a regra para que eu lhe mostre. Portanto, temos a regra para que esse lugar seja maior do que outros para a mensagem. Então isso é. A próxima é que precisamos do botão, precisamos do botão de envio e desses dois detalhes. Então, para a parte inferior, precisamos do DV, após o dobramento, precisamos do TVA, do lado da rede, precisamos de um botão e desse envio Precisamos estilizá-lo com substâncias. Vamos verificar isso. E então temos um botão aqui. Você não precisa apenas das duas cartas restantes embaixo. Será depois do outono que mergulharemos novamente embaixo dela. Faça outro d. Agora são duas quedas diferentes. Dentro desse mergulho, temos dois mergulhos diferentes. Então, vamos fazer o primeiro primeiro primeiro. Dentro do primeiro mergulho, precisamos de um SVG, SVG. Vou apenas copiar uma parte SG dentro dela. E depois do SVG, precisamos de outro de. Vou te dar alguns detalhes A H six diz. E temos a etiqueta P que é um número mais. Eu só vou colocar isso porque eu não quero colocar um certo número lá. Deixe-me copiar e colar as profundezas desse lugar. Então isso é SVG. Então, precisamos estilizar esse lugar. Então, para o segundo mergulho também, então mergulhe que carrega o SVG Este G é principalmente um telefone, deixe-me mostrar que já o temos. A parte SG SVG que importamos é esse ícone de telefone. Você pode usar vários ícones. Acho que é isso que eu já usei antes, mas. Vamos continuar, em vez de G poder simplesmente importar um ícone de telefone do ícone talvez ou qualquer pessoa para isso. Então o próximo passo é copiar isso e replicá-lo novamente, até agora Então, vai ter uma função SVG diferente para e-mail. Então, novamente, em vez de usar esse SVG, podemos usar um ícone de uso diferente em vez de SVG O clipe SVG, então eu nem sei que o uso. Mas eu acho que um ícone é mais aconselhável do que G. Então, quando você estiver assistindo isso, não se preocupe em copiar e vá diretamente para o ícone I e coloque-o dentro deste lugar Então, para este, eu posso usar apenas o contato. Acho que isso deve fazer tudo o que precisamos fazer aqui. Então, vamos verificar isso. Sim. Normalmente, precisamos fazer isso. Em vez de visitar, basta colocar um número aleatório. De alguma forma, está olhando para mim. Número eletricamente aleatório. Acho que terminamos com a página de contato. Então, só precisamos colocar isso também em nossa página de contato. Terminamos o formulário de contato, precisamos colocá-lo em nossa página de contato, então. A mesma coisa. Como o chamamos dentro de nossas próprias páginas vamos chamá-lo dentro da página de contato. Então, chegamos às nossas páginas e clicamos em criar novo arquivo e chamamos de página de contato seis. Como de costume, você tem que exportá-lo no índice para G dentro deste, por favor. Então, dentro deste local, basta chamar os contatos do componente. Depois disso, chegamos ao nosso x e o exportamos para cá para que o link sempre que clicarmos no link de contatos , o contato abrirá esta página. Isso é. Essa única saída. Então, isso deve ser, vamos ver, talvez funcione. Então, essas são páginas. Vamos clicar em contato. Já temos página de contato. Portanto, não precisamos criar o formulário novamente em nossa página de contato, basta chamar o componente. Então, a próxima vez é apenas a função de clique do z. Então, lembre-se de que em nosso cartão, já temos uma função chamada abrir ao clicar. Então, só precisamos voltar para nossa casa em qualquer lugar que tenhamos isso ao clicar que passamos não, temos que passar uma função para lá. Então, a função que só precisamos passar para lá é navegar. Temos que usar a navegação solta dentro um componente de reação ou de uma função de reação, chamada de navegação livre. Então, vamos fazer isso em um segundo. OK. Então, deixe-me explicar forma vívida novamente, o que precisamos fazer Então, o que pretendemos que você faça é que quando quisermos usar o estado como uma função, custe. É por isso que clicamos aqui. Então, usando use location, que é um componente de reação, use location e use navigate. Então, foi simplesmente que um gancho retorna os objetos de localização atuais Isso pode ser usado. Isso pode ser útil se você quiser realizar outro efeito de slide sempre que a página atual mudar de local. Isso significa que podemos passar os dados uma página atual para outra página. Eu uso esse local de uso. Posso, a partir desta página, ao clicar em outro link dentro dela, passar alguns dados desse local para outra página. Então, minhas anotações parecem claras agora, mas quando começarmos a escrever, as cápsulas fiquem mais claras Antes de tudo, precisamos da nossa página chamada de detalhes do blog. Isso será um detalhe do blog. Isso seria uma página. Estamos criando isso para que não criemos uma nova página para cada detalhe que queremos ver. Só precisamos criar um único e, em seguida, podemos roteá-lo para que outros usem. Então, dentro desses detalhes de vista, os jardins estão jantando ao meu lado atualmente, neste momento, então precisamos importar algumas coisas. Então, como eu disse anteriormente, vamos usar usar navegação, usar localização e estado. Então, é só passar dados de uma página para outra. Então, primeiro de tudo, precisamos que dentro desse lugar custe o mesmo para usar as entradas funcionais em s sobre o eu ali Então foi o que navegamos e também precisamos custar aquela localização usada. Então, essas são as duas redes elétricas que usaremos. Então, eles usam a opção de navegação até quando eu clico no botão Voltar para navegar até a página anterior e usar a localização é como os dados que eu passei de outra página para que eu possa distrair a possibilidade de usá-los neste local Então, dentro desta página, eu decido, quero que isso apareça. Assim, sempre que eu clicar nos dados vou passar o valor interno, o que me simplifica. Então, dentro dos detalhes do bloco, vou projetar as zonas. Vou dizer a imagem pelo título e a outra t. Então, primeiro, preciso criar essa dica, sempre estará lá. Então, por dentro, preciso de outra imagem um puxão de imagem e, em seguida, outro mergulho em H, uma que incluirei Este eu só tenho que passar por aquele ponto de estado. Você pode ver. Então, precisamos verificar esses dados e ver a variável que usamos para que possamos nos convencer. Então, usamos imagem. Então, quando voltamos e dizemos imagem como arte, você pode colocar qualquer coisa, aquela imagem ou qualquer coisa. Esse será o empate estadual que possamos levar isso aos sites e acompanhar o que estamos fazendo. Então, a segunda vez que precisamos é uma tag p, uma tag de parágrafo que mencionamos a data em que foi publicada, ou seja publicada em, então temos nossa tag digamos mais suave, que precisamos outra tag como descrição do estado Esse é um pequeno parágrafo sobre o blog. Precisamos da tag P novamente para mostrar os detalhes. Esses são os detalhes sobre o Você lembra, Sr. Deveria estar na faixa de polietileno, a diversão é como uma variável Então você não pode simplesmente p assim, 2000 para estar dentro da propriedade do colchete de poliéster , a seguir serão Eu vou te mostrar todos os detalhes sobre isso. Depois disso, após esse pgm, depois disso, precisamos de um intervalo, precisamos de um botão como esse botão para dizer voltar para que possamos navegar até a página anterior Veja se eu clico em um blog, clico em voltar, voltando para a página, voltando para a página p de onde estou vindo. Então é isso que queremos alcançar. Então, podemos fechar este agora e dizer intervalo, vamos colocá-lo dentro de um intervalo. Então, dentro de um período, temos que voltar. Então, precisamos de uma bunda pacular. Essa é a bunda desse gráfico de disco. Então, podemos simplesmente obter isso a partir de nossa ação. Então, vamos ver à esquerda. Está apontando para a esquerda, certo? Então, vamos procurar aquele que é ver isso usar isso. Então, basta copiar isso e levar os nomes. Precisamos colocar aqui uma função que, ao clicar, clique. Então, quando eu clico no WhatsHpf agora, você coloca uma função que não deveria ser Depois disso, precisamos de outra licença mostrar o nome do automóvel. Esse é o carro disso, para nós, precisamos dessa linha. Então precisamos do nome do automóvel. Então, para a linha, podemos simplesmente dizer RH, em vez dessa, deixe-me colocar uma profundidade, depois aquela profundidade, agora vou dizer der up, que é borda acima, então vou colocar um teste específico dentro do estilo. Então, dentro disso, preciso de outro. Então, isso só precisa fazer é navegar menos um. Então, como função, precisamos fazer essa navegação menos um Então, para usar isso agora, temos que ir para onde quer que estejamos puxando essas cartas Então, além disso, precisamos navegar. Você tem que encerrar a navegação. Então, precisamos de uma função, uma função chamada navigate igual a post. Portanto, precisamos lembrar novamente um argumento a ser passado dentro dele. Portanto, não é o argumento que descrevemos. Então dizemos navegar. Então, esse repositório é para manipular o URL Se verificarmos isso, se eu voltar para uma página agora e, tecnicamente, clicar aqui, os detalhes do blog, então, existem alguns valores retirados de como navegar pelo cliente, então, como navegar pelo cliente para que retirados de como navegar pelo cliente, então, você possa ver. Então não precisa colocar isso lá dentro. Então, dizemos slash blog. Então, esses detalhes do blog que estou escrevendo devem se correlacionar com tudo o que eu venho aqui deve se correlacionar com o que estou colocando neste lugar Então, quando eu publico este agora, os detalhes do blog, e eu o chamo a atenção. Isso que eu estou dizendo, ele simplesmente quer dizer eu quero navegar pelos detalhes do bloco. Esse ID, esse ID de coluna que eu coloquei significa que não é uma página estática, uma página dinâmica que qualquer valor que esse ID represente pode ser destruído e, em seguida, podemos usar o valor Então é isso que estamos usando aqui. Portanto, o valor que é passado pelo ID é o que podemos destruir por meio do estado e usar dentro desse local Então eu continuo e então os detalhes cortam isso. Sabe, se você está usando isso, você deve usar essa curva no cabeçalho da postagem. E depois disso, agora você chama o estado dos EUA pela mesma coluna de vendas, diz vírgula, abro o colchete friamente e digo Então, essa é a principal coisa que precisamos agora. Data do estado, cculum post. Isso significa que o valor que foi passado você passa para os estados. Sempre que chamamos state, podemos verificar facilmente todos os valores que estão dentro desta postagem. Acho que está claro. Agora, você só precisa chamar essa função em todos os aspectos em que usamos null Então, mostre que estamos dizendo não, temos que mudar isso. Então eu seleciono tudo de uma vez e digo, supp é a função, temos que passá-la assim Então, quando eu seleciono isso e verifico se são todos os cinco outros, correto Eu uso control shift L. Então, controle shift quando selecionamos qualquer coisa que seja nula dentro desse código, e então eu posso editar tudo ao mesmo tempo Então, se eu cancelar isso, posso editar tudo ao mesmo tempo. Essa função realmente precisa de um argumento post. Lembre-se do que estamos deixando de lado como postagem, então você pode ser apenas uma postagem. Para cada um deles, cada um deles tem sua própria postagem específica. Vamos verificar agora e ver se talvez esteja funcionando. Sim, a flecha é daqui. Não há nada como navegar. Então, primeiro temos que fazer isso mesma forma que a navegação, a aviação. Vamos ver. Digamos que isso não significa que você tem que dizer que é o problema. Desculpe, eu uso a navegação. Exatamente. Esse é o problema. Não há nada como usar a navegação usar a navegação. Então, vamos ver se eu clicar aqui, tenho esse botão de exibição, você percebe que a URL também muda. E se eu clicar em voltar para voltar à página anterior. Então, só precisamos estilizá-lo com um pouco de CSS, como nosso vento. Então, vamos verificar isso agora. Deveríamos ter mais moda que criamos. Está querendo se expandir assim. Então, vamos ver outras coisas que podemos adicionar ao. Sim, acho que o erro é exatamente que temos uma ou mais sofisticadas porque mostramos nossa descrição Vamos ver. Isso foi bom. 7. Seção de blog e página de criação de blog: Ei, bem-vindos de volta, pessoal. Então, na próxima parte da história, vamos lidar apenas com a página de seção de blocos diferente e vamos criar nossa página de criação de blocos. Este não faz parte do botão que explicamos. Não pode colocar nenhum botão do lado de fora, porque ao criar um explicamos. Não pode colocar nenhum botão do lado de fora blog, apenas o administrador tem a possibilidade de criar um blog ou alguém que está dando acesso para criar um blog não é qualquer pessoa que simplesmente vai lá e cola qualquer coisa online É por isso que esse link está no cabeçalho. Somente para as pessoas que precisam ver isso. A próxima parte que vamos fazer agora é criar uma seção diferente do blog e criar uma página de blog. O que vamos fazer aqui principalmente é esse outro que fizemos e temos um código geral para ele. Que agora estamos percorrendo páginas diferentes ou dados diferentes Vamos passar dados diferentes para que ele seja exibido. Portanto, este é um código simples que funciona tanto para esportes, política, negócios, que estamos mudando com base em que estamos mudando a imagem do nome e os dados que podem ser passados para ele com base na categoria à qual eles pertencem. Então, sem mais nada, Dugg iniciou e executou uma linha de código simples e terminamos com isso Então, eu criei minha página de seção de bloqueio, é a página de seção de bloqueio, e também minha página de criação de bloco Eu a coloquei aqui e criei um link para ela aqui. Então, depois de criar a página da seção também, ainda precisamos vinculá-la ao nosso botão de ler mais. Então, se verificarmos agora, se eu clicar neste botão de política, leia mais. Então, tem que ir para a página de política. Então, vamos fazer esse também. Então, depois de criar a página e vinculá-la, vamos começar a escrever nosso código Portanto, a manutenção de que precisamos é uma tinta normal que inclua tudo, uma amostra que inclua a imagem, o texto nela e esse Não, já temos um cartão de bloqueio , vamos ligar para ele. Então, agora, em nossas seções de página , o generativo de que precisamos. Então, precisamos de outro Esse div é aquele em que carregamos a imagem Este é um dos que carregamos o texto. Essa é a marca black shade black ou a pequena marca preta desbotada que carrega o texto, esse texto etc Deixe-me ir. Ainda estamos voltando ao assunto, por que tenho que comentar assim. Então, nesta categoria, agora, criamos uma função ou uma variável que é o ponto de clique. É uma notícia de teste, clique em negócios é uma notícia de negócios de teste. Então, por enquanto, eu não tenho funções de gradação, então é por isso que eu apenas as coloco em uma string Não preciso de uma string Então, em vez disso, precisamos de um seis. Esta é uma. Você pode confiar nas notícias que faltam, manter-se informado e inspirado. Você acessa a fonte últimas notícias em sites, então é isso mesmo. Depois disso, agora precisamos da profundidade que incluirá os detalhes do blog É um cartão de blog. Então, por dentro, você precisa de outro também. Então, precisamos chamar a função blodard para ter uma chave igual ao índice Vou passar a postagem para ele e clicar em ser igual. Então essa será a função que fizemos da última vez. Então, por que eles clicam em um cartão de bloqueio específico, se você abrir os detalhes que passamos para ele. Então, vamos lançar esses porque não criamos a função necessária. Então, isso é tudo sobre isso. Então, o próximo passo é apenas estilizá-lo e deixá-lo bonito. OK. Então, para este, vou colocar isso nesse tipo de string. Dan, eu quero passar essa variável para dentro. Então, essa profundidade será a que carregará a imagem. Então, eu ainda vou trabalhar na função de imagem abaixo. Então, ele vai carregar a imagem para que eu possa passar a imagem para dentro deste lugar. Então vai ser Então, isso é um pouco transparente. Então, se você tomar nota disso, por favor, eu passo na categoria. Como aquele em que eu explico a hora sobre os detalhes do bloco. Eu passo esse ID para ele. Então, do jeito que eu estou chamando. O ID é a categoria. Aquele em que eu clicar será aquele em que os detalhes que serão mostrados lipo serão os que mostramos Então, volte para o seu. Acho que não colocamos essa barra. Eu coloquei isso por último porque não é que eu não quero a perna seja algo que eu imagino visualmente. Você pode não colocar essa barra lá, mas se eu posso colocar uma barra neste lugar, só precisamos colocar uma barra Por que clicamos aqui. A categoria pela qual estamos passando será aquela que exibiremos. Então, eu falo que mencionei algo sobre a imagem da época. Então, sim, eu quero a técnica deste lugar, se vemos que política está mostrando a imagem política, clique em esportes está mostrando uma imagem esportiva, clique em negócios está mostrando uma imagem relacionada a negócios. Então, o mesmo para replicar, o mesmo tempo para replicar. Eu não quero apenas a mesma imagem para tudo. Então isso significa que eu vou criar, uma função aqui chamada GG BG significa imagem de fundo, certo? Então, ele receberá um argumento co-categoria, então haverá uma função switch, deve estar familiarizado com switch em Java Script, switch se o caso for política, se a categoria for política, se a categoria for política, bclion politics Então, uma imagem específica. É retornar uma imagem específica. Vou apenas copiar. Então é negócio, clique em negócio, há um retorno de uma determinada imagem, cliconspot já tem Se você voltar para nossa página inicial, é o mesmo link que ainda vamos usar para o nosso controle deslizante, desculpe Ainda é a mesma imagem que usamos ou essa imagem que usamos e que ainda vamos usar. Basta copiar aquele para política para políticas, aquele para negócios para negócios. Depois disso, você retorna um padrão. 84 danos. Se não fizer parte de todas as coisas, devemos retornar a uma distância vazia. Então, não vamos chamar essa imagem agora. Então, vamos chamar essa imagem nesse lugar que chamamos put e, em seguida, vamos passar os dados da categoria. Portanto, não podemos passar de categoria agora porque não temos nenhuma função criativa. Então, vamos criar as funções necessárias para esse lugar. Então, para continuar, precisamos importar todos os nossos dados. Então é aqui que vamos obter os detalhes de que precisamos. Precisamos importar use per também, precisamos importar use navig. É quando usamos quando clicamos em um cartão de bloqueio específico para ver os detalhes. Então, o que precisamos agora para não apenas repetir essas coisas. Podemos simplesmente copiar este. O próximo passo é que precisamos de outra variável chamada parte. Igual ao uso por dose se você verificar esta categoria de lugar em que estou passando. Portanto, esse uso simplesmente verifica os links e verifica o valor específico que passei como uma categoria e, em seguida, insira esta e obtenha os dados para ela. Então, o próximo passo é apenas uma função de efeito de uso. Então, nesta, temos uma função em tamanho que diz Notícias selecionadas . Então, neste caso, armazenamos o valor da nova CA selecionada dentro de um R. Então, temos um switch. Mude a categoria de valor. Então, como esse outro que temos aqui, deputados. Então, exceto pelos links, vou verificar alterar os links. Então, se é política, eu quero selecionar notícias. Eu sou selecionado por notícias iguais às notícias de política que prejudicam essas notícias de política. Portanto, é uma matriz, para que eu possa obter os valores lá. Então, faça uma pausa. Então, da próxima vez, contenha para negócios. Então, se for padrão, danifica se não houver nada lá, você passa uma matriz vazia. Então, depois disso, vamos lidar com o Spot, então acho que tivemos S. Então precisamos remover isso. Depois disso, após esse caso de troca , precisamos configurar nosso blog. Danos: você precisa criar um bloco estadual . Portanto, o curso estadual deste será definido. Então, defina o blog, o valor do blog definido será apenas o que está dentro do nós selecionado. Afirma que, se você estiver usando vetor, precisará passar um determinado para que ele comece a ser recarregado com base em quando a categoria mudou Então, agora, depois disso, podemos usar nossa categoria Sim. Agora você pode remover a coluna e usá-la com sucesso, então dentro dela, por favor. Então, o que precisamos fazer aqui é marcar dois blogs diferentes que ele está dando. Então, aqui, podemos ver a marca do blog Então, acho que nosso bloqueio deve funcionar. Então, precisamos passar essa função também dentro desse lugar. Então, esse também é o nome do segundo. Acho que isso deve fazer nosso aplicativo funcionar e, quando clicamos em um determinado blog, devemos ter nossa visão. Então, vamos voltar e ver. Deixe-me tentar clicar no ponto. Está mostrando pequenas notícias pontuais e você pode ver o link aqui, clicar em política, mostrando aquele sobre política. Se eu clicar na tecnologia, e se eu clicar em qualquer uma delas, ela vai ver o d. Se eu clicar em voltar, mostrando isso, mas o que aconteceu, nossa imagem não está aparecendo. Então, vamos verificar por que nossa imagem não está sendo exibida. Então, para a imagem que não está aparecendo, basta voltar e alterar o CSS para isso. Então, abra o estilo de estilo, certo? Então, eu vou estrelar igual a isso. Então, poderemos escrever a imagem por solo, por tamanho grande e a distância. Então, se voltarmos à sua página, você poderá ver anúncios, negócios, negócios de déspotas A próxima coisa é Então, a próxima coisa é nossa página de bloqueio, esta página que eu já criei. página de bloqueio do Cs é semelhante à nossa página de contato, ao formulário e tudo mais. Na verdade, são diferentes. Então, vamos seguir a frase da nossa página de contato como esta. Aqueles vão lá e copiam daqui, o retorno também. Padre. Sim. Então, para acompanharmos isso, podemos simplesmente acessar nosso link e seguir o link que usamos no blog. Você pode copiar ver se voltamos ao nosso. Então, se voltarmos ao normal, vemos o blog res, bloco I dois. Temos uma lista de categorias, temos os detalhes da descrição e o link da imagem. Em seguida, temos alguns bots configurando todas as coisas que precisamos corrigir . Então, em vez dos dois, deveria haver uma e outras coisas. Então, vamos começar com isso. Então, o primeiro são os detalhes de um blog. Então voltamos ao nosso negócio , onde somos o nome e o sobrenome, certo? Seu , então, temos o destino do nosso blog. Então, precisamos remover isso que está embaixo do telefone e trocá-lo por. Sim. Então, essa categoria, precisamos trabalhar nela. Então, para isso, para a categoria, precisamos de nossa lista de categorias e, em seguida, a passamos para dentro de nossos arquivos. Então, para a categoria em vez da número um que temos tempo, vamos mudar isso. Então, o que temos agora é uma função de seleção que faz t e temos nosso bloco CSS para ela, semelhante ao que usamos antes. Portanto, isso não muda a nova categórica para. Defina o dano do coral, você deve criar nosso estado para os dois ladrilhos , do início ao fim. Então, temos nossas várias opções lá. O próximo passo é criar nosso estado. Eu só preciso ser instalado. Então venha à nossa opinião Agora você usa o título dois para todas as categorias, blog completo. O blog completo também contém os detalhes, os detalhes, a imagem e também a descrição. Portanto, precisamos trabalhar em nossa própria mudança. Então, quando os valores mudam. Então, nossa mudança é muito simples. Venha aqui, evento de mudança em vez de mudança. Então, reverter um evento que criamos para a variável usa cot para o valor alvo do ponto do evento Portanto, visamos os valores que, quando você escreve um determinado e enbrit, isso não altera o mestre Então, vamos copiar e juntar as peças deste formulário e alterar o necessário para alterar Então, para que você venha aqui, você pode mudar todas essas coisas. A categoria está lá, você pode clicar na categoria do plugue para enviar e também na nossa imagem. Então, o próximo passo é trabalhar nesse botão de solução. É quando o botão de veiculação é clicado, o que faz com que Dame passe o valor para o banco Então, isso nos levará à próxima. Então, provavelmente isso nos levará à última ou segunda até a última parte do chiqueiro que está criando nossa conta de incêndio e configurando nosso banco de dados, vinculando-o a essa base e substituindo esses dados pelos do banco de dados. Então, indique 8. Implementação do Firebase (a): Ei, pessoal, bem-vindos de volta, pessoal. A próxima coisa importante depois disso deve funcionar em nosso envio Vou tentar clicar no envio. Quais são esses dados que levamos para nossa base de bombeiros. Então, neste momento, temos que montar nossa base de fogo. E recuperar dados do nosso fogo é enviar dados para ele e recuperar dados do fogo Então, para fazer isso, você precisa primeiro configurar uma fogueira. Então, basta ir ao advogado e clicar no Firebase. Eu vou ter essa página. Então, depois de assinar alguns, eu já assinei minha conta depois de assinar e outras coisas. Então você tem esta página para um projeto. Então, esses outros são usados como base de antes. Então você tem opções para projetos de arte. Então você quer clicar no projeto de arte. Você coloca o nome do projeto. Então eu digo que o nome do projeto deve ser log, log. Em seguida, clique em continuar. Eu não tenho o Google Analytics , mas há outros dez que eu não ofereço apenas espero que ele termine de se preparar Quando estiver pronto, você tem algo parecido com isso. Seu firebase pro está pronto. Você clica em continuar. Você tem isso. Então foi aqui que o trabalho principal começou. O aplicativo que estamos licitando, prepare-se adicionando o firebase ao seu O aplicativo que estamos construindo não é nem era uma vara, é um aplicativo da web. Você clica na web no nome da web. Vou colocar um blog. Posso dizer bloquear Também configure a hospedagem Fire para seu aplicativo. Eu não quero hospedá-lo no Fire Bee, mas se você quiser hospedá-lo no Fire Be, basta clicar na opção e fazer algumas outras coisas que você precisa fazer lá Então registre o aplicativo, então você tem que copiar esta cópia e ir para o seu terminal. Desde a hospedagem, você está executando o aplicativo com 11 terminais, você pode abrir ou abrir outro Lembre-se de que agora estamos no diretório correto, você precisa ir para o diretório atual colá-lo instalar o Firebase no MPM e clicar em Enter Então, ele instalará o Firebase para você. Depois da instalação, vamos voltar ao nosso P. Então eles disseram: initiationalz, firebase e comece a usar o SDK para o produto que você Então, basta copiar esse disco e acessar o fader de origem. Essa é a sua fonte bader source fader e clique nela e crie para você chamá-la Firebase. Sim, o interior é baseado na cópia do código. Você não precisa copiar o que eu tenho, o PIK, o dooming, o domínio Isso será exclusivo para seu próprio site pessoal. Se você copiar isso, é mais provável que exclua esse domínio ou APIC após este projeto , porque é algo pessoal Não é algo que você coloca do lado de fora ou algo que todo mundo possa ver. Então, a próxima coisa depois disso é criar nosso banco de dados. A outra coisa pela qual você pode usar a base de fogo é muito larga. Você pode usá-lo para verificar, usar autenticação, conexão de outras coisas. Existem comodidades que você pode usar no Firebase. Você pode realmente atualizar a documentação e assistir a mais vídeos sobre ela para realmente ajudá-lo a saber mais sobre o Firebase Então, o que queremos fazer agora é acessar nosso banco de dados de armazenamento de incêndio, banco de dados de incêndio e clicar em. Então você tem isso. Então, quando você tem isso, você pode ir diretamente para criar o banco de dados. Há algumas coisas a serem feitas antes de criar o banco de dados. Então você vai para Como eu começo. Isso é do normal. Leia todas essas coisas. Ao chegar lá, você verá a configuração de ambientes de documentos. Agora estamos usando isso. Acho que estamos usando alguns lados e você já instalou o Firebase em nosso aplicativo A próxima coisa a fazer é copiar isso. Vamos voltar ao nosso aplicativo. Portanto, temos o último dia anterior. Vamos apenas copiar isso. Vamos copiar isso e colocá-lo medialmente abaixo deste Então, a próxima coisa a fazer depois disso é ter isso. Desde então, e algumas outras coisas que você pode fazer é ocultar todas essas coisas ao publicá-las on-line usando o ponto EMV Onde você quiser publicá-lo on-line, o git thing pode ver o ponto EMV Assim, você pode passar por PIK e chamá-lo deste lugar dentro de sua lareira Isso o tornará seguro e você poderá colocar gitigno quando ele estiver pressionando a peça de fogo, apenas O EMV não deve ser pressionado a funcionar. Então, essa é outra tentativa de torná-lo seguro. Não sou a favor da história, não estou fazendo isso. Então, depois disso, primeiro para avaliar isso, temos que exportar esse DP. Assim, podemos usá-lo em qualquer lugar. Portanto, esse DP é o que chamaremos com frequência quando estivermos trabalhando com o aplicativo Primeiro, agora ligue para ele, basta vir aqui e exportar. Agora você pode avaliar isso de qualquer lugar. Portanto, ainda podemos voltar ao seu aplicativo. Se você ver esses dados externos para o seu aplicativo. Adicione dados ao seu firebase, importe esse e esse usuário da coleção Examinaremos isso mais tarde. Então, esse é o pequeno código que precisamos executar para exportar e enviar dados para esse firebase Você quer ler dados, do banco de dados, você quer acessar os dados específicos que vamos fazer, é o código que você segue para ler dados do banco de dados para proteger os dados a serem excluídos e assim por diante. Agora vamos criar nossos dados Vamos voltar atrás, pois ele cria um banco de dados, Slickness Então não se preocupe, vamos voltar para essa base. Então, agora temos nossa coleta de dados, colocamos uma coleção como esportes, próxima, identificação de documentos e outras coisas. Então, eu tenho uma conexão. Este suplemento da coleção de conexões é como uma seção específica do blog que estamos criando. Eu posso colocá-lo em uma coleção diferente. Então esporte como esporte, eu posso ter política, eu posso ter entretenimento aqui. Posso ter uma única seção aqui e ter documentos diferentes, mas não será bom quando eu quiser codificar dados e filtrá-los. Então é bom para mim ter uma coleção diferente aqui. Portanto, cada coleção tem seu próprio arquivo, seu próprio documento. Há todos os dados dentro da coleção aqui. Então eu posso ter vários dados dentro deste lugar. Há vários blogs dentro da divisão de esportes dentro da coleção de esportes, então eu posso ver cada bloco neste lugar. Então, eu pego como um arquivo em seu sistema. Você tem uma pasta diferente em três pastas ou três coisas diferentes dentro de cada pasta. Talvez um para cinema, você tenha todo o seu dia de cinema, um seja para música e outro seja para documentos. Então você diz que eles têm coisas diferentes que estão fazendo e têm coisas diferentes por dentro. Então, a mesma coisa adquirida neste T desta pasta. Em seguida, o arquivo interno é , então você pode avaliar o arquivo interno. Então, vamos começar e voltar ao nosso blog de criação. Vamos voltar ou criar um blog. Vamos trabalhar em como fazer esse boxe funcionar. O que queremos fazer agora é que, quando eles clicarem nessa caixa de envio, você queira adicionar um blog Adicione blogs e planos para fazer isso. Isso significa que queremos enviar dados para nosso banco de dados. Simplesmente fazendo isso. O que vamos fazer é importar coleção e adicionar o blog. Após a coleta, lembre-se da hora em que essa coisa exportamos. Temos que chamá-lo porque é muito importante quando queremos fazer qualquer coisa aqui no banco de dados, porque precisamos de todos esses valores para sermos rápidos. Então importe ou acho que é para relembrar aqui. Então, DB firebase. Portanto, precisamos da função aqui de enviar dados que lembramos sempre que quisermos enviar dados para o Firebase Então custa algo que já temos aqui, sem c nem nada. Então você pode acompanhar isso e ainda pode me seguir sobre o que eu quero fazer aqui. Então, custe um blog. Ok , então a primeira coisa é que eu quero evitar que eu queira evitar que o carregamento padrão seja padrão e algumas outras coisas que sejam padronizadas. Portanto, o principal motivo pelo qual estou chamando isso evita o padrão. Há alguns scripts Java de ação padrão que eu preciso interromper. Então, imagine que eu queira enviar o formulário e validá-lo antes de enviá-lo Portanto, quero impedir que a ação padrão do Javascript envie o formulário antes de validar para usar esse padrão de prevenção porque o padrão dos javascripts quando eu uso como padrão enviá-lo diretamente para até mesmo validar Javascript envie o formulário antes de validar para usar esse padrão de prevenção porque o padrão dos javascripts quando eu uso como padrão enviá-lo diretamente para até mesmo validar . Depois disso, eu quero uma condição if. Então, eu quero verificar cada caixa de texto, talvez você tenha algo dentro Então, se esse título estiver vazio, ele não permitirá que você envie, se esse tutor estiver vazio, a categoria completa do blog, todas essas coisas Mesmo que eles estejam vazios, não vai permitir que eles saiam. Então, para esta imagem, vamos ver porque há um nome específico que estamos chamando, então imagem, isso é bom. Para que, depois de chamar a partir da API, não queiramos que nossa imagem não apareça se o nome não for uma imagem diferente. Depois disso, depois de verificar isso, mesmo que seja verdade. Então, devemos ligar em. Eu não quero me estressar muito. Então, eu só quero solicitar que use isso quando um deles estiver vazio. Depois disso, Lama, o mal deles é verdadeiro. Quero conferir o link da imagem. Não, algumas pessoas se você for ao. Algumas pessoas querem colocar Jack aqui. Acho que o aplicativo é mais bem aceito. Então, eu quero verificar se o link é realmente verdadeiro. Talvez o link esteja realmente funcionando ou seja um link válido. Então, para eu fazer isso, eu tenho que ir até minha fonte e criar o outono UT. Então, dentro dela. Dentro disso, haverá algum índice. Dentro do indigo X, escreverei um código simples para verificar se o PR ou o link são verdadeiros ou não Portanto, a exportação pode chamá-la de qualquer outro lugar. Verifique se a imagem é verdadeira ou não ou válida ou não, o UR e a função cob Então é isso que é tudo o que precisamos fazer. Então, só precisamos voltar ao nosso blog. Então, além da imagem diabos, temos que ir para uma importação importada Então eu posso toda a função aqui e dizer, e eu vou passar a imagem do diabo, e eu vou passar essa imagem para ela, é a imagem R. Então, depois de verificar, ele tem que verificar se talvez a imagem seja verdadeira ou não Se não for verdade, ocorreu um erro. Portanto, é preciso verificar se esse UR é verdadeiro. Lembre-se de que as duas coisas que o UR salva o UR salva e a função cba Uma função coa será sincronizada e temos uma função aqui dentro que é comum. Eu dentro é agora, temos outra função, declarações condicionais que dizem que eu existo se isso for realmente verdade É verdadeiro agora definido como verdadeiro primeiro é desativado como verdadeiro. Então, quando eles clicam no botão enviar, lembrem quando eu passo aqui, quando eles clicam aqui. Portanto, quando o botão desativado for verdadeiro, eles não poderão clicar nesse botão novamente. Algumas pessoas podem simplesmente clicar no botão várias vezes. Portanto, para evitar a ação de recorrência ou picada repetitiva, você deve bloqueá-la Então, depois disso, você tem que pesar, não, isso é um peso scronos, tecnicamente davi Então, o peso que temos de tempo na doca é o que temos aqui. Coleção de foguetes abertos, você está dizendo onde a estamos usando Se você voltar para nossa lareira veja que eles também têm seu próprio banco de dados. Portanto, o DB não está em nosso aplicativo, é por isso que o exportamos DB após o DDB, então precisamos da coleção em si, onde queremos paralisá-la Se verificarmos este local, esse usuário agora é um local de coleta ou deixe-me voltar e mostrar algo para você. Se você estiver aqui , verá um depósito Fire. Essas são suas lojas de fogo em com. Essa string é a rua. Este passe agora é onde você deseja armazenar esse é o nome da sua coleção Então, meu nome de coleção, eu quero um nome de coleção diferente porque eu quero um para esportes, para esportes, para política, para negócios e assim por diante. Então, em vez de eu passar uma única corda aqui, S usa. Então, se eu passar por Dam é tudo isso, os dados da história serão salvos além desse esporte, e eu não quero isso. Então, eu preciso passar na categoria lá. Então, categoria se a categoria mudar para esportes para salvar o ponto de dados em esporte. Você está me entendendo. Então, se a categoria diz política, a categoria é a categoria. Então, se eu selecionar esporte, ele salvou esses dados que estou escrevendo em esporte. Eu seleciono política, salvo os dados em política quando continuo me dedicando e assim por diante Que há lógica por trás disso. Então, depois disso, temos o colchete coli. Ok. Então eu não vou passar todos os dados. Esse é o tipo dois. Se você notar é quando eles estão passando todos os dados para dentro. Então, eu tenho meu tipo dois para digitar. Então, a categoria também é o blog completo, o URL e a hora. Tempo é algo que não há opção, pois você não precisa dedicar tempo ao seu. A hora em que você clicar no botão de serviço será registrada. Se você notar em nosso aplicativo aqui, você vê algo que diz quatro que é abril de 2000 2024 neste momento, é a época em que este blog foi criado Portanto, basta registrar o horário específico em que você está clicando no botão. Então é para isso que o tempo começa. Então, se isso for bem-sucedido , exiba outro alerta que diga: Talvez queiramos recarregar nosso aplicativo, talvez queiramos recarregar tudo Então, depois do blog, o blog foi criado com sucesso. Eu vou ler. Agora, outra coisa significa se essa não existir, se o link da imagem não existir. Então, o que eu deveria dizer que estou usando ar. Há uma maneira melhor de fazer isso. Há outro em que posso criar um componente para minha notificação em vez de usar o alerta. Isso fará parte da avaliação. Você deseja expandi-lo, basta ligar para ele em vez de usar um alerta ou criar seu próprio modelo Aart Eu posso dizer URL da imagem. URL da imagem para que agora possamos remover o inválido. Isso é tudo o que precisamos fazer. Teste agora. Vamos voltar aqui e voltar para Precisamos deli esta zona Esta será uma nova listagem. Então imagine que agora eu quero criar um blog em. Deixe-me colocar algo para um blog, o carro, meu nome, Joel, é uma picada esportiva Então, a descrição, o fechamento do negócio, segue o anfitrião. Então, para os detalhes. Ok. Deixe-me encontrar um dx aleatório Vou voltar para o meu laboratório e colar. Então, o link da imagem, eu preciso de um link de imagem, então eu colo. Então, agora, quero testar se talvez esse URL da imagem esteja realmente funcionando. Talvez se eu colocar um UR errado, talvez funcione. Então, em vez de colar isso, vou remover isso de volta e apenas escrever lixo Então, vamos perder agora. Vamos clicar em enviar. Sim, há um erro. Ainda não lançamos essa função. Portanto, não podemos avaliar essa função. Esse é o erro. Veja que é quando clicamos em enviar, tudo basta chamar a função que eu saio na hora A chamada da função. Vamos voltar a ele e tentar ver se talvez recuperemos o anterior Deixe-me ver que esse não é um URL válido. Deixe-me ver se isso vai funcionar ou não. Você pode ver como fornecer um link de URL válido. Eu clico. Preciso voltar e copiar o link do URL correto agora. E deixe-me colocar essa última tabela e depois clicar em enviar. Então, clique em enviar já. Era para ser um botão de carregamento, vamos anotar isso. Então, estamos recebendo uma permissão ausente ou inst para bloquear hookie bloqueada ou algo parecido Portanto, ainda não temos permissão para postar sobre esse traje no Sorry on the Fire Base 9. Implementação do Firebase (b): O Hokie será bloqueado ou algo parecido se faltar ou não receber permissão Portanto, ainda não temos permissão para postar neste GB. Desculpe, na base de bombeiros. Então, você sabe, quando estamos criando isso, eu te mostro uma coisa: se você voltar às regras, vá até suas regras. Há algo que estamos mostrando que acho que é para terceiros, blá, blá, blá, blá Eu digo, vou explicar mais tarde. Você pode mover o vídeo um pouco para trás. Então esse é o lugar. Precisamos reescrever este para que todos possam escrever uma postagem e ter acesso para escrever postagens Então, o que só precisamos fazer é mudar isso para verdadeiro. Essa é verdadeira. Então, agora já temos uma coleção diferente para cada um deles, e alguns deles têm dois dados, um dado para dados. Podemos até mesmo fazer com que isso seja tecnologia, então tenha dados T. Então, a próxima coisa agora, depois de adicionar todas essas coisas, é voltar a chamá-la de nossa. Você percebe que estamos chamando os dados do nosso banco de dados da nossa base de bombeiros. Então, a maioria será capaz de fazer isso. É muito simples, talvez estejamos escrevendo essa linha de código, não, não, não, não. O que vamos fazer agora é voltar ao nosso código. Então, em vez do mesmo em que temos o antes, em vez do padrão, temos antes. Eu volto ao nosso código. Volte para nossa página inicial. Agora, em vez de usar todos esses, temos que obter nossos dados, temos que ler os dados do banco de dados. Lembre-se da opção de dados, pode alcançar dados. Temos que ler todos os dados do banco de dados. Então, copiamos isso para obter documentos e também lembrar que você precisa ou seu banco de dados, que é a TV da base de fogo. Então, precisamos disso. Então, quais são essas funções que precisamos escrever? Então, primeiro de tudo, temos que ter uma propriedade para cada um deles. O que seu estado faz é que, depois recuperá-la com base em cada coleção, recuperemos para a coleção de políticas, blogs de políticas, tecnologia dT, entretenimento, de recuperá-la com base em cada coleção, recuperemos para a coleção de políticas, blogs de políticas, tecnologia dT, entretenimento, esportes e negócios. Portanto, uma porta do banco de dados com base em cada coleção. Então, o que vamos fazer agora é fazer com que nosso efeito de uso seja executado de forma consistente. Então, use o efeito, temos uma função c igual a um scronssd have Q Da mesma forma que obtemos documentos que já temos dentro da coleção, colocamos em nosso banco de dados o nome da coleção que queremos obter em si e como política. Você pode voltar ao seu dt e conferir o nome aqui, política, se verificarmos aqui, ele faz o que eles oferecem e também instantâneos, acordo com os padrões Então, política também. Então você tem outro bloco de custos , um R. Então, quando uma consulta consulta pessoas para cada um Para cada um deles, queremos armazená-lo dentro de blocos alimentados dot push. Então, queremos colocá-lo dentro do CR com uma identificação. Essa identificação de ponto do documento. Em seguida, divulgamos os dados do documento. Então, depois disso, queremos classificar os dados. Isso significa que o primeiro que tem o mais recente, chegamos primeiro antes do outro. Então, dizemos que custam um bloco ordenado igual a f blocos novos A vêm B dois argumentos do tempo Portanto, a hora em que eles querem classificar é a hora certa, menos uma vez que eles definirão o Conjunto P B, que define blocos políticos, estado, glock Depois disso, no que é chamado de funcionais. É um bloco de busca ou, digamos, blocos de busca em vez de um bloco de busca Vamos buscar blocos. Sim. Porque agora estou procurando por apenas um quarteirão. Então, depois disso, queríamos executar uma vez após o carregamento. Então, isso é sobre política. Então, agora temos que replicá-lo para outros também. Portanto, se você considerar, o tempo está correlacionado com o tempo, então temos que formatar isso para que o horário seja apropriado Então, o que precisamos fazer é voltar ao nosso cartão de bloqueio porque isso está simplesmente em nosso cartão de bloqueio, certo? Acesse nossos cartões de bloqueio dentro de nossos componentes. Cartão. Então, quando temos tempo, temos que substituí-lo por isso. Há uma nova string d time sus string string. Portanto, é formato elétrico. Mostra a hora em que criamos este blog e as datas. Vamos clicar em um deles. Então, está aparecendo, mas uma coisa é não mostrar todos os detalhes. Então, vamos ver o nome que chamamos de todos os detalhes aqui. Vamos ver, chamamos isso de blog completo, blog completo neste lugar. Então, vamos voltar ao nosso componente aqui. Essa é a nossa visão dos detalhes. Vamos verificar. Então, esses são os estados que fazem os detalhes. Esse é o blog completo do estado. Então, vamos verificar agora. Nós temos isso. Portanto, nossos dados não são tão publicados em. Então isso significa que temos que formatar esse também. Temos que formatar essa data também. Lembre-se do que fizemos aqui. Você pode simplesmente vir aqui e ir até. Então, este será o horário indicado. Então, vamos verificar o que já existe, e nossa votação de retorno está funcionando. Então é principalmente isso. Mas outra coisa que resta é por esse lugar. O outro ainda tem o antigo blog. Isso significa que temos que acessar nossos detalhes lá, nossa seção de blog e mudar algumas coisas. Então, o que precisamos mudar é chamado de API , que também é para ler todos os detalhes e colar dentro de cada um deles. Então, o que precisamos fazer? Já temos nosso bloco de vendas. Então, como na página em que precisamos chamar tudo, tudo aqui, cada função lá fora, não precisamos fazer isso, precisamos copiar isso. Não precisamos fazer isso neste lugar. Desculpe. Sim, são a seção de blocos. Então, deixe-me agradar aquele que eu não estou usando corretamente. Eu volto para minha seção. Então, não precisamos chamar tudo aqui. Só precisamos chamar esse de um deles e depois passar na categoria, certo? Então, a categoria em que clicarmos aqui, se for esporte , gerará o blog de esportes. Vou comprar todo esse blog esportivo, a coleção de blogs relacionados a esportes Se for política, escolha aquela para política e assim por diante. Então, dentro deste lugar, será criado um blog em vez de um blog definido. É isso mesmo. Então, o que falta aqui é que precisamos disso para importar isso. Então, vamos voltar à nossa página inicial. Precisamos que isso esteja aqui, certo? E aqui precisamos passar pela nossa categoria dt. Portanto, precisamos fazer mudanças quando a categoria mudar. Então, em vez desse estado agora, podemos excluir esse estado, que é o que deveria ser. Vamos voltar ao nosso p. Você pode ver agora, apenas. Para termos certeza, acho que criei um post sobre as políticas que chamo de política. Você pode ver? Está mudando com base na entrada específica que eu inseri, tecnologia e três entretenimentos como zona. Então você pode ver que a imagem está mostrando uma imagem muito bonita. Então, se você clicar nesta exibição, será um momento incrível levar vocês para construir este site incrível. Então, ainda há muita coisa que você pode fazer com isso. Então, e isso fará parte da avaliação. O que eu só preciso para você é trabalhar no modelo. Então, quando eu clico em Por exemplo, quando eu volto para este bloco de vinco, se eu voltar para este bloco de uso e clicar nele Em vez de usar Alt, você pode criar um modelo. Em vez disso, seu modelo será o único a seu modelo será o único a receber notificações úteis. E essa coisa, você pode listar todos os seus blocos para que eu exclua o botão para que eu possa ter controle sobre ele. Você pode excluí-lo deste local. Você pode vê-lo deste lugar, se desejar. Mas se você não quiser fazer isso, pode voltar aqui e qualquer blog que esteja bom e que não seja útil. Você pode simplesmente clicar nele e excluir documentos. E exclua documentos. Você pode excluir o documento que excluiu todo o blog deste Então é isso. Então, depois de criar algo assim, você pode criar seu modelo e fazer esse botão de pesquisa funcionar. Os contatos. Então, quando eles clicam em enviar, você envia um e-mail para este qualquer e-mail que você possa enviar para seu e-mail pessoal quando entrarem em contato com você. Acho que existem alguns sites que podem fazer isso: eu tiro fotos, verifico imagens. As imagens podem ajudar você a fazer isso. Então, quando eles enviarem uma mensagem, ela enviará pessoas trans diretamente para o seu e-mail e você poderá respondê-las desse local para que você possa fazer um e-mail não gerado e respondê-las. Então, outras coisas. As coisas incríveis que você pode adicionar a isso não param por aqui. O design não para por aqui. Há algumas coisas que você pode esconder, como carregar, carregar , colocar uma carga. Então, quando eu assinalo essa coisa, deve haver uma carga girando, girando, girando, girando. Existem alguns CSS divertidos, que colocam o carregamento. Estou carregando a animação de carregamento do ícone, você pode verificar isso. Vários deles, vários deles, você pode verificar isso e ver como você pode implementá-lo para isso. Então, obrigado a vocês por me seguirem até o final dessa história Hum, eu vejo você no próximo tutorial, qualquer um que eu vou lançar em seguida. Então, por favor, clique no botão Seguir para que, sempre que eu publicar um conteúdo incrível , um tutorial incrível, vocês me sigam e se divirtam juntos Muito obrigado, Segers Nia