Como criar aplicativos para blog usando React e servidor JSON

1. Introdução: Olá meus amigos. Bem-vindo a este curso em que vamos aprender. Podemos limpar o site de blogs da lâmpada capilar. E Jason disse, meu nome é Tony tradicional e eu serei seu restrito neste curso. Neste curso, veremos como podemos criar este belo site de blogs com a ajuda de objetos, reagentes e portões e em vez de um, não há back-end envolvido neste aplicativo. Portanto, esse código é amplamente parte do design, mas não é nenhum desenvolvedor para o tipo de dormitório, nenhum tipo de conhecimento de fundo. Então, vamos ter uma rápida demonstração deste aplicativo de blog, que vamos construir neste curso com o lado de defesa reagente Health Bot dele. Então, atualmente estamos lançando benefícios de cinco blocos. E se você rolar para baixo, você pode ver que temos uma emissão de página por clique ou negativa. Você verá os próximos cinco blocos. Mas no momento temos nove blocos na duplicação. Então, ele está sendo exibido apenas para o blog neste clique em Visualizar, você voltará para a página inicial. Já olhamos para ambas as seções. Onde explicamos a vida para o seu blog? Temos uma carga cardíaca ao vivo, então temos um Carnegie como dirigir certo que sua prancha. E se você clicar em qualquer crítica, isso será filtrado, especialmente em ordem. Mas você pode ver que, para este particular, não temos nenhum blog é para nós temos que bloquear ou você tem que procurar. Dessa forma também, você pode terminar o bloco de áudio, ok? Agora, este, vamos sair todos os blocos que ainda não temos a décima prata. Agora vamos ver a região correta desse aplicativo de blog. Mas primeiro vou adicionar um blog ainda, e vou dar esse atraso. Blog, a demonstração. Vou colar a descrição longa deles. Vou adicionar o imediato. Você pode ver essa imagem de métodos de carregamento estatisticamente. Vamos selecionar uma categoria como moda. E vamos clicar em Adicionar. Este blog é detectado completamente. Você pode ver que temos aqui como demonstração de blocos decorativos. Você pode ver lá abaixo da carta para seção. E para continuar, está blogando esse componente de guarda. Então você precisa clicar em Avançar. Você pode ver que esse blog e trazê-lo aqui. Temos nosso bloco criativo. Agora, também podemos excluir um bloco. Vamos executar a operação de exclusão. Clique neste ícone. Este blog será diluído. Temos bloco de método de placa diluído tecnicamente. Você também pode atualizar o bloco diferente. Então, vamos atualizar este. Vamos começar com a atualização do blog do quadro. Você não pode atualizar a imagem aqui. Você pode atualizar a descrição e, particularmente, então vamos atualizar esta. Você pode ver que nosso blog também está sendo atualizado normalmente. E também temos uma terceira funcionalidade neste aplicativo. Você também pode definir os blocos. Vou configurá-lo para blog com palavra-chave tática. E se você clicar em set, você sairá, isso é bloco com isso dado. E se você clicar nesta cruz, você terá um bloco de backhaul que temos em nossos portões AND em vez de um nós temos um pé de prancha Timperley também. Também não temos forma de ajuste se não for acasalamento. Também aprenderá que, se os dados forem correspondência de rota normal. Também temos um detalhe sobre este aplicativo, clique em Modo de leitura. Você nunca chegará à página de detalhes desse bloco específico. E se estiver esfriado, você pode ver que temos uma descrição. Também nos relacionamos a este blog em particular também. A partir daqui também, você pode navegar sujeira é o bit de bloco detalhado. Portanto, se você clicar neste componente de cartão, você navegará até esse novo delegado desse bloco específico. Se você clicar em voltar, geralmente volte para a página inicial. O aplicativo geral que vamos criar neste curso com o auxiliar e o aplicativo de servidor diferente. Não há back-end envolvido. Vamos ser usados apenas no GitHub. O servidor implementará todos esses recursos. Você pode dizer que esse código foi projetado para um desenvolvedor de conteúdo. Não tem nenhum back-end não letal. Porque vamos implementar todas essas crianças como 13 degenerações, filtrar adicionando, criando, excluindo e carregando com j sine Theta. Mas somente neste aplicativo React sobre o aplicativo que vamos criar esse código com o React n GSM, corrija isso. Mas agora vamos falar sobre os requisitos básicos antes de se inscrever na discórdia. Este curso foi projetado de fato, de um deck. Qualquer pessoa pode participar deste curso, personagem diretor para aprender a criar um site com a propriedade Health novamente E portões, você só precisa ter uma compreensão básica de HTML, CSS, JavaScript, também como conhecimento básico do React. Em seguida, os médicos citam, você terá a Polônia sobre como criar um site de blogs com a ajuda do JSON. Então, o que você está esperando e execute esse código para aprender a limpar o desenvolvimento reflexo com o chefe prof. lado reagente. E se você tiver alguma sugestão de barra de consulta, então você sempre pode entrar em contato comigo. Vou tentar o meu nível melhor para resolver sua consulta. Do meu lado, verei você na seção do curso. 2. Configuração de ambiente: Neste vídeo, vou discutir quais são as ferramentas e o software necessários para trabalhar neste projeto. Neste projeto, vou usar o Visual Studio Code editor para escrever nosso código. Portanto, certifique-se de chamar essa origem cognitiva para que você possa baixar essa origem motriz. Já baixei este. E a próxima coisa que precisamos instalar o nó j também para ter um servidor de desenvolvimento para reagentes aqui. E também junto com a nota lá, você receberá um gerenciador de pacotes npm para instalar a dependência e certificar-se de instalar o nó? Sim. Deixe-nos fazer um. Acho que é isso. Tudo isso é necessário para este projeto. Agora, espero que você tenha instalado nó j e o Visual Studio Code editor em seu sistema. E você pode verificar se o nó JS instalou ou não no seu sistema. Então você pode ir para o CMD, abrir, abrir minha AMD, e você pode executar um comando aqui, nó hyphen v. Você obterá o nó de origem que o nó JS contou no termo da página. Agora, vamos passar para o código do Visual Studio que precisará lançar nosso Visual Studio Code para fazer nossa DG de desenvolvimento. Uau pessoal, abri meu visualmente se você fizer código e precisamos instalar tensão térmica. Essa tensão será como primeira unidade para instalar este ar do suporte. Basicamente, ele irá colorir seu suporte de abertura e fechamento. E eu já instalei para você instalar essas actinas e assim você pode ferir as dissecações e como aqui, o suporte aqui. Dessa forma, você pode instalar este. Unidade de luz solar direcionada para instalar isso. Isso é snippet, um trecho. Então, miticamente, nos ajudar a gerar uma reatância é snippet como se você quiser escrever um componente funcional, então você tem que apenas escrever RAF's. Será uma agenda semanal funcional, um componente. É muito útil gerar alguns reagentes lipídicos com a ajuda dessa atenção. A outra coisa que precisamos instalar como esta cotação, permitida é necessária. Você também pode instalar este para atender a nossa diretoria. É isso. Só isso é necessário transitório em nosso Visual Studio Code. Vejo você no próximo vídeo, onde começarei a configurar o projeto React JS. 3. Configurando o Projeto React: Pessoal, agora estou neste diretório e vou abrir um prompt de comando aqui. Vamos abrir um prompt de comando. Vou criar um aplicativo React usando o comando e escolhe Create, React app e o bloco React JSON do aplicativo. Este será o nome do nosso aplicativo. Vamos apertar Enter. Levará cerca dois a três minutos para instalar toda a dependência necessária. Voltarei uma vez que toda a dependência. Então pessoal, nossa configuração do projeto foi concluída. Agora, vamos primeiro entrar neste diretório que é react, JSON, blob. Agora estamos neste introdutório antes de começarmos npm quando a TI instalar alguns pacotes. Vamos trabalhar com o roteador react dom. Vamos instalar este pacote. Eixo descendente do roteador React que vamos usar. Em seguida, vamos usar o React para certificar ou exibir a notificação de brinde. Então, quando estiver muito alto, o IMDB reage UI. Isso porque também vamos trabalhar com o design do material preso neste projeto para construir nosso componente. Vamos instalar esses pacotes. E enquanto isso, eu já abri este projeto no meu Visual Studio Code. Vamos para o VS Code. Então, como você pode ver, esse projeto está aberto no meu Visual Studio Code. Vamos remover todo o conteúdo indesejado que temos em nosso arquivo app.js. Só vou dar aqui um título. Blog. Vamos remover este 1 primeiro. E não precisamos desse arquivo de texto. Vamos remover este também. Vamos remover este ponto do logotipo como arquivo SVG também. Agora, vamos verificar se nossa coordenada de pacotes foi contada ou não. Nosso botão de pacote. Vamos fazer e demonstrar e aguardar o carregamento do aplicativo no navegador. aplicativo carrega no navegador sem nenhum problema. 4. Configurando o JSON Server: Então, a próxima coisa que temos que fazer, então vou configurar nosso servidor JSON aqui. Então, vou criar um arquivo na raiz, ou seja, o arquivo db.json. E aqui vamos ter um blog porque vamos ter todos os blogs. Vamos apenas, vamos colocar qualquer um em particular agora, nesta era, porque vamos armazenar todo esse blog dentro dessa matriz. Agora, temos que escrever um é cribbed para iniciar nosso servidor JSON. Então, vou para o script da página 20 para começar isso. E servidor JSON. Acabei de colar este é o roteiro. Para iniciar o servidor JSON. Temos nosso MDB axial, react UI Create, React router, reator de diamante. Somente esses quatro pacotes são necessários para funcionar em nosso aplicativo de blog. 5. Estrutura de pasta: Agora, a próxima coisa, o que temos que fazer, vou criar alguma pasta aqui. Primeiro, para pouco, os componentes são todos os componentes serão colocados dentro desta pasta. Na segunda pasta, vamos ter páginas. Vou criar algum arquivo dentro desta pasta PDF. Vamos ter como nossa página inicial, home dot gs. Então teremos nossa página do blog. Então, vamos usar a mesma página, mas adicionando o novo bloco ou atualizando o bloco de adjetivos. O próximo arquivo que vamos ter vida blog.js. Assim, também podemos ver o único blog em uma página separada. Os arquivos que você não formará. Portanto, também não vamos financiar o método se o URL não for correspondente. Os outros arquivos que vamos ter mais um parecido. Ele só conterá algumas informações básicas sobre este aplicativo. 6. Configurando o MDB no nosso aplicativo: Agora, a próxima coisa que temos que fazer, então primeiro, vou configurar nosso material é adicionar Bootstrap neste aplicativo. Então, vamos ao site oficial do material design Bootstrap. Vamos clicar em Começar. O que temos que fazer aqui? Vamos descer. Primeiro. Precisamos importar este arquivo CSS para aplicar o estilo de viagem de barco material em nossa aplicação. Então, quando tirou a página Essa é uma declaração importante dentro deste arquivo js de ponto de índice. Aqui temos que pagar. Agora, a próxima coisa que temos que fazer, também vamos usar este ícone Font Awesome. Vamos apenas copiar este. E vamos colá-lo aqui dentro deste index.html. E também vamos trabalhar com esse estilo de fonte rover. Vamos copiar este também. Vamos colá-lo aqui. Em terceiro lugar está a pasta pública. Vou colocar minhas imagens. Certo? Vou trazer as imagens. O terceiro é a pasta pública. Então, acabei de colar nossa pasta de imagens dentro dessa pasta pública. E você não precisa se preocupar com todas essas imagens porque eu vou fornecer esses éteres. Então você não precisa se preocupar com isso todas as imagens. Então, até agora, acabamos de concluir nossa configuração básica. 7. Ativar o roteamento: Agora, a próxima coisa que vou fazer, vou registrar toda essa rota. Então, primeiro vou gerar um trecho aqui. Vamos dar um título por enquanto, como sobre. Agora, vamos ler isso um pouco aqui também, usando o RFC. Vamos dar o título. Você fez. Vamos centralizar isso em um pouco aqui também. Será um único blog no qual podemos ver os detalhes sobre o blog específico. Agora, este será o título. Nós não vamos ter nos formado também. Vamos continuar por enquanto, não formados. Agora. O que temos que fazer? Vamos para o arquivo app.js. E aqui precisamos derrubar o roteador componente react. Vamos trazer rotas, roteador do navegador, rota. Vamos remover este. Digamos que remova este. No nível superior, teremos o roteador do navegador. Vamos colar esse conteúdo. Dentro disso. Agora, vamos ter todas as rotas, então vamos registrar nossa antiga rota dentro desta rota. React router dom foi atualizada a versão seis. Tão doce não está disponível no roteador react Dharma vergence seis. Então, temos que usar a rota. Esta rota. Se você quisesse rígido 35º descobrir, então você tem que retornar essa rota. Aqui. Vamos fornecer um caminho para cinco vezes que foi para registrar nosso elemento de página inicial que temos que fornecer aqui. Vamos registrar nossa rota assim. Se o código VS importar automaticamente esse componente e com rotas, não precisamos fornecer a palavra-chave exata. Agora, vamos copiar este e o próximo slide teremos nosso blog. Para isso, vamos usar o bloco de componente adicionado. A terceira rota que vamos ter, você fez o blog e nós vamos editar o blog com base no ID. Aqui temos que fornecer o ID. E para isso também, usaremos o mesmo componente para atualizar o blog existente. Agora outra rota leve bloco único V. Ok? Assim, o usuário também pode visualizar o único blog que também será baseado no ID. Agora, desta vez vamos renderizar a página como Blob apenas. A próxima rota, teremos uma página Sobre simples. Por enquanto, vamos apenas copiar. Será sobre isso. R será sobre. Vamos entrar na página sobre. O URL não corresponde. Então, nesse caso, vamos resolver não a fonte. Vamos trazer o componente de formulário NADH. Vamos primeiro verificar se todos esses roteadores estão funcionando ou não. Vamos para o navegador. Leia este. Então, a casa já está funcionando. Agora. Vamos ao blog. Isso também está funcionando. Blog. Blog. Temos que fornecer ID, mas também está funcionando porque estamos inserindo o mesmo componente para adicionar o novo bloco, editando o bloco de saída. As outras rotas que temos sobre isso também estão funcionando. Temos um único blog, blog, bloco de pontos. Você também precisa fornecer o ID aqui. Portanto, isso também está funcionando se os URLS não corresponderem. Então, vamos manter algum URL aleatório. Isso também está funcionando. Olha, ok. Conseguimos registrar com sucesso toda a seca que temos em nossa pasta de dígitos. A próxima coisa que vou configurar o T phi reativo neste aplicativo. Vou colar para importar a instrução IF aqui. Este tratamento importado azul é necessário para configurar, reagir com ativo em nossa obrigação. Então, vamos dar-lhe um contêiner. Isso funcionará. Também configuramos o reator. Vamos também iniciar nosso servidor JSON também. Portanto, este é o nosso diretório que criamos nosso projeto React. Vamos e pasta de status e vamos abrir um TMD. E vamos fazer npm run. Isso é para k. Então, no momento, não temos nenhum conteúdo para testar este. 8. Como trabalhar no cabeçalho: A próxima coisa que queríamos basicamente criar um componente de cabeçalho para que possamos navegar facilmente em nossa obrigação. Vamos para o VS Code. E na pasta de componentes de status, vou criar um arquivo chamado cabeçalho dot js. Vamos encontrar gerar um trecho aqui. Por enquanto. Agora, vamos ao site oficial do material design Bootstrap. Aqui, vou usar o componente de navegação. Vou usar o navbar. E vou usar esse número. Então, vamos rastejar para baixo. Vou copiar esse código até aqui. Vamos para o código VS e vamos colá-lo aqui. Também precisamos copiar o componente necessário quando a TI trazer esse componente do nosso MDB react UIKit. Então, vamos copiar toda essa importação. Vamos colocá-lo aqui. Também precisamos trazer um estado enorme. Aqui. Algumas coisas que preciso abordar. Vamos definir um estado. Então const user state false. Aqui ele será enviado, ele será definido. Então, estamos apenas alternando aqui, então será. E aqui também temos que colocá-lo. Então, vamos criar um blog. Se eu me candidatar, vou colocar aqui nosso logotipo, qual é nossa obrigação aqui. Então aqui vou remover este e vamos navegar até a página inicial. Será lateralmente. Aqui. Vou ter minha imagem. Posso usar aqui, imagem lá. E classifique, posso lhe dar nossa imagem para pasta pública mais tarde que fade-out. Então, imagens, e temos um logotipo, logotipo ponto JPG. Alternativo, temos que fornecer para que ele seja baixo apenas. Temos que dar algum estilo em linha aqui. Será como a altura. Isso e manipule a cor de fundo. E também precisamos mudar a cor de fundo. Preciso dar aqui 5411 b. Será leve. Tudo bem. Acho que é isso. Quando mudar outras coisas aqui. Então, será como apenas fatia aqui porque nunca chegamos à página inicial. O próximo gráfico que teremos como bloco de anúncios. Aqui podemos especificar esse bloco de anúncios de tomada. O próximo bloco que vamos ter sobre. Então, podemos especificar sobre. Isso será sobre. Também temos que dar algumas cores de estilo em linha. Vou te dar um triplo F. Vamos copiar este porque precisamos usar aqui também. Vamos usar aqui também. E vamos remover este, mas não preciso deste. Também precisamos acrescentar isso como contagem aqui também na criança NaBR. Acho que por enquanto terminamos esse componente de cabeçalho. Vamos usar o componente theta dentro deste arquivo app.js. Dentro deste arquivo app.js, vou trazer nosso cabeçalho aqui, importará automaticamente esse componente. Vamos ver se esse cabeçalho está sendo exibido ou não. Você pode ver que temos nosso bom cabeçalho ainda. E se você clicar em Adicionar bloco, teremos um bom para o que é adicionado. Aqui. Você deve ter notado como está, ele recarregando aqui sempre que clico no teta. Porque com largura o componente Bootstrap de design de material você não pode usar aqui para palavra-chave. Certo? Portanto, dois não estão funcionando com esses links de navegação MDB. Se você também fizer isso, digamos que se você der dois aqui, não funcionará. Você pode ver que ele não está funcionando. Você tem que usar ainda, etc. Existe uma maneira alternativa de usar dois. Então, basicamente, você tem que derrubar o mordiscamento do roteador React. E então você pode usar naturalmente em vez do MDB NAB Berlin. Mas nesse caso, você receberá algum aviso no console. Portanto, cabe a você se você quiser usar o link Nearpod do reator AutoDock, você pode usar em vez desse MDB nunca vinculado. Então, cabe a você. Agora. Agora terminamos esse componente de cabeçalho em nosso aplicativo. 9. Configurando o Cloudinary no React: A próxima coisa, primeiro vamos trabalhar em nossos blocos Adicionar edição. Então, primeiro vou habilitar a operação para adicionar blogs. Para adicionar bloco para expandido para fazer alguma configuração em nosso Cloudinary porque vamos prejudicar nosso limite nesse Cloudinary. Em seguida, obteremos o link da imagem vindo ou obstruído do nosso Cloudinary. Esse link de imagem nos é informado em nosso servidor JSON. Vamos lutar contra o Cloudinary configurado. Então pessoal, estou na minha conta comum. Espero que você tenha uma conta no Cloudinary. O que você tem que fazer? Você precisa ir para suas configurações. Então você precisa clicar neste ícone de configuração. E você precisa clicar neste Upload. Vamos rolar para baixo. Aqui. Você precisa definir sua predefinição de upload. Você pode fazer isso. Basta clicar nesta predefinição Adicionar upload. Ele gerará algum nome preferido aleatório. E aqui você tem que usar não assinado. E vamos clicar em Salvar. Você pode ver que nosso upload 3 terço foi criado aqui. Você pode simplesmente copiar este e pintá-lo aqui em V, como no código VS. Terminamos essa configuração básica do Cloudinary. 10. Componente de formulário: Então, a próxima coisa que vamos trabalhar em nossa página de blog que adicionou. Precisamos trazer algum componente do nosso trabalho de design de material para construir um componente de formulário. Vamos trazer esses componentes primeiro. Precisamos de validação do MDB. Também vamos fazer a validação do lado do cliente somente a partir do nosso final, entrada MDB, IMDB, btn. E a próxima coisa que temos que fazer, também vamos trazer apenas fita adesiva. Eu também preciso de axial. Vamos trazer esse também do nosso phi. Vamos imprimir torradas. Agora, vamos definir nosso estado inicial. Estado inicial. Nós vamos ter nosso bloco de padrões. Então vamos ter uma descrição. Mas nosso blog. Então vamos ter uma imagem de categoria que você viu vindo Cloudinary. Vamos obter átomos imediatos. Então, vamos ser armazenados que você já, ele fica em vez disso. Agora, vamos ter uma categoria diferente e diferente. Em nossas opções suspensas. Vamos ter uma categoria como Ravel. Então vamos ter a categoria Life Fitness, Sports. Então vamos comer. Em seguida, temos uma sexta categoria para criar um blog. Agora, aqui vamos ter valor. Então, valor do formulário, valor definido. Você acabou de fazer. Aqui. Vamos passar pelo estado inicial. Depois que eles tiverem um método de editor para categoria, compramos ou suspensos. Não estamos dispostos a usar lá um componente MDB React. Então, vamos usar um menu suspenso HTML normal para criar um menu suspenso de categoria até agora que também precisamos gerenciar um método separado no GitHub. Então, vamos lidar em um estado separado, os métodos contemporâneos do estado. Isso será nulo. Agora, vamos destruir todo esse valor, o valor da forma Ahmad. Vamos distraí-lo como título, descrição e URL da imagem. Certo? Agora, vamos trabalhar em nossos próprios componentes. Podemos remover tudo isso. Aqui. Vamos usar a validação do IMDB. Dentro disso. Vamos dar a ele um nome de classe. Então, aqui estamos usando as duas pontas grep plus. E depois disso, podemos ter algum estilo em linha como margem, pixel superior. Você não precisa validar. Estamos passando esses adereços novalidate. E vamos ter em algum identificador atendido enviar. Vamos definir essa função. Caso contrário, vamos tirá-lo. Certo? Então, vamos definir este por enquanto. Adicionaremos a lógica mais tarde. Em terceiro, e vamos ter uma tag p aqui. Podemos dar um blob de luz aqui que podemos dar algum nome de classe para estilizar isso, para estilizar esse título. Então FS, F, negrito. Vamos primeiro ver este. Parece. Vamos fechar este. Não é necessário. Vamos clicar neste bloco Adicionar. Temos nosso bloco de anúncios de cabeçalho. Depois disso, temos que trabalhar em nosso arquivo de entrada. Então div dentro disso eu vou ter. Estou estilizando. Vou escolher um estilo aqui. Isso é ladrilhos. Acabei de colar ainda. Vamos ter nossa entrada IMDB. Podemos lhe dar um valor. Então, teremos nome, título. Em seguida, o tipo será o externamente. Em seguida, teremos nosso método onChange. Basicamente, rastreie o estado de cada campo de entrada em cada prop gif. Vamos, vamos ter um na mudança de entrada. Então não seria necessário apenas. Então vamos ter nível. Então, será título. Em seguida, o método de validação que você deve dar no caso se o campo de entrada estiver na pobreza. Assim, podemos dar-lhes método. Vamos fornecer um título. Temos que dar inválido. Agora. Vamos dar uma pausa aqui. E depois disso vou copiar isso na cúpula do portfólio. Isso para descrição arquivos N categoria. Vou copiar essa entrada algumas vezes. Vamos copiar este. O segundo é a descrição. Descrição. O nome será Descrição. Proteção dipolo na mudança será nossa cadeia de entrada. Será necessário. O nível será a descrição. Aqui podemos dar perna. Por favor, forneça uma descrição. Descrição. Vamos usar uma área de texto. Podemos dividir a área do detector de falhas e podemos fornecer linhas de arquivo de duas partes. Não vamos usar o tipo igual a isso. Ele será phi localizado no arquivo PSF. O valor não é suportado, portanto, temos que remover este. Para isso, não vamos trabalhar com o oninput J. Para isso, vamos usar uma função separada que será Upload Image. Então, em Carregar imagem, isso estará em Upload Image. E aqui podemos atrasar o alvo de pontos. Agora, depois disso, vamos ter suspensos. Portanto, não vamos trabalhar com o material dentro do menu suspenso bootstrap. Vamos usar o STM anteriormente. Selecione Vou usar aqui. E aqui vou usar o nome da classe. Então, categoria. Precisamos definir o estilo em nosso arquivo CSS de ponto de índice. Vamos dar um menu suspenso de categoria suspensa linear de primeira classe . Vamos ter em matiz. Para isso também, vamos lidar com um método separado, ok, então, no valor da categoria teremos disponíveis apenas com a categoria. Dentro disso, teremos nossa primeira opção. Então, opções de fatos disponíveis a partir da luz solar. Selecione a categoria. Selecione a categoria. Depois disso, já definimos nossas opções aqui. Você pode ver lá no topo. Vamos mapear toda essa opção. Aqui. Podemos usar opções mapa de pontos. Vamos ter uma única opção. Vamos ter índice. Aqui. Vou usar a Option. E, na verdade, eu vou ter opção dentro desse valor será a opção. Você também pode dar isso em particular no GitHub preenchendo o valor existente. Vamos dar agora. Vamos dar-lhe um índice. Caso contrário, receberemos um aviso. Vamos fornecer isso em outro campo de entrada também. Então aqui também podemos dar detalhado com a Itália útil para popular o valor existente em cada campo de entrada. No caso de obter o blog distinto. Usaremos isso em particular. Se você não usar, receberá um aviso em um console. Criamos esse menu suspenso. Agora. Temos que trabalhar em nosso botão. Vamos dar um par de pausa aqui. Aqui. Vou usar MDB em dipolo btn com alguma largura. E vou usar algum estilo em linha. Vou dar margem aqui. E serão dez pixels. Aqui. Só vou dar e vamos copiar mais uma vez porque teremos um botão Voltar. Ele vai voltar. Vamos usar aqui cor, perigo. Vamos remover o tipo enviar. Não precisamos. Aqui. Vamos ter nosso método onclick. Mas, normalmente, se você clicar em voltar, então você nunca chegará à página inicial. Portanto, precisamos trazer a navegação de R. Precisamos trazer o polegar de navegação dos EUA ou o roteador React para baixo. Vamos derrubar esse roteador react. Para nos levar a navegar. E pulso nós empurramos em direção a esse parental. Use navegar para ele, navegue pela variável. Agora, vamos usar essa variável de navegação aqui. Agora, temos que definir toda essa função que está mudança de entrada e no Upload de imagem. Vamos definir este. Fora desta devolução. Isso receberá um e-mail. Todos. Assim, ambas as funções receberão barras X de evento aqui, upload atual do evento, upload, ele terá pilha aqui. Vamos primeiro verificar se podemos ver nosso componente de formulário ou não. Então, vamos para o navegador. Então, na categoria. Então, temos que definir const sobre a mudança de patrimônio líquido. Vamos definir este também. Vamos para o navegador. Este aqui. No arquivo de tipo de entrada do GitHub. Não precisamos fornecer o nome. Ok, deixe-me me livrar deste também. Nível também, não precisamos fornecer. Então, vamos nos livrar deste também. Agora vamos entrar no navegador. Então, nosso formulário parece bom aqui. Agora temos um pouco de trabalho, nesta categoria suspensa, ok, porque estamos usando nosso menu suspenso HTML simples aqui. Eu adicionei o nome da classe aqui. Você pode ver essa categoria suspensa. Então, vamos usar o index.js, CSS, falha em aplicar nosso estilo. Aqui vou pagar algum estilo. Então eu tenho esse vetor, algum código secreto para o nome dessa classe. Agora vamos para o navegador. Mas agora você pode ver que nossa lista suspensa de categoria quase parecia apenas um componente de design de material. Então, acabei de tentar o meu melhor para fazer o equivalente ao componente Bootstrap de design de material. Nosso formato foi concluído aqui. 11. Carregar imagens: Então, a próxima coisa que temos que basicamente adicionar o bloco. Então, antes de executarmos esse bloco de adição, então primeiro vamos trabalhar neste piloto. Ok, vamos para o blog.js adicionado. Vamos para a imagem Upload. E, no entanto, estamos recebendo o arquivo. Então, vamos primeiro log console de log do console aqui, Arquivo por local. Isso é um pouco desafiador. Então, vamos primeiro para o console. Vamos abrir nosso console. Então, vou colocar este console apenas no lado. Aqui. Vou fazer upload de uma imagem. Então, vamos fazer o upload de uma imagem. Agora você pode ver que temos nosso BY anteriormente e ele está contido em uma única área de objeto. Podemos fazer algo assim. Será sempre uma única matriz de objetos, para que possamos passar assim. Agora, vamos retornar ao navegador. Atualize, carregue esta imagem novamente. Agora você pode ver que temos um objeto aqui que continha o tamanho do nome, o tipo, todos contêm cinco vezes para trabalhar nisso na função Upload Image. Aqui. Vou ser particularmente bom aqui, como dados const. Novos dados, dados de formulário basicamente contraem um conjunto de pares de valores-chave representando pílula de formulário. Aqui, basicamente, estamos criando um par de chave-valor para o nosso Farmville que podemos interagir com nossa API do Cloudinary porque vamos manter nosso limite no Cloudinary. Temos que fazer uma solicitação de API e os dados do formulário são basicamente, podemos facilmente fazer solicitações HTTP com a ajuda de dados de formulário. Podemos fazer uma taxa periódica e podemos fazer upload de nossa imagem no Cloudinary. É por isso que estamos usando aqui a partir de dados. Agora, depois disso, temos que basicamente anexar. Então, adicione o ponto de dados do formulário. E aqui temos que dar chave e valor. Isso será dados de valor, apêndice de ponto. E aqui temos que definir nossa predefinição de upload. Então, será uma predefinição de upload. Aqui temos que passar nosso valor predefinido de upload. Portanto, já copiamos essa predefinição de upload durante a configuração do Cloudinary. Vamos colocá-lo aqui. Agora. Temos que fazer uma solicitação HTTP. Então, vamos usar x's e vamos fazer uma solicitação de API com nosso Cloudinary TP, APA dot, ponto Cloudinary. Em seguida, um sublinhado um. Aqui. Nós colocamos DB, nove, Q, C, D. Então, se você está se perguntando o que é isso? Então, se você está se perguntando o que é isso? Esta é a chave da API. Depois de criar uma conta no Cloudinary, você receberá sua chave de API. Então, vamos ao Cloudinary, e agora estou no meu painel. E aqui você pode ver que eu tenho o nome da nuvem. Eu usei esse Cloud negativo. Depois de criar a economia, você terá seu próprio nativo da nuvem. Portanto, não use esse nome de clado porque vou fazer neste nome de clado. Depois de fazer o upload deste vídeo, quero trabalhar com esse nome de nuvem. Acabei de copiar este. Vamos colocá-lo aqui. Então, não cometi nenhum erro. Agora que temos que fazer o upload de imagens. Depois disso, a UE já é o upload da imagem. Aqui podemos passar nossos dados. Agora. Nós obteremos nossa resposta, então vamos nos dissolver nela. Em seguida, método. Vamos primeiro colocar seu console, log de pontos do console, resposta. Será como vínculo. Então, vamos a forma de resposta do tipo de resposta. Primeiro, vamos fazer o upload de uma imagem. Vamos verificar o que estamos recebendo. Promova. Consulte este. Vamos fazer o upload dessa imagem. Aqui será comprada resposta. Em dados. Você pode ver lá que temos nosso URL. Se você copiar esse URL e vamos colá-lo aqui. Agora você pode ver que com esse URL, temos nossa imagem que carregamos. Então, vamos armazenar essa imagem. Você está vinculado em nosso servidor JSON. Eu usei o Cloudinary para este projeto porque no GSM Theta, mas você não pode carregar uma imagem diretamente. O motivo pelo qual estou usando o Cloudinary para este aplicativo. A próxima coisa que temos que fazer, vamos explodir este. Vamos para o código VS que possamos remover esse log do console. Podemos fornecer algum tipo de informação para usá-la, quer a imagem tenha sido carregada ou não. Então, informações de ponto da tocha. Depois disso, podemos dar a imagem carregada com sucesso. E depois disso, temos que fazer , vamos definir o valor do formulário. Vou espalhar nosso próprio valor. E eu só preciso atualizar o URL da imagem para que o URL e como podemos obter o URL da imagem. No entanto, temos que ir para esses dados de ponto de resposta, URL de ponto. Certo? Nós produzimos algo assim aqui. URL de ponto delta ponto. Vamos lidar com esse guia também. Então, se você tiver algum tipo de dados, digamos que algum tipo de notificação. E podemos dar nosso próprio método como se algo desse errado. Carregue o mito e pronto. 12. Adicione o blog: Agora vamos trabalhar nisso na mudança de entrada. Estamos recebendo o evento, o nome e o valor do nome do alvo. Valor, valor definido. Vou me espalhar no valor. Aqui. Será como nome, valor. E também vamos trabalhar nisso na categoria. Essa alteração de categoria também receberá até II. Depois desse valor de palma. Será como o valor do formulário. Aqui estamos apenas preocupados com nossa categoria de campo competitiva. Valor alvo. Vamos para o navegador. Vamos fechar este e vamos ver se somos capazes de digitar algo ou não nele InputField. Portanto, podemos digitar o upload já vimos, vamos selecionar a categoria. Também podemos selecionar essa categoria. Depois disso, vamos trabalhar no envio do nosso identificador. Lidar com envio. Primeiro, vamos fazer o evento les dot. Aqui, basicamente, estamos impedindo o comportamento padrão de um navegador no envio. Forma com pena. Se você apenas clicar nele sem fornecer o valor em cada campo de entrada, recebiremos uma mensagem de erro. E para essa categoria, não recebiremos uma mensagem de erro porque não estamos usando os componentes de design de material. Vamos fornecer nosso próprio método aqui até agora que já definimos o estado. Você pode ver isso aqui. Depois disso, o que temos que fazer lidar com o envio. Você pode tirar sua vida. Se você não tiver categoria. Em seguida, podemos definir o método da categoria. E o método será como lista, selecione a categoria. No momento do usuário, selecione a categoria no menu suspenso. Então vou definir essa categoria como nula. Então, vamos fazer isso aqui. Defina apenas métodos de erro de categoria como null. Vamos exibir esse método de erro. Abaixo deste select. Ok, vou colocar este select. O que temos que fazer? Vamos primeiro verificar se você tem o método de erro de categoria. Então vamos exibir isso. E aqui estou usando um nome de classe aqui. Então isso será tarde Caltech três. Corteva, meu rosto. Este nome de vidro que vou usar com div. Aqui vou para o método de edição de categoria e vou escolher o estilo para esses métodos de editor de categoria. Em terceiro lugar, esse arquivo CSS de ponto de índice. Vou ter minha categoria no nome da classe atmosférica e vou escolher o código CSF para essa classe. Isso está dizendo que vou aplicar o método de erro de categoria. Mas vamos para o navegador. Agora vamos clicar em Adicionar. Agora você pode ver que também recebemos a mensagem do item para a lista suspensa de categoria. E no momento em que você selecionar uma categoria, ela desaparecerá. E a mesma coisa que usaremos para cada edição e preenchimento. E não estou carregando a imagem para esse arquivo porque ele carregará novamente a imagem no Cloudinary. Portanto, não vou fazer o upload do desnecessário. Deixe-o lá. Agora, vamos adicionar nosso blog no servidor JSON. Temos que trabalhar neste envio do identificador. Vamos para o arquivo Editar blog.js. Dentro desse identificador, envie. Onde temos nossa alça em algum lugar. Aqui. Temos cem, duzentos. Então, dentro desse identificador em algum lugar, primeiro, vou levar que temos o título. Se você tiver a descrição, se você obteve a URL da imagem do nosso Cloudinary, e ela é. E se for categoria elétrica, somente você pode criar um blog. Este é o nosso primeiro carrapato. Depois disso, também vamos namorar enquanto criamos um blog. Então, precisamos de dados também. Então, custo. É legal ter que definir isso. Precisamos definir essa função em grande profundidade que são responsáveis por obter a dívida atual no momento da criação do blog. No entanto, vou colar algum código. Certo? Só estou esperando um código aqui. Neste código é necessário para obter a dívida atual no momento da criação do novo blog. Aqui, temos nossa dívida atual. Agora. Depois disso, produzimos nosso campo de formulário. Precisamos atualizar o valor do nosso formulário com essa data atual. Blog atualizado, objeto delta. E vou espalhar o valor do nosso formulário, como título, descrição e URL e categoria da imagem. Vou adicionar mais uma propriedade que está morta. No entanto, vou passar aqui. Dívida atual. Depois disso. Essas alças numeradas serão uma coisa porque vamos lidar com a APA aqui. Corresponde a um peso. Sim. Serão solicitações de postagem porque estamos adicionando um novo bloco, http localhost. E nosso servidor JSON está sendo executado em cinco mil. Cinco mil. Então já definimos esses blocos que você pode ver lá em nosso arquivo db.json. Então, todos os blocos serão armazenados dentro desses blocos nele. Depois disso, passaremos esses dados de bloco atualizados. Agora, obteremos uma resposta. Então, se deixarmos fontes de ponto status raiz quadrada para dois, não um. Ao fazer uma frequência ruim v sempre maior a nada um status de nossos portões AND e servidor. É por isso que estou levando aqui não quero declará-lo. Então eu achei que isso foi mal declarado. Então. Temos que obter o método de acesso como o blog que ele criou com sucesso. Sucesso ensinado. Aqui estamos atrasados. Blog criado com sucesso. E no caso de você ter algum tipo de melhor. Então, podemos dar um método como Bush, não material de erro. Gostamos que algo deu errado. Depois disso. O que vamos fazer em nosso projeto, vamos ser totalmente claros cada campo de entrada. Podemos fazer o valor do formulário. E o título será temporário. O campo de entrada do título, descrição terá empatia e a categoria obterá a entrada D. Vamos também na imagem que você adicionou, obviamente, você não verá esse URL da imagem, o UA. Vamos temperatura deste também. Depois de enviar o blog, queríamos navegar em direção à página inicial que possamos usar essa navegação. Ok, terminamos com a lógica de adicionar um novo bloco. Vamos entrar no navegador e criar nosso primeiro blog. Eu queria criar um bloco 4D. Então, xilogravura, podemos dar-lhe um blog de comida de pelúcia. Só vou terminar algum braço de carga. Se alguma descrição de conteúdo. Estou apenas colar aqui. Vamos selecionar um arquivo ainda, estou criando um bloco 4D, então vamos selecionar esta imagem. Temos aqui um método como imagem carregada com sucesso. Recebemos essas informações do nosso Cloudinary e é um quarteirão de quatro. Então, vamos selecionar a categoria para dn e vamos clicar em Adicionar. Considere o método como bloco criado com sucesso. Vamos verificar este em nosso arquivo db.json. Vamos colocar um arquivo db.json. E aqui você pode ver que temos nosso título, descrição, categoria, imagem, URL, morto e ID. Criamos com sucesso nosso blog cinco neste aplicativo. 13. Como trabalhar no Badge: A próxima coisa que vamos trabalhar em nosso componente em lote. Então, basicamente nesta categoria eu queria mostrar em um lote, um componente de lote, gênero de lote isso em um pouco aqui. Vou receber crianças. Disque quatro. Vou definir alguma chave de cor com base no objeto da categoria B. Então, para essa moda, então será uma viagem de parâmetros. E então vamos colocar esses esforços de acesso se encaixam na net fitness. Então, serão os feridos. Se for comida, então será avisado. Então, serão as informações. Esportes. Agora, vamos ter esse estilo para obter informações. Vamos usar aqui F5. F5. Depois disso, vou usar o MDB. E em terceiro, vou decidir com base na categoria, ok? Portanto, essa cor incorporada terá J e, com base nessa categoria, cor é calendrical para cor. Aqui podemos passar as crianças. Aqui estarão as crianças. Agora, vamos usar esse componente em lote dentro desse arquivo blog.js. Usamos tags P para que possamos usar o código VS do componente em lote importar automaticamente esse componente de baixo. Agora vamos para o navegador. Você pode ver que temos nossa bela cama para este blog de comida. A próxima coisa que eu queria executar a operação de exclusão. Podemos excluí-lo pertence. Então, para excluir o blog, vamos adicionar um blog aqui. Vou adicionar no teste do blog. Vou dar alguma descrição aqui. Vou fazer o upload de uma imagem. Vamos fazer o upload deste. Em relação à minha imagem carregada com sucesso. Vamos fazer o upload dentro dessa moda. Ok, vamos clicar em adicionar. Nosso blog foi criado com sucesso. Você pode ver que podemos ver em nossa página inicial. 14. Excluir o blog: Agora queremos que ele execute a operação de exclusão. Já definimos a função em nosso arquivo js de ponto inicial. Vamos para o arquivo js do ponto inicial. Aqui estamos recebendo o ID do nosso arquivo blog.js. E essa será a oitava coisa porque vamos fazer um pedido aqui. Dentro disso. Vou querer que o usuário, tipo, Tem certeza de que deseja que ele exclua esse blog? Sou uma espécie de mensagem para usá-lo antes que eles excluam este relatório. Então, nosso problema, você queria excluir esse blog. Algo como esse método que eu queria mostrar ao usuário. Quando o usuário clicar no bloco será diluído. Você pode simplesmente copiar este. Tudo, porque será semelhante apenas a solicitação desejará ser alterada. Então, forneça essa exclusão. Vamos fazer isso em um blog com base na ID. Então, vou usar a mochila aqui para que possamos passar a identificação. Depois de obter essa resposta, qual Theta é como 200. Isso significa que nosso blog é excluído com sucesso. Podemos dar-lhes dedos para o sucesso. Blogs excluídos. Isso diz totalmente, ok. Eu queria terminar os dados de látex para o modo ainda e terrível. Posso executar essa função. Bem, para buscar o bloco da ordem e servidor JSON e um L, o método será o mesmo. Vamos executar se somos capazes diluir um blog ou não. Vamos para o navegador. Vamos clicar neste ícone e excluir. Considere este método como a Audi mostrou que você queria excluir esse blog. E se você clicar em Ok, você pode ver que obtivemos um método como blog, excluído com sucesso. Operação de exclusão. Também atuamos. 15. Atualize o blog: Então agora temos que aparecer no irritante bloco do adjetivo. Portanto, se você clicar neste ícone de edição, ele navegará eticamente em direção ao adicionado com cinco, nós vamos preencher todo o valor existente em cada campo de entrada respectivo. Temos que atualizar o modo de filtragem, como o título será a atualização, bloco, o valor do botão será a atualização. E em caso de atualização, não vamos atualizar a imagem também porque não é possível preencher o valor do arquivo com a tag de entrada HTML. Portanto, preenchendo o valor do nosso arquivo, ele não é permitido com o arquivo de tipo de entrada localizado. Em caso de atualizações, não vamos permitir que o usuário atualize a imagem. Vamos primeiro trabalhar no preenchimento do valor de ejeção no respectivo preenchimento de entrada. Você pode ver que no URL, estamos recebendo o ID. Precisamos deste ID agora adicioná-lo blog dot js arquivo. Para adicionar isso, usaremos o param do nosso reator para baixo. Você respira. Podemos usar display LED. Use itens. Podemos detectar o ID que temos. Agora. Temos que fazer mais alguma coisa ainda. Temos que escrever um, usar o efeito primeiro. E aqui temos um estado predefinido determinará se estamos no modo imediato ou não. O modo. Mais. Será. Agora, se tivermos o ID, esse enorme efeito mais tarde, assim que tivermos o ID, temos o ID. Isso significa que usuários atualizam o bloco existente. Nesse caso, o que eu queria fazer, eu queria definir o modo de edição como prova. Queríamos buscar o único blog com base no ID. Dessa forma, poderemos preencher o valor em cada campo de entrada respectivo. Bloco único. Então, esta função vamos redefinir, obter um bloco mais fino. E aqui vamos passar o ID. Else marcado. Temos que fazer modelagem com um falso obviamente. valor firme também vai se ajustar. Será como o estado inicial. Agora vamos definir este blog singular para enfrentar o único blog com base no único ID do blog. E será a coisa porque vamos fazer uma lista periódica. Nós obteremos um único bloco. Nós obteremos, obteremos um único bloco apenas no objeto. Cs dot get. Aqui. Podemos simplesmente copiar isso para você que temos em nosso identificador enviar. Podemos colá-lo aqui. E depois disso, podemos basicamente definir valor. Serão dados de ponto de blob único. Vamos para o navegador. Agora você pode ver que somos capazes preencher todo o valor do adjetivo nele. Vamos produtivo e portfólio para esse ID do blog. Você também pode fazer uma pequena modificação aqui portanto, caso a API seja preenchida, então um único status de ponto do blog, Dois 100. Então só você queria definir o valor do formulário. Você pode resolver essa notificação para o usuário. Como se algo desse errado. Agora, será um veredicto. Você pode ir para a página inicial. Agora vamos clicar neste ícone Editar. Agora você pode ver que podemos preencher cada valor em seu respectivo campo de entrada. Agora temos que restringir esse upload, arquivar o GitHub, atualizar o blog existente. Registre isso não é possível com o arquivo de tipo de entrada. E temos que mudar esse título. Agora, adiciono um bloco para atualizar o vlog. O botão também será o GitHub nele de adicionar à atualização. Vamos fazer todas essas mudanças. Em seguida, atualizaremos o bloco existente. Retorno interno. Podemos determinar se ele não tinha feito mais do que será o bloco de atualização. Será o botão Adicionar. Além disso, podemos fazer a mesma coisa como se estivermos um pouco mais, esse usuário estiver operando o blog existente, caso contrário, isso está adicionando o novo bloco. E depois disso, o que temos que fazer, temos que restringir esse upload do arquivo de imagem. Aqui. Podemos verificar como se não estamos no modo de edição naquele mês você, ou seja, quando você o usa está adicionando um novo bloco. Então, nesse caso, eu queria mostrar isso. Vamos cortar este, colá-lo aqui. Aqui você pode usar, acho que fragmento. Vamos cortar ou menos coisa para aparecer. Agora vamos para o navegador. Agora você pode ver que no GitHub atualizando blogs, você não pode atualizar a imagem. Portanto, você só pode atualizar o título, a descrição e a categoria. O valor do botão também foi alterado e o cabeçalho também foi alterado. Agora, vamos clicar neste Adicionar blocos. Estamos recebendo esse arquivo de entrada, faça o upload da imagem. Isso está funcionando. Vamos continuar trabalhando na atualização do blog existente. Temos que trabalhar agora em manipulado um pouco. Então, no manípulo enviar, o que temos que fazer. Precisamos determinar se estamos no modo de edição ou não. Então, se você não estiver no modo de edição que quando o usuário está adicionando um novo bloco, podemos cortar todo esse pedaço de código e podemos colá-lo aqui. E isso também será cortado parte. Vamos basicamente atualizar nosso blog de rejeição. No entanto. Podemos simplesmente copiar este. Aqui. Não vamos passar esses dados um dia. Ele será aplicável apenas para adicionar o novo bloco. Aqui podemos simplesmente passar o valor do nosso formulário porque o valor do formulário já conterá e-mails, título, descrição, categoria, fez todas essas coisas. Também temos que determinar se estamos no modo de edição ou não. Portanto, a validação de imagem só terá cuidado no GitHub adicionar o novo bloco. Então, também temos que ajustar este. Então, contras, validação de imagem. Se você estiver tomando como se não estivesse no modo de edição, temos que fazer uma validação da imagem. Seja carregado ou não. Será a linha. Isso significa que não estamos fazendo uma validação de imagem no caso de atualizar o blog existente. Aqui vamos atualizar o blog com base no ID. Então aqui vou usar o vetor. E vou atualizar um blog com base no ID. Aqui estou passando formado pela regressão será o status. Estamos recebendo 200 e levantamos um prédio do blog do adjetivo. E a mensagem será obtida do bloco relacionado ao blog atualizado com sucesso. Em ambos os portões, como adicionar o novo bloco Albert interjecting blog. Queríamos, queríamos limpar o campo de entrada de calor. E depois disso, eu queria navegar em direção à página inicial. Vamos ver se eles são capazes atualizar o blog existente ou não. Então, vamos para o navegador. Mais rápido. Vamos para a página inicial. Vamos clicar no ícone Editar. Vamos atualizar o título. Blog de comida atualizado. Vamos clicar em Atualizar. Agora você pode ver que recebemos nossa notificação que está dizendo lá, bloco atualizado com sucesso e nós temos nosso apertado e nosso título foi atualizado de bloco de código para xilogravura atualizado. Também realizamos a operação de atualização. 16. Página de detalhes do blog: Agora, a próxima coisa que vamos trabalhar em nossa página de bloco único, então ela deve clicar em Modo de leitura. Então você navegará eticamente em direção ao bit de bloco único, onde poderá ler mais sobre este blog em particular. Agora, vamos trabalhar nesta única página do blog. Ou seja, vamos trabalhar nesta pasta de bloco de singletes. Então, vou inserir meu VS Code para trazer algum componente do nosso bootstrap de design de material. A partir de um bootstrap derivado N, precisamos trazer um componente. Vou escolher todos esses componentes aqui. Esse componente é necessário neste arquivo. Projeto de Material Problema, movimente a viagem. E também precisamos aqui usar o link paramétrico do nosso reagido após a cúpula porque vamos mostrar o detalhe único do blog com a ajuda do ID. Precisamos usar param. Vamos também trazer o link. Depois disso. Vamos trazer x aqui. X aqui é porque vamos fazer solicitação de API e permitir que eles tragam nosso componente em lote também aqui. Agora, precisamos trazer ganchos também, onde você acabou de usar o efeito. Defina um estado, defina o blog. Precisamos definir isso como terceiro aqui. Deixe que seja com pena. E depois disso, precisamos, precisamos esperar para pegar o ID que está vindo aqui no URL. Esse ID, precisamos desse propósito. Eu trouxe isso, use params. Nós adicionamos aqui. Agora, o que temos que fazer, podemos escrever um efeito dos EUA. Este usuário só será executado quando tivermos o ID no URL. Aqui, podemos verificar se temos o ID, depois o bloco único. Esta função vou definir agora, bloco único. Este será o pensamento disso. Vamos fazer disso uma coisa. Como Sevilha, porque faremos uma solicitação de API, a resposta é igual a x nenhum post. E aqui vou copiar o URL do nosso arquivo de bloco de ele adicionado. Ok, então vamos copiar este. Venha para o arquivo blog.js e cole-o aqui. Depois disso. O que temos que fazer, então você receberá a resposta em um único objeto porque estamos buscando o único objeto com base no ID. Aqui. Podemos fazer dados de ponto de set, blog e resposta. E aqui também você pode fazer mais uma coisa. Se o status do ponto de resposta. Se tivermos 200, essa solicitação será a boa não postagem. Porque estamos buscando os dados do nosso servidor JSON. Nesse caso, vamos apenas definir o bloco, desanimar nossos dados. E podemos receber alguma notificação para usar isso. Algo deu errado. Podemos dar método como se algo desse errado. Agora, depois disso, vamos formatar este. Agora, depois disso, temos que projetar um estilo em quatro por hora de marcação de crachá para. Aqui. Ele será exibido em linha. Por que estou fazendo isso e porque haverá um This tiling diferente que temos que fornecer para nosso componente de lote em nosso bloco único porque estamos utilizando o mesmo componente de lote para nossa página inicial também como uma única página de blog. Precisamos abordar algum estilo. Então, a partir desse componente, estou passando todo esse estilo. Margem esquerda cinco pixels, vai estar certa. Margem, topo. Vou te dar sete pixels. Agora, o que precisamos fazer aqui? Aqui podemos remover tudo isso. Podemos usar aqui, contêiner MDB. E dentro disso vou passá-los em estilo de linha. Será como borda, borda ao redor do nosso blog, um pixel. Então vou deixar, vou dar essa cor EB. Depois disso, vou te dar um link porque vamos voltar para trás e o link para ele não me deixaria voltar para a página inicial. Aqui vou usar tag forte com o nome da classe, hífen vazio três. E será como voltar aqui também, vou fornecer ladrilhos. Diga-lhe que vou te dar um carro alegórico. Ele será deixado. Vou te dar uma cor preta tradicional. Agora, após este link. O que temos que fazer? Então topografia MDB. Aqui, vou mostrar o título do blog. Blog. Temos que escrever como este blog, título do ponto do blog. Você receberá um erro. Vamos ver se podemos exibir isso no título do bloco ou não. Vamos para o navegador. Recebemos o título do nosso bloco, isto é, para o blog atualizado. Agora precisamos estilizar este também. Topografia Mdf. Aqui, vou dar tag, nome da classe. Vou dar aqui será Bootcamp como pneumonia ou texto, silenciado, md, hífen ao estilo. Vou dar algum bloco de idioma que será exibido em bloco em linha, bloco . Agora vamos para o navegador. Isso está parecendo bom. Agora, depois dessa topografia MDB, o que temos que fazer, então vou ter uma imagem aqui, então vamos exibir a imagem após o nosso título. Aqui. Todos os tipos estão presentes em um bloco e é um único objeto. Assim, podemos escrever assim, um URL de imagem de ponto de blog, blog e blog para ver. E podemos dar um nome de classe aqui como fluido de imagem, arredondado. Certo. Podemos dar-lhe L. Só podemos dar esse título. Então, vamos copiar este. Cole-o aqui. E podemos dar a alguém um azulejo. Esta tag de imagem. largura será 100% e a altura máxima será de 600 pixels. Vamos ver como nossas imagens se parecem. Parece bom. Agora, vamos voltar ao código VS. Depois disso. Vou ter div. Vou fornecer alguma margem de ladrilhos, topo. Vou fornecer algum limite de margem de assentamento interior. Vamos nos virar para pixels. Vou ter mais uma div. Esta altura do bloco, fundo de 43 pixels. Posso dar aqui F6, F6, F6. E então vou usar o MDB. Mbb. Vou ter um estilo, então será flutuante, à esquerda. Nome da classe. Vou dar-lhe o ícone md hífen três. Vou usar o ícone aqui como Calendário, árabe. Então, basicamente, estamos exibindo os dados. Blogs. ícone do calendário estará lá ao vivo. Então, estou lhe dando energia. Depois disso. Vamos ter um ponto forte no qual vou classificar o blog de dados, blog, blog. Em terceiro lugar, isso, vou fornecer alguns ladrilhos novamente. Vou dar margem esquerda flutuante, topo. Margem, superior será de 12 pixels de margem esquerda pixel. Depois disso, vou usar nosso componente ruim. Eu já importei esse. Dentro disso. Vou fornecer a categoria de pontos de blog e blog. Aqui precisamos passar nosso estilo de azulejo Info. Informações do ladrilho. Podemos verificar este. Parecia. Parece bom. Agora, abaixo disso, vou fazer Dale até esse conteúdo de bloco. Depois desta cama. Coloquei isso, vamos ter tipografia MDB. Vou usar o nome da sua classe, nome da classe, md, hífen. Aqui. Vou dar ao blog. Blog. A descrição do ponto está falhando corretamente, então será descrição. Vamos para o navegador. Role para baixo. Agora temos nossa descrição para este bloco. Concluímos esse único bloco isso também. 17. Mostrar o blog de forma relacionada.: Agora também temos que exibir as postagens relacionadas a essa categoria. Vamos fazer isso. Até agora vou criar um par de blogs. Vou criar mais um bloco como teste para cães. E vou escolher o conteúdo aqui. Então, vou selecionar um arquivo aqui. Então, vou selecionar este, desta vez. Considere o método como a imagem carregada com sucesso. Vamos selecionar categoria como comida. Agora vamos adicionar isso está recebendo ar. E vou adicionar mais um bloco com uma categoria diferente. Então, vamos adicionar esse também. Então, vou fazer o upload de um parente de sangue para fazer o blog, vou fazer o upload, Vamos colar a descrição, selecionar a imagem. Vou usar este. Agora vamos selecionar a categoria. Ele será marcado. Vamos clicar em. Os detalhes também estão chegando. Agora. Vou soldar relacionado com essa categoria de bloco, que é comida. Até agora, também precisamos fazer mais uma chamada de API. Então, vamos fazer isso 1. Primeiro. O que precisamos fazer aqui, vou encontrar um que seja relacionado, relacionado ao blog. Tudo o que você vai definir postagem relacionada aqui. Normalmente declarado estará lá e serão dados de entrada. Agora depois disso, o que temos que fazer? Enquanto obtém o bloco único? Também vamos filtrar a postagem relacionada. Então postagem relacionada ao custo. Aqui. Podemos dar a ele como relativo para dados, ok? Isso não fará confusão. Mão ainda. Você pode fazer como esperar. X aqui não é bom. Podemos usar esse URL. E em vez de usar RD, vamos usar ponto de resposta leve, categoria de ponto de dados de ponto. Esta resposta para particular contendo um único objeto no qual teremos descrição do título, URL da imagem da categoria. Podemos acessar a luz da categoria desta forma. E faremos outro líquido ABI com a Itália se encaixar toda a placa relacionada à categoria Ford. Então, basicamente, aqui ele enfrentará os dois poemas que temos em nossa página inicial. Aqui você pode ver que temos um blog relacionado à categoria de alimentos. E se você clicar no modo de leitura, então aqui, basicamente você está fazendo uma solicitação de API para obter o único blog. E, ao mesmo tempo, também estamos fazendo as solicitações da API para obter os dois relacionados a essa categoria de alimentos. Mas, normalmente, ele preencherá o blog do quadro. O que podemos fazer aqui, post relacionado aqui se pudermos fazer como dados relacionados, dados de pontos. Agora, na porta relacionada, temos dois, então apenas um blog. Não queremos que ele exiba o bloco, então vamos ler este. Algo não está funcionando, certo? Não está funcionando. Precisamos fazer um ano ou condição. E também podemos pegar os dois dados relacionados tardiamente. Dot é theta 200. Então podemos definir isso. Vamos para o navegador. Atualize este. Então, não estamos recebendo nada. Então, será categoria. Estamos cometendo um pequeno erro aqui. A categoria é chamada de fazer assim. Então, somente você terá seu blog relacionado, relacionado a esta quarta categoria. E nós só queríamos classificar três blog na quarta área relacionada à cabeça, podemos usar o comercial e começar a ir para 0% n é igual a três. Nós apenas preencheremos as três partes relacionadas a essa categoria específica. Agora, vamos para o navegador. Está funcionando conforme o esperado. Agora vamos exibir os dois relacionados abaixo o que temos que verificar. Se eleito e comprimento de ponto maior que 0. Então, só temos duas postagens relacionadas. Aqui. Vou usar a tag H1. Será como o cabeçalho do post relacionado. Vou colá-los Theta h fortemente relacionados a essa tag dentro deste estilo de arquivo CSS de ponto de índice. Vou entregá-lo aqui para uma etiqueta. Você pode copiar todo esse estilo pausando este vídeo. Espero que você tenha copiado tudo isso que ladrilhos. Se você for ao navegador, não refletindo nossas alterações. Vamos salvar esse arquivo. Não salvamos esse arquivo. Vamos para o navegador. E agora aqui você pode iniciá-lo. Temos nosso cabeçalho de porta relacionado. Mas quando esta linha horizontal, depois disso, temos que mostrar postagem relacionada. No entanto, vou usar a linha MDB com o nome da classe. Então, vou usar a linha do nome da classe. Ligue, divertido. Em seguida, desenhe chamadas D três, D quatro. Aqui. Vamos usar fragmento. Caso contrário, continuaremos recebendo esse erro. Deixe cortar este. E aqui vamos ter nosso mapa de ambas as portas excluído. Podemos ter índice de itens. Podemos usar aqui o MDB chamar isso, que podemos usar. Mbb pode usar seu link. Aqui. O que temos que fazer daqui também, você nunca pode ir para uma única base de blob. Então eu estou especificando que você já. Sim. Então, aqui podemos dar ID do ponto do item de identificação abaixo deste link que posso usar imagem do cartão MDB, MDB. Podemos ter fonte, imagem de ponto do item, URL. Podemos dar-lhe um título de ponto semelhante, posição. Vamos dar o topo. Clicando em e-mail. Você nunca chegará ao bloco único. Mas só podemos ter algum corpo do cartão IMDB de conteúdo. Dentro disso, posso usar o título do cartão MDB, como o título do ponto do item. Então você pode ter o cartão MDB. Este será o texto com o texto. E aqui podemos usar a descrição. Aqui novamente, vou usar x. Vamos trazer esse método home dot js file, etc. Precisamos aqui. E vamos copiar essa lógica. Deixe qualquer coisa ir para a página do blog. Vamos para o navegador. Então, agora você pode ver que estamos recebendo nossos relacionados, ou você pode notar que estamos recebendo este blog também. Sob isso relacionado, não queremos isso, este blog aqui porque já estamos nesse rosto. Não queremos que ele exiba este blog sob os dois relacionados. O que podemos fazer aqui. Podemos criar trecho. Vamos te dar um cativo. Vamos para o navegador. Podemos dar segurança ao redor. Isso vai ser bom. Certo. Não queremos que ele exiba este blog sob o relacionado porque já estamos neste blog. O que podemos fazer? Podemos aplicar um filtro. Depois disso. Podemos usar filtro. Podemos pegar aqui item, ID do ponto do item. Se não for atendido, então queríamos. Então, todo esse ID do blog não é atendido. Ele filtrará automaticamente esse blog. Você pode ver que agora não conseguimos ver esse blog. Nós filtramos. E se você for para a página inicial, se você clicar nesta, leia mais. Agora, aqui não temos relação para, então não queremos que ele exiba esse título adulto. Se você não tiver nenhuma porta relacionada a essa categoria, pegue se você não tiver nenhum blog relacionado a essa tag de categoria, então, essa ABA sempre retornará a única área do objeto. Podemos escrever uma lógica aqui. Vamos cortar este, cortar esta parte. Podemos verificar novamente se relacionado ao comprimento do ponto maior que um. Isso significa que temos mais blog relacionado a essa categoria. Então, nesse caso, queríamos mostrar esses blocos sob as postagens relacionadas. Aqui, você pode dar como um post relacionado. Vamos para o navegador. Agora você pode ver que não conseguimos esse título porque, porque não temos nenhum blog relacionado a essa categoria. E se você for para a página inicial, se você clicar nisso, isso está funcionando conforme o esperado. Estamos recebendo um ponto relacionado para essa categoria de alimentos. E se você clicar neste bloco, você navegará até esse pagamento de bloco único que é o blog da Ford atualizado. Agora você está na atualização do blog de alimentos. Você pode ver o título aqui. Você também pode alternar entre este blog dessa maneira. Isso está funcionando agora. Concluímos essa funcionalidade também em nossa única página do blog. 18. Pesquisar no blog Blog: Agora temos que trabalhar em nossa estratégia. Componentes. O usuário também pode iniciá-lo blob. Vamos fazer isso. Uma parte que vou criar um arquivo sob o componente. Essa será a busca. Sim. É daqui a pouco. Para trazer o componente de botão do nosso material, então ambos viajam. Vamos trazer esse vídeo MDB. Vamos receber algumas gotas do componente doméstico. Isso será leve. Valor na entrada, alteração, valor de status na cadeia de entrada. Esses três prompts, se quisermos receber do nosso terceiro componente. Aqui, vamos ter div com o nome da classe. E depois disso vou usar o componente de formulário. Não precisamos de ação. Podemos dar um nome de classe como d hyphen flex. Podemos ter em algum MIT. Mit, podemos dar-lhe lidar com as vendas, que obteremos deste formulário. Vamos ter uma entrada com um nome de classe será o controle de formulário. Por favor, peça que podemos lhe dar um primeiro blog. Podemos ter valores. Vou escolher esse valor, que manteremos o componente pai que está em casa. Vamos formatar este. Agora vamos ter em mudança. Vou usar esse método ainda na mudança de entrada, vou ter um botão MDB mediana será o terceiro, será o Primário. Primário. Não precisamos especificar a cor. Lá, estará em algum lugar. Agora, vou escolher o estilo dessa classe no arquivo CSS de ponto de índice. Vou apostar que o estilo para o nome da classe, que é formulário de pesquisa. Este hit dizendo-lhe para dar um nome de classe satisfatório. Agora vamos para o arquivo js de ponto inicial. Vamos exibir nossa entrada de toque aqui. Vamos trazer esse componente satisfatório. Agora vamos para o navegador. Parece bom. Agora, temos que trabalhar neste suporte que estamos passando para o nosso terceiro componente, a moda. Vou definir um portfólio de 13 estados. Vamos definir seu valor. Conjunto. O valor usa o terceiro método em beleza. E aqui temos o valor de comprimento pré-especificado. Só ficará satisfeito. Em seguida, coloque dez. Então, qual ano ser definido? Temos lidar com doenças de serviço também. Também precisa definir a entrada? Entrada, alteração. Ele receberá um evento. Podemos detectar o conjunto de pernas, ou seja, valor ponto, valor de ponto. Depois disso, o caminho é um. Defina um manipulador. Eu disse que você acha. Você evita o padrão? Evite o padrão. O padrão pode navegar. Vamos fazer um pedido, sim, então const bonds e eu podemos simplesmente copiar este. Determinante menor de um é necessário. Então, vamos copiar este. Camada de usuário. Eu moveria toda essa coisa minuto a caminho. E, no entanto, temos que passar na fila. Se obtivemos o status de resposta com 200, terminamos. Em seguida, vamos definir os dados. Definir dados. Vamos usar os segundos dados, dados de resposta. Então eu não usei como se algo desse errado. Certo, vamos copiar este. Vamos usá-lo aqui. Agora. Vamos ao navegador. Temos alguns desaparecidos aqui. Temos que fornecer aqui um pouco. Isso também receberá um evento. Agora, vamos para o navegador. O Fed é um. Agora vamos definir o bloco para que não recebamos marca cruzada aqui literalmente em nossa entrada primeiro. Então, o que podemos fazer, podemos dar-lhe um terço eternamente. Agora vamos para o navegador. Atualize este. Agora vamos começar com ditar novamente. Estamos recebendo este e se você clicar nesta cruz, ela será limpa. Assim que for apagado, queremos que ele carregue todos os dados que temos em nosso servidor JSON. Isso o que podemos fazer, vamos para o VS Code. E aqui o que temos que fazer, podemos verificar se você não tem valor. Então, valor de ponto alvo de ponto E. Nesse caso, queríamos apenas carregar ou dados do Lovelock. Agora vamos ver, isso está funcionando ou não. Então, vamos defini-lo com esse tempo assim. Então, estamos recebendo esse bloco relacionado ao saboroso. E se você clicar nisso, o cruzamento será limpo e vamos baixar nosso bloco e o servidor turno está funcionando. 19. Mostrar o blog de categoria: Agora, a próxima coisa que eu queria basicamente obter o blog onde a categoria de conduta. Quero uma categoria aqui. Vamos fazer isso. Vou criar um arquivo e head é componente para essa categoria. Dot js. Vamos centralizar isso não é um pouco. E isso foi basicamente receber alguns prompts da nossa página inicial. Portanto, lida com opções da categoria um sobre t de n do Material Design reservado para trazer algum componente do MDB que você gostaria. Para trazer MDB, MDB, grupo de listas, MDB, item de grupo de elevação. Aqui, em vez de div, teremos cartão MDB com algum estilo de aprendizado. O estilo, vou dar-lhe uma margem de rampa de matiz. Vou dar célula típica aqui e vou ter tags, categorias. E então vou usar o grupo de listas MDB. Vou passar um pelúcia. Ir para o mapa são todas opções. Mapa de pontos de opção. Vamos obter o item. Depois disso, teremos nosso item do grupo MDB LET no qual mostraremos toda a categoria. Podemos lhe dar um item. Vamos fornecer o estilo de índice de chave. Vamos lhe dar crédito, senhor. Onclick. Onclick. Onclick. Vou usar esse método que é tratado com a categoria. E vou passar o item. Aqui temos este. Então, vamos remover este. Fazendeiro este aqui. Agora, vamos para o arquivo js do ponto inicial. Aqui. Quando participou da opção. Já definimos aqui. Vamos copiar este. Vamos para o arquivo js do ponto inicial. Aqui. Podemos usar esse componente de categoria aqui e abaixo desta coluna. Oh, podemos ter mais uma coluna. Com o tamanho três. Aqui podemos usar o componente de categoria, ver todos os componentes importantes de código automaticamente. E aqui podemos passar nossas opções que definimos. Um estado enorme. Você pode ver isso aqui. componente Crawdaddy é importado automaticamente do VS Code. Vamos primeiro entrar no navegador. Você pode ver que temos nossa categoria. Certo? Esta categoria será fatalmente diminuindo, porque aqui teremos nosso quarto componente. Vamos marcar neste componente de categorias. Queríamos obter a porta com base na categoria diferente. A próxima coisa que podemos fazer aqui é que precisamos definir um método. Aqui. Estamos passando este também, lidar com a categoria. Vamos definir este. Terços são devolvidos. Pode ser qualquer coisa. Aqui. Podemos fazer uma chamada de API, a chamada resposta. Já usamos essa API relacionada a categorias. Então, vamos para o arquivo blog.js e podemos usar este. Vamos copiar isso. Cole-o aqui. Vamos ao dever de casa. Sim. Vou usar um x ts estranho aqui. Vamos vê-los mover tudo isso. E vamos receber um componente de categoria de categoria. Podemos embalar a categoria aqui. Agora, aqui, não marcamos status do ponto de resposta 100. Em seguida, vamos definir os dados, definir dados de pontos de títulos delta. Vamos resolver os mesmos métodos como se algo desse errado. Alguma coisa correu. Agora, vamos ver se está funcionando ou não. Agora, vamos obter o bloco com base na categoria. Então, estamos recebendo apenas um blog de comida. Se você clicar em, estamos recebendo apenas blog de tecnologia. Agora, o que vou fazer, então cinco, vou adicionar mais um blog aqui para que possamos implementar a funcionalidade, como deixar derramar essa vasodilatação. Então, precisamos adicionar mais um blog ainda. Também está funcionando. E você pode ver que temos o amigo de cor por hora. Criamos um total de seis blocos. Vamos adicionar mais um bloco. Em circuito. 20. Mostrar o último blog: Agora, a próxima coisa que queríamos mostrar o bloco apresentado em nosso aplicativo. Sempre que o usuário adicionar um novo bloco. Então ele aparecerá neste lado e só vamos exibir apenas para, deixe-nos Bloc criado pelo usuário. Porque mais tarde teremos uma paginação. Portanto, durante a paginação, apenas cinco blogs serão exibidos. Isso exibirá o pedido. Você não poderá ver o blog grande. E para o grande bloco Theta, temos que basicamente pegar a página Hale-Bopp em essência. Você também pode fazer com essa paginação se quiser ir ao blog. Mas o último bloco também podemos mostrar aqui em nosso componente de bloco. Então, vamos implementar esse. Vamos para o código VS. Vou ter luz competente. Blog dot js. Primeiro, menos do que o gênero é daqui a pouco. Aqui. Precisamos trazer o componente. Sou um DVD acionado pelo MDB. Rejeite o thread da interface do usuário quando a TI traga algum componente relacionado ao cartão, MDB, linha MDB, coluna MDB, MDB, corpo do cartão MDB. Também queríamos trazer a importação do link do Dr. para baixo. Precisamos trazer esse link. Aqui. Vamos receber imagem proxy. Você adicionou a categoria de ID de maré. Depois disso, vou usar o link. Também queríamos navegar em direção ao bloco de cantor pago com base na identificação. Sou nossa seção de blog, blog. E temos o ID de falha do Fitbits. Depois disso, vou usar os componentes do cartão, então o cartão MDB. Vou usá-los em estilo de linha aqui. Max verte. Vou te dar 300 pixels. Vou dar aqui um típico que vou te dar um nome de classe bootstrap que estará vazio. Acontece com isso como marketing. Depois disso, vou usar a linha MDB com a platina G 0. Vou ser usado aqui coluna MDB. Vou te dar um MD. E aqui vou usar a imagem de guarda MDB. Aqui. Vou dar fonte que é imediatamente herdada. Podemos usar o título. Podemos lhe dar um nome de classe, podemos dar-lhe um arredondado para fazer a imagem ao redor. Podemos dar algum estilo em linha aqui também. Vamos dar a altura. Ele retrata um solitário. Certo? Depois desta coluna MDB, MDB, podemos dar MD nove. Podemos usar aqui papelão MDB, no qual posso ter uma tag p com o nome da classe. Então deixe-nos o título. Vamos titular. E será apenas como título, que estamos recebendo da nossa página inicial. Somos predefinidos o ladrilho. Mas essa classe talvez em nosso arquivo CSS de ponto de índice. Vamos para o arquivo CSS de ponto de índice. Vou lançar algum estilo aqui. Vou dar essa telha. Depois disso. Vamos para o arquivo js do ponto inicial. O que podemos fazer. Então, primeiro vou definir um estado aqui. Qual será a cola segurando o último blog. Blog. Deixe-nos blob aqui. Em terceiro lugar, use vetor. Podemos ter pouco funcional como buscar mais recente, blog. Agora temos que definir essa função. Vamos definir apenas. Vamos, vamos blogar isso um pouco de uma coisa. Aqui. Nós literalmente o que queríamos fazer, queríamos terminar o último disco de quatro. Queríamos criar um status de API, se ele se encaixará em toda a sua luz para blogs. Sempre que o usuário adicionar um novo bloco, ele se encaixa na luz blog que vamos exibir aqui. Ok, até agora que temos que basicamente fazer algum ajuste na APA do nosso servidor. Então, primeiro precisamos do bloco total. Bloqueio total como podemos obter, podemos simplesmente copiar este. Isso é responsável por obter o blog do portal. Agora, aumentamos com a estrela Feather dez e começamos como dados de ponto do blog do portal, comprimento do ponto menos quatro não será nada, mas será apenas o comprimento total do ponto do blog. Temos que especificar largura e dados. Agora temos nosso início e fim. Temos que escrever respostas da API. Então, novamente, vamos usar este apenas. Mas desta vez vamos modificar essa API. Então, vou usar suas costas. Depois disso. Vou começar e começar. O mesmo conceito que vamos usar para as necessidades dos nossos pacientes. E também. Vamos especificar seu fim também e o valor. Vamos colocar aqui dólar. Agora. Podemos simplesmente copiar este. Podemos dividi-lo aqui. Queríamos definir esses dados em um blog. Agora isso vamos, vamos ver o que está recebendo. Receber IV é ID de URL e categorias. Então, categoria que não precisamos aqui. Então, vamos remover este. Vamos para o arquivo js do ponto inicial. E depois disso, o que temos que fazer, vamos descer. Em terceiro lugar, esta tag de coluna. Vamos ter R, vamos cutucar nosso blog. Vai usar como para tag. E será a última aula de post. Então vou te dar uma mensagem. Para começar. Aqui. Podemos ter luz. Vamos, vamos conectar o mapa de pontos. Vou ter um índice. Aqui. Eu posso trazer à tona, vamos traçar o componente, a Guerra do Vietnã automaticamente importante componente. Aqui podemos usar a chave. Aqui podemos apenas espalhar todos os itens. Podemos estruturar em nosso componente de bloco dessa maneira. Então, aqui precisamos apenas de imagem, URL, título e ID. Você também pode cavar textura, outra categoria e essa categoria e descrição, mas para esta publicação não é necessária. Vamos para o navegador. Agora aqui você pode ver que temos nosso vamos postar. Certo? E se você clicar neste, este também, você pode navegar em direção a um único bloco. Isso está funcionando, parece que implementamos o widget também em nosso aplicativo. 21. Paginação - Parte 1: Então, o último recurso é a perna esquerda. Para implementar a paginação. Na paginação, queríamos exibir apenas os cinco blogs, mas vamos ver como vamos implementar este. Vamos para o VS Code. Cinco. Vou criar um componente no componente de hoje para que paginação se origina e dot js. Vamos deixar aqui um trecho para paginação. Aqui a janela para trazer algum componente do nosso ativo eu poderia implementar a paginação de MDB, MDB, MDB, MDB, Basie, link de nação e MDB buteno. Podemos fazer algum prof. que vamos receber do nosso componente pai. Ou seja, ele receberá o limite de página atual. Então ele não pode receber um delta de blocos de carga, ok? Dados e blog total. Aqui. Vou definir uma função e essa renderização. Vou verificar como se temos a página atual que está em 0, então temos o botão Avançar para navegar em direção à página diferente. Aqui. Vou escrever como página IMDB. Vai ter um centro. Vou usar mb hífen 0. Vamos ter o item de paginação MDB. Em seguida, link de paginação MDB. Vamos remover esse extra. Ele estará abaixo. Aqui, será um. Agora, vamos ter mais um item de paginação. Vamos bombeá-lo. Dentro disso. Vamos ter nosso botão. Dentro disso. Vamos ter nosso botão aqui. Vou usar o botão MDB e btn será arredondado. Vou ter onclick. Onclick. Estes serão os dados de blocos de cargas. O valor do nosso botão será o próximo. Agora, temos que verificar uma condição como se quisermos verificar uma condição como período latente atualmente menos um limite de comprimento de ponto delta . Eu queria, então o botão de aula anterior, então ambos os botões que eu queria exibir. Nesse caso, podemos simplesmente copiar este. Podemos simplesmente assumir aqui. Aqui temos que fazer algum ajuste. Aqui, o valor voltará. Certo? Aqui estou o link de paginação MDB não é necessário. Então, primeiro vamos mover este. Aqui. Também precisamos aumentar a página para que possamos cortar isso e podemos usar aqui a partir daqui também. Não precisamos de link de paginação de página, então vamos remover este. Aqui. Seja qual for o pagamento atual , ele receberá ingrediente. E o valor do botão será o anterior. Mais uma vez, vamos ter mais um. Item de ação de paginação. Só vou copiar este. Vou colá-lo abaixo deste botão de paginação. Chegaremos perto aqui. Vamos copiar este. Vou cortar este aqui. Essa regeneração. Mas então e este item de paginação. Chegaremos perto aqui para que possamos remover este. Aqui, ele estará lá. E acho que é isso. E vamos ter uma outra condição em que haja alcance para a grande grade. Então, nesse caso, eu queria mostrar o número da página e o botão anterior. Então, podemos simplesmente copiar essa coisa inteira novamente. Antes de copiarmos, temos que colocar em troca, caso contrário, não será vertical. Então, vamos copiar essa coisa toda e colocá-la em troca. Agora, dentro disso, queríamos classificar o botão anterior junto com esse número de página. Podemos copiar este. Podemos pagar dois níveis será paciente IMDB. Portanto, precisamos fornecer esse suporte de fechamento quando a TI fornecer essa etiqueta de fechamento. E também precisamos colocar em Thaddeus retornar, caso contrário, não lhe mostrará. Vamos copiar. Vamos cortar este. Podemos simplesmente fazer paginação de renderização. Em outubro com a geração P. Temos que fazer algum ajuste em nossa APA existente. Queríamos classificar o blog cinco por página. Ok, então a partir daqui vamos fornecer a eles o valor padrão 05. Isso é n e esse detalhe em maior valor de grau. Por padrão, estamos buscando os cinco blocos por página na página inicial. Agora não podemos usá-lo assim. Então, temos que fazer como diferir. Podemos fornecer nosso valor inicial e final. Aqui será o fim. Estamos recebendo enquanto esse valor daqui, 0 e aumenta. Certo? Depois disso, o que temos que fazer, temos que fazer atual, ok? Temos que primeiro definir essa terceira configuração distante. A página atual será atual. Este será o g. Nós vamos ter não monitorado para o limite de página. Limite. Queríamos exibir os cinco blocos por página. E também teremos mais um estado definindo o comprimento total do bloco. Ok, então vamos colocar este. Este será um blog total. Blog. Isso poderia ser nulo inicialmente. Agora, temos que definir a página atual. Podemos dar-lhe um bit atual mais aumento. Agora, vamos primeiro para o navegador. Agora você pode ver que somos capazes de ver apenas cinco blocos, mas ele paga. Agora temos que trabalhar em nossa paginação. Então, qualquer coisa que já criamos. Agora o que podemos fazer aqui, tão rápido, vamos para a parte escrita. Depois da coluna db. Md Bureau, vamos ter mais uma div com o nome da classe hífen vazio três. E, em vez disso, esta classe, agora, vamos trazer a paginação. Vamos ver. Negócios e está mostrando ou não, temos o negócio e , atualmente, não estamos fornecendo nenhum valor. Então, vamos fornecer esse valor. Blocos de carregamento de página atual, dados, carga e blocos e dados. Você tem que fornecer. Em seguida, limite os dados também precisamos fornecer que somos chamados para fornecer a rede de blocos total. Quanto sangue temos em nosso arquivo db.json, porém, é isso que podemos fazer? Então aqui estamos recebendo estão todos os blocos. Então, aqui podemos dizer o blog total. Aqui podemos ouvir, podemos fazer dados totais de pontos do blog, comprimento do ponto. Esta função sempre a executará porque colocamos dentro desse efeito de uso dessa maneira. Mas espero que possamos obter a duração do blog trimestral que temos em nosso arquivo db.json. Agora podemos passar este também. Blog total. Então, vamos ao navegador, atualize-o. Agora, esse natural não funcionará como esperado porque precisamos fazer algum ajuste também. Em nosso componente de paginação. Vamos para o componente de paginação. Aqui o que temos que fazer, temos que fornecer algum valor padrão novamente a partir desse bloco de carga theta porque essa API foi modificada aqui, você pode ver que temos que fornecê-lo em 3D. Para esse cenário. Temos que passar os próximos cinco quarteirões. Vamos começar clicando no botão Avançar. E vamos aumentar o pH. Para esse cenário. Temos que passar por esse caminho. Aqui com feio, estamos indo para trás. Então aqui podemos dar a Página Atual menos 15. Temos dois caminhos como este, lance atual e B25. Estamos indo para trás, então temos que fazer em decréscimo. Então, temos que fazer um decremento menos um. Agora aqui, o que temos que fornecer, então vamos copiar este. Cole-o aqui. Aqui nós normalmente estamos indo de novo. Em seguida. Temos mais um blog. Aqui o que podemos fazer. Então, vamos remover isso extra rápido, e aqui será o atual mais um em cinco mais para colocar este no suporte também. E faça cinco. E desta vez que temos fazer para esse cenário ou esse cenário que podemos fazer, podemos passar isso em cola porque funcionará da mesma maneira. Agora, vamos para o navegador. Para este. Temos a página um e temos o botão Avançar. E temos a página de guarda h2. E não temos mais blog. Estamos chegando aqui botão anterior e temos que blogar ainda, ok. 22. Paginação - Parte 2: E também temos que fazer mais alguns objetos neste componente de paginação. Então, aqui estamos tomando como se eu não tivesse a página atual, ou seja, 0 e o comprimento dos dados é menor que três, é menor que cinco, então não queremos. Então, os componentes de visualização colocados, vamos colocar mais um suporte porque vamos ter um motor, nossa condição, nosso engano, a única condição, isso significa que se estivermos no período atual, ou seja, de 5 bits, temos o arquivo de alongamento do blog. Então, nesse caso, não quero isso para o componente de paginação. E para a segunda condição, o que vamos mudar. Então, estamos recebendo o blog do portal, então o blog total, mas eles não fizeram nada, mas é lá o comprimento do bloco que temos em nosso arquivo db.json. Então, no momento, temos sete blocos. Você pode ver isso por bloco neste espaço e bloquear. E depois, temos o blog Steven. Podemos verificar se o blog total é menor que o limite d dt, desculpe, o blog é igual ao limite. Isso significa o que estou tentando fazer aqui. Então, suponha que tenhamos apenas cinco blogs em nosso arquivo db.json. Então, nesse caso também, eu não quero que ela classifique a página em certo sentido, porque se você clicar em Avançar, você receberá um espaço em branco. Nesse caso também, eu queria evitar soldar componente vasodilatador. É por isso que estou tomando esse cenário. À medida que abordamos nosso assunto, estamos levando mais 5 bits apenas, não outra base. Nesse caso, eu queria apenas fazer isso. Nenhum. Vamos para um navegador. Você não é alterado aqui até excluir nenhum blog. Exemplo, se eu excluir os dois blocos e se eu excluir este, o blogueiro será excluído. Mas estamos recebendo algum problema. Por que estamos recebendo esse problema porque diluindo os dados do nosso arquivo js de ponto inicial. Também estamos criando o blog com essa carga bloqueada e diga aqui também temos que passar o argumento. Então, o que temos que fazer? Então, vamos fornecer, novamente, o valor padrão. Então, queríamos começar a partir de 5050 e também temos que fornecer mais uma operação adicional, como delete. Certo? Então, com a ajuda desse argumento, vamos definir o caminho atual para o valor inicial. Então, precisamos deste. Vamos para a função de dados de bloco de cargas. Aqui. O que temos que fazer aqui com feio, podemos passar o argumento da operação Lake. Dentro disso. O que temos que fazer. Então, depois de definir esses dados, podemos verificar, como se você tiver a operação, Isso funcionará no caso Lynne. Vou excluir. Isso é definido como atual como 0. Isso já aumentará o cenário base. Vamos tentar este e este. Vamos para o próximo. Aqui temos apenas um bloco. Vamos excluir este. Agora, nosso blog sendo excluído aqui. Temos apenas cinco blocos. Isso não deve ser exibido. Algo não está atualizando corretamente porque o blog total é basicamente usado aqui dentro deste Fitch, este blog. Temos que usar essa lógica aqui na verdade, não se encaixam no bloco de texto. Temos que fazer essa lógica aqui. Temos que alterar seu DCPA aqui. Obtendo o comprimento total do bloco. Vou adicionar alguns blogs neste aplicativo. Então pessoal, adicionei mais dois blocos antes de executarmos uma operação de exclusão novamente com a paginação. Vamos clicar em Avançar. Você pode ver que também temos esse cenário. Esta condição else-if também temos a terceira e temos mais um bloco na terceira pílula. Agora, eu queria escrever mais uma condição em 30s LCF caso você não tenha bloqueado na arte, então eu não quero que ele exiba esse suporte potencial anterior e próximo. O que todos nós temos um bloco de dez em nosso arquivo db.json. Nesse caso, não quero que ele exiba isso nos dois botões que são Anterior e Próximo. Eu queria mostrar um pequeno botão Anterior. Então, precisamos escrever mais uma condição. Portanto, antes de executarmos a operação de exclusão, vamos escrever essa condição. Aqui. O que vou tomar, blog do portal menos o comprimento do ponto teta não é igual ao limite da página. Então só ele será exibido. Certo, vamos lutar. Vá para o navegador, atualize-o. Vamos clicar em Avançar. Temos isso muito bom porque temos mais blog sobre o assunto. Agora vamos excluir este. Clique em. Ok, então o blog foi excluído com sucesso. Agora estamos abaixo de cinco páginas. Agora vamos clicar em Avançar. Agora aqui você pode ver que não temos o próximo botão porque, como temos um bloco de dez no nosso arquivo db.json, estamos dizendo cinco blocos, mas também temos fato que é um pequeno problema em nossa paginação. Se você voltar antes, isso está funcionando. Vamos excluir mais um. Novamente, ele será desanexado das cinco páginas. Vamos clicar em Avançar. Recebemos este botão anterior apenas. Isso está funcionando. Então, caras pagam a próxima coisa. Ele também foi concluído em nosso aplicativo. 23. Fixe o bug: Agora temos um problema em nosso aplicativo. Então, se você pesquisar um blog, vamos supor que você tem desde o bloco de tinker, estamos recebendo essa criança de 30 anos com essa fita de palavras-chave, ok? E se você limpar esse campo de entrada, agora não estamos recebendo nenhum formulário de bloco. O que está acontecendo aqui? Então, precisamos ir para o VS Code e no arquivo js de ponto inicial, por que isso está acontecendo. Então, aqui, na mudança de entrada na cadeia de entrada com o manuseio feio do portfólio 13. Então, aqui não estamos passando o valor inicial padrão para nosso início e um valor aumentado. Então, aqui também temos que passar para o valor padrão como 050. A forma como passamos o uso IN OUT. Se você se lembra, aqui. Aqui temos nosso começo e, em seguida, aumentamos o valor. Da mesma forma, também temos que passar o valor aqui também. Vamos para o navegador, atualize este. Agora vamos pesquisar novamente o blog com a tecnologia. Agora vamos clicar nesta cruz. Agora estamos recebendo de volta todos os dados do blog que temos em nosso arquivo JSON. Então, corrigimos esse problema. 24. 404 e Sobre a página 404: Ok, então agora vamos trabalhar em outras páginas que não são encontradas e sobre pagas. Então, vou começar com a página não encontrada primeiro. Dê alguns URLs aleatórios. Você não vai se divertir, mas eu queria resolver uma imagem aqui. Vamos fazer isso. Vamos não encontrar o arquivo dot js aqui. O que temos que fazer? Aqui? Só estou colando uma linha de código. Agora vamos navegar. Agora aqui estamos recebendo um lindamente. Bem, se o URL não corresponder à NET, temos em nosso arquivo app.js. Agora também temos que trabalhar nesta página Sobre , vou ver o conteúdo lá sobre o arquivo dot js. Então, estou apenas prevendo o conteúdo para este arquivo Sobre dot js. Quando a TI traz alguma confiança do MDB, contêiner MDB. Sou tipográfico DB. Vamos dar alguma margem, margem superior, 100 pixels superiores. Você pode fornecer qualquer conteúdo dentro deste arquivo Sobre dot js. Vamos para o navegador. Então, estamos recebendo essa linha de descrição sobre este aplicativo. 25. Obrigaoa: Se você estiver assistindo a este vídeo que foi, você concluiu este curso estatisticamente. Tenho certeza que você gostou de criar este aplicativo de blog React comigo. Espero que este curso ajude você a criar seu próprio site de blogs com o react e conjunto diferente disso da minha cabeça. Se você tiver alguma consulta ou sugestão, você sempre pode entrar em contato comigo. Muito obrigado pessoal por se matricularem neste curso. Vejo você em algum outro curso. Até lá, vá comprar e tomar cuidado. E não se esqueça de revisar meu código também.