React Paginação de Js com dados de API

1. Apresentação: Bem-vindo a este curso React JS. Meu nome é sim, então cada Audrey e algoritmos dr. Neste curso. Neste curso, você aprenderá como criar nosso aplicativo React e como adicionar paginação react com dados de API do mundo real. Como você pode ver, esse é o projeto que você vai construir neste curso. Então, aqui estamos recebendo uma lista de informações de um endpoint de API e estamos mostrando nossos dados de API em uma exibição de cartão. E assim que eu passar o mouse sobre o cartão mostrará a pequena borda no canto esquerdo. E assim que eu clicar neste, vai se expandir. E então podemos ver o resto das informações. Neste curso. Você não está apenas aprendendo a paginação do React, você também vai querer aprender a adicionar dobráveis mostrados em cadeiras de reatores. E se eu clicar nisso, um vai abrir e então ele também marcará, é assim que implementamos o react colapso de Shun. E então, na parte inferior, você pode ver esta paginação do React aqui. Atualmente, estou no caso número um, há um motivo para que este esteja marcado com a cor branca. E se eu clicar no teste número dois, esses dois serão destacados. E então esse botão anterior será ativado se houver o número um, então o botão anterior está desativado porque antes de um não temos nenhum número base. E ao clicar no botão seguinte, também posso mover uma base para outra base e espaço E que estamos mostrando, estamos mostrando e esta lista de dados. E então, se cada base tivermos dados de reembolso que estamos recebendo de nosso endpoint de API. E então podemos apenas mostrá-lo para você pode filtrar nossos dados usando nossa paginação. Então, tentei adicionar todos os tipos de recursos de paginação que normalmente vemos na replicação de preferência. Então, se eu fui a última base, então o próximo botão vai decibel. E então também endossamos, isso significa que é manter o número base. Então, aparentemente, adicionei esse número cinco. Então, se eu clicar nele, ele escapará desse número cinco. O ajuste do tipo será mantido ao mesmo tempo. Então agora estamos no caso número três, e se eu clicar nele, então agora estamos no versículo número oito. Então, definitivamente, você pode mudá-lo como quiser. Então, em vez de cinco, você pode mostrar para ver e também pode alterar dinamicamente a cor, cor de fundo e os designs de paginação. Eu tentei o meu melhor para explicar cada linha de código deste projeto para que você entenda tudo e como implantar um projeto JS react no Netlify para que pessoas de todo o world pode acessar seu aplicativo. Então, vamos usar uma plataforma Cloud para implantar nosso projeto, chamado Netlify. Você pode ver que esse URL, atualmente, esse projeto está para viver nesse URL no Netlify. Você também vai querer aprender a implantar esse projeto React JS. Portanto, vou encorajá-lo a inscrever este curso. Vejo você na palestra. 2. Criar Projeto React: Bem-vindo a esta palestra. Nesta parte, vamos começar a trabalhar em nosso projeto React JS. Para isso, em primeiro lugar, teremos que criar nosso projeto React JS. Como você pode ver, abri meu Visual Studio Code, mas atualmente, não tenho nada aqui porque ainda não instalei o projeto. Então, no outono do diretório, precisamos importar nossa pasta. Então, primeiro, o que você precisa fazer, você só precisa criar uma pasta. Por exemplo, vou criar minha pasta dentro desse diretório de pastas, por exemplo, reatividade de vídeos, um problema com dados APA. E aqui vou criar uma nova pasta. E vou dizer paginação do React. Paginação do React. E dentro dessa pasta, você terá que instalar seu projeto. Então agora o que vou fazer, vou importar este projeto no meu Visual Studio Code rapidamente. Assim, você pode ver se você clicar neste ícone, ele mostrará esse diretório Open Folder. Então clique em Abrir pasta. E então eu vou para este vídeo e depois neste outono, e este é o nome da pasta que eu criei. Vou selecioná-lo. E aqui vai você. Mais uma vez, não temos nada dentro desta pasta. Como você pode ver, é apenas uma pasta vazia. Não temos nada dentro desta pasta. Vamos instalar nosso projeto JS reagente. É assim que vamos trabalhar. Tudo bem? Você acabou de criar uma pasta em qualquer lugar em seus laboratórios, em seu laptop ou desktop. E, em seguida, basta importar a pasta aqui e agora abrir seu terminal. E vamos instalar nosso projeto React JS. Então, o que eu preciso, terei que escrever aqui, vou dizer NP x e depois Create React app. Ok, então uma coisa você deve escrever a sondagem de parágrafos, então NPH, aplicativo React. E então vou dizer que o nome é cliente. O exemplo de sprint. Você pode dar qualquer nome, seja qual for o nome que você der, seu projeto estará sob esse nome. Por exemplo, estamos na frente, estamos trabalhando na paginação. Portanto, a paginação é normalmente usada no lado do cliente, que é a frente e o lado. Ainda assim, a razão pela qual estou escrevendo do lado do cliente. Portanto, cliente de aplicativo NP x Create React. E agora ele vai instalar nosso projeto dentro desse diretório de pastas. Levará alguns minutos, dependendo da velocidade da sua internet. E você pode ver que a pasta foi criada e o package.json foi criado. E isso vai criar mais alguns itens, mais alguns projetos. E enquanto isso, posso mostrar algumas coisas que serão necessárias para o nosso projeto. Primeiro de tudo, vou mostrar como podemos usar o bootstrap em nosso projeto. Então, porque vou usar alguma parada budista. Então eu posso dizer budista fora. E isso será necessário para nós, então vou concordar com isso. Portanto, este é o site oficial, muitas vezes recebe funcionários budistas. E a partir daqui você pode ler muitas coisas. Você pode simplesmente instalar o pacote NPM deles. Eles têm isso, mas a maneira mais fácil é usar o link. Assim, você pode ver a introdução e, em seguida, Início rápido. Existem alguns links que precisaremos. Por exemplo, este. Podemos apenas adicionar este aqui. Portanto, eles têm propriedade CSS e outras propriedades aqui. Então, por exemplo, deixe-me verificar, baixar o código-fonte. Então, eles podem ter um link chamado começar. Então, também podemos fazer isso a partir daqui. Não é um grande problema aqui. Acho que teremos que copiar este e, em seguida, esses dois arquivos que precisaremos instalar. Ok, para que possamos obter o nosso, podemos começar nosso budista a partir daqui. E instalaremos mais um pacote, que é chamado de paginação do NPM react. É assim que usaremos nossa paginação. Então React, pombá-lo. Este é o nome do pacote. E deixe-me ver como vai agora. Então, ainda está, levará alguns momentos. E este é o nosso pacote de paginação que usaremos. Esta é a opção que temos essa opção e você pode simplesmente ler a documentação deles, se quiser, você pode simplesmente boas idéias sobre o recurso deles são as opções de como usar este? E eles têm algumas provas que obviamente usaremos em nosso projeto. E vou te mostrar como fazer isso. Quão bem essa classe de quebra significa, com correntes na praga. E eles têm muitas coisas. Então você pode simplesmente brincar por aqui e então você pode ter algumas idéias. E, obviamente, vou te mostrar como implementar este. E vamos instalar, instalaremos a iluminação. O que mais precisamos? Precisaremos do nosso ícone vermelho tão ruim que eles tenham outro pacote chamado NPM react icons. Usaremos ícones React deste pacote NPM, ícones vermelhos. E precisaremos, precisaremos de nossos dados de API. Então, esses são os ícones vermelhos que precisamos instalar em nosso projeto. E então precisamos de outra coisa que seja nossa APA. Então, usaremos nossa API pública para que você possa aprender a usar dados da APA. Então, vou dizer o espaço reservado JSON. Portanto, este é o site de onde obteremos nosso link APA gratuito. E eles têm muitas opções. Por exemplo, digamos que eu vou selecionar esta postagem. Então, obteremos nossa APA em dados daqui. Temos título, corpo e ID. Copiaremos este link a partir disso. Tudo bem, então ele instalou módulos Node e algumas coisas serão adicionadas aqui. Então eu vou te mostrar este também. E isso pode ser útil. Ok, então estamos prestes a terminar e acho que temos todos os pacotes necessários e mostrarei como instalá-lo e como podemos ativar. Ok, então, para coletar nosso ícone de tarifa, eles têm o site do ícone react. Acho que esta é a página inicial deles. Então aqui vamos nós. Não, esta não é a página inicial. Eles têm um site de onde podemos atomicamente aqui, de onde podemos obter este, não este. Posso dizer ícones do React. Ícones aqui. Ok, então este é o site oficial dos ícones do React. Assim que instalarmos nosso ícone de reator em nosso projeto, teremos acesso a todos esses ícones. Então podemos usar o que quisermos. Só precisamos importar o nome. E então ele vai funcionar em nosso projeto. Por isso, é muito fácil usá-lo. Só demora alguns segundos. Tudo bem, então nosso projeto está pronto e ele diz algumas instruções sobre como executar o projeto. Então, podemos ver que este é o nosso diretório de pastas. Temos esta AB não cadeiras e todos os outros arquivos. Primeiro vou executar este projeto. Então, precisamos migrar para esse diretório do cliente. Para fazer isso, precisamos escrever aqui o cliente de CD porque nosso projeto está instalado dentro dessa pasta do cliente. Então, precisamos estar dentro desta pasta do cliente para executar nosso projeto. Então, para executar nosso projeto, precisamos escrever npm start. E agora ele vai executar nosso projeto e poderemos vê-lo em nosso navegador. E deixe-me mostrar se vai funcionar. Então aqui vamos nós. Este é o nosso projeto. Espero que funcione porque deve funcionar. Não cometemos nenhum erro. E também podemos ver a atualização e se você receber algum tipo de erro, então ela será exibida aqui. E você também poderá vê-lo no navegador. Não tenho nenhuma ideia por que está levando tanto tempo. Então, enquanto isso, posso lhe dar algumas instruções sobre a pasta ou diretório aqui. Então, basicamente, trabalharemos principalmente neste diretório fonte, onde criaremos nosso componente e todo o arquivo. Você pode ver que este é o nosso arquivo principal que contém todos os dados agora, mas vamos modificá-lo. E então temos este aplicativo dot CSS. E este é o diretório público. E dentro deste diretório público temos nosso index.html. E nós executamos especificamente, quando executamos nosso projeto React em qualquer tipo de navegador, parece que para competir com sucesso. Então, agora devemos ser capazes de ver nosso projeto. Então aqui vamos nós. Este é o nosso projeto de torcida do reator. Não temos nada atualmente, então teremos que trabalhar nisso. E vou parar este vídeo aqui, e continuaremos com a próxima palestra. 3. Instalar Pacotes React: Bem-vindo de volta mais uma vez. Nesta parte, começaremos a trabalhar em nosso projeto React JS. Na última parte, conseguimos executar nosso projeto e, em seguida, instalamos nosso React JS em nosso computador. Então agora, em primeiro lugar, nesta parte, vou instalar todo o necessário nos pacotes necessários para que possamos continuar trabalhando em nosso projeto. Então, para isso, isso significa roubar este 1 primeiro. E então teremos que instalar o ícone do React. Então, basta clicar nesses ícones vermelhos, clicar aqui e, em seguida, abrir seu terminal e garantir que você esteja dentro do diretório do cliente. Porque lembre-se de uma coisa, todo o seu arquivo, todo o seu pacote compartilhado e pasta dentro desta pasta do cliente ou qualquer nome de pasta que você forneça. Então você sempre precisa estar dentro desta pasta onde você instalou, você reagirá o projeto JS e não seu diretório de pasta principal. Certo? Então, para fazer isso rápido, vou mudar para esse diretório do cliente. Então, cliente ácido e depois vou colar npm, reajo PyCon, e então ele vai instalar. E pode levar algumas vezes então. Certo, então ele foi instalado, eu acho. Agora deixe-me mostrar-lhe algo. Então, se abrirmos nosso, se abrirmos nosso package.json, poderemos ver o ícone vermelho adicionado aqui. Agora vamos instalar o React busy-ness. O que isso fará é necessário para nossa paginação. Então agora eu já estou dentro desse diretório, então vou colá-lo e depois vou instalar este. E isso vai adicionar aqui, reagir paginar. Tudo bem, então instalamos dois pacotes necessários. Acho que não precisaremos de mais pacotes, mas para este, usaremos esse link normal. Então, antes disso, deixe-me modificar este para que possamos entender que nossas mudanças vão adicioná-lo em nossos projetos. Então agora todo o nosso código dentro deste app.js. Então, o que basicamente vou fazer, vou selecionar tudo, então eu vou remover porque eu quero isso, você sabe, tudo, cada linha de código que vou escrever aqui, Há uma razão que eu removi todo o código gerado automaticamente que foi criado pelo React js. Então, primeiro, precisamos importar nosso React do nosso React. E então vou adicionar uma função de seta. Então, vou dizer aplicativo de console. Então lembre-se de que você precisa adicionar seu nome f aqui. Caso contrário, isso lhe dará um erro. Isso não significa que você não pode alterar o nome do seu componente. Definitivamente você pode fazer isso, mas para isso, você terá que fazer algumas mudanças. Então, mostrarei o padrão de exportação. Em seguida, vou adicionar este aplicativo. Então, o que quero dizer com isso, então se você abrir seu índice TO jaws, index.js e aqui estão sua pasta do aplicativo é que seu componente F está conectado e este index.js e basicamente executado quando iniciamos nosso Projetos React JS. Portanto, há um motivo para você se certificar que é esse nome de componente é f, ou se você fizer alguma alteração aqui, certifique-se de que você adicionou este. E é assim que esses reatores em que trabalhamos agora. Aqui devemos ter escrito nosso f. Então, para isso, preciso dizer retorno. E dentro desse retorno. E precisamos adicionar nosso fragmento de pontos do React porque podemos adicionar vários filhos aqui. Portanto, há uma razão pela qual eu quero adicionar o fragmento de pontos do React aqui. Então, por enquanto, por enquanto, apenas para um exemplo e propósito de teste, deixe-me adicionar um, deixe-me adicionar uma coisa aqui. Então, deixe-me adicionar alguns. Só por exemplo, você pode dizer olá, React. E vou salvá-lo. E agora, se o executarmos, podemos ver o Hello React. Agora é hora de testar nossa adição nossos produtos de esboço budista tão rápido. Eu vou ter que adicionar este link daqui porque este link nos dará a parte CSS desta coisa budista mais desta classe de arte budista. Então, vou copiar este para adicionar fogão budista e abrir este index.html neste diretório público, clique nele. E então aqui na sua cabeça deste, você precisa adicionar este. E deve adicionar, ele deve funcionar aqui. E, em seguida, há dois arquivos JavaScript que você pode precisar dependendo do recurso do budista ou você está usando. Então, vou apenas copiá-lo. Você não faz você não criar nenhum problema. Em vez disso, obteremos algum benefício se for necessário. Tudo bem, então esses são os dois links, três links que você pode obter de boas coisas budistas e você só vai adicionar ao seu Ele vai habilitar os recursos budistas no seu aplicativo React. Então, apenas para um exemplo de propósito de teste, deixe-me definir um nome de classe aqui. E então vou dizer cartão. Então, o carro é um budista ou propriedade. Se nosso material budista estiver funcionando em nosso projeto e nós pudermos ver um cartão. Aqui vamos nós, podemos ver nosso cartão. Isso significa que nossas coisas budistas estão funcionando aqui. Legal. Então, agora, o que podemos fazer? Podemos criar um arquivo de componente aqui. Dentro desse componente, trabalharemos nosso projeto. Podemos dizer, podemos dizer componente. Eles podem dizer componente e esse componente, podemos criar nosso arquivo e pasta diferentes. Ok, então podemos, antes de tudo, antes de tudo, vamos criar um arquivo aqui. Vamos criar um arquivo aqui. E podemos dizer, podemos dizer, por exemplo, talvez possamos dizer dados. Ou podemos dizer: Então, o que basicamente queremos construir? Basicamente, queremos construir um componente construído, construir nosso sistema educacional. Mas para paginação, criaremos uma pasta separada para esta, para esses dados, Temos outra. Digamos, podemos dizer aqui. Podemos dizer aqui informações. Informações. Essas informações conterão nossas informações de leads em manter principalmente nossos dados de API. Então podemos ver inflamação dot js. E agora vou habilitar este. Isso vai me ajudar. É um tipo de trecho que estou usando a série Fourier. Então você pode simplesmente criar um componente aqui que será inflamação. E então podemos fazer isso. Certo? Agora, se eu souber o que preciso fazer, essa informação manterá toda a nossa parte aqui. Ou se eu fizer isso aqui, então vai fazer parte deste. Então, vou importar esse componente de inflamação que conterá todos os nossos dados. E então eu posso simplesmente chamar essa informação aqui. E podemos ver essas informações, podemos ver esse texto. E agora, dentro dessas informações, obteremos todos os dados da API e também adicionaremos nossa paginação. Portanto, seja qual for o componente que você criar, certifique-se de que ele esteja conectado ao seu app.js, que está conectado ao index.js. E é assim que funcionará. Agora, não precisamos desses dois arquivos. Ok, então se eu quiser, também posso fazer a mesma coisa aqui, mas quero separá-lo para que você possa aprender a criar um componente e como podemos nos conectar. Então, a primeira coisa aqui, precisamos, ok, então primeiro deixe-me adicionar uma opção decente aqui. Não precisamos dessas informações aqui. Então, dentro desta div, vou criar um nome de classe. E aqui posso dizer contêiner. Recipiente. E esse contêiner, contêiner significa , ok, então não temos nenhum dado aqui. Então, precisamos adicionar H1, posso dizer Obter informações. E aqui vai. Então, se adicionarmos o contêiner, ele começará a partir do meio de tudo isso. Então, é assim que principalmente a maioria das ondas ditas tem esses recursos. E há uma razão pela qual estou usando esse contêiner. Agora, dentro deste contêiner, podemos criar nosso podemos adicionar dois para começar a adicionar nossos dados. Então, para isso, primeiro, vou criar um arquivo CSS aqui. Podemos dizer informações, no entanto, CSAs, Inflamação dot css. E então vou dizer Importar. E vou salvá-lo aqui, pois nossa inflamação está conectada com esta. Agora vou criar outra pasta aqui. E dentro dessa pasta, dentro desse diretório div, vou criar um nome de classe que manterá todos os nossos dados. E aqui podemos dizer para o design. Portanto, este é o nosso design de preenchimento e esse design de informações, dentro deste design de informações, teremos nosso ACE to Tech, por exemplo, é sete. E posso enviar essas informações. Posso dizer lista de informações, por exemplo. E agora podemos fazer design aqui. Então, usando o lado esquerdo, mas deve estar no centro, mas não deveria estar no centro. Então, vou fazer isso. Posso dizer, então posso dizer A7 e então posso dizer, ok, então deve ser A6, A7. Não há nenhuma partícula é sete. Então posso dizer que é sete aqui. Então, A6. E agora posso dizer que o texto alinhe, centralize e margem, superior e margem tolerando 50 pixels. Então aqui vai você. Esta é a nossa lista de informações usando o centro e também temos alguma margem daqui. Legal. Agora está tudo bem. E depois disso, este contêiner aqui, teremos que criar outra pasta ou outro arquivo onde mostraremos todos os nossos dados. E outra coisa que precisamos adicionar nossa APA tem, então, para isso, o que posso fazer? Posso simplesmente criar nossa variável. Podemos dizer const, URL. E então eu posso simplesmente fazer este aqui. Tudo bem, então, a partir desta URL, obteremos nossos dados JSON e os mostraremos em nosso aplicativo. Então vou parar este vídeo aqui e continuaremos a partir da próxima palestra. 4. Obter dados de API: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos obter nossos dados e tentaremos mostrá-los em nosso aplicativo. Conseguimos adicionar essas informações de lista aqui. E agora nesta parte, vou adicionar nossos usuários ao gancho. Isso nos ajudará a obter nossos dados de nossa API. Então, para isso, precisamos adicionar nossos usos que aro e usar ganchos de efeito ou usar isso. Podemos dizer para isso, usa isso. Então usa Ted Hope e, em seguida, use o efeito aro e, em seguida, use o efeito Hooke. E aqui, vou tão rápido que vou criar. Em vez disso, podemos dizer const e você pode dizer que os dados serão dados definidos. E então podemos adicionar dívidas de usos e ela será uma área vazia porque obteremos nossos dados e definiremos nossa lista de array dentro disso. Usa o gancho. E tudo bem, então aqui vou criar uma nova pasta. Vou dizer muito. Seria muita API. Seria muitos dados do FBI. Você pode dar qualquer nome, o que quiser. Você pode dar qualquer nome, o que quiser. Portanto, é apenas um nome de função. E dentro dessa função vou adicionar Fess. O que é rápido? Basicamente, o fess é pré-construído com o navegador. Isso nos ajuda a obter nossos dados do servidor ou de qualquer tipo de API. Mas se você quiser, você também pode usar zeros, que é n, The Becker. Mas, para mim, adoro usar este e ele vai fazer tudo por nós. Então, fase e de onde queremos obter nossos dados, queremos obter nossos dados desse URL, que é esse URL. E você pode ver que esse é o endpoint da API. Principalmente dizemos qualquer ponto de extremidade da API que você tenha, você pode usá-lo aqui e depois passar um parâmetro. Então, um vai ser métodos normalmente é, por padrão, é o método é bom. Mas se você quiser, você também pode mencioná-lo e obtê-lo tem mais quatro, quatro outras propriedades. Por exemplo, GET, post, PUT e delete que você precisará se executar a operação de exclusão ou outras coisas, então precisamos, precisamos converter nossos dados em um formato JSON. Então, como por padrão esse rosto não pode converter nossos dados JSON, podemos dizer que a resposta será um ponto json de vínculos de risco. O que isso significa? E o que dizemos aqui? Dissemos aqui, qualquer resposta que você estivesse recebendo desse URL do nosso endpoint de API, basta convertê-lo em formato adjacente. E só podemos mostrar nossos dados dentro do nosso aplicativo. Tudo bem, então agora posso adicionar outro que não aqui. E então posso dizer, se você tiver, se você o converteu em formato JSON, então podemos obter nosso resultado. Podemos dizer resultado. E então aqui podemos ver. Também podemos adivinhar o útero. Se houver algum euro, você pode pensar como escasso. E então podemos simplesmente dizer que log de pontos do console será esse erro. E vou adicionar este. Então, nosso resultado, quero dizer que nossos dados estão agora dentro desse resultado. Agora precisamos definir esse resultado dentro dos dados do conjunto, que são nossos usuários para conversar. Então podemos dizer que estamos, se você quiser, você também pode adicionar uma condição aqui. Então, se nosso resultado, significa que, se obtivermos o resultado, somente poderemos definir nossos dados aqui. E então o resultado estará dentro deste. Agora, nossos usuários representavam contêm todos esses dados que obteremos dessa API. Deixe-me formatar o código. Tudo bem, agora precisamos adicionar nosso efeito nos EUA para que possamos dizer usar o Effect. E então aqui podemos adicionar este. E aqui precisamos adicionar um réu é a era da independência, porque queremos renderizar nossa API e dados apenas uma vez. Se você não adicionar essa área de dependência, ela renderizará a mesma coisa novo e de novo. Então, estamos principalmente, estamos realmente dizendo aqui. Portanto, quaisquer dados que você obterá desta URL da API apenas afetados ou apenas mostrá-los apenas carregados, pelo menos, apenas pelo menos uma vez. Você não precisa fazer a mesma coisa de novo e de novo. Agora vou copiar essa função e depois vou colá-la aqui. Legal. Agora temos este para que nossos dados estejam prontos, mas ainda assim não poderemos ver nada porque não usamos nossos dados. Então deixe-me explicar mais uma vez. Então, basicamente criamos um usuário para conectar e estamos recebendo nossos dados de API usando esse URL de fase. E então estamos apenas dizendo que, se obtivermos nossos dados, basta adicionar esses dados em nossos usuários para fazer. Agora, podemos acessar nossos dados usando esses dados. Para fazer isso, por exemplo, posso acrescentar, posso tentar. Você pode dizer, você pode dizer, eu acho que é apenas alguns pontos stringify. E, em seguida, esses dados, por isso nos darão o formato JSON de nossos dados apenas para fins de teste, caso possamos obtê-los. Assim, podemos ver que temos todos os nossos dados dessa API e encontramos, mas essa não é a maneira de mostrá-la obviamente. E definitivamente formataremos nosso código e adicionaremos absorção de cores ou outras coisas que faremos aqui. Não se preocupe, isso significa que somos capazes de obter nossos dados. E na próxima parte, vamos mostrar nossos dados em nosso formato de design e vamos torná-los mais legíveis por humanos. Então, vou te ver na próxima palestra. Tchau. 5. Mostrar dados de API em um cartão: Olá, bem-vindo de volta mais uma vez. Nesta parte, vamos projetar nossos dados e tentaremos mostrá-los em um cartão. Certo, então como podemos fazer isso? Para fazer isso? Quero remover este porque não precisamos mais dessa coisa. Então agora a partir daqui, podemos adicionar nossa parte descendente, descer. Então agora podemos ver que não temos nada em nossa lista. Então, como podemos adicionar nosso design aqui? Então, antes de tudo, o que eu quero ter, quero criar um primeiro. Precisamos passar por nossos dados que estamos recebendo. Então, vamos obter nossos dados daqui. Posso dizer que o mapa de pontos delta, você precisa mapear nossos dados e posso dizer d. E você pode adicionar qualquer nome, o que quiser. E então vou adicionar posição de índice aqui. E daqui, podemos fazer isso. Agora. Eu posso ver essa div, e então também posso ver esses tiff. Então ambos são os mesmos aqui e agora aqui vou adicionar um nome de classe. E o nome da classe posso dizer cartão. E apenas para um propósito de exemplo, vou acrescentar, vou adicionar título. Posso dizer título. E vamos ver o que podemos ver aqui? Então podemos ver isso apertado aqui e também podemos ver este carrinho. Mas isso está parecendo muito ruim e precisamos corrigi-lo para que possamos adicionar e projetar a opção aqui. Portanto, existem duas maneiras de fazer isso. Ou podemos simplesmente criar um nome de classe aqui, e então podemos chamá-lo neste arquivo CSS ou outro existe uma propriedade no React que é chamada de estilo. E então eu posso simplesmente adicionar uma cinta dupla encaracolada. E então, se eu quiser, posso adicionar margem. E então essa margem será de dez pixels. Agora também podemos ver essa margem, dez pixels, e também podemos adicionar preenchimento aqui. Você pode fazer quase todas as propriedades CSS aqui. Podemos dizer dez pixels. Aqui vai adicionar alguma meta de preenchimento. Assim, você pode adicionar qualquer design CSS nesta linha. Mas se você estava usando coisas simples, design nítido, então você pode fazê-lo. Mas se você estiver usando muitas coisas, então você pode simplesmente separar esta aqui. Então posso simplesmente dizer que o design do cartão não é, essa não é uma classe separada que vou criar. E vou adicioná-lo aqui. Agora, se eu olhar para o navegador, você pode ver que não temos nenhum design agora. Então posso dizer margem de dez pixels e, em seguida, o preenchimento será de cinco pixels. Então, temos esse título, temos essa roupa de cama e temos essa margem. Agora podemos substituir este título por esses dados, este título e corpo. Como posso fazer isso? Para isso, podemos adicionar, em vez deste título, podemos simplesmente dizer esse título e lembrar que você precisa escrever o mesmo nome. O mesmo é ser o que for na APA. Então, vai ser o título aqui, Rico. Ok, então o título é mais definido porque nossos dados estão neste, então precisamos escrever dy dt ou título. Agora podemos ver nosso título em nossa API. Como é legal. Uma coisa que eu quero personalizá-lo aqui em vez disso é que eu sou uma. Vou fazer dele um seis para que pareça menor e agradável. Legal, parece ótimo. E outra coisa que podemos fazer aqui, podemos fazer o que podemos fazer aqui? Podemos adicionar uma tag p aqui para o corpo, quero dizer, para o texto principal. E há um que posso dizer, qual é a propriedade, qual é o nome da propriedade? O nome próprio é corpo. Posso dizer esse corpo, filha DIE, corpo. E aqui vamos nós. Então, agora recebemos nosso título, obtivemos nossa descrição da nossa API. Isso significa que, se você quiser, você também pode recuperar esse ID. Isso não é um problema. Você pode obter qualquer coisa do, da API, qualquer alimento que eles adicionaram algum d dot id. Agora podemos ver nosso ID aqui. Veja Heidi, 123456789. Legal, mas não precisamos ter esse ID aqui. Agora, essa é a única maneira de fazer o design do cartão para adicionar dados de API em seu projeto. Agora, há outra maneira de fazer isso e o que é isso? E agora estamos fazendo tudo neste arquivo, o que não é bom para nossos projetos. Por exemplo, você está trabalhando em um grande projeto, então será difícil para você lidar com todas essas coisas. Então, para isso, separaremos essa parte de design em um arquivo de componente diferente e, em seguida, vamos adicioná-la ao nosso componente aqui e mostraremos aqui. Essa é a maneira mais fácil que a maioria da empresa faz. A maioria das pessoas faz. E agora vou parar este vídeo aqui. E vou te mostrar da próxima palestra. 6. Mostrar dados de API e design de cartão: Bem-vindo de volta mais uma vez. Nesta parte, criaremos nosso componente separado para nossos dados e, em seguida, mostraremos nossas informações. Como você pode fazer isso atualmente, temos todas as nossas informações aqui e está parecendo bem, totalmente bem. Mas quero te mostrar outra coisa. Vou criar um novo arquivo, novo componente chamado data, ou podemos dizer mostrar dados o que quiser, depois js. E então vou criar esse componente. Então, mostre dados, e esses dados de exibição conterão todas as nossas informações. Então, vou dizer React dot, fragmento de ponto dentro deste fragmento de ponto de objeto. Então, o que teremos que fazer basicamente aqui, teremos que adicionar essa parte em nosso design. Então você tem que adicionar este aqui. Então mostre dados, vou dizer, ok, desculpe, não precisamos deste porque já temos esse def dentro deste. Então, vou adicionar este. Legal. Então agora temos este cartão, design de cartão, título e corpo. E aqui não temos nada. Agora, e quanto ao design? Tínhamos antes para este, e obviamente isso nos dará um erro para este. Agora, é neste componente, não há dúvida de que como vamos acessar esses dados aqui neste componente para isso, precisamos passar nossos props. Então, adicione uma cinta dupla e adicione o título. E depois adicione corpo. Certifique-se de que o mesmo título com o mesmo nome que você está usando que temos em nossa API. Ou você também pode alterar a fonte, então você terá que fazê-lo. Em outras palavras, agora não precisamos ter um título em d dot, mas só precisamos dizer título e então só precisamos dizer sobre isso, ok? Não há nada mais mudanças aqui. Vai funcionar nessa parte. E agora podemos chamar nosso, podemos importar nosso componente show data. Então podemos dizer Importar mostrar dados. Agora, esses dados contêm todos os nossos dados. Então, o que podemos fazer? Basicamente, podemos simplesmente chamar esses dados. E podemos ver este aqui. Agora vamos ver o que podemos ver? Então agora temos um cartão 100, mas não temos nenhum dado aqui. Temos 100 cadetes, é verdade. Temos uma placa 100 porque estamos apenas renderizando esse componente, que é esse componente. E, mas não estamos recebendo nenhum dado porque não adicionamos nossos dados aqui. Como podemos adicionar esses dados? Então, primeiro precisamos adicionar uma chave. Então deixe-me mostrar o que essa chave significa. Então, se eu clicar com o botão direito do mouse e se eu abrir meu console, você poderá ver ele está me dando um erro e diz que cada criança em um contrato de locação deve ter um suporte de chave exclusivo. Então, precisamos ter uma chave única. Então, que tipo de chave queremos que tenhamos, para que possamos dizer chave d ou id. Então, como o ID é exclusivo, então você pode ver isso, podemos usar essa chave. E então, se eu atualizar este, então não devemos mais receber esse erro. Veja, o euro desapareceu. Podemos ver este. Há um erro mais. Não, você está bem. Legal. Mas ainda assim não temos dados porque não os adicionamos. Então, agora, quais são nossas sondas são profecias desse título. Podemos fazer isso dessa maneira. Podemos fazer essa coisa. Isso podemos dizer que o título, que é nosso lucro, é igual ao nosso Indeed ou título. Então, título d ponto. E agora ele vai mostrar nosso título. Então, outra coisa é perceptível aqui é que esse título indica o título do componente. Então, se você estiver usando dessa maneira, por exemplo, se você estava fazendo esse tema dessa maneira, ddo title, então você não precisa escrever exatamente o mesmo nome de título da API. Você pode adicionar qualquer nome que você pode ver. Podemos dizer novo título e apenas garantir que você esteja usando este aqui. E também aqui, este novo título e título ddo. Então, ainda assim, teremos nosso estado, obteremos nossos dados. Então, por que é porque aqui estamos dizendo que escritura ou título e esse título é o título de dados da API, que corresponde aqui. Ok, então se você estivesse fazendo isso dessa maneira, então não é necessário adicionar este. Mas há outra maneira. Por exemplo, você deixa dizer que você tem 100 itens, 100 itens que você está recebendo de uma APA. Então você vai fazer essa coisa? Você vai escrever isso 100 coisas dessa maneira. Obviamente, não por isso temos outra alternativa e a solução. Então, o que faremos, passaremos esta lista de colunas e, em seguida, vamos usar um operador de spread e, em seguida, vamos passar este d. Então, o que isso d? Então, como você já sabe, esse D estava contendo todos os dados da API. E o que dizemos que dissemos é liberado ou D, significa que vamos adicionar tudo neste componente é tipo de coisa adjacente. Agora, se eu abrir o React, então o que podemos ver? Podemos ver nosso modelo de corpo, podemos ver nosso título. E se você olhar aqui, esse texto está contido no primeiro item. No primeiro item deste, esse corpo, e este é o segundo corpo. O segundo corpo é porque eu conheci mudanças no título. Certo. Então, se eu mudei para título, então devemos ser capazes de ver nosso, devemos ser capazes de ver nosso texto, nosso título, você pode ver agora que temos nosso título, temos nossa descrição. Então, essa é a maneira que você pode usar este. Então agora podemos ver que acabei adicionar um mês antes, eu estava escrevendo este título, então igual a largura do colega que o nome do título do ponto d. Dessa forma, tive que fazer tudo para poder fazer isso nesta linha em vez de escrever duas ou quatro vezes, talvez 100 vezes, com base no design da sua API. Legal, parece bom. Agora eu quero ter alguns outros recursos. Por exemplo, quero mostrar o título rapidamente, e assim que clico que quero mostrar, quero mostrar o colapso do Sean. Ok, então tipo de colapso mostrou que basicamente vemos em diferentes tipos de aplicação. Por exemplo, posso dizer como mostrar colapso aqui. Então, no Google, eles têm nesta opção de colapso, ok, então se eu clicar nele, ele abrirá a janela e ele mostrará os detalhes. Se eu clicar nele, vai se esconder, vai abrir, vai se esconder vai abrir, vai aumentar as mesmas fotos. Vou mostrar como você implementá-lo neste projeto. Ok, então vamos fazer isso, vamos começar a trabalhar nisso na próxima palestra. E vou parar este vídeo aqui e vê-lo na próxima palestra. 7. Recursos do Colapso do Cartão: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar nosso colapso de Sharon. Ok, então o problema é que eu só quero mostrar esse título em nosso cartão. Assim que estiver pronto, clicaremos no ícone ou no que quer que esteja neste cartão. Em seguida, mostraremos a eles este ou esse texto de detalhes para que você possa aprender a usar o colapso de Sean nos reatores. Então, para fazer isso, você pode ver que atualmente essa parte vai manter nossa seção de design. Aqui. Vou adicionar um gancho de estado do usuário. Vou dizer, use um estado. Aqui. Preciso definir o estado. Então posso dizer que const vai ser um booleano em vez disso. Eu posso, posso dizer const. O show será definido para que você possa dar qualquer nome o que quiser. E ele vai ser usado como morto. E, inicialmente, será falso. Certo? E, inicialmente, será falso. Então, agora o problema é que, quando o usuário clicar neste cartão, você pode fazê-lo de várias maneiras. Por exemplo, vamos apenas clicar no carrinho ou podemos adicionar o ícone aqui. Ou você pode fazer outras coisas. Então, vou fazer isso dessa maneira. Então, se for falso, então não queremos mostrar esses textos corporais. Se for verdade, só queremos mostrar esses textos corporais. Então, como podemos fazer este? Então, podemos fazer isso dessa maneira. Podemos simplesmente dizer, ok, então podemos simplesmente dizer, apenas por exemplo, se esse show for verdadeiro, se esse show for verdadeiro, então só mostraremos nossa tecnologia corporal. Somente mostraremos nossas informações corporais. Certo, vou formatar este. Assim, podemos passar esta operação final, bem como podemos passar nosso operador ternário também. Agora, não temos essas informações de detalhes aqui porque a declaração é falsa e nós somos. Então dissemos que, se for verdade, só poderemos mostrar este. Deixe-me mudá-lo verdadeiro ou falso para verdadeiro. Então, devemos ser capazes de ver este. Estes são os textos corporais. Então, o que quero dizer com túnel do operador ternário? Seu retrato é algo assim. Se for verdade, então queremos mostrar que este rende. queremos mostrar nada que vai ser nulo, certo? Ele vai aparecer, e se eu vou adicioná-lo falso. E então podemos novamente ver este aqui. Isso é chamado de operador ternário. Então, basicamente, você pode usar o operador ternário quando tiver duas condições. Por exemplo, se for verdade, você quer mostrar algo ou quer mostrar algo. Nesse caso, você pode usar o operador ternário. Caso contrário, você também pode usar o operador final será da mesma maneira. Por exemplo, se eu quiser dizer, é falso, se eu quisesse mostrar este Steadman aqui. Então agora podemos ver que é falso é falso é falso porque a primeira condição não é verdadeira porque esta é falsa agora, e se eu disser verdadeiro, então ela mostrará a tag body, o conteúdo, conteúdo principal. Ok, é assim que esse operador ternário funciona. Então, para este, só vou usar, ok? Só usarei esse operador AND, mas definitivamente você pode fazê-lo dessa maneira. Mas se você quiser mostrar apenas uma condição, então é melhor usar esse final da segunda parte. Então você não terá que adicionar este dois pontos ou nulo vai funcionar aqui, e então eu vou adicionar isso a false. Ok, então agora nosso plano era adicionar o ícone aqui. Ok, que ícone queríamos adicionar. Então volte aqui e então posso dizer estrelas aqui, ícone de seta. Você pode ver que existem tantos ícones que podemos escolher aqui. Seta, ok, podemos escolher, podemos escolher este ícone, eu acho, ou este ícone, ou acho que podemos escolher este. Eu uso este e este. Então, vou selecionar este. E, no entanto, pode ter algum outro ícone em vez de cor plana Eu consolo que eles tinham esse ícone colorido. Podemos obter alguns, ok, bem, eu escolheria este daqui porque é o ícone de cor, então não teremos que fazer nenhuma cor desta, eles podem ter a parte inferior também usa LED está na direita. Onde está o de baixo? Acho que eles não têm o de baixo. Eles têm o próximo, eles têm o anterior. Eles têm eles se expandem, eles têm. Este aqui. Então esses dois eu vou adicionar. Então, antes disso, preciso adicionar este. E preciso importar este aqui. E então, dentro deles, preciso adicionar essa opção que vai para o colapso do FC. Então o FC entra em colapso e você pode ver fc e fc já estão lá. Então você só precisa adicionar este. E se você usar outro ícone, se ele tiver nomes diferentes, então você só precisa arriscar isso lá. E este vai ser exponencial. E este aqui está. Então, só para reagir, posso encaminhar as duas primeiras letras que você precisa escrever, por exemplo, o que quero dizer com isso. Então, se eu usar, a partir daqui, eu posso, se você usar isso, então você pode ver este BS. Portanto, é sempre a primeira letra de qualquer ícone que você usará. Um verdadeiro ícone sem valor porque sempre vai funcionar. Então agora eu queria mostrá-lo dessa maneira. Nosso título e nosso ícone devem estar no canto direito. Ok, então como podemos conseguir este para este, eu vou criar uma div. E dentro desta div eu quero colocar esse título. E vou criar um nome de classe. Aqui. Posso dizer, posso dizer ícone de colapso, ícone de colapso. E aqui vamos tentar colocar nosso ícone. Então, vou adicionar uma tag aqui. E eu só preciso adicionar isso, este rápido porque o FC expande como usamos. Só precisamos chamar esse nome e ele tem uma propriedade. Agora devemos ser capazes de ver o ícone. Você pode ver que esse ícone está aqui, mas ele deve ser o canto direito. Não se preocupe, vamos conseguir. E para isso, é assim que usamos o ícone React em nosso f e ele tem uma propriedade chamada size. Também vamos usar esse tamanho de célula ômega1 30. Vai ser de tamanho maior. Acho que não precisamos ter, em terceiro lugar, precisamos ter apenas 20. E então essas colunas desapareceram. ícone dessas colunas estará aqui. E posso dizer ícone de colunas, posso dizer justificar conteúdo, espaço entre e exibição vai ser fluxo virá no canto direito. Objetivo. Então, agora conseguimos este. Podemos fazer isso, podemos fazer outras coisas. Por exemplo, apenas para ser um conteúdo e pode dizer alinhar. Talvez alinhe o centro de itens. Ou acho que não precisamos, já está lá. O cartão não é tão grande. Não temos este porque já estamos usando justify-content aqui. Tão legal. Agora, o que podemos fazer? Podemos adicionar um ponteiro de cursor aqui. Podemos adicionar ponteiro do cursor. Então temos isso, mas atualmente não vai funcionar, então precisamos torná-lo dobrável como fazemos isso. Agora volte aqui. E então aqui podemos definir um, podemos criar uma função. Podemos dizer const, const, mostrar item. Você pode dar qualquer nome, o que quiser. Então aqui podemos dizer que set show não será igual a mostrar. Ok, então há duas maneiras de fazer isso. Por exemplo, aqui estamos dizendo que seja o que for, basta fazê-lo em frente. Mas precisamos fazer, podemos criar dois outros componentes porque, uma vez aberto, vamos arriscar que ele mude o ícone de cor do ícone, e depois que for clubes, e então faremos isso em desta forma. Então deixe-me mostrar o que quero dizer com isso. Tão rápido. Copie este e, em seguida, adicione um onclick aqui. Onclick. Então aqui eu quero pausar este. Pode apenas pausar essa função aqui que acabamos de criar. E agora podemos ver o colapso. E se eu clicar nessas notícias que vão se esconder, isso está aberto. E se eu clicar novamente, ele vai se esconder. Se estiver aberto e estiver alto, aberto, os olhos se abrem e depois se escondem. Ok, então nossa absorção de chamadas está funcionando. Mas agora o que eu quero, quero ter quando estiver aberto, quero mudar o ícone. E então, quando eles clicarem nele, só podemos ocultá-lo, não o mesmo ícone. Certo? Então, para isso, o que posso dizer em vez dessa maneira, posso simplesmente dizer quando clicar nele onde você quer torná-lo verdadeiro. Certo? E agora é verdade, mas essa absorção de chamadas não está funcionando aqui. E agora podemos torná-lo dinâmico esse ícone também. Se for verdade, se for verdade, se estiver tudo bem, também podemos fazê-lo de outras maneiras. Por exemplo, não são mostrados e em seguida, podemos simplesmente mudar a cor do ícone de cor, então também funcionará. Então, em vez de escrever duas linhas, então deixe-me tentar se isso vai funcionar dessa maneira. Então, podemos exatamente em frente a este, o que quer que tenhamos, queremos fazê-lo. E então aqui podemos mudar o ícone. Podemos dizer, se o show for verdadeiro, se a costa for verdadeira, então queremos mostrar essa opção de colapso. Isso significa que queremos ter neste. Ok, então o tamanho será 20. Se for verdade, isso significa que nosso estado está aberto. Isso significa que o determinante é verdadeiro. Então, queremos mostrar esse ícone de colapso. Se não for verdade, então queremos mostrar este aqui. Se for verdade, então queremos mostrar este. E se não for verdade, então queremos mostrar tudo bem, então eu adicionei no lugar errado. Deve estar fora deste. E aqui vamos nós. Ok, então o que dizemos que se nossa propriedade for verdadeira, queremos mostrar esse ícone de colapso. Caso contrário, queremos mostrar esse ícone de expansão. Vamos ver, nossa propriedade é falsa agora. Então, nosso falso constante, portanto, a zona que estamos mostrando, em vez disso, esse ícone de expansão, se eu clicar, então nossa propriedade é verdadeira, e então estamos colocando esse ícone. Então, se eu clicar nele e , em seguida, ele vai para baixo. Se eu clicar nele, vai descer. Desta forma. Também foi trabalhar para você. Não há problema algum. Podemos ver, podemos fazer isso dessa maneira, e também podemos fazer dessa maneira. Outra coisa é que, por exemplo, se você quiser fazer isso clicável em todo o cartão, por exemplo, atualmente, se eu vou clicar nele, não vai funcionar. Então, você quer, quando você clica neste cartão, você quer recolher essa opção em vez de apenas esse ícone, então o que podemos fazer? Não precisamos fazer muito mais coisa. Basta cortar este onclick e adicionar isso emclique no carrinho principal, que é o nosso descarte. E então, se eu clicar nele, ele funcionará da mesma maneira. Até o ícone vai mudar. Então, é assim que você pode adicionar essa absorção de cor. E outra coisa que podemos fazer aqui, podemos adicionar um pouco de personalização, design e o sistema de remarcação. Então eu vou te mostrar na próxima palestra. Tchau. 8. Destaque Colapso Cartão: Bem-vindo de volta mais uma vez. Nesta parte, mostrarei como podemos destacar nosso cartão aberto, ok, e como podemos mudar nosso sobrenome dinamicamente? Ok, então uma coisa que é perceptível aqui, então este é o nome da classe que está nos dando esse design. Então, se eu olhar aqui, design de cartão, ele tem preenchimento de margem. Ok, então primeiro, deixe-me adicionar uma propriedade aqui. Então, o ponto do design do cartão paira. Então, quando passarmos o mouse, quero mostrar isso aqui. Então, quero destacar essa coisa. Posso dizer fronteira. A borda à esquerda será talvez de três pixels. Somente. Você pode sentar a cor do tomate. Você pode escolher qualquer cor, o que quiser. Então você pode ver quando eu destaco este, quando eu passar o mouse sobre, este, vai ser distinto. Mas, mas quando está aberto , ainda está pronto. Ainda está pronto. Deve ser essa cor, deve ter essa cor marcada. Como podemos fazer isso? Nós faremos isso. Mas para eles, deixe-me aumentar o tamanho da borda. Então, tudo bem, então o tamanho da borda, tamanho agora é de cinco pixels e parece realmente ótimo. Mas eu quero alcançar este quando ele, quando nosso estado estiver aberto, quando este cartão estiver aberto, este deve ser marcado dessa maneira. Ok, como você pode fazer isso? Então, podemos querer essa coisa dessa maneira. Então, precisamos tornar isso dinâmico. Como, o que quero dizer com dinâmica? Podemos adicionar o mesmo operador ternário. Então, a mesma condição em nossa classe. Se nosso JT for verdadeiro, queremos marcá-lo, marque este. Caso contrário, queremos mostrar este. Ok, então como posso conseguir isso? Vou chamar isso. E vou adicionar essa cinta encaracolada. Dentro dessa cinta encaracolada, posso dizer show, show. Se for verdade, então eu quero mostrar nome da classe é que quero mostrar algum outro nome de classe. Então agora pensando logicamente aqui. Então, atualmente, nosso estado estacionário é falso. Então deixe-me mostrar este aqui. Ok, então temos este. Então, se eu fosse, em vez disso, é verdade, então nosso, temos algumas mudanças aqui é porque está caindo nessa condição de estado. O que dizemos aqui? Basicamente, se nossa propriedade for verdadeira, só vamos devolver esse design de carro e carro. Se não for verdade, significa que é falso aqui, estamos retornando nada. A outra razão pela qual nosso carro se foi. Então, o que posso dizer aqui? Posso simplesmente adicionar o cartão aqui. Significa, se já dito é falso, então descarte instintivo até suponha estabelecer o que o cartão. Agora podemos ver o cartão aqui, ok? Mas não estamos recebendo o design porque, para isso, temos que ter um design diferente usando a mesma coisa. Então eu posso dizer, então, se for verdade, isso significa que essa condição será cumprida. Se for falso, essa condição será cumprida. Então, ainda não temos este aqui. Certo? Então agora eu posso marcar este rápido. Resolva este. Então, se nosso patrimônio for verdadeiro, essa classe estará ativa. Então, para esta classe, essa classe é classe de design de cartões. Então, vou copiar o mesmo design porque precisamos marcar este aqui. Legal. Então, em vez disso, está aberto. Há uma razão pela qual este está marcado para baixo. Se eu atualizá-lo, ele se foi porque, obviamente , não é verdade. Deixe-me clicar neste. Nossa DST é verdadeira, e então esta está aqui. E agora preciso adicionar mais um nome de classe. Podemos dizer que o design do cartão falso. Se nosso estado atual for falso, podemos mostrar o mesmo design agora que temos aqui. Então, podemos simplesmente dizer taxas de cartão e falsas. Precisamos de preenchimento de margem. Precisamos de margem e preenchimento. Então, vou adicionar este aqui. Legal. Agora, se eu fosse, em vez disso, é falso, então temos o mesmo design. Vou desmoronar este. Se R está morto é verdade, então temos essa coisa. Se eu fosse, em vez disso, é verdade. Este é um markdown, é verdade, isso é feito. Agora, o que eu quero ter poder e, em vez disso, é falso. Então, queremos mostrar esse efeito de focalização que estávamos mostrando anteriormente. Certo? Então, como posso fazer isso? Para fazer isso? Então, com a classe vai chamar essa cauda, é falso nesta classe porque se eu fosse, em vez disso, é verdade, essa classe vai chamá-la em vez disso é falsa, então esta. Então cartilagens e falsas. Aqui. Precisamos adicionar este. O cartão está em cor falsa ao passar o mouse. E então vou dizer este. Então, agora temos esse efeito de focagem. Se eu clicar nele, ele vai aqui. E agora não precisamos ter esse design de cartão pairar. Porque se eu dissesse que o homem é verdade, então vamos passar o mouse sobre. Se o que é verdade é falso , só queremos realizar esse efeito de focalização chamado Tudo está bem. Agora podemos marcar nosso cartão. E é assim que vai ficar assim. Perfeito. Perfeito, perfeito. Então, temos sucesso sal é cancelar convulsões. E na próxima parte, e mostrarei como podemos adicionar nossa paginação, porque não queremos mostrar todos esses 100 posados nisso, nesta única base. Certo, então eu quero ter paginação aqui. E então, quando o usuário clicar na paginação, mostraremos talvez 510 ou o valor que quisermos. Então, verei você na próxima palestra. Adeus. 9. Dados de fatia para Paginação: Bem-vindo de volta mais uma vez. Nesta parte, começaremos a trabalhar em nossa paginação. Então deixe-me mostrar como podemos alcançar nossa paginação. Então, aqui, esse é o ritmo em que temos nossos dados que estamos obtendo de nossa API. Essas informações contêm algumas, deixe-me primeiro cortar nossos dados do que podemos conectar nossos dados com nossas funcionalidades de paginação. Então, para isso, vou adicionar um comando aqui. Você pode dizer paginação. Só para entender que isso é Ted e todo esse código é sobre paginação. Então, o que posso dizer que vou adicionar um estado aqui. Vou dizer um estado. E antes disso, podemos dizer const. Const vai ser base estacionada. Então, a parte B é quantos poetas que você quer mostrar? Então, atualmente temos, atualmente temos 100 base em apenas uma parte. Não queremos mostrar uma força de 100 para aqui. Queremos mostrar talvez cinco ou sete ou oito ou dez, o que você quiser. Você pode alterá-lo a qualquer momento. Então podemos dizer base de barras. Base será, por enquanto, há as oito postagens que queremos mostrar um ritmo parcial. E então precisamos definir um estado. Ou você pode dizer const, const será nosso ritmo atual. Então nós temos, vamos escrever um ritmo atual rápido. E podemos dizer que estabeleça a meta atual. E agora aqui podemos dizer que usa dívida. Portanto, a fase atual será uma. Isso significa que talvez em nosso, depois de dividir todos os nossos dados, talvez recebamos 100 ou 50 ou 20 ou dez pagamentos com base nos dados que temos e com base no ritmo da parte de dados que estamos mostrando. Então, sempre que atualizarmos nossa página, iniciaremos nossos dados a partir da base, a partir da base. Certo, isso é o que significa. Então, poderei mostrar o exemplo mais uma vez que nosso negócio e a Becky's estiverem prontos. Então, atualmente, apenas entenda que estamos mostrando nossos dados do PS1. Ok, então o ritmo atual, defina o ritmo atual. E agora aqui precisamos passar uma função de retorno de chamada. Posso dizer const, praga tratada. Podemos dizer isso. praga vai ser isso. E aqui podemos passar por sondas. Você pode dizer selecionado. Vai ser selecionada a base. Você pode adicionar qualquer nome de classe aqui. Isso apenas solicita que estamos passando aqui. E então nossa função de seta. E aqui, e os dados? usuário clicará em qualquer dado que o usuário clique aqui. Certo, então cometemos um erro aqui. Deve estar dentro desta cinta encaracolada e, em seguida, precisa adicionar mais um, mais um suporte normal e normal. E então, o que isso significa? Então, quando um usuário clicar em colar clique, queremos selecionar o item em que ele clicou. Então queremos, queremos defini-lo em nosso ritmo atual definido. Então, estamos definidos que o ritmo atual será nossas desprovas. Legal. Então, talvez tenhamos cinco pagamentos, dez ritmo com base no número de dados e no número do item que estamos mostrando propósito. Estamos dizendo que clique no número Colar, clique no número Colar e, em seguida, estamos passando este aqui. E o que quer que tenhamos clicando neste, vamos mostrar a você, vamos defini-lo em nosso ritmo atual. Agora podemos criar. Então deixe-me mostrar-lhe. E aqui você também poderá ver esse tipo de instrução. Você pode ver os itens atuais. Você acabou de ficar a contagem base. O deslocamento do item usa o estado do que o suficiente do item mais o deslocamento. E depois manuseio, tratou basicamente a finalidade do item. Então, você também pode dar uma olhada nele e, em seguida, você pode simplesmente twittar. Mas eu adoro fazer isso dessa maneira. Então eu posso simplesmente criar outro, outro processo que você pode dizer que o deslocamento será igual ao nosso ritmo atual. Então esse propósito. Ok, então o que quer que tenhamos em nosso ritmo atual, talvez estejamos na página número cinco e então queremos multiplicá-la com nosso propósito. Então, caso número três, então queremos multiplicar isso com ele. Vai ser 24. Então podemos dividir este. E agora aqui podemos obter nossos dados de pagamento atuais. Ok, então atualmente nossos dados estão nesses estados de uso de dados. Agora queremos cortar esses dados para que possamos dizer dados atuais const. Serão nossos dados sem slides e o lodo vem do JavaScript. Então, o que basicamente ele faz por nós, basicamente, cortar nossos dados de um grande conjunto de dados, um grande conjunto de array. Ele só vai cortar com base em nossa condição. Por enquanto, vai cortar nossa base de dados. E aqui precisamos, precisamos adicionar nosso deslocamento, que é esse. E então, e então precisamos adicionar nosso offset mais br mais br plus offset, depois offset plus purpose. Legal. Então, o que escrevemos aqui, então eu disse que apenas uma variável atual pares de dados e eu vou cortar este. Então, dados, que serão nosso conjunto de dados que contém todos os dados da API. Vamos cortá-lo usando este. Vamos passar por esse deslocamento rápido, que é o número de pares e o ritmo atual. E, em seguida, nossa barra offset plus cola-a dessa maneira, obteremos nossos dados. E agora talvez obteremos alguns dados duplos ou flutuantes. Mas não queremos ter este desta forma para contar nosso ritmo. Então, há uma razão pela qual precisamos que seja em torno de hora está bem. Como podemos fazer isso? Então podemos simplesmente dizer const, contagem será atendida, não mapeada, deve ser atendida. Tantas vendas de pontos fizeram o dorsal esta propriedade vem da venda de JavaScript e metadados. E podemos dizer dados de ponto de dados ponto, pontuar a terra e fez muita terra dividida pelo nosso Barclays. Então, dessa forma, não obteremos nenhum dado flutuante. Digamos que tenhamos 2525 postagem em nossa API e a dividimos por oito, depois oito. Então 25 por oito, nos dará algum número de ponto porque um 25 por 83 em três em oito, será 24. Melissa, teremos um que não poderemos entrar. Deixe-me mostrar o que quero dizer com isso. Posso dizer calculadora. Então, digamos que tenhamos 25 postagens em sua API divididas por oito. Então, obteremos 3.125. E essa função nos ajudará a evitar esse ponto. Ele nos mostrará três porque esta venda de pontos de matemática sempre arredonda nossos dados. Agora temos este. Deixe-me mostrar que ainda é, não há alterações porque não conectamos nossos dados. Então, agora, se você olhar para aqui, esses dados de ritmo atual manterão nossa parte de dados paga oito dados porque nosso principal, em vez disso, será cortado em oito Colar parte Para. Agora, em vez de mapear diretamente esses dados, teremos que passar por esses dados de pasta atuais para que possamos obter apenas o objetivo do item comido, meta. Agora temos oito itens aqui. Se eu não estiver errado, 123456788 item aqui, ok? E todas as outras funcionalidades que funcionarão perfeitamente, sem problemas. E outra coisa é isso, deixe-me mostrar-lhe isso. Vamos, por acaso, digamos que queremos mostrar apenas dois itens. Então ele vai mostrar dois itens. Deixe-me adicionar cinco itens. Em seguida, ele adicionará cinco itens aqui. Ok, deixe-me adicionar novamente oito itens. Em seguida, ele adicionará oito itens. Ok, então somos capazes de cortar nossos dados, mas ainda assim não temos nossa paginação. Como podemos obter outros dados? Então, para resolver esse problema, teremos que adicionar nossa paginação na parte inferior após este. E então teremos que adicionar esses pacotes, que é o React paginate. E então você passa o exagerado conforme você precisa. E então mostraremos nossos dados. Então eu vou te mostrar na próxima palestra. Adeus. 10. Adicionar Paginação React: Bem-vindo de volta mais uma vez. Nesta parte, adicionaremos nossa paginação. Então, o que basicamente eu faço, eu sempre tento separar o arquivo de paginação e, em seguida, passo props para que você possa reutilizar sua paginação para outros componentes, que é a melhor maneira para isso. Vou criar um novo componente, novo arquivo aqui na pasta aqui. A primeira coisa que vou dizer paginação. Vou sentar lá. E esta paginação dentro desta apresentação, vou adicionar o ponto de paginação js. Este arquivo js de ponto de paginação vai conter toda a nossa paginação. E agora vou dizer: Ok, esta é a nossa paginação e devemos ter um arquivo CSS para esse CSS de ponto de paginação. Portanto, nossos dados e todas as informações estão aqui. Nesta parte. Precisamos de alguma forma conectar essa paginação aqui. Então, para isso, posso criar um D diferente aqui. Vou dizer div. E essa div conterá nossa paginação. Vou selecionar a aula. O nome será um cartão. Esta div vai ser um cartão. E você pode dizer paginação para essa parte. Ok, e então, o que teremos que fazer, teremos que passar nossos adereços. Então, deixe-me mostrar-lhe. Então agora, atualmente, podemos ver essa div e não precisamos ter, ok, então deixe-me chamar isso aqui novamente. Então, essa informação estará na pasta de inflamação, nesta paginação. Então podemos dizer paginação, posso simplesmente dizer marcha, depois pixel, e depois desvanecer-se também. Acho que como pixel. Legal. Então agora devemos ser capazes de ver que essa coisa pode fazer. Obviamente, não temos dados, mas definitivamente os teremos em breve. Ok, então no arquivo de paginação, então precisamos passar, precisamos adicionar nossa paginação do React. E como você pode fazer isso? Para isso, precisamos chamar nossa paginação do React aqui. Então, vou adicionar uma div aqui. E normalmente, e então podemos ler a documentação e o documento é mostrado. Podemos ver que ele passa. Ele passa dois parâmetros, dois ou três parâmetros. Eles têm algumas opções aqui e, em seguida, algumas outras coisas aqui. Então, podemos simplesmente chamar isso aqui de originação. Então, precisamos ter este e não se preocupe, vamos fazer muitas mudanças aqui. E, por exemplo, vou falar dessa parte, a partir deste site. E agora precisamos, porque não temos nenhuma informação aqui, precisamos dessas duas informações. Um deles é a contagem de pares encomendados, um é nossos dados de ritmo atual. Certo? Então, essas são as duas inflamações que teremos que passar. Então podemos simplesmente dizer, Oh, teremos que dizer aqui Handel. E também temos, como são essas, essa função e esta. Essas são as duas coisas que teremos que passar pelo parâmetro. Então, vou dizer melhor contagem. Vou adicionar este aqui. Conte e o outro é aquele, que é tratado. Por favor, clique e precisamos, estou escrevendo o mesmo nome. Então, aqui em colar no Pais, a chance de que precisamos passar nosso identificador é clique, que é este. Então, se você tiver nomes diferentes, basta colocá-lo e colar contagem será nosso. E esses pares contam quantas páginas queremos mostrar aqui. Ok, então agora temos este. Agora, esse componente contém esses dois pedômetros. Isso para o item de dados que podemos passar daqui. Quem somos todos nós já temos aqui. Então deixe-me importar essa coisa rapidamente. Posso dizer que importe a resignação da paginação para essa paginação. E agora vou chamar essa paginação dentro do nosso cartilaginoso mostrado que criamos para este. E isso passará por dois parâmetros. Uma é essa contagem base, e então será essa primeira contagem. E então aqui precisamos adicionar. Aqui precisamos, precisamos adicionar esses guidões. Clique em. Legal. Portanto, nossos dados que escrevemos para nossa paginação melhor contagem e manipulados fisicamente estão agora dentro dessa paginação. Deixe-me tentar. O que podemos ver aqui? Temos um e-reader, que é que a reabilitação não está definida. Isso significa que precisamos importar nossa paginação do React que não fizemos. Então, para importar essa desoxigenação, precisamos importar essa paginação de taxa aqui. E então tudo isso é importante para paginação, este. E espero que ou tenha ido meta. Nós pegamos algo aqui, mas obviamente parece muito ruim agora. Então, agora, se eu clicar naquele, ele deve alterar nossos dados, certo? Certo, está funcionando. Se eu clicar em colar dois , podemos ver que nossos dados estão mudando. Nossos dados estão mudando. É muito bom. Isso significa que nossa paginação está funcionando perfeitamente. E então este também está funcionando. Este também está funcionando. Então podemos mostrar este aqui e esta pasta nesta divisão cinco. Ok, nós vamos, você vai brincar com esses mundos superiores. Mas antes disso, deixe-me mostrar-lhe, deixe-me fazer o design perfeito. Então, como podemos adicionar esse design aqui? Primeiro de tudo, precisamos ter um nível de quebra. Então precisamos ter um nome de classe break. Se você ler a propriedade. Por aqui, eles têm tantas coisas aqui. Estes são os adereços. Então, teremos que nomear o nome da classe break aqui. Então, vou adicionar um nome de classe. O nome da classe será nossa classe. Em seguida, podemos definir uma classe. Então podemos dizer Break Glass, Break Glass. E então teremos um próximo nível, que é o próximo. Não precisamos ter este. Podemos simplesmente adicionar este aqui. Ok, essas são as duas coisas que temos agora. Então, agora o que podemos adicionar aqui? Podemos adicionar que há outra propriedade e outro nome de propriedade é chamado de paginação. Portanto, o cluster de contêineres é paginação. Portanto, o nome da classe do contêiner é paginação. Então, o que significa esse nome de classe continente? Há uma classe de contêiner polinésio no cluster no contêiner de paginação. Então, podemos simplesmente adicionar este aqui. E então podemos dizer simplesmente esse nome que podemos adicionar, você pode dar qualquer nome dessa classe. Podemos simplesmente dizer paginação. nome da classe do contêiner será nossa paginação. E agora deixe-me adicionar algum design para este. Então, esta será nossa classe de paginação. E na classe de paginação, precisamos adicionar preenchimento. Podemos adicionar preenchimento, dez pixels e, em seguida, precisamos adicionar, nossa tela refletirá e justificar o conteúdo. Eu quero tê-lo centrado. Eu olharia o que conseguimos. Até agora. Objetivo. Podemos ver que nossos dados estão agora sendo centrais. Podemos ver que seus dados são um por um. Isso significa que estamos no caminho certo. Algo vai acontecer conosco muito em breve. E L e itens, vou adicionar centro e, em seguida, vou adicionar, digamos adicionar cor. A cor vai ser bloco. E então precisamos adicionar margem. Vou adicionar amanhã, desculpe, preciso adicionar marcha, depois pixel. Então agora adicionou margem de dez pixels. Ok, então eu acho que precisamos brincar com isso. Mais uma coisa a precisar adicionar. É assim que vai parecer. Decoração de texto. Existem outras coisas que podemos adicionar aqui. Deixe-me mostrar o que mais podemos adicionar nesta parte, porque esses dados estão nessa. Então, decoração de texto, precisamos adicionar. repetição não será nenhuma. E o que vai acontecer se eu adicionar aqui um, porque acho que ele continha todos os dados. Legal. Você pode ver agora que estamos recebendo todas essas informações aqui, ok, causa desta classe de paginação e, por padrão, o conteúdo é um Always squeeze manter todos esses itens, mas não vamos fazer isso neste caminho. Vou remover isso aqui. Então vou copiar essa paginação mais uma vez. E então eu vou fazer isso separadamente. Dessa forma. Nós alcançaremos nosso item no centro, bem como conseguiremos essa coisa. Então, vou adicionar decoração de texto. Nenhuma. Não precisamos ter nenhuma decoração de texto pré-construída aqui. E então precisamos adicionar lista é de tipo alto. Agora, o tipo de estilo de lista não será nenhum. Então vamos ver o que conseguimos. E precisamos adicionar nossa margem dez pixels de lá para lá. Ok, então agora temos este. Parece realmente ótimo. Nossa paginação está funcionando. Então, não estamos recebendo nenhuma versão de declaração ou mensagem de texto, acho que pensei que talvez tenhamos essa que basicamente recebemos. Certo. Então, essa coisa que podemos usar e você move isso sublinhado do, deste ou deste, porque estes são Anterior e Próximo assume sob esses aliados que não somos capazes de vê-lo como uma razão que também podemos usar este. E temos essa margem ou preenchimento. Ok, então parece bom agora, ainda podemos fazer algumas mudanças. Podemos destacar este. Ok, Então, por exemplo, se eu estou neste número de espaço agora, atualmente, não sabemos se estamos no espaço. Ok, então precisamos destacá-lo. E acho que vou parar este vídeo aqui e continuaremos com a próxima palestra. 11. Reagir Design de Paginação: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos ativar nossa paginação, tudo bem, para que possamos entender qual parte está ativa, ok? E como podemos fazer isso? Para isso, há uma propriedade chamada paginação. E para que possamos simplesmente adicionar esta e, em seguida, podemos simplesmente adicionar essa parte em nosso projeto. Portanto, o nome da classe é o nome da classe ativo. E então temos alguma outra parte também. Então deixe-me mostrar como podemos adicionar este. Então este className, classe base LinkedList e o cluster em uma fita de limão fácil. Então, nome ativo da classe, esse é o nome da classe que nos ajudará a mostrar o nome de nossa classe ativa. Podemos simplesmente adicionar o nome da classe ativa será, vamos dizer que este link, esse link ativo. E então eu posso simplesmente adicionar o design deste. Então, como podemos fazer isso? Podemos simplesmente adicionar raio de borda ou outras coisas em nosso F quando ele, quando ele estiver ativo, e então não criará nenhum problema. Então, como podemos fazer isso? Precisamos adicionar o raio de borda primeiro e, em seguida, precisamos adicionar algumas outras coisas aqui. Portanto, a borda será um bloco sólido de pixel. E então o desbotamento será de dez pixels. E então vamos colorir vai ser plug. Deixe-me ver. Então podemos ver agora esse design, significa que esse espaço está ativo. Este é muito ativo, mas não podemos ver nada. E precisamos adicionar, eu acho, não precisa ter o cabeçalho dez pixels. Acho que cinco pixels são suficientes. Ok, então novamente, precisamos chamar a tag a porque esse editor contém o design principal. Então posso dizer que a cor vai ser branca, não trigo, deve ser branca. Ok, então ainda não conseguimos ver nossa cor. Deixe-me ver o que adicionei uma cor de fundo preto. Link de ursos, ativo. Fisicamente, a cor ativa será branca. Então, ele mostrou funcionar. E, portanto, não faço ideia. Precisamos corrigir este porque o link inicial está ativo. Ok, então teremos que adicionar este desta forma. Acho que link ponto ativo ponto, propriedade ativa que precisamos usar. E então só devemos ser capazes de ver nossos dados. E então o link ocorre. Deixe-me mudar o nome. Remova este membro, fique ativo para que você não fique confuso porque temos uma propriedade chamada equity se estiver em nosso CSS. Então, só precisamos usar este aqui, e então podemos adicionar este. Então agora deve funcionar, eu acho. Legal. Agora vai ficar assim. Não temos esses 234. E isso ainda é a cor de fundo não está mostrando aqui, então precisamos adicionar nosso link ativo, link, link de paginação ativo, ativo será cor de fundo de água vai ser preto. E então precisamos adicionar essa ação para vincular a cor ativa será branca. E aqui vamos nós. Portanto, neste nome de classe ativo, precisamos adicionar algumas outras propriedades porque ela tem alguma propriedade pré-construída que acabei de capturar. E depois o nome da classe no deck. Você pode ver o link ativo ClassName. Há outra classe chamada nome de classe ativa. Então, precisamos fazer isso desta forma. Podemos apenas dizer outro link de linha. E essa classe ativa está dentro desta é pré-construída aqui. Então podemos dizer ativo. Então, podemos simplesmente fazer isso dessa maneira. Então podemos simplesmente mudar este para esse parâmetro, para este. E então também podemos adicionar este aqui. E então devemos ser capazes, então devemos ser capazes de ver algumas mudanças aqui. Podemos ver a cor de fundo, mas a cor, no entanto, não está funcionando. Assim, podemos simplesmente adicionar um raio de borda aqui também. Posso dizer raio de borda 20 pixels. Ok, então vamos consertá-lo em um minuto muito grande porque existem algumas outras propriedades que estão conectadas com esta. Essa é a razão pela qual este não vem. Então, o que podemos fazer aqui? Quando nossa paginação está ativa, então devemos ver nossa cor a partir daí. E então há outra propriedade que precisamos usar aqui chamada nome da classe base, que será um grande design inicial que precisamos escrever aqui podemos dizer o nome da nossa classe base, onde está o componente? Então, será o nome da classe que precisamos usar. Ok, então podemos usar esse nome de classe base. E então podemos dizer que há o nome da classe. Podemos dizer que paginação projetada para esta. E essa classe de design de paginação vai conter o design principal. Isso significa que sem ativo. E podemos simplesmente adicionar este. E podemos simplesmente dizer display flex, display flex. E então isso é delta não. E margem de cinco pixels. Podemos adicionar margem de cinco pixels, depois desvanecendo sete pixels. E então trarei alguém para dizer que precisamos definir duro e branco. Então vamos arredondá-lo. Tão alta arte em pixel. E então y será de 30 pixels. E o que será uma cor de 30 pixels será bloqueada. Isso vai ser blog. E então border-radius, precisamos adicionar 90 pixels. raio da borda será de 90 pixels. E, em seguida, decoração de texto, nenhuma. decoração de texto não será nenhuma. linha de mensagens de texto será centralizada. O alinhamento de texto será central e , em seguida, alinhar itens será central. E o que podemos ver? Então podemos ver que este está arredondado agora. Este é arredondado. Agora. Este também é arredondado agora. Mas ainda há poucas coisas que precisam ser feitas dessa maneira. E agora podemos simplesmente adicionar este. Então, uma coisa que esqueci de adicionar aqui, a cor de fundo, eu acho. Então. Sei que precisamos adicionar uma cor de fundo aqui, e a cor deve ser branca. Se eu adicionar um bloco de cores de fundo. Vamos ver o que podemos ver o objetivo. Agora temos esse design básico aqui. Estes são, este vai ser o tema principal disso, ok, então parece assim. Devemos fazer algumas mudanças. Assim, podemos adicionar a margem de preenchimento de sete pixels, sete pixels, raio de borda de nove pixels leva a continuidade injustificada do setor terrestre para adicionar, acho que justificar que o conteúdo será central. E então a decoração de texto também não é nenhuma porque cria algum tipo de locação. Agora devemos ser capazes de ver nosso texto no centro. Legal. Agora parece ótimo, mas ainda está tudo bem. Então, nosso fundo é branco e nosso fundo de destaque também é bloco, desculpe, o fundo é preto, então vou mudá-lo para a cor do tomate. Não está funcionando agora. Precisamos tornar isso possível. Vamos consertar este , não se preocupe. Então, temos essa paginação. Agora, quando você passar o mouse sobre essa paginação, o que basicamente faremos, acho que podemos corrigir essa paginação ativa offshore usando um link ativo de chamada ClassName. E este link ClassName nos dará nossa coisa necessária. Link ativo ClassName a ser usado. Ok, então deixe-me adicionar este aqui. E então a propriedade será assim. Posso dizer texto do link ativo. Texto do link ativo. Ok, então somos capazes de fazer essa coisa até agora, e teremos que consertar isso ainda são poucas coisas. E vou te mostrar no próximo. 12. Destaques Paginação e Design Ativo: Bem-vindo de volta mais uma vez. Nesta parte, vamos adicionar algumas mudanças importantes em nossa paginação. Certo? Então, podemos fazer isso de várias maneiras. Por exemplo, há uma propriedade chamada que podemos simplesmente ler a documentação e, em seguida, há uma propriedade chamada regra Bayes selecionada. Ou qual é o nome deste? Existem algumas outras propriedades. E podemos dizer o nome da classe pace lien. Portanto, há uma propriedade chamada Baseline class lambda clustering na decolagem, ou seja, elementos espaciais. Então, vamos usar este para destacar nosso texto ativo. Então Paisley no nome da classe será selecionado ritmo, selecionado paga. E este baixo elétrico vai ser o ritmo que queremos. Esse é o nosso selecionado basicamente. Então posso dizer que o rosto selecionado vai ser de cor, a cor talvez seja cor de tomate. Apenas por exemplo, vamos resolvê-lo mais tarde. Agora eles estão aqui. Certo, tão legal. Então é assim que vai parecer. Se nossa página for selecionada, então nossa, então nossa, se nossa base for selecionada, então podemos ver que isso será branco, que é nossa base ativa aqui. Então, colar o link ativo será branco e outras pragas serão de cor de tomate. Então, é assim que você pode fazer isso. Podemos fazer esse design nestes reagir. Ou acho que também é possível fazê-lo dessa forma. Por exemplo, podemos adicionar uma folha. Tenho este daqui. E então, se um posterior for postado aqui, o que acontecerá? Então, poderemos ver que essa coisa é assim funcionando, então não precisamos ter essa dessa maneira. Então, podemos simplesmente dar essa coisa aqui. E vai ficar assim. Ok, então outra coisa que podemos fazer, podemos fazer, podemos dizer, então basicamente agora podemos remover esse fundo e raio de borda daqui. E então, se for selecionado e só podemos, podemos, só podemos mostrar essa coisa, eu acho. Então. Deixe-me mostrar o que quero dizer com isso. Ou se você quiser, você pode simplesmente brincar com este. E então ele vai funcionar dessa maneira. Então este está ativo e este está ativo. E então temos este aqui. Legal. Então eu basicamente quero dizer que esse design de paginação vai conter tudo isso. Então, se eu apenas, ok, então em vez disso é a paginação que temos aqui. Isso é uma paginação. Ok, então deixe-me apontar este aqui. E isso é o que eu quero dizer basicamente. Então, se você quiser, você também pode fazer isso aqui. Se for selecionado, só podemos simplesmente destacar este e, para o outro texto, podemos fazê-lo. Então, para torná-lo redondo, podemos simplesmente fazer uma coisa. Isso é o que estamos recebendo para que possamos definir nossa altura. Podemos dizer que nossa altura será de 90 pixels e nosso y será de 90 pixels. E então seja o que for, vai ser 90. Então, vai ser assim. Temos esse tamanho grande e maior. Sinto muito, vou me esconder em que seria um pixel tardy no 19º Excel. Certo, legal, legal, legal. Então, temos este e , em seguida, precisamos criar algum elemento que eles ainda possam justificar que o conteúdo será centralizado, sinto muito. Só para ser uma quantidade vai ser centralizada. E talvez possamos tirar essa coisa daqui. Então eu posso colar aqui. Então deve estar no centro, eu acho. Ou talvez também possamos colocá-lo aqui para torná-lo centralizado à direita. Ok, então eu acho que essa coisa está vindo desta. Também podemos experimentar este. Por algum motivo, não está chegando ao centro. Meus dados estão funcionando dessa maneira. Ok, então isso é o que eu queria te mostrar. Ok, então temos outra fronteira, que vai ser uma borda preta. Acho que nesta fronteira vem desta fronteira vem disso. Para que possamos. Ok, deixe-me desfazer toda essa equipe que tínhamos anteriormente. Então podemos adicionar este aqui. Então agora temos essas opções, eu acho. Não, precisamos remover este também. Então, esta altura e este raio de borda daqui. E então nós pegamos essa coisa. Então podemos ver essa coisa, essas coisas. E agora, se eu pressionar um raio de borda aqui, então o raio de borda 90 pixels, então ele ainda poderá ver, marque este. E o problema é isso aqui. E se eu, se você quiser criar esse plano de fundo por padrão, então você pode simplesmente usar esse design. Também vai funcionar, ok? Você pode simplesmente destacar seu texto e destacar seus dados. Quaisquer que sejam os dados ou o design que você preferir, você pode simplesmente fazê-lo. Então, isso também funcionará para você. Então eu só queria mostrar como você pode adicionar. Vou brincar com este. Agora ainda temos duas coisas para consertar. Um é anterior, qualquer um é o próximo botão. Então, para isso, eles também têm uma propriedade chamada nome da classe anterior e próxima classe, então ela vai querer usar esta. Podemos dizer link anterior, último nome e, em seguida, nível anterior, nome da classe anterior e botão anterior. Existem duas outras propriedades que serão anteriores, botão anterior e link anterior. Podemos usar esse nome de classe anterior em vez do link ClassName. Então podemos dizer que o nome da classe anterior será o botão Anterior. nome da classe anterior será o botão Anterior. E esse botão anterior será algo relacionado a este. Vou vir aqui para esses dois projetos no meio. Você precisa escolher um, o que quiser. Quero dizer que você quer ter essa cor de fundo ou a normal, então você quer apenas selecionar esta. Então eu só preciso que você só precisa brincar com essa paginação. Eu adoraria mantê-lo dessa maneira porque quando o link estiver ativo, então ele só mostra que a cor e o normalmente estarão neste. Então esse design de paginação será o design do botão anterior. Precisamos adicionar. Na medida em que adicionar e exibir será flexível e, em seguida, precisamos adicionar list-style-type none. Este é o telétipo que não será nenhum. E então precisamos adicionar nossa margem, cinco pixels e, em seguida, precisamos adicionar borda. O modelo será um bloco sólido de pixel. E então precisamos adicionar roupa de cama para que fique bem. Vamos impedir sete pixels e, em seguida, a altura, a altura vai ser, eu sou o pixel Kartik, acho que 30 pixels. E então y será de 90 pixels, ou será de 90 pixels, a cor será branca. A cor será branca. A cor vai ser altura. E podemos adicionar raio fronteiriço. Então, o raio fronteiriço será de 20 pixels. E então a decoração de texto será a divisão não será nenhuma. Podemos ver essas coisas até agora. Deixe-me remover este porque está ocupando mais espaço. A razão pela qual ele cai sobre a cidade. Certo? Então, podemos adicionar algumas outras classes aqui. Deixe-me remover a altura e vamos ver o que podemos ver aqui? Podemos ver essa altura. E também posso adicionar a altura é que os olhos automáticos serão conteúdo de ajuste automático. E acho que não precisamos ter essa roupa de cama sete para vender talvez dois pixels estofados. Nossa altura vai ser automática, e então eu vou ser c. Então podemos ver isso. Ok, então estamos na fase número quatro. Se eu clicar no botão mais, está funcionando perfeitamente. Por que não podemos fazer altura deste? Podemos dizer altura, 40 pixels, deve funcionar, eu acho. Ele deve funcionar. E então podemos adicionar algumas outras propriedades. Por exemplo, este. Todas essas listas de declarações de textos são telétipos para fazê-la puxá-la para o centro, chamada de ruído no centro. E agora podemos diminuir o tamanho para 30 pixels. Legal, está funcionando. Portanto, este é o nosso botão anterior. E então teremos que adicionar nosso próximo botão no mesmo design. E então este é o botão anterior. Agora podemos fazer a mesma coisa com o nosso próximo design de botão. Então o PVS os fecha, será o nome da próxima classe. Então, podemos simplesmente adicionar este próximo nome de classe aqui. nome da próxima classe será nosso próximo botão, nosso próximo botão. E neste próximo botão, precisamos do mesmo design. Se você quiser, você pode fazer alterações. Está tudo bem. Legal. Temos este aqui. Agora, se eu estiver no ritmo acelerado, ok, então esse botão deve ser desejável. As metas devem ter desaparecido, certo? Porque nós, se eu estiver na base número um, então não faremos nada. Não podemos ir além da fase número um porque esse é o valor inicial. Então, precisamos desativar este de alguma forma. Estou na última peça e então eu deveria poder desativar esse botão de texto também. Como podemos fazer isso? Como podemos alcançar este? Então, para conseguir este, então há um nome de cluster chamado comprimento de classe inducible. Não tenho certeza exatamente este. Eu acho. Precisamos anotar o link um. Acho que precisamos adicionar o nome da classe, o nome da classe. E vou adicionar essa propriedade nesta paginação aqui. E então vou adicionar essa coisa. E vou dizer Visível, Visível. Anterior. Próximo botão, dependa de você, qual nome de classe você deseja adicionar. Eu acho. Então deixe-me tentar se vai funcionar. E então podemos dizer que exiba nenhum porque não queremos ou não queremos exibir este. Se estivermos em dúvida. Se você estiver no ritmo acelerado do que este botão anterior foi. Se eu clicar em Avançar ou clicar na segunda página, botão anterior está aqui em cima, clique no botão anterior. Ele se foi. Se eu clicar no tartan, neste próximo modernismo milho, se eu der um passo antes, então isso vai mostrar aqui, e é assim que vai parecer. Então, desta forma, você pode brincar com todo o nome da classe deles que eles têm. Então você também pode fazer uma coisa. Talvez você tenha notado em algum nosso site, alguma plataforma, eles desativam o botão, a menos que seja. A menos que seja, a menos que seja. Então, por exemplo, se eu estiver neste, em vez de esconder este, posso simplesmente desabilitar este. Então, como posso fazer isso? Então deixe-me comentar este. Então eu posso simplesmente dizer, Deus, para que possamos dizer que o cursor não será permitido, na verdade, nem muito. E então podemos dizer, este é o cursor. Posso ver que esse cursor não é muito, ou podemos simplesmente adicionar este. Acho que isso contou isso E. Nós, então só podemos fazê-lo. Você pode ver agora que tudo isso é isso. Então agora podemos clicar neste, mas este não é desejável. No próximo botão está funcionando, funcionando. E agora, se eu estiver na segunda pasta e este botão anterior também estiver em uma tigela como este. E, em seguida, clique no terceiro. E então este será o próximo botão. E assim, para a próxima manteiga será a mesma. E também podemos fazer a cor, porque a cor será na cor cinza para que ela pareça realmente é induzível. Então, se eu tiver passado, então você pode ver que a cor não é apenas um parafuso e então é apenas um parafuso. Ok, então você pode simplesmente brincar com este e então ele vai funcionar com você. Cara, vou ficar. começar com este display nenhum. Parece mais bom. Certo, então precisamos mudar o a porque é preciso desta forma. 13. Implante o Projeto React para Netlify: Bem-vindo de volta. Mais uma vez. Nesta parte, mostrarei como podemos implantar nosso projeto no servidor ou em qualquer tipo de plataforma de hospedagem para servidor ou em qualquer tipo de plataforma de hospedagem que o usuário possa acessar facilmente seus dados. Mas antes disso, deixe-me mostrar algumas coisas. Precisamos adicionar nossos cabelos carregados aqui. Porque se nossos dados não forem carregados, poderemos mostrar a eles algumas informações de carregamento. Então, como podemos fazer isso? Então aqui, esta é a nossa base, e aqui vou adicionar um novo estado. Posso dizer const, posso dizer que carregar vai ser triste, solitário. E inicialmente será verdade. Como inicialmente é verdade assim que obtivermos nossos dados, queremos definir esse carregamento false. Então, aqui estamos recebendo nossos dados. Se obtivermos nossos dados, não precisamos mostrar nenhum carregamento. Podemos dizer que é falso. Então, como podemos mostrar esse carregamento em nosso ritmo agora? Então, para isso, você pode usar um tipo diferente de ícone ou qualquer outra coisa. Então, apenas por um exemplo. Então, depois disso, você diz fato que vou adicionar uma condição aqui. Se nosso estado de carregamento for verdadeiro, queremos mostrar a eles uma mensagem de que os dados ainda estão sendo carregados. Então, o que posso dizer? Podemos dizer aqui. Podemos dizer def. E então, como eu disse, Tech Center. Vou adicionar um nome de classe e o cluster será central de texto. E posso dizer que a margem larga será 25. E então, dentro deste, sim, você pode adicionar um ícone ou simplesmente adicionar um texto. Por exemplo, vou carregar isso. E se eu clicar nisso, você poderá ver o texto de carregamento. Você pode ver essas tags de carregamento. Então, dessa forma, você também pode fazer isso. Portanto, pode haver algum ícone aqui para carregar. Você também pode mostrar esse ícone de carregamento. Existem muitos ícones. Deixe-me tentar. Você pode ver esse ícone, esse ícone, esse ícone. Você pode tentar qualquer ícone é, por exemplo, digamos que eu queira mostrar este. Então eu posso editar aqui e onde usamos nossos dados para este. Ok, então eu vou copiar este aqui, e depois vou colá-lo aqui. Vou adicionar este aqui, e como está no BI. Então, vou alterá-lo para ser, sei que posso acessar esse ícone em vez desse texto ou enviar esse texto. Também posso mostrar esse ícone. E então posso dizer o tamanho. E vou acrescentar decidido vai ser 40. Agora deixe-me atualizar este. Posso ver esse carregamento e com esse ícone. Legal. Então, agora precisamos implantar nosso aplicativo no servidor. Você pode tentar qualquer servidor, mas vou mostrar como implantar nosso aplicativo no Netlify. Então, basta criar uma conta usando sua conta do GitHub ou seu endereço de e-mail. Eles têm tantas opções. Assim que você tiver seu endereço de e-mail, uma vez registrado aqui, você poderá ver essa opção. Então você pode não ter nenhum site se for novo aqui porque anteriormente eu fui implantado para um motivo para ver essa coisa. Mas se você é totalmente novo, então você não deve ser capaz de ver nada. Então, só precisamos clicar ao lado e, em seguida, podemos simplesmente soltar nosso arquivo aqui. Mas para isso, primeiro precisamos adicionar nossos dados dessa maneira. Por exemplo, deixe-me mostrar-lhe. Portanto, esse é o tamanho do nosso cliente. E tudo bem, então precisamos construir nosso projeto. Como podemos construir nosso projeto? Então, podemos simplesmente adicionar este. Então abra seu terminal e eu vou, primeiro preciso mudar para o meu cliente de pasta. Então, o cliente, agora esse diretório do cliente, então agora posso dizer npm run build. Esse comando vai construir nosso projeto. E então podemos simplesmente implantar nossa pasta Build em nosso Netlify e, em seguida, é implantar nosso site. Portanto, uma pasta deve aparecer aqui e leva alguns momentos. E se você olhar aqui, este é o nosso diretório de pastas principal. Então este é o cliente. Esta pasta do cliente temos todo o nosso arquivo e nossa pasta Build deve aparecer aqui. E então só teremos que arrastar e soltar ou construir pasta aqui. Então, ele vai fazer seu trabalho corretamente. Demora algumas vezes, então acho que posso pausar o vídeo por um tempo até que ele tenha, ou posso simplesmente explicar mais algumas coisas para você. Ok, podemos ver que nossa pasta Build está criando um pouco de tecnologia algumas vezes. E esta é a nossa estrutura de pastas que criamos. Espero que você tenha aprendido muito este curso porque essa paginação é realmente importante porque você terá que fazer na paginação em seu projeto. Se você está lidando com muitos itens de dados, isso é muito importante. E esse pacote de paginação react oferece muita flexibilidade para adicioná-lo sem escrever tantos códigos. Então você pode olhar aqui. Nós apenas usamos seu nome de classe pré-construído e acabamos de atender nosso design de acordo com nossa exigência. Então, nada complexo aqui. E aqui, só precisamos escrever essas poucas linhas de código e , em seguida, você pode usá-lo. Então, o bom é que, como eu disse a você essas pastas de paginação eu avaliei separadamente. Assim, você pode usar o mesmo código e assemblies e, para qualquer tipo de dados, basta colocar os dados ou fatia e, em seguida, você pode simplesmente reutilizar seu componente. Ok, então nossa construção terminou. Agora podemos simplesmente copiar isso da pasta Build e, em seguida, você pode simplesmente soltá-lo aqui. Portanto, esta pasta Build não precisa entrar e arrastá-la da pasta Build e, em seguida, desenhe-a aqui. E vamos ver o que podemos ver se você receber um erro e então teremos que corrigi-lo. E levará alguns momentos. Você pode ver que a produção está sendo carregada dependendo do tamanho do arquivo. Produção de carvão publicada em apenas alguns segundos, podemos ver que nosso aplicativo é estável. Este é o aplicativo de porta de link. Clique nele. E aqui vamos nós. Nosso primeiro passo agora é ativo e servidor. Qualquer pessoa, qualquer pessoa pode acessar esse arquivo e isso está funcionando, isso está funcionando e nossa paginação também está funcionando. Você pode ver perfeito em apenas alguns segundos. Então, o que basicamente fizemos aqui e tudo bem, então agora podemos mudar nosso nome, definitivamente olhar para ele. Portanto, esse é o nome do nosso arquivo. O que eu fiz, basicamente apenas um login. E então ele fica aqui e aqui você estará, então você só precisa ir para esse tamanho. E aqui você terá uma opção para que você possa se conectar a partir do seu Connect, você terá metade, ou você pode simplesmente navegar, ou você pode simplesmente soltar a diversão aqui, então você pode implantar automaticamente seu projeto. Agora, talvez você queira alterar o nome deste projeto. Definitivamente você pode fazer isso. Então, como você pode fazer isso? Se você quiser adicionar o nome de domínio, você também pode adicionar um nome de domínio aqui, mas eu quero alterar o nome. Este é o nome. E aqui podemos ver o nome do site Chen. E aqui vamos nós. Podemos dizer originação do React. Legal. Agora, se eu clicar nele, o nome já está tomado. Então já alguém já tomou. Assim, podemos tomar esta paginação reagir. Nós API em metas de dados. Portanto, este é o nome do nosso site. Agora, se eu atualizar este, então não vai funcionar porque nosso nome foi alterado. Então, podemos citar a visão geral. Quero que você vá ao nosso diretório principal e então podemos ver que o nome foi alterado, originação reativa. E se eu clicar no link e, em seguida, ele funcionará novamente. Podemos ver também nosso indicador de carregamento. Legal. Você aprendeu a implantar seu F no Netlify, como criar esse colapso de Schoen, como criar essa paginação e como eles, como adicionar todos esses recursos aqui. Então, espero que você tenha gostado deste curso e desejo-lhe tudo de bom. E esta é a última palestra deste curso. Adeus.