Reagir 201: reato de nível intermediário js

1. Boas-vindas ao react intermediário: Olá e bem-vindo a reagir a 001. Este é intermediário reagir neste módulo ou neste curso, vamos estar trabalhando com um monte de componentes diferentes em Reagir. Por exemplo, criar um aplicativo de página única para que você possa alternar entre páginas instantaneamente. Também vamos trabalhar com a busca. Então eu posso digitar Star Wars e obter todos esses resultados de pesquisa diferentes. Posso até clicar nos detalhes de um deles e ir para alguma forma de exibição detalhada usando o roteamento React. Nós vamos estar usando componentes funcionais em React to 01. E vamos trabalhar com coisas como estado e definição de estado. Trabalhando com APIs, como a API db.org do filme. Vamos trabalhar com adereços. E nós vamos até estar trabalhando com a história ao longo dessas linhas. Também vamos usar o efeito dos EUA, que é um livro React. Então vamos usar isso em conjunto com o estado. Novamente, vamos usar uma API. Vamos usar roteadores, vamos usar componentes. Vamos passar adereços para esses componentes. E nós vamos fazer todo este aplicativo falar com diferentes componentes de um componente pode falar com outro componente. Agora, por que você gostaria de aprender a reagir nível intermediário? Reaja como uma das habilidades mais altas em demanda para desenvolvimento web front-end. Sabendo Reagir pode quase garantir um trabalho como desenvolvedor web de front-end. Então ficar bom no React é muito, muito importante. Se você vai se tornar um desenvolvedor web freelance, você vai precisar saber como escrever reagente o que ele faz. E este curso é apenas um pouco diferente de reagir um-para-um. Reagir um-para-um foi muito, muito básico. Não usamos páginas diferentes nem nada. Estava tudo em uma única página. Este é mais um aplicativo web progressivo onde você pode literalmente digitar qualquer coisa nesta barra de pesquisa e obter respostas API imediatamente. Colleen e eu ensinamos desenvolvimento web desde 2012. Ensinei mais de 350 mil estudantes em todo o mundo a codificar e, em reagir a um, vou ensinar-lhe componentes funcionais usando Reagir. Bem-vindos a reagir a um, e vejo-te lá dentro. 2. Como criar um novo aplicativo do React: Tudo bem, bem-vindo a reagir uma tupla 1 primeiras coisas primeiro, você precisa ter Node instalado e reagir instalado. Se você não tiver o nó n, Reagir já instalado em seu computador, por favor, vá para reagir 101 onde cobrimos os conceitos básicos de Reagir, incluindo a instalação e a instalação e execução com o Node JS. Agora eu vou supor que você já tem Create React app instalado em seu computador usando nó e NPM, caso em que podemos apenas mergulhar para a direita neste. Tudo bem, então o que eu vou fazer aqui é eu vou digitar n px, Criar Reagir aplicativo. E eu vou chamar esse filme Browser, Navegador de Filme. E isso vai em frente e instalar um monte de coisas para nós. Certo, antes de continuarmos aqui, vamos dar uma olhada na versão do nó que estou usando. Estou usando o nó 15. Você quer usar o Node 14 ou mais recente, se possível, se você estiver usando o Node Versão 10, este comando do aplicativo Criar Reagir irá criar algo diferente para você. Então você quer se certificar de que você tem basicamente a versão mais recente da versão LTS mais recente do nó. Então use o nó 14 ou 15, ou se 16 ou 18 estiver fora, use a versão LTS, talvez 16 ou nó 18. Então agora eu estou indo para cd em Browser filme. E o que eu posso fazer é traçar LA. Ou, se estiver no Windows, poderá escrever DIR. E ele mostra que você tem um pacote node_modules leia-me, público, SRC, diálogo fio. Você deve ter todos esses arquivos e pastas. O que eu vou fazer é eu vou abrir isso e VS Code digitando código dot. Se você não tem este comando por qualquer motivo em seu computador, tudo bem. Você pode simplesmente abrir o código VS e ir para Arquivo Abrir e selecionar a pasta inteira. E você só quer ter certeza de selecionar as pastas do navegador de filmes. Então você pode ir para o arquivo aberto. E você pode selecionar esta pasta inteira aqui. Então, navegador de filmes. Tudo bem, uma vez que você tem isso funcionando, o que você pode fazer é em código VS ou se você não tem código VS na verdade, você pode simplesmente abrir seu terminal como o que eu tinha aberto antes. Apenas este terminal aqui ou PowerShell ou, ou o que quer que você queira usar. O que vou fazer é usar isto dentro do navegador. Então, vou fechar isto. Então terminal sair do terminal. E no meu código VS vou ver o meu terminal aqui. Então todos os meus códigos são todos os meus arquivos vão ser, eles vão estar à esquerda. O meu terminal vai estar no fundo e o meu código vai estar no topo, aqui em cima. Então agora o que eu quero fazer é eu quero digitar npm start. E isso deve levar você à sua primeira página de reação. Diz exatamente o que fazer. Editar SRC barra aplicativo ponto JS. E vamos fazer um monte de coisas. Então, neste momento, você deve ter isso pronto e funcionando. Se você não tiver isso funcionando, faça disso sua tarefa para este vídeo. Certifique-se de que seu primeiro aplicativo React está funcionando usando o comando Create React app. 3. Limpeza de código: Bem-vindos à próxima lição. Nesta lição, o que vamos fazer é entrar em nosso SRC e entrar em app.js. E eu estou simplesmente indo para um make isso apenas um pouco menor. E lá vamos nós. Isso parece um pouco mais razoável. E o que eu vou fazer é me livrar dessas coisas aqui. Eu não preciso mais do logotipo. Então vamos em frente e apagar esse logotipo. Excluir logotipo. Sim, exclua o aplicativo ClassName. Também não preciso do nome da turma. E eu vou simplesmente dizer retorno H1, olá de React 201. E é tudo o que vou fazer. E para salvar isso. E você pode ver que este compilado com sucesso, ele vai me dizer compilado com sucesso como esperamos. Então vamos em frente. Salvar. Toda vez que eu salvar, ele vai recompilar. E toda vez que ele recompilar, ele deve ler atualizar meu navegador para mim automaticamente para que eu não precise clicar em Atualizar. É muito, muito bom. E assim deve dizer Olá de reagiu a um. Vamos em frente e limpar isso. E enquanto eu tenho você fazendo isso, vamos em frente e abrir app.use CSS. E vamos esclarecer isso também. Vamos continuar a usar app.use ESS. Nós simplesmente não precisamos de nenhum CSS padrão que ele vem com. Então vamos em frente e apagar isso e salvá-lo. E você pode ver que ele diz compilado com sucesso. Uma vez que você tenha feito isso, vamos para a próxima lição onde instalamos o bootstrap cinco. 4. Como instalar Bootstrap 5: Muito bem, bem-vindos à lição onde instalamos bootstrap. Isto é o que vai fazer o nosso site ficar bonito. E em vez de apenas olhar como um site baseado em texto padrão bruto, nós vamos realmente ter como um sistema de navegação e Lake, uma seção de heróis e cartões e outras coisas. Então vamos para bootstrap.com, getbootstrap.com e clique em Começar. E aqui estou usando a versão 5 do documento. Então eu estou usando Bootstrap cinco. Ele diz no Quickstart que eu posso basicamente apenas copiar e colar esta folha CSS na minha página. E isso é tudo o que eu vou fazer é literalmente apenas clicar em copiar aqui. E eu vou até aqui e abrir index.html público. E vai ter um monte de coisas no ano, monte de comentários e tudo mais. Quero fazer duas coisas. Primeiro de tudo, eu quero colocar este link aqui dentro da cabeça. Então, antes desta cabeça de corte e antes, não antes, mas depois da cabeça. Então você quer isso em algum lugar entre aqui. Então, se eu derrubar isso, você quer o código em algum lugar entre essas duas tags. A segunda coisa que eu quero fazer é que eu quero renomear isso de Reagir aplicativo para navegador de filme. E isso simplesmente vai parecer, Honestamente, vai parecer que não fez nada. Basicamente, não fez nada. Ele só mudou um pouco do espaçamento, tipo de reset ou CSS um pouco. Ele fez alguma coisa, mas basicamente não fez nada neste momento. Tudo isso fez foi nos permitir usar nosso CSS a partir de um bootstrap cinco, que eventualmente vai nos permitir usar pequenos componentes agradáveis como este cartão. Então vá em frente e obtenha o Bootstrap instalado. Certifique-se de copiar e colar essa folha de estilo aqui. Apenas certifique-se de copiar e colar isso em seu index.html que vive dentro de sua pasta pública. Em seguida, vamos em frente e criar um componente funcional navbar. 5. Como adicionar um componente Navbar: Ok, vamos dar uma olhada em adicionar uma barra de navegação global ao nosso site. Então eu só tenho app.js aberto e este é o lugar onde basicamente todo o aplicativo vai viver. E então eu quero esta barra de navegação, esta barra teórica de navegação para viver em algum lugar aqui. E eu quero que o resto do site também, basicamente, viva aqui. Mas há algumas maneiras diferentes de fazer isso. E a primeira maneira é através de um componente funcional. A segunda maneira é através de um componente baseado em classe. E o terceiro caminho é semelhante ao primeiro caminho, que é um componente funcional. Podemos usar Const. E então eu vou mostrar a vocês duas maneiras usando funcional e const. Então eu vou escrever navbar função. E tudo o que isso faz é devolver alguma coisa. Então eu escrevo div aqui. Div, esta é a minha barra de navegação, e este é um componente funcional. E tudo o que é, é literalmente apenas uma função e retorna um monte de js X. Então JavaScript e XML juntos. Então nós copiamos barra de navegação e vamos em frente e escrever isso como uma barra de navegação componente. E você pode ver que isso foi compilado com sucesso. Então, se eu abrir meu navegador agora, e vamos fechar o Bootstrap por enquanto. Nós não precisamos dele. Aqui diz que esta é a minha barra de navegação. E se eu mudar alguma coisa na minha barra de navegação, esta é a minha navbar 123123. Você pode vê-lo atualizado automaticamente para mim e disse Esta é a minha navbar 123123. Então isso é um componente baseado em função, um componente funcional. E estes são um pouco diferentes dos componentes baseados em classe que você aprendeu sobre React 101. Agora, na minha opinião, não há maneira certa ou errada de escrever componentes. Você pode escrevê-los como componentes funcionais ou pode usá-los como componentes baseados em classe. Eu pessoalmente só gosto de ter certeza de que se eu estou usando componentes funcionais, mas eles são todas funções, ou se eu estou escrevendo componentes baseados em classe que eles são todas as classes tinha apenas tipo de manter o código padronizado dessa maneira. Agora, se você tem um trabalho na estrada e você percebe que quando você está escrevendo reagir que uma seção está usando um componente funcional e outro segundo está usando componente baseado em classe. Na verdade, isso é ALK. Não há nada de errado com isso e isso é apenas uma preferência minha. Então reage a um que vamos usar componentes funcionais. Então vamos voltar para o nosso navegador e vamos digitar Bootstrap cinco, realmente fechar isso muito cedo e bootstrap F5 e eu querendo barra de navegação aqui. E então eu vou entrar em componentes. E onde está a minha barra de navegação? E há um em sua especificamente que eu quero que nós vamos modificar e este é o primeiro aqui. Então eu vou copiar tudo isso e nós vamos ter alguns erros aqui. Então, primeiro de tudo, eu vou apenas colar tudo isso lá e mudar no recuo. E agora você pode ver quando nós salvamos isso que ele diz esperado correspondente tag de fechamento js X para HR. Onde está o RH? Há um RH bem aqui. E assim, em HTML regular, você pode escrever HR assim. Você pode escrever BER, assim. Você pode até mesmo escrever IMG e tê-lo realmente não auto-fechamento, n js X. Você precisa de todas as suas tags auto-fechamento para realmente ser auto-fechamento com uma barra no final. Então vamos em frente e salvar isso. Diz que a etiqueta de fechamento JS X correspondente para entrada na linha 3838, coluna 1038, coluna dez vai me mostrar aqui. Na verdade, não está certo, mas está perto o suficiente. E o que ele está procurando é essa tag de entrada. entrada é a mesma coisa JS Acts e ele é uma etiqueta de fecho automático. Vamos em frente e salvar isso. E agora vai dar-me um monte de outros avisos. E acredito que, neste momento, isso deve funcionar perfeitamente. Então vamos voltar para o nosso navegador e olhar para isso. Se não funcionar para você, pode simplesmente clicar atualizar e deve funcionar para você neste momento. Agora a lista suspensa não ia funcionar. Nós não adicionamos Bootstrap. Javascript não vai usar isso. Basicamente, só queremos o link da barra de navegação, talvez um link desativado, e a busca lá dentro. É tudo o que procuramos neste momento. Agora, uma coisa a observar é quando você abre sua ferramenta de inspeção. Então, se você clicar com o botão direito do mouse inspecionar e entrar no console, você vai ver que vai reclamar muito de você sobre um monte de coisas. E primeiro de tudo, vamos em frente e corrigir este índice de tabulação. Você quis dizer índice de tabulação? Reagir e js X é um pouco. Agora não há como colocar isso. É exigente. E eu escrevo índice de tabulação com um I. maiúsculo e quando atualizo minha página e role de volta para os erros, esse erro não existe. E o bom é que ele realmente me diz o que ele pensa. Quero dizer, o outro aqui e este aqui me engana o tempo todo e isso provavelmente vai te pegar também. É isso diz classe de propriedade DOM inválida. Você quis dizer ClassName? Agora não estamos usando classes no sentido de classes JavaScript, mas estamos usando classes no sentido de HTML, CSS, atributos de classe. E então classe é na verdade uma palavra reservada. É uma palavra-chave em JavaScript e não queremos usar isso. Então o que eu vou fazer é selecionar todos estes e ir para a seleção e, em seguida, adicionar próxima ocorrência. E ele vai apenas selecionar todos estes. Então eu quero selecionar classes iguais a e, em seguida, selecionar todas estas, cada uma delas. E então eu posso digitar, basicamente, eu posso digitar em todos esses lugares de uma vez. Eu posso digitar um nome de classe com um N maiúsculo. Ok, vamos em frente e atualizar e olhar para isso. E não temos mais esses erros lá dentro. Mas temos alguns avisos. Então vamos em frente e limpar isso um pouco e talvez precisemos ignorar esses avisos por apenas alguns minutos. Então, neste menu suspenso, não precisamos daquela barra de navegação. Não vamos ligar para aquela barra de navegação. Vamos ligar para o navegador de filmes. E ele vai estar reclamando sobre HRF com link em branco. Então, apenas um sinal de número que é um link em branco. Vamos apenas dizer que indo para ir para algum lugar apenas para que nos livremos dessas reclamações por enquanto, vamos voltar para o nosso navegador, clicar em Atualizar, e com o nosso console aberto, e com o nosso console aberto, vemos que não há erros lá. Agora, se clicarmos em algum destes, isto não vai a lado nenhum. Você pode ver que ele vai para algum lugar na URL, na verdade não faz nada. Então, vamos resolver isso muito em breve. Mas a principal coisa que devemos estar tirando aqui é que classe, a classe atributo é realmente o nome da classe em reagir. Então você quer ter certeza de usar o nome da classe. E você quer ter certeza de que todos os seus elementos são JS Acts ou XHTML, não HTML regular, XHTML. E a diferença novamente é apenas em HTML regular você pode escrever imagem. Ou entrada, ou HR ou BR. Considerando que em JS Acts e em XHTML, é realmente barra de imagem. E é por isso que você me vê em outros cursos ou outros módulos escrevendo assim. Esta é a maneira antiga da escola, mas esta é também a maneira que React está esperando que você formatar seu código, seu HTML. Então é sempre esperando que em sua reação quando ele compilar, vai dizer, hey, se há um BR sem essa barra aqui, então provavelmente haverá uma tag BR de fechamento. Mas em HTML, não há uma tag BR de fechamento como uma tag de fechamento automático. Então, usamos essa tag de fechamento automático sempre que possível usando React. Certo, há mais uma coisa que temos que fazer aqui. Temos esta função na barra de navegação. Precisamos colocar isso em um arquivo diferente, caso contrário, nosso arquivo app.js ficará insanamente difícil de lidar. Então vamos em frente e clique com o botão direito do mouse em SRC New File. E eu vou criar uma nova pasta aqui chamada componentes. E isso vai ser chamado navbar ab.js. E o que eu vou fazer aqui é eu vou literalmente apenas cortar este código fora. Deixe-me ir até a barra de navegação Dot Js e colá-lo lá dentro. E eu disse que ia mostrar a vocês que há uma maneira funcional, como uma maneira de escrever um componente usando a função de palavra-chave. E também há uma maneira de usar o Const. Então, quando eu exportar isso eventualmente na estrada, eu vou estar usando Const. E então o que eu quero dizer é que const nav bar é igual a uma função de seta sem parâmetros nele ainda. É aqui que vamos colocar nossos prompts. Falaremos sobre isso na estrada. Mas basicamente esta é uma função anônima, função de seta anônima entrando em um conceito chamado navbar. E na parte inferior eu vou dizer exportação navbar padrão. Agora, isso realmente não vai fazer nada, exceto remover nossa barra de navegação do nosso app.js e ele ainda não consegue compilar porque navbar não está definido. Então, o que precisamos fazer agora é importar navbar de.com. Isso quer dizer que esta pasta em particular, em seguida, a pasta de componentes. Então ponto barra vai ser esta pasta particular, em seguida, a pasta de componentes, e, em seguida, barra de navegação. Nós não precisamos tomar navbar ab.js porque ele vai assumir ab.js foi a única vez que precisamos escrever nossa extensão é se ele vai ser layout.css ou algo assim, mas React e basicamente web pack em geral é assumindo que quando você importa algo, você está importando outro arquivo JavaScript. Então vamos em frente e salvar isso. E se isso funcionar corretamente, devemos ver que nada mudou aqui. Isso significa que está funcionando para nós. Agora, a qualquer momento, Reagir é realmente bom assim. Em qualquer momento, se você tiver um problema, você sempre pode olhar para o seu terminal. Vai te dizer exatamente qual é o problema. Se você precisar de mais detalhes, você sempre pode abrir seu navegador e ele irá dizer-lhe exatamente a mesma coisa. Então, neste caso, a barra de navegação não está definida. Isto está dizendo, hey, tentando usar navbar, mas não foi definido porque foi comentado. Agora eu importei. Tenho acesso a isto como componente. Vai funcionar para mim. Vai compilar com sucesso. Em nossa próxima lição, vamos em frente e criar um novo componente para nossa página inicial. Então esta vai ser a nossa página inicial aqui. Teremos mais detalhes dentro da nossa página inicial. Então, na próxima lição, vamos em frente e fazer isso. 6. Como adicionar um componente home: Tudo bem, vamos em frente e criar um componente de página inicial funcional. Então vamos fazer consola. Vou usar constante desta vez. Vou chamar essa home page, home view agora basta chamá-la home é igual a seta parênteses. Então esta é uma função de seta. E posso devolver o que quiser aqui. E então eu vou dizer retornar com um div. E, de fato, uma coisinha legal que você pode fazer é que você não precisa escrever div, você só precisa abrir, fechar JS Acts lá dentro. E você pode escrever olá mundo de React 201. E reparem que este só diz olá do reactor um. Este diz olá mundos. Vamos em frente e nos livrar disso. E porque temos essa constante aqui, que é uma função de seta e uma função de seta anônima chamada home. Agora podemos classificar casa como um componente. Vá em frente e guarde isso. E vamos atualizar nossa página e diz olá mundo de reagir a um. Ou se eu quisesse, eu poderia fazer yada, yada, yada, e ele irá atualizar automaticamente para mim na minha página também. Agora, isso é legal e tudo, não super, super útil. Mas o que ele fez foi tirar o código do aplicativo e colocá-lo em um componente para que em nosso aplicativo, você pode apenas tipo de fingir que este é todo o nosso código de aplicativo aqui. É agradável e limpo. Sabemos que temos uma barra de navegação, temos componentes domésticos. E se quiséssemos, se quiséssemos apenas mudar componentes em casa, o que poderíamos fazer é abrir home.html ou nav bar dot js e editá-los separadamente. Então é manter nossos componentes separados é, bem, essa é a idéia de qualquer maneira, é que podemos manter nossos componentes separados e é por isso que os chamamos de componentes. Então o que eu vou fazer aqui é eu vou pegar este corte que eu vou dizer importação para casa de componentes de barra ponto barra barra para casa. Agora isso não vai compilar para mim. O que eu vou precisar fazer é criar um novo arquivo aqui chamado home.html. E isso só vive nos meus componentes. Você pode ver que aqui componentes. Também está nos meus componentes. E o que eu vou fazer é eu vou dizer colar isso e depois exportar por padrão aquela casa const. E agora você pode ver que isso funciona. Então, se eu apenas atualizar a página, há pouco erro lá embaixo no console, mas se eu atualizar a página, não haverá mais erro. E se eu quiser mudar minha página inicial, posso dizer que isso é uma mudança em um arquivo diferente. E o que é bom sobre isso é que minha página inicial agora é autônoma. Eu não tenho que escrever toda essa lógica no meu aplicativo porque a coisa toda vai ser seu aplicativo. E se você fez isso, este arquivo pode ficar muito, muito longo. Estamos falando de milhares e milhares de linhas de código. E isso é muito, muito difícil de trabalhar. Isto é muito mais fácil. Você pode apenas dizer, olha, há um aplicativo, tem uma barra de navegação, tem uma casa. Vamos clicar com o botão direito do mouse na barra de navegação, vá para definição. Ele abre para mim em código VS. Nem todos os navegadores farão isso, mas o código VS é muito, muito inteligente quando se trata de JavaScript. Então, o que eu gostaria que você fizesse para sua tarefa aqui é que eu quero que você tenha certeza que você tem o componente Navbar e um componente home. Verifique se eles estão em arquivos separados. Importá-los e usá-los. Eles não precisam ser complexos. O não tem que ter um monte de texto e aqui, na verdade, este não tem mesmo texto muito bom nele. Este é simplesmente apenas diz olá mundo de reage a um. Vá em frente e certifique-se de que isso funciona para que possamos escrever nosso código em outros arquivos. E isso vai manter o nosso código também vai manter a sanidade dela na linha. 7. Como adicionar um componente sobre: Ok, vamos em frente e criar uma nova visualização de página. Então, agora, a única visualização de página que temos e o que eu chamo de vista. E o que eu chamo de vista é isto, esta coisa toda aqui dentro. Então isso é como a exibição da página inicial. E se houvesse uma página sobre, que seria uma visão Sobre ou se houvesse uma página de pesquisa dedicada, eu seria uma crítica. E nós usamos este termo muito em linguagens de renderização de template e frameworks como Django. Então esta é uma visão e precisamos criar uma página sobre. Então não temos página inicial, agora precisamos de uma página Sobre. Então vamos fazer const sobre Vw é igual a uma função de seta e retorno, isso vai fazer é retornado e H2. Isso diz sobre nós. Agora, isto é fixe. Você pode realmente ver que cerca de v foi atribuído, mas nunca é usado. O que podemos fazer é jogar isso aqui e podemos dizer sobre visão. Eu provavelmente deveria ter chamado essa página inicial, a vista de casa. Mas avançando, vamos manter essa visão nomeada. Então nós temos isso sobre combustível e você pode ver que ele, ele é compilado com sucesso. Mas o problema é que agora temos uma visão da página inicial. Ops, e agora temos uma visão da página inicial. E nós não tivemos uma visão de barco e nós realmente queremos que eles estejam em páginas separadas. Então o que eu quero que você faça é que eu quero que você escreva em uma vista de barco e então eu quero que você mova isso para o seu próprio componente. E então, uma vez que você tenha feito isso, vamos para a próxima lição onde aprendemos sobre o que começamos a aprender sobre o roteador React DOM, é um pacote diferente. Vamos instalar um novo pacote na próxima lição. Então certifique-se de dividir isso em um novo componente. Essa é a sua tarefa para esta lição. Quando terminares isso, vejo-te no próximo vídeo. 8. Como instalar um rout: Certo, bem, precisamos fazer agora é começar a trabalhar com essa coisa chamada rotor. E o rotor é basicamente como nós roteamos de páginas diferentes. É rota ou é raiz? Eu digo rota. Então, se você clicar em casa onde se você clicar no comprimento, fingir que isso é como a página Sobre. Só deve mostrar sobre nós. E se você clicar em casa, eles só devem mostrar o título da página inicial. E a URL deve até mudar também. Então, deve ser como barra seria apenas sua casa é barra sobre vai ser a página Sobre. Atualmente, ele apenas faz tudo junto. Então, nos próximos vídeos, vamos nos acostumar a trabalhar com reagir, roteador DOM. E então o que precisamos fazer aqui é entrar no terminal. Vamos cancelar o controle C para cancelar lá. Vou fazer o nó v. Isso só vai mostrar que estou usando uma versão errada do Node. Surpreendentemente, como vou mudar esse nó, use 15, essa é a minha versão mais recente. E o que eu vou fazer é npm instalar React, roteador, traço, DOM. E isso vai explodir e instalar basicamente outra ferramenta útil no mundo do React chamado de rotor. Então, se olharmos para o nosso package.json e entrarmos aqui, fazer, fazer, fazer. Vamos ver dependências. Temos reagir, reagir, Dom, reator, roteador, DOM, então temos isso lá agora. E isso é apenas a prova de que foi instalado corretamente. Então o que eu quero que você faça para este vídeo em particular é simplesmente executar NPM instalar, Reagir, roteador, DOM. Isso é tudo que você precisa fazer uma vez que você tem isso funcionando ou eu acho que não está funcionando, mas uma vez que você tem isso instalado, vamos para a próxima lição onde nós configuramos nosso roteador do navegador. 9. Como usar o componente de roteador do navegador: Certo, vamos dar uma olhada na ativação do roteador. Então, o roteador, só porque nós instalamos com npm install React router dump não realmente chuta automaticamente. Temos que dizer para ser usado. E então o que queremos fazer aqui é ir para index.js e queremos digitar import, e vamos estruturar isso ou desconstruir isso. Vamos pegar o roteador do navegador do React Router, dash.com. E você pode ver que isso é meio fraco porque não está sendo usado agora. Dentro do nosso Modo Estrito, o que vou fazer é criar um novo elemento aqui. E ele vai mover este aplicativo para dentro dele. E então eu tenho reagir modo estrito, legal. Então eu tenho o rotor do navegador, e então eu tenho meu aplicativo dentro disso. Isso é o que nós trabalhamos nos últimos vídeos, é o nosso aplicativo real. Você pode ver o que está vindo do aplicativo dot. Ponto, ponto-ponto-ponto, ab.js. Isso vem daqui. E então eu disse para fechar o roteador no caso de não querermos mais usar um roteador. Feche o modo estrito. Agora, isso só diz que nosso aplicativo vai estar dentro de um roteador. Tudo o que está fazendo. Então vamos em frente e salvar isso. Vamos voltar ao nosso app.js. E aqui precisamos fazer essa coisa chamada interruptor, e então trocamos as raízes. Então, se você tiver escrito uma instrução de switch JavaScript, ela se parece com isso. Troque, seu caso. E então ele vai dizer que seu caso vai ser coisa, fazer alguma coisa, quebrar. Caso, Padrão. Faça alguma coisa quebrar. E então esta é uma declaração switch. É, é basicamente um muito rápido se, else if instrução usando apenas um tipo diferente de sintaxe em JavaScript, um monte de linguagens diferentes têm uma instrução switch e JavaScript é um deles. E então o que queremos fazer agora é que queremos escrever nossa declaração switch aqui. Então eu tenho essa div e o que eu vou fazer é eu vou escrever switch e que automaticamente criado switch. Vamos em frente e mover isso para cima. E então eu posso escrever roteador. Caminho é igual a barra exata. E aqui posso dizer que vai haver uma página inicial. Há outra maneira de escrevermos esses dois e vamos mover essa soma dessa barra de navegação para fora do switch para que ela seja sempre global. E há outra maneira de escrever isso. Podemos dizer que o caminho do rotor corta um barco. E então podemos passar para o componente. Podemos dizer que o componente vai ser a visão Sobre. E é uma etiqueta de fechamento automático desta vez, vamos salvar isso e ver se há algum problema. NPM começar. E nós temos, sim, isso faz sentido. Switch e roteador ou não definido, é porque eu não importei, é claro. Então o que eu quero fazer aqui, não é um roteador também. O que estou fazendo aqui é rota. E o que eu quero fazer é importar, mudar e também rotear para React, roteador, burro. Vamos em frente e salvar isso compilado com sucesso. Vamos ver se isso realmente funciona. Então, se formos para localhost porta 3 mil, podemos ver que diz olá mundo de reagir a um. Se eu for para cortar sobre, ele mostrará a página Sobre. Na próxima lição, vamos em frente e adicionar links aqui para que possamos vincular de e para as páginas. É um pouco diferente de um link normal porque você vai notar que se eu fizer isso, é meio que pisca rapidamente. Então, se eu apenas digitei cortar um barco, você vê outra página tipo de pisca, leva 15 ou 20 milissegundos para carregar. Não é instantâneo. Podemos realmente fazer isso para completamente instantâneo quando você clica em um link. E isso vai fazer do nosso aplicativo um aplicativo de página única. Somos chamados de aplicativo web progressivo. Vamos fazer isso na próxima lição. Por enquanto, o que eu quero que você faça é que eu quero que você tenha certeza que você mudou de configuração. Dentro do seu interruptor, você tem rotas diferentes. Você deve ter uma rota para sua página inicial, uma escreveu para você sobre visualização. E há duas maneiras diferentes de fazer isso. Eles são exatamente os mesmos, faz exatamente a mesma coisa. Uma coisa que você vai querer prestar atenção no entanto, é que esta é a sua página inicial, então apenas Slash vai ser a sua página inicial. E diz que, exigindo aqui, esta é a única rota que vai tomar exatamente. E isso está vindo para dizer, se esse caminho é exatamente este, então ele vai renderizar nossa página inicial. Se o caminho é barra sobre não exato. Esta é a pesca V. Aqui está um caso em particular. Se for exatamente isso, então renderize a página inicial. Caso contrário, este caminho é barra sobre componente é sobre vista e sabemos sobre o, sobre combustível, sabemos sobre o componente doméstico. Já construímos estes. Nós, nós importamos estes, nós temos estes em diferentes arquivos de componentes já. E assim, estas são apenas duas maneiras diferentes de fazer exatamente a mesma coisa. Seja qual for a maneira que quiser escrever, está tudo bem para mim. Eu só queria te mostrar que há um caminho e outro caminho. 10. Links baseados no reato: Tudo bem, o que temos é se eu abrir o Google Chrome e tivermos essa barra de navegação e, atualmente, os links não vão a lugar nenhum. Vamos em frente e certifique-se de que esses links vão para algum lugar para que possamos alternar entre a página sobre e a página inicial. E para isso precisamos abrir navbar ab.js. E então nós temos este navegador de filmes, e este é apenas o nosso título. Isso é bem aqui em cima. E diz que vai para algum lugar. Então, em vez de dizer a, o que vamos dizer é que vamos pegar tudo isso. Vamos usar um link. Ainda não importamos isso, então isso vai ser um pequeno problema, mas chegaremos lá em um segundo. Eu vou pegar todas as tags de fechamento de link, as tags âncora e fazer link barra em vez disso. E todos os HRFs. Href vai ser também. Agora que o navegador de filme vai para a barra casa também vai para barra. E isso não vai salvar. Você pode ver que isso realmente vai falhar porque o link não está definido. Vamos em frente e importar link. Portanto, importe link de Reagir, roteador, dash.com. E lá vamos nós. Ok, então vamos em frente e mudar esta ligação deles. Aquele que só tem Lincoln normal lá e sim, vamos falar sobre não sobre nós. E isso vai para cortar sobre e não estavam ficando barra sobre é bem aqui que combina com este caminho em particular. Então, corte sobre deficientes. Vamos em frente e fazer este, digamos que em breve. Este não importa. Este link está desativado de qualquer maneira, então ele pode ir praticamente em qualquer lugar. E acho que é tudo o que temos aqui. E vamos voltar ao nosso navegador, atualizar. E temos uma página “Sobre”. E quando eu clicar neles, você pode ver que é instantâneo. É super, super rápido. E a coisa boa sobre isso é que não está recarregando todo o meu JavaScript não está recarregando todo o meu CSS. Ele já está carregado de uma vez. E assim, quando eu, quando eu clicar em um destes, tudo o que tem um interruptor para fora o conteúdo para mim. E assim como fazemos isso é escrever link, que é importado de um roteador React DOM. Então temos o nome da classe link apenas como um elemento HTML regular. Mais atributos de elementos HTML para em vez de HREF, escrevemos 2x é igual a e, em seguida, colocamos em um link que realmente existe. Então barra vai para a página inicial, barra Sobre, vai para a nossa exibição Sobre. Então dizemos barra link. Então ele funciona muito como tag âncora irregular em HTML. Este está simplesmente dizendo que hey, porque você está usando um roteador, você pode trocar esse conteúdo instantaneamente. Você não precisa se preocupar em recarregar a página ou qualquer coisa. Só que já sabe que existe. E então isso vai ser muito, muito rápido quando as pessoas eventualmente carregam sua página. Você sabe, uma vez que você tem sua página em um servidor ao vivo, alguém vai carregá-lo e vai ser apenas instantâneo. Então vá em frente e mude essas tags para uma tag de link. Não se esqueça de alterar o seu HREF 2A, dois atributos. E quando você fizer isso, vamos para a próxima lição onde talvez adicionemos um novo componente chamado, sim, não é um novo componente chamado Herói. E nós vamos apenas adicionar um pequeno título agradável para cada uma de nossas páginas. 11. O componente do herói: Ok, vamos adicionar um novo componente chamado herói. Então vamos abrir este arquivo home.html e vamos criar um novo componente. Então constante, vamos chamá-lo de herói é igual a uma função de seta vazia e ele simplesmente vai retornar alguns Bootstrap. Então podemos dizer o cabeçalho. E esta vai ser uma seção de heróis. Vou te mostrar o que é isso em um segundo. O nome da classe vai ser VG escuro. Não me lembro se isto é Bootstrap ou Tailwind. Acho que é Bootstrap. Então BG, texto escuro branco. Vamos fazer o estofamento cinco todo o caminho ao redor. E digamos apenas uma. Este é um componente de herói. Agora isso não vai fazer nada. Você pode ver aqui que foi realmente represado e recebemos um aviso que é atribuído, mas nunca é usado em nossa casa. O que podemos fazer é dizer herói como componente. E isso parece ficar perfeitamente bem. Agora, quando voltarmos para a nossa página, bem, eu estou na página sobre, mas quando eu vou para a página inicial, este é um componente herói. Agora nós não tínhamos isso levando até este ponto. E o que podemos fazer é se não quisermos isso na página sobre, podemos simplesmente deixá-lo fora da visão sobre. Mas o que podemos fazer é dizer, hey, eu gostei deste componente e eu também quero que ele esteja na página sobre. Então vamos em frente e dividir isso em seus próprios componentes chamados Herói. E o que eu vou fazer é criar um novo arquivo chamado Hero ab.js e basta colar isso lá. E eu vou escrever o padrão de exportação e depois o nome deste herói const. E quando eu abri home.html s, Ele vai tentar acessar herói, mas não está definido. Você pode realmente ver que ele diz isso aqui em baixo. Então o que eu quero fazer agora é importar herói de componentes não barra ou componentes de barra ponto porque já estamos na pasta componentes. Então nós queremos dizer nesta pasta, Então ponto barra herói. E isso funciona para nós. Agora, se as coisas funcionassem, não veríamos nenhuma mudança. Isso é perfeito. Quando você não vê alterações enquanto move código, enquanto refatora, é exatamente o que você quer. Então vamos em frente e mover este herói e não mover, mas vamos adicionar este herói. Vou copiar a linha um e a linha sete. E eu vou para a minha visão sobre. Vou colar isso aqui também. E nós temos que fazer um pouco de trabalho aqui. Então, na minha visão sobre, eu vou importar herói também. Então este é um componente que está sendo usado em dois arquivos diferentes. E eu quero devolver JS X. Eu quero mover aquele herói para cima. Eu quero mudar o assunto sobre nós para cima. Vamos nos livrar disso. E tudo parece bom. Agora, quando eu voltar aqui, nós temos este componente herói em ambas as páginas. Agora, na próxima lição, o que eu vou mostrar a vocês é como podemos mudar isso com base na página para que possamos fazer isso dinâmico porque este é um componente herói. Isso poderia dizer bem-vindo ao navegador de filmes, mas se ele diz Bem-vindo ao filme navegar em cada página que vai ficar meio velho. Ninguém quer ver conteúdo antigo em cada página. Então nós, nós queremos dizer, ver que isso diz sobre nós ou por que nós existimos ou algo assim. E a página inicial vai dizer, bem-vindo a reagir a um ou algo ao longo dessas linhas. Mas, por enquanto, o que eu quero que você faça é que eu quero que você crie um novo componente de herói. E então eu quero que você importe para sua página inicial e importe para sua visão sobre também. Certifique-se de usá-lo em ambos os lugares. Ele pode ser codificado e deve ser codificado neste momento. E assim como este é um componente de herói na próxima lição, quando você fizer isso, vamos falar sobre passar adereços. 12. Opções de componentes: Certo, vamos dar uma olhada em passar um prompt de texto para os componentes do herói. Então, em nossa página inicial, temos este componente herói e ele renderiza um cabeçalho. Com isso é um herói componentes. E queremos que isso seja diferente porque atualmente na visão Sobre, temos a mesma coisa. Estamos importando este componente de herói. Mas se eu clicar com o botão direito do mouse e ir para a definição, ele diz exatamente a mesma coisa e isso não é maneira de viver sua vida. O que você quer fazer é que você quer ser capaz de passar em algo um pouco mais flexível. E então o que vamos fazer é primeiro ir para a nossa página inicial e vamos adicionar o nosso primeiro aviso. E só vai ser chamado de texto. E este texto será bem-vindo para reagir 201. E, de fato, como esta é apenas uma corda normal, eu não preciso daquela cinta encaracolada lá dentro. Então nós temos essa propriedade text ou um atributo em HTML, mas em React, nós chamamos isso de prop. E porque é chamado de textos, mas podemos fazer agora em nosso herói, podemos usar chaves, digitar texto, e então podemos colocar o texto dentro de nosso componente, como este texto. E diz bem-vindo a reagir a um. A página Sobre não tem nada, mas a página inicial diz Bem-vindo para reagir a um 1s. Então, está se tornando um pouco mais dinâmico neste momento. Agora, o que queremos fazer para nossa visão de residência é que também estamos usando o componente herói aqui. Então vamos dizer que o texto vai ser sobre nós. E novamente, o que isso vai fazer é dizer, hey, renderizar este componente herói com uma propriedade de texto. Em nossos componentes de herói, temos Collins herói é igual a. E depois fazemos algumas reestruturações aqui. Então essa primeira variável destruída vai ser texto, e que corresponde ao nome da propriedade bem aqui. E então podemos usar isso dentro da nossa declaração de retorno. E então, quando vamos para nossa página inicial agora ele diz sobre nós e isso é perfeito, que o conteúdo está sendo alterado dinamicamente. O que há de bom nisso é que agora temos um herói. Podemos nos livrar deste, aquele H2, e na nossa página inicial podemos nos livrar desse H1. E nós temos essa página meio que se juntando, essas duas páginas se juntando. Então eu quero que você tenha certeza que você tem componentes de herói, não o dever de casa, mas hey, componente herói, isso é tomar uma propriedade. Passa esse adereço. Use o texto que você quiser passar lá, mas passe esse adereço para o componente de herói e, em seguida, renderize esse adereço em sua declaração de retorno. Vá em frente e experimente isso. E quando terminar, vamos para a próxima lição, na qual adicionamos conteúdo básico à nossa página inicial e à nossa página sobre. 13. Adição de conteúdo genérico: Ok, vamos adicionar um pouco de conteúdo à nossa página inicial e nossa página sobre. Então isso não é realmente super reativo, mas isso é meio importante para construir uma página. E então estamos usando bootstrap e eu estou no meu arquivo home dot js aqui. E o que eu posso fazer é digitar nome da classe div é igual ao recipiente. Nome da classe div é igual a rho d de ClassName. E isso se parece muito com HTML normal, apenas escrevendo bootstrap cinco, class_name vai ser carvão, LG oito offset LG também. E isso só vai centralizar minhas oito de 12 colunas aqui que eu vou estar configurando. E vamos em frente e escrever lorem ipsum aqui. E vamos guardar isso. Volte para a nossa página inicial. Podemos ver que temos algum lorem ipsum aqui. Agora precisamos adicionar alguma margem aqui na margem superior e inferior. Então, margem y de cinco. Lá vamos nós. Isso parece um pouco melhor. E o que podemos fazer aqui é porque isto é suposto ser um parágrafo. De qualquer forma, o que vamos fazer é dizer que este parágrafo class_name vai ser liderado. E isso só vai fazer este texto um pouco maior. E isso é novamente apenas Bootstrap regular. E assim você pode ver o texto indo um pouco maior. Vamos em frente e fechar isso. E na nossa página sobre, vamos em frente e fazer exatamente a mesma coisa e você pode escrever o que quiser aqui. Vou manter isto como uma mensagem falsa. E quando eu chegar ao fim disso, antes de dar todo o código-fonte, eu vou mudar o que este texto está na página inicial. Eu só não queria que você tivesse que me ver escrever isso porque isso é chato e não tem jeito de viver sua vida. E então eu vou simplesmente colar isso aqui. E essa formatação ficou toda engraçada. Então o que eu vou fazer é antes de tudo, eu tenho uma extensão chamada mais bonita instalada. Então PRE TTIP, ER, É este e é um formatador de código simples. E assim que você tiver isso instalado, você pode apertar Command Shift P, controlar a mudança B no Windows, todos os turnos P. De qualquer maneira, você vai querer esse amiguinho aberto. Então, se você bater como ALT P, você pode apenas apertar o sinal maior que e, em seguida, digite o documento formatado. E isso pode pedir que você configure usando mais bonito, caso em que você vai, você vai ter que selecionar mais bonito, que é totalmente bom, e ele vai formatar o seu código para você. Então talvez eu faça isso em alguns outros arquivos aqui para vamos fazer isso no Home Format Document. Vamos fazer isso no formato App. O documento, não, nada mudou. Perfeito. Estamos indo bem lá. Index.js, podemos fechar, nunca mais vamos tocar nisso. E é só isso. E então isso apenas formatou meu código para mim muito bem. E então agora quando eu vou para casa, nós temos conteúdo diferente e sim, vamos realmente ter certeza de que nós temos diferentes lorem aqui também, Lorem 25. Só para que possamos ver que isso está de fato mudando e que era exatamente o mesmo texto. Vamos ver Lorem 50. Só tenho um atalho no meu computador para Lauren 25 e Lauren 50. Lá vamos nós. Isso parece diferente. Então agora temos uma página inicial e sobre a página usando um aplicativo de página única. Agora nosso site React está usando isso e o que é bom sobre isso. Se alguém vier ao seu site, vá direto para cortar um barco e ele irá renderizar a página Sobre para nós. Não temos de fazer nada de magia. Ele descobre magicamente para nós, o que é ótimo. Na nossa próxima lição. Assim que terminar de trabalhar nisso e fazer parecer do jeito que quiser. Você pode adicionar imagens e qualquer outra coisa que quiser aqui. Quando estiveres pronto. Vamos continuar a próxima lição em que criamos uma nova visão final de rota de pesquisa, porque agora nossa pesquisa não faz nada. Isto não funciona. E queremos que isto comece a funcionar. Então, nos próximos vídeos, vamos trabalhar com a pesquisa. 14. Como adicionar um componente de pesquisa: Ok, vamos em frente e criar uma rota de busca e uma vista. E então o que eu vou fazer aqui é antes de qualquer coisa que eu vou apenas dizer importação exibição de pesquisa de componentes barra ponto visão de pesquisa barra. E agora isso não existe. E isso vai reclamar de mim em um segundo e eu vou criar uma nova rota aqui. E esta rota vai ter um caminho de busca de barra e isso é tudo o que ele vai fazer. E aqui eu posso dizer a vista de pesquisa e eu não quero que isso esteja fechando, eu quero que isso seja auto-fechamento. Agora isso não vai compilar. Isto obviamente vai dizer que componentes taxa de pesquisa não existe, não pode resolvê-lo. Vamos em frente e fazer com que exista. Então vamos pegar nossa casa. E eu só vou resalvar isso como busca ponto js. E precisamos mudar isso para a exibição de pesquisa. E sim, vamos manter o nosso herói do jeito que está. Porque eu meio que gosto disso. E vamos continuar dizendo algo como você está procurando. E então algumas coisas lá dentro. Vamos deixá-lo como está por agora. Certifica-te de que exportamos isso. Certo, agora funciona. Então agora podemos ir para a busca de barras. E diz que você está procurando. Então, agora criamos uma exibição de pesquisa muito, muito rapidamente. E criamos uma nova rota. E apenas nessa rota, eu usei esta versão da mesma forma que usamos a página inicial apenas para mostrar que você pode fazer isso de duas maneiras diferentes. Eu poderia ter escrito assim tão facilmente. Eu escolhi escrever assim. Então talvez o próximo que você acaba escrevendo é, ou o próximo nós acabamos escrevendo porque nós vamos estar escrevendo mais um. Vamos usar essa maneira apenas para mostrar a você e demonstrar que você pode usar qualquer um de forma intercambiável. 15. Ferramentas de componentes de pesquisa: Ok, vamos falar sobre o uso do estado, bem como passar o estado para baixo através de prompts para oito, outro componente. Isso pode soar um pouco assustador, um pouco avassalador, mas não, vamos dar um passo de cada vez, como sempre fazemos. Então, em nosso aplicativo aqui, o que podemos dizer é essa coisa mágica chamada cont. Vamos para a estrutura D e matriz. Então, vamos chamar esses resultados de pesquisa de conjunto de vírgulas resultados de pesquisa. E isso vai usar estado, não estátua, mas estado. E vai levar, eu acho que vai ser um objeto. Sem resultados de pesquisa precisamos de algo para percorrer mais tarde usando a função de mapa. Então vamos definir uma matriz como o padrão. Agora você afirma não é importante, precisamos importar isso. Então vamos da Importação. Use apátrida também, você começa efeito EUA enquanto estamos aqui, vamos usar isso um pouco abaixo da estrada. E vamos importar isso do React. E então, quando compilamos, pelo menos isso está dizendo que não está sendo usado, mas pelo menos não está reclamando que é indefinido. Agora vamos precisar definir mais uma coisa no seu texto de pesquisa. Isso é o que vamos mostrar em nossa página e definir texto de pesquisa. Vou mostrar-lhe como funciona o adereço em apenas um segundo. Então use state e o valor padrão será uma string vazia. Muito bem, vou mostrar-vos como isto funciona, mas temos de conseguir a configuração primeiro. Então vamos em frente e pegar a configuração. Na verdade, nomear. Vou voltar atrás nisso. Então, sempre que você usar os resultados de pesquisa definidos são definidos texto de pesquisa ou o que você chama isso. Esta vai ser a sua variável que você pode acessar. Esta vai ser a função que você, em seguida, definir esse estado. Então, se você é novinho em folha no Estado ou se você é relativamente novo para ficar e você já jogou com um pouco em componentes baseados em classe Lake, como em reagir um-para-um. Bem, usamos em reagir um-para-um e reagir um-para-um. Use este estado de ponto. Embora não tenhamos isso em componentes baseados em função. Então usamos um gancho chamado estado dos EUA. E podemos mudar isso dizendo definir texto de pesquisa, novo texto. E, e então vamos em frente e fazer este console. Log de ponto. O texto de pesquisa é o padrão. Tenho um erro de digitação, mas tudo bem. Vou apagar isso em um segundo. E então vamos fazer o tempo limite definido. E vamos fazer disso uma função de seta também. E isso é tempo em dois segundos. Vamos dizer definir texto de busca, texto novo. E então vamos para console.log. Texto de pesquisa é o novo texto. E então vamos ao nosso navegador de filmes e atualizar nossa página. E eu não fiz isso grande o suficiente rápido o suficiente. E você pode ver que isso está realmente começando a mudar um pouco. Agora, tem um pequeno inseto aqui. E o que eu vou fazer é me livrar disso só porque e isso é muito importante saber. Lá vamos nós. Há um e não queria que destruindo meu navegador é cada vez que você chamar a função set, usando estado vai refazer todo o seu aplicativo. Então o que isso estava fazendo era receber meu texto de pesquisa, que não era nada por padrão. Em seguida, após dois segundos, ele iria definir o meu texto de pesquisa para novo texto. Mas como o texto de pesquisa do conjunto foi usado no estado, ele re-renderizou todo o meu componente, que acontece de ser todo o meu aplicativo. Que, em seguida, novamente ele lê de cima para baixo e diz, ok, vamos procurar texto vai ser nada em segundos. Defina-o para ser novo texto. Oh, olhe para isso. Ok. Texto de pesquisa alterado novamente, renderize novamente o aplicativo. E vai uma e outra e outra vez. Há uma maneira de contornar que eu vou mostrar-lhe como isso funciona com o efeito dos EUA no final da estrada. Mas, por enquanto, vamos passar algumas dessas coisas para a nossa visão de pesquisa. E assim nossa visão de pesquisa aqui vai ser como palavra-chave vai ser e este é um texto de pesquisa prop. E quando chegarmos aos resultados da pesquisa, também queremos colocar isso em nossa busca de visão. Então, vamos dizer que os resultados da pesquisa são iguais a dois resultados da pesquisa. E o que isso vai fazer é porque temos uma barra de navegação e aqui também temos esses componentes diferentes. Todas essas informações, o estado vai ser armazenado no aplicativo geral. E assim em, digamos que nossa barra de navegação e poderíamos dizer definir resultados de pesquisa vai mudar os resultados da pesquisa. Quando esses resultados de pesquisa mudarem, ele vai, em seguida, re-renderizar esta exibição ou todo este aplicativo e ele vai mudar nossa visão de pesquisa para nós. Então vamos em frente e salvar isso. E vamos abrir nossa visão de busca. Então, clique com o botão direito e vá para Definição. E nossa visão de pesquisa agora precisa levar para adereços e ESA, palavras-chave e resultados de pesquisa. Então vamos D estruturar estes. Então dizemos palavra-chave e resultados de pesquisa, e eu copiei e colei isso da minha área de transferência. Eu tenho uma prancheta chique para que eu possa copiar e colar várias coisas ao mesmo tempo. E então o que eu quero fazer é mudar essa palavra-chave. Então assista essa palavra-chave e ela só vai mudar um texto no meu herói. Então, se eu for para barra de pesquisa, não há nada lá por padrão. Mas se eu mudar isso, porque este é o valor padrão. Procurando por ponto-ponto-ponto, procurando por ponto-ponto, 1-2-3, 1-2-3, 4-5-6, 4-5-6. Então isso vai ser apenas usando o texto de pesquisa regular lá dentro. Agora não quero que diga o que estou procurando. Quero que isto diga uma frase. Então título const é igual a um modelo literal. Você está procurando e, em seguida, palavra-chave. E o que podemos fazer é em vez de usar uma string aqui, podemos usar este título. Você está procurando. E então em branco. não há nada lá. Isso está tudo bem. Vamos trabalhar com isto. Agora vamos também ir em frente e console registrar nossos resultados de pesquisa. Console.log ou resultados da pesquisa são os resultados da pesquisa. É tudo o que vamos fazer por enquanto. Eventualmente vamos pegar os resultados da pesquisa, que vai ser uma lista ou um array. E vamos fazer um loop através de cada um e colocar algum texto em nossa página para que possamos realmente percorrer os resultados da pesquisa usando uma API. Ainda não chegamos tão longe, só precisávamos passar isso ao mesmo tempo. Então, como uma breve recapitulação, o que fizemos aqui é que dissemos que o texto de pesquisa e o texto de pesquisa vai estar usando estado. Definir texto de pesquisa irá mudar pesquisado o texto de pesquisa. E sempre que o texto de pesquisa é alterado, usando esta função, ele vai rerenderizar todo o aplicativo, que pode ou não ser o que queremos o tempo todo. E então há uma maneira de contornar isso usando o efeito dos EUA. Então dissemos que o texto da pesquisa e os resultados da pesquisa, que vai ser uma string e uma matriz serão adereços da visão de pesquisa. Então podemos passar isso para a visão de busca para renderizar na estrada. Em seguida, em nossa visão de pesquisa, dissemos que havia uma palavra-chave e resultados de pesquisa. Essa palavra-chave que colocamos em um modelo literal e um conceito chamado título. E nós mudamos dinamicamente esse texto de Herói. E então, eventualmente, quando alterarmos nossos resultados de pesquisa, quando mudarmos essa palavra-chave, vai dizer que você está procurando por Star Wars, você está procurando por Star Trek. Você estava procurando por lacaios ou qualquer tipo de filme que você queira procurar. Será muito mais dinâmico no final da estrada. Agora, vá em frente e dê uma chance a isso. Isso pode ser um pouco confuso, mas neste ponto no tempo, realmente não precisa fazer muito sentido porque estamos no meio de um par de grandes características aqui. E assim que funciona quando você ensina online é que ele precisa ser dividido em vários vídeos. E então estamos em um estado estranho aqui. E se isso não faz sentido para você, se o que eu fiz neste vídeo não faz todo o sentido para você, tudo bem. Poder através disso de qualquer maneira, dê uma chance a isso. Você sempre pode verificar o código-fonte também. 16. Eventos vinculados: Muito bem, vamos trabalhar com a nossa barra de pesquisa. Então, em nossa barra de pesquisa, quando digitamos algumas coisas, precisávamos realmente fazer algo. E atualmente não faz nada. Então vamos para a nossa barra de navegação onde está a nossa busca. E aqui, você sabe, vamos formatar este documento. Então temos essa entrada e queremos definir um valor aqui. Então o valor vai ser, digamos teste. É teste, mas você pode ver que nós realmente obter um erro em seu ouvido dizendo ou um componente de aviso está mudando uma entrada descontrolada para ser controlado. Isso é provavelmente causado pelo valor mudando de indefinido para um valor definido que era, era atualmente ponto de interrogação e agora é teste, que não deve acontecer. Decida entre usar uma entrada controlada e descontrolada durante a vida útil do componente. Há mais informações aqui, você sempre pode ler sobre isso. Mas basicamente o que isso está dizendo é, ei, isso era somente leitura e você não pode digitar e eu não sei se você pode me ouvir batendo no meu teclado aqui, mas eu estou digitando, nada acontece, e isso é um problema. Então, como contornamos isso em reagir? Bem, em primeiro lugar, reagir sempre diz que um campo de entrada é sempre lido somente se você tentou definir esse valor. Bem, precisamos fazer é definir esse valor para ser o valor de pesquisa. Também precisamos de um manipulador de eventos onchange para realmente lidar com isso. E nós vamos dizer atualizar texto de busca. Agora, isso não faz sentido. Mas se, se, se, se for perto, alguns desses não, demais. Lá vamos nós. Isso está ficando gentil aqui e eu só quero fazer isso um pouco mais curto para que possamos ver quase todas as coisas na mesma, na mesma janela aqui. Podemos dizer const, se chamamos de texto de busca de atualização. Atualizar texto de pesquisa é igual a um evento. Esse é o primeiro parâmetro. E podemos dizer console dot log e ponto ponto alvo ponto valor. E isso é simplesmente dizer que isso está ligado, digamos uma entrada. Vai dizer ponto E, basicamente valor de ponto de entrada, qualquer que seja esse valor, vai custar muito para mim. Agora, isso não é muito útil porque atualmente isso é codificado. O valor diz Para ser o valor de pesquisa. E precisamos que isso seja algo um pouco mais dinâmico, como o texto de pesquisa. Mas o texto de pesquisa ainda não foi adicionado. Então vamos em frente e certifique-se de que temos isso adicionado aqui em nossa barra de navegação para que possamos dizer texto de pesquisa e barra de navegação interna em nosso aplicativo, temos que adicionar esse texto de pesquisa como um prop. Então agora podemos dizer que o texto de pesquisa é igual ao texto de pesquisa. E este é o nome da propriedade. Acontece que é chamado a mesma coisa que a nossa variável de estado aqui. Então vamos em frente e experimentar isso. Vamos refrescar. E toda vez que eu digito você pode ver que ele aparece no meu console, então ele está realmente funcionando agora. Isso é ótimo. Mas precisamos de acesso a isso a partir de um nível mais alto. E o que quero dizer com isso é. Precisamos então ser capazes de definir esse texto de pesquisa aqui para que possamos passá-lo de volta para a nossa visão de pesquisa. Então, em nossa barra de navegação, vamos definir esse texto de pesquisa. Ele vai chegar ao nosso aplicativo, que é onde isso é definido. E então ele vai voltar para a nossa visão de pesquisa como resultados de pesquisa. Então precisamos definir os resultados da busca. E o que vamos fazer é passar como um adereço. Então vamos dizer que definir resultados de pesquisa é igual a definir resultados de pesquisa. E isto vai ser apenas uma propriedade, um adereço. E tudo o que vamos fazer aqui é colocar isso em nossa barra de navegação, o que significa que temos que adicionar isso aqui também. Pesquisar texto e definir resultados de pesquisa. Não, isso é em torno de um texto de pesquisa definido. Essa é a certa. Desculpe por isso. Eu uso o redondo. E isso acontece de vez em quando. Então precisamos definir o texto de busca. Agora, quando definimos esse texto de pesquisa, precisamos ter certeza de que cada vez que clicamos em uma tecla que definimos esse texto de pesquisa. Então agora estamos apenas registrando o console. Mas o que podemos fazer é dizer definir esse texto de pesquisa E ponto alvo valor. Agora isso vai definir esse texto de pesquisa, que também vai mudar o valor aqui em cima, que é o que React está procurando. Ele está procurando um manipulador de eventos específico como esse. Mas porque o texto de pesquisa também está mudando e ele vai vir aqui. Diga que mudou aqui também. Essa palavra-chave também vai mudar. Que se voltarmos para a nossa visão de busca, essa palavra-chave vai para o nosso título, que vai para o nosso herói. Então, teoricamente, se eu digitar aqui, se eu digitar ali um rato grande, ele deve mudar aqui também. Então vamos ver se quebrei alguma coisa ou se isto vai funcionar. Lá está ele. Guerra nas Estrelas. Muda para mim. Muito bom, certo? Então isso está funcionando. E neste momento, podemos realmente começar a trabalhar com uma API, que é exatamente o que queremos começar a fazer. Queremos começar a trabalhar com uma API porque as APIs fazem o mundo girar. Um hálito tão grande. Posso ter-te confundido neste caso. Eu sei que quando eu estava aprendendo reagir se isso foi definitivamente confuso para mim. Então o que eu gosto de fazer é pensar sobre o meu aplicativo está sendo, este é realmente grande balde. Então digamos que você tem um balde gigante e dentro dele você tem esses pequenos recipientes de sorvete. Então o que estamos dizendo aqui é que o aplicativo é o nosso balde gigante. Navbar é o nosso sabor de sorvete. Casa é um sabor de pesquisa de sorvete vistas de sabor de sorvete. E nós precisamos basicamente tirar um chip de chocolate da nossa barra de navegação e colocá-lo em nosso campo de busca. E então o que precisamos fazer é dizer: “ Ei, quando você definir esse texto de pesquisa, puxe-o para Ei, quando você definir esse texto de pesquisa, fora do contêiner em nosso balde, e deixá-lo flutuar em nosso balde por um pouco. E então, quando ele encontrar a visão de busca, coloque essa lasca de chocolate, mas aquela pequena pepita de chocolate de volta no contêiner de sorvete da vista de busca. Assim, a idéia é que nossos dados fluem da barra de navegação até o nosso aplicativo e, em seguida, de volta para a nossa exibição de pesquisa. E fizemos uma interface muito chique com um monte de adereços. Então passamos o texto de pesquisa para que possamos sempre renderizar o texto de pesquisa em nosso campo de entrada. Definir texto de pesquisa é uma função que passamos em como um texto de pesquisa conjunto. Nós a desconstruímos. Não, essa é a errada. Nós o desconstruímos e definimos que o texto de busca está aqui. E sempre que esse valor mudar, ele vai executar o texto de pesquisa de atualização. E então ele vai definir esse texto de pesquisa, que então bolhas de volta para o nosso aplicativo. E então volta para a nossa visão de pesquisa, onde temos nossa palavra-chave e estamos recebendo palavra-chave do nosso texto de pesquisa aqui. Acabamos de renomeá-lo como uma propriedade, como um problema. Nós temos essa palavra-chave e, eventualmente, aterrissa em nosso texto de herói. Vá em frente e experimente isso, não se esqueça, você também pode referenciar o código-fonte em qualquer momento. Se ficar preso, não se esqueça de fazer perguntas. Estou aqui para ajudar. Mas o mais importante, você sabe, tentou se divertir com a gente, mesmo que quebre. Toda vez que ele quebra e lhe dá um erro, ir no Google o que é esse erro, que é uma ótima maneira de aprender. Então, sempre que você vir um erro, basta ir e pesquisar no Google. Ou se ele lhe der um link direto para o React Docs, ler as docas React, os React Dogs são muito, muito bons. 17. Como obter chaves da API: Certo, vamos começar com algumas coisas da API. Então, primeiro e acima de tudo, vamos usar o banco de dados de filmes. Então tm DB. E eu não me lembro de his.com ou.org. É o filme db.org. E então você vai querer se inscrever para uma conta absolutamente gratuita. Você não tem que pagar por nada. Eu, mas você quer se inscrever para uma conta gratuita e, em seguida, você vai querer entrar em suas configurações. E em suas configurações você tem esta pequena seção API. Agora, eu já tenho uma chave de API, então você precisará criar uma nova chave de API. E estou usando o V3 desligado. Então esta é a minha chave de API. E posso fazer um novo? Acho que não consigo fazer um novo aqui. Isso é lamentável. Caso contrário, mostrar-te-ia exactamente como o fazer. Mas o que você não pode fazer é simplesmente ir em frente e criar uma nova chave de API e você deseja copiar isso. Então basta clicar com o botão direito do mouse em copiar e você vai querer armazenar isso em algum lugar porque nós vamos fazer referência a ele algumas vezes. E então o que eu vou fazer é até mesmo no meu código onde eu vou estar procurando. O que eu vou fazer é apenas colocar um comentário no ano t IMDB API chave é igual a isso, só para que eu tenha acesso a isso mais tarde. Agora o que você pode fazer é dizer que os desenvolvedores pontuam o filme db.org. Há algumas coisas que podemos fazer aqui. E então, primeiro de tudo, vamos em frente e procurar filmes. E podemos experimentar isso. E o que eu vou fazer é apenas esbofetear a minha chave API e a identificação do filme deles. Vamos fazer 559, estudante número 11. E vamos enviar este pedido. E diz que o serviço não está disponível. Interessante, interessante. Eu me pergunto se isso não poderia me causar problemas durante a gravação nos próximos minutos, eu espero que não. Mas essencialmente o que isso acabaria fazendo é cuspir um monte de informações. Barco vai ser formato JSON sobre este filme em particular, seja lá o que for neste filme. Há outra API, endpoint API que vamos usar chamado Pesquisa e não apenas pesquisa geral, mas queremos pesquisar filmes. Podemos experimentar isso também. E deixe-me colocar essa chave API lá. Já está em sua consulta Star Wars. E vamos tentar este auto veggies ou ir para 503 em mim também. - Sim. Não sei se esse serviço está em baixo ou qual é o problema. Podemos investigar se quisermos. Somos desenvolvedores, podemos descobrir por que isso está acontecendo, tenho certeza. Mas não vamos perder tempo com isso. Esse não é o nosso serviço, não é a nossa fazenda. Não vale a pena cuidar dos nossos animais. Isso é problema de outra pessoa. Mas não nos dá uma boa ligação que possamos usar aqui. E vamos acabar querendo copiar esse link. Então eu copiei tudo isso. E vou guardar isto aqui. Exemplo Link para pesquisas de filmes. Pesquisas é igual a e, em seguida, apenas o link lá dentro. E você vai notar que ele diz consultas iguais a Star Space Wars lá dentro. E é isso que vamos acrescentar. E é isso que vamos mudar dinamicamente. E nossa chave de API será essa chave de API. Você pode ver que ele seleciona em ambos os pontos e incluem adulto. No entanto, vamos ter certeza que isso é falso para que seja seguro para o trabalho se você estiver assistindo isso no trabalho. E isso é tudo. Então o que eu preciso que você faça para esta lição em particular é ir ao filme db.org. Crie uma nova conta se você ainda não tiver uma, vá para configurações, vá para API e obtenha uma chave de API. Então deve ser algo parecido com isso. Não será exatamente o mesmo que o meu, mas deve parecer algo parecido com o meu. Então um monte de letras e um monte de números. Assim que tiver essa sensação de liberdade, vá para a próxima lição. 18. Pedidos de API com React: Certo, vamos em frente e fazer um pedido de API. Sempre que você digitar na barra de pesquisa. Então, a qualquer momento que o texto de pesquisa muda, vamos fazer uma solicitação de API. E assim, para isso, vamos estar usando efeito EUA, que vem de Reagir. Ainda não usamos isso. Tenho reclamado que ainda não foi usado. Vamos em frente e usá-lo. Tipo, use efeito. E esta é uma função e leva uma função de seta anônima. E como seu segundo parâmetro, o que ele vai monitorar para mudanças? Então ele vai monitorar o texto de pesquisa. Então, estamos definindo o texto de pesquisa aqui. Vamos passar para a barra de navegação. Essa barra de navegação vai onchange, atualizar esse texto de pesquisa, que então vai definir esse texto de pesquisa. Então defina esse texto de pesquisa, defina esse texto de pesquisa, que então irá atualizar este texto de pesquisa. Então agora podemos dizer console.log. Texto de pesquisa é o texto de pesquisa. E eu não me importo que eu tenha um erro de digitação lá. Isso está tudo bem. E vamos apenas ir em frente e atualizar isso e você pode ver que não há nada lá dentro há um texto de pesquisa. Mas se eu digitar Star Wars, você pode ver Star Wars é o texto de pesquisa. E isso está começando a aparecer. E assim sempre que digitamos um caractere, precisamos fazer algum tipo de solicitações de API para TMD B. E assim podemos fazer isso com fetch. E onde está essa ligação? Aquele link que queríamos da última lição aqui, era o que queríamos. Vamos aceitar esse pedido de API. E a única coisa que queremos mudar aqui é onde diz Star Wars, queremos mudar isso para ser uma variável chamada texto de pesquisa. Então nós vamos pegar essa resposta e nós vamos dizer, Ei, a propósito, JavaScript, esta resposta vai ser uma resposta JSON. Então analise-o em JSON. E então nós vamos dizer pegue os dados restantes e apenas o console registre esses dados apenas por um segundo. É tudo o que vamos fazer. Então, quando atualizo e escrevo Star Wars, você pode ver que estou fazendo um monte de pedidos aqui. Recebemos uma página com um monte de resultados aqui com 20 resultados por página. E então o primeiro aqui é um objeto adulto falso. Ele tem um pano de fundo, IDs de gênero, que são IDs. Podemos fazer outras solicitações de API. O título original Star Wars visão geral camadas princesa, camada. Princesa Leia é capturada e mantida refém pelas forças imperiais do mal e seus esforços para assumir o Império Galáctico, blá, blá, blá. Então temos todo o tipo de informação aqui. Temos um caminho de cartaz também, que vai ser eventualmente uma imagem que podemos usar. E assim podemos ver que toda vez que digitamos algo, estamos obtendo resultados diferentes. Então, total de páginas, 414 páginas. Quanto mais escrevíamos, menos páginas temos. Eventualmente, chegamos a oito páginas onde você pode digitar apenas Star Wars e obter cerca 160 resultados ou um 157 no total, no total. Então, a única coisa que queremos aqui é que queremos esta matriz. Por que estamos procurando uma matriz é porque queremos definir esses resultados de pesquisa. E o resultado da pesquisa é definido como uma matriz. E a razão pela qual queremos uma matriz é porque podemos fazer loop sobre uma matriz mais fácil do que podemos fazer loop sobre um único objeto. E então esta página inteira aqui, todo esse resultado é um objeto. E, na verdade, o que posso fazer é ir em frente. Clique com o botão direito do mouse em abrir na nova guia e podemos ver toda a resposta JSON aqui. Vamos fazer isso maior. Então, temos um ID de página de objeto, resultados é igual a uma matriz de resultados. E nós podemos fazer todos os menores porque eles são basicamente os mesmos. Bem, isso foi divertido. Vamos abrir um. E então esta é uma série de resultados. E em cada resultado, cada iteração é um objeto. E nós só queremos essa lista e nós só queremos essa matriz de dados. Não queremos o número da página. Se você quiser, você poderia ter o número da página e outras coisas mais tarde. Talvez como uma forma de estender este projeto como seu próprio projeto. Mas vamos continuar e manter esses resultados. E então o que queremos fazer aqui agora é dizer definir resultados de busca. Resultados de ponto de dados. Sim, foi chamado, então essa coisa toda é chamada de dados. Opa, o que eu fiz aqui? Então essa coisa toda é todos os nossos dados e queremos resultados de pontos de dados porque isso é uma lista, isso é um array, isso é o que queremos. E novamente, nós só queremos isso para que possamos fazer um loop através dele mais tarde usando JavaScript. Então vamos definir esses resultados de pesquisa como dados re.search resultados. Agora, neste momento, vai parecer que nada aconteceu quando fizermos uma busca aqui. Então eu digitar Star Wars e ele está fazendo todas essas diferentes solicitações API que está funcionando. Só não está renderizando nada ainda. A outra coisa também é quando você está aqui, você pode digitar Star Wars e você pode ver que ele está fazendo todas essas diferentes solicitações de API aqui para mim. Isso é fixe. Está funcionando, mas não está na página de pesquisa e queremos forçar isso a estar em uma página de pesquisa. Então, no próximo vídeo, o que eu vou fazer é mostrar vocês como quando alguém digita aqui, você pode forçá-los automaticamente a ir para a página de pesquisa. 19. React o histórico do navegador: Tudo bem, vamos dar uma olhada em como podemos forçar as pessoas para a página de pesquisa sempre que você procurar por algo, vamos em frente e nos livrar deste login console aqui. Não precisamos disso. Também não precisamos dos resultados da pesquisa. E em nossa barra de navegação aqui, o que queremos fazer é importar, usar histórico, bem como link. E depois vamos dizer Const, história é igual à História dos EUA. E então sempre que atualizarmos o imposto de busca, mas vamos fazer é forçar o usuário a ir para a pesquisa de barra. E então veja isso quando eu iria, vamos dizer para a página sobre e eu digitar qualquer coisa, eu vou digitar a letra T. Isso me leva direto para a página de pesquisa, mudou meu URL para mim, T E S T. Se eu voltar para o página inicial, teste dois, me traz de volta para a página de pesquisa toda vez que eu digitar. Então tudo o que fizemos lá foi dizer que sempre que digitamos com essa entrada, sempre que ele é alterado, executar, atualizar texto de pesquisa, que é uma função anônima aqui em cima, uma função de seta. Vai empurrar essa história para procurar. E então vamos definir esse texto de pesquisa. Agora usamos a história aqui. Dissemos que a história do concurso é igual à história dos EUA. E importamos a história ou o gancho da história dos EUA de React, roteador, DOM. Foi tudo o que fizemos. Então, dentro de três linhas de código, nós simplesmente dissemos, hey, usuário, sempre que você está em qualquer página, digamos que você está na página inicial e você digita uma letra. Qualquer letra, vá direto para a página de pesquisa porque você está procurando, então deve ir direto para a página de pesquisa para você. E faz isso automaticamente para você? Sim. Eu disse automagicamente porque é um pouco mágico. Vá em frente e prepare isso e quando estiver pronto, vamos para a próxima lição. 20. Os maps de pesquisa: Ok, vamos dar uma olhada no mapeamento de nossos resultados de busca. Então, em nossa barra de navegação, estamos definindo texto de pesquisa e vista de pesquisa interna. Eventualmente ele volta para baixo como resultados de pesquisa e que passam por uma API e nós vamos então usar resultados de pesquisa. Então o que podemos fazer é usar os resultados da pesquisa e podemos percorrer cada resultado e fazer algo. Então vamos percorrer cada resultado usando a função de mapa em JavaScript. E então vamos colocar todos esses resultados de pesquisa em nosso modelo de objeto de documento em nossa página. Então vamos dizer resultados const, HTML é igual a resultados da pesquisa mapa ponto. E isso vai levar um objeto e em iteração, e vai ser uma função de seta. Agora, se você está se perguntando, de onde eu consegui objeto e iteração? Aqui, onde estamos passando por cada um dos resultados da pesquisa. Há um objeto aqui. Então, para o resultado da pesquisa número um, temos o objeto número um. Para o número dois, temos o objeto número dois e podemos ver que é um objeto porque um, isso é apenas JSON e ser JSON se parece com JavaScript. E então este é o símbolo para uma matriz e este é o símbolo para um objeto. E então é aí que estamos pegando o objeto. Estamos dizendo para cada resultado de busca , percorra todos eles. Pegamos o índice. Então é 12345, et cetera, et cetera. E nós vamos pegar o objeto. E então podemos dizer retorno div, seja qual for o objeto e os dados que vêm aqui. Então vamos dizer div título original. Então vou colar isso aí dentro. Título original do ponto do objeto. E com nossos resultados de pesquisa, podemos colocar nossos resultados aqui agora. E isso simplesmente vai fazer uma coisa muito legal. Confira isso. Nós quebramos alguma coisa. O que quebramos aqui? Vamos, Star Wars. Continuamos quebrando algo. O que nós, o que quebramos? Não é possível ler o mapa de propriedades de resultados indefinidos. Vamos ver o que podemos fazer aqui. Então nós provavelmente queremos ter certeza de que há algum tipo de resultado aqui e algum tipo de texto. Então nós queremos ter certeza se há texto de pesquisa, em seguida, fazer esta solicitação API. Caso contrário, se não houver texto de pesquisa, não faça nada. Então vamos tentar isso. Lá vamos nós. Isso funciona um pouco melhor. Então o problema era, não havia nada aqui. Então essa consulta estava vazia e não estava retornando nada para nós, que não é uma resposta de API ímpar. Mas nós tínhamos que lidar com isso. E, portanto, estamos dizendo apenas executar a solicitação de API se o texto de pesquisa mudar. E há de fato algum texto de pesquisa lá e não é nulo, não está vazio. Então, agora, quando eu fechar isto e três, vamos para a página inicial. Vamos ter certeza que isso funciona. E eu escrevo Star Wars e temos todos esses diferentes filmes de Star Wars e outras coisas. Então isso é bom. Temos a primeira página aqui. Isso é basicamente tudo o que queríamos fazer neste momento em que estamos filtrando, que é ótimo, estamos filtrando através de uma API. Então, se eu quisesse digitar Star, Star Track, se eu pudesse digitar isso direito, Star Trek e nós pegamos Star Trek. Star Trek Beyond Star Trek Nêmesis, interação com a escuridão , evoluções, et cetera, et cetera, et cetera, et cetera. Agora, há um pequeno problema aqui avisando que cada analista filho deve ter uma propriedade chave única. E o que isso está dizendo é que em nossa visão de pesquisa, isso deve ter uma chave. E então podemos simplesmente dizer que C0 é igual a i. E então isso vai ser 0, então um, depois dois, depois três, depois quatro. Então ele vai basicamente pegar essa iteração e jogá-la como uma chave. E vamos fazer reagir feliz. Então vamos em frente e atualizar. E você pode ver que o erro não aparece mais. Uma coisa a notar é o que acontece se escrevermos um monte de lixo aqui e não houver resultados? Vou deixar isso com você se parte do seu projeto final é fazer um, whoops, não há resultados de busca. Deve haver algum tipo de texto aqui, então isso vai ser deixado com você. Mas continuando em frente, nós só vamos fazer isso em um bom cartão. Então o que eu quero que você faça é certificar-se de que sua pesquisa está realmente funcionando. Agora, realmente tudo o que tínhamos que fazer era adicionar três linhas de código. Em nossa visão de pesquisa, temos esses resultados de pesquisa e em seguida, dissemos que resultado constante é igual a um monte de coisas aqui. Tudo bem, vá em frente e experimente isso quando você estiver pronto na próxima lição, o que vamos fazer é criar um novo componente para nossos resultados de pesquisa. E em vez de apenas usar um div, vamos usar um cartão bootstrap. 21. Bootstrap 5 de pesquisa: Tudo bem, o que precisamos fazer aqui é, em primeiro lugar, ir para getbootstrap.com. Eu estou usando Bootstrap cinco e eu vou copiar isso para a minha área de transferência e tudo o que eu fiz foi eu fui para componentes e depois cartão. E eu escolhi o primeiro porque eu gosto deste, que é o que eu quero usar. E então a idéia é sempre que você digita aqui, em vez de apenas dizer Star Wars ou algo assim. E deve dizer, ou deve mostrar um cartão com sua imagem nele. E assim vamos gerar isso usando um componente baseado em função. E então vamos em frente e criar um novo componente aqui. Cartão de filme Const é igual a, e isso vai levar uma propriedade. E vamos chamar esse filme de adereços. Vamos passar isso eventualmente. E vai ser uma função de seta. E isso vai devolver um monte de coisas. E então eu quero apenas bater que em e onde ele diz classe é igual a k, nós precisamos corrigir cada vez que ele diz classe é igual a dois, nome da classe é igual a IMG precisa ser uma imagem DJ Sx ou um elemento js X. Essa fonte precisa ser algum tipo de URL de pôster. Então falaremos sobre isso em um segundo. Que tudo vai ser o título original do Filme Dot. Vamos também copiar isso daqui para o nosso HIV onde diz título do cartão, livrar-se disso, ir a algum lugar aqui vai dizer Mostrar Detalhes. Agora, isso não faz nada. O URL do pôster não está definido, que atualmente não vai fazer nada sem que seja definido. Então vamos fazer contras. O Const. URL do pôster é igual a, e queremos este URL do pôster. Agora, isto não é uma imagem, não sabemos de onde vem isto. Então o que eu vou fazer é digitar TMD BY caminho poster, imagem, algo assim, e basta clicar no primeiro resultado e ele vai me dar algo. Então, vamos clicar em um desses. Sim, era o que queríamos. Acho que era do Clube da Luta. Então vamos dar uma olhada nesta documentação. E sim, aqui está, uma imagem como esta. Então o que eu quero fazer é copiar isso e colar isso na minha URL. E eu tenho um cartaz com uma barra nele. Então, presumivelmente, tudo o que tenho que fazer é tirar a última barra e todos aqueles personagens engraçados lá dentro. Cole o meu novo aqui. E que filme vamos conseguir? Guerra nas Estrelas? E isso quer dizer que há uma largura de 500, então é isso que queremos. A outra opção é original. Então vamos dar uma olhada no original. Origem. Agora, este é muito maior e olha para aquilo. Ou podemos fazer largura de 500. E podemos fazer com qualquer outra coisa? Acho que são apenas 500 e que tal 250? Não, o tamanho da imagem não é suportado. E isso é bom. Vamos ficar com largura de 500. E então basicamente queremos, queremos pegar esse URL, esse URL inteiro. E nós simplesmente queremos substituir esta última parte pelo caminho do pôster do filme ponto. E onde eu consegui postar seu caminho foi bem aqui. Então agora estamos nos movendo muito. Então este cartão de filme é em vez disso, vamos dizer retorno. Cartão de filme. E esse filme vai ser o objeto e a chave porque nós sempre precisamos Chave. E então isso vai levar este objeto, por exemplo, este aqui. Vai mudar o nome para filme como um adereço. Vamos aceitar esse adereço. Então vamos verificar o ponto do filme postar seu caminho, caminho do poster do ponto do filme. Acrescente-o a este URL aqui. E essa será a URL do nosso pôster. Agora, isso não vai ficar ótimo no momento. Vamos consertar isso daqui a pouco. Mas o que isso vai fazer é renderizar um monte de HTML para nós. Vamos em frente e salvar isso. E vai reclamar disso. Link vai lidar com isso e apenas um pouco. Mas vamos em frente e ver o que isso faz com os dados. Alguma coisa está quebrada. Oh, estilo. Há uma maneira diferente de fazer estilo. Ok, então, se você vir esse erro específico, este prop estilo espera um mapeamento de propriedades de estilo para valores. Ele está procurando por JavaScript aqui, estranhamente, para o seu atributo de estilo. E assim você escreveria como se este estilo fosse igual a chaves duplas. E então você pode dizer que a largura é igual a 18 m vírgula, e então é apenas um objeto. Então, parecia muito com um objeto JavaScript normal. Só tem as duas chaves em volta. As chaves externas. Este ali. E este aqui está dizendo: “Ei, pule fora do HTML e use apenas JavaScript regular. E então aqui está dizendo, oh, isso é o que você está mapeando vai ser. Nós não precisamos que nenhum dos que vai lidar com estilo um pouco mais tarde em um novo recurso. Vamos apenas ir em frente e excluir isso porque eu não quero que a largura máxima lá e atualizar declarar um console, Star Wars. E você pode ver que isso mudou um monte de coisas aqui. E é grande. É muito grande. É muito próximo do que queremos, mas é muito grande. Então, o que queremos fazer aqui? Queremos resultados HTML ou resultados HTML e terminar se houver resultados, então podemos fazer algo como nome da classe div. Vamos jogar isso em um recipiente. Vamos adicionar outro nome de classe div é igual a uma linha. E então vamos colocar nossos resultados HTML aqui. Vamos ver que isso não é bem o que estamos procurando, mas isso nos deixa um pouco mais perto. Então isso agora é pelo menos tudo dentro de um recipiente. O problema é que, em nossa linha, temos todos esses cartões diferentes e o que realmente precisamos como colunas, porque no Bootstrap cinco você tem um recipiente com uma linha dentro, com uma coluna dentro. Então o que podemos fazer é em vez de escrever cartão de nome da classe, podemos dizer div, nome da classe é igual a algas de carvão de vamos fazer, vamos ver como dois se parecem. E grande acabam. Isso também é fazer col, MD. Então médio para cima, haverá 33 vezes três mais três mais três mais três mais três mais três. Matemática rápida, haverá quatro colunas porque as colunas estão sempre fora de 12 e bootstrap. Caso contrário fazer carvão, SM, não SM, mas carvão de dois. E isso sempre precisa estar dentro de um elemento pai. Então vamos em frente e cortar div isso. E olha para isso. Isso parece bem. Isso parece um pouco lotado, muito lotado para de alto gosto. Vamos em frente e dizer carvão LG. Três. Isso parece um pouco melhor, ainda um pouco cheio juntos. Então, para cada um destes que está adicionando margem superior e margem, inferior, margem no eixo Y de quatro. Lá vamos nós. Isso parece muito bom. Vamos dar uma olhada no que isso faz procurando por Star Wars, confira isso. Ele faz uma busca real para nós agora nos dá o título, nos dá um nome. E é assim que adicionamos cartões Bootstrap ao nosso projeto. Então, o que eu gostaria que você fizesse para esta lição é que eu quero que você adicione cartões Bootstrap ao seu projeto até agora. E tudo o que tínhamos que fazer era criar um novo componente com o qual deveríamos estar familiarizados. Passamos em um adereço chamado filme. E no nosso mapa dissemos, usar esse novo componente do filme é chamado OBJ neste momento. Nós sempre damos uma chave para que reaja não se queixe. E então nós basicamente retornamos um monte de HTML que era puramente bootstrap. Bem, não puramente noventa e cinco por cento bootstrap. E então nós apenas trocado fora algumas das propriedades como a imagem SRC é igual ao URL do poster. Quando você terminar isso e ele está funcionando para você. O que vamos fazer a seguir é mudar este link para uma visão detalhada. E então você pode realmente clicar nisso porque agora você não pode clicar nisso e não vai a lugar nenhum. Basta rolar de volta para o topo da página, o que não é útil. Vamos configurar uma exibição de detalhes de filme para que você possa realmente usar, por exemplo, seus filmes de barra do website.com barra 11. E ele vai mostrar o ID 11 do filme usando uma API. E vai ficar muito bonito e vai fazer um monte de coisas. Então vamos fazer isso a seguir. 22. Componente de detalhes do filme: Tudo bem, vamos em frente e adicionar uma exibição de detalhes de filme com solicitações de API. Então, primeiro, vamos em frente e nos livrar dessa linha. Não precisamos disso. É possível encontrar em outros lugares. Doo-doo-doo-doo. Vamos abrir o nosso app.js. E em nossa rota, vamos em frente e criar uma nova rota. Vou copiar este e usar isto. E ia dizer filmes de barra, identificação de dois pontos. E vamos usar esta identificação no fim da estrada. E em vez de falar sobre VR, vamos chamar isso de visão de filme. Agora eu poderia ter usado este método, eu poderia ter usado este método, realmente não importa. Eu gosto de usar esse método se você tiver adereços para passar, como palavras-chave ou resultados de pesquisa. Mas eu não sei. Então eu estou indo apenas para usar um filme View e eu vou deixar o U ou L descobrir o que essas idéias de filme e, em seguida, fazer uma solicitação de API com base no ID do filme. Então vamos em frente e dizer que isso vai falhar ao compilar como esperado, exibição de filme não está definida. Então vamos em frente e importar uma coisa que ainda não existe, importa exibição de filme de componentes barra ponto visão de filme. Vai continuar a reclamar. Eu só vou reescrever sobre VW dois filmes ver ponto js e amassá-lo, editá-lo e terminou. Sobre vista vai ser chamado de exibição de filme. E isto, pelo menos, vai carregar para nós agora. Então, se eu for ao cinema cortar 11, ele diz sobre nós. Isso não está certo. E não foi um erro de digitação no pilar? Sim, dizia sobre nós. Vamos mudar isso sobre nós. E lá vamos nós. E visualização de detalhes do filme, eventualmente, este vai ser o nome do filme. Agora, para obter o parâmetro fora dessa URL, precisamos primeiro importar. E o que é isso? Eu acho que é usado params, se eu me lembro corretamente, usar params de React, roteador, DOM. E então vamos pegar essa identificação e vamos desconstruir isso. Então const ID é igual a usar params inicialmente indo magicamente descobrir isso para nós, o que é incrível. E console.log esse ID. E vamos abrir nossas ferramentas aqui e podemos ver que diz 11 no ano, então está ficando 11. Vamos fazer uns 550. Ele recebe 550. Então, isso é perfeito. Agora estamos retirando dados da nossa URL e para a nossa aplicação. Isso é exatamente o que queremos usar. Em seguida, queremos ter certeza de que temos alguns detalhes do filme aqui para que possamos fazer detalhes do filme const como igual a nota nada igual a definir detalhes do filme agora é igual ao estado dos EUA. E isso vai segurar um objeto. E os únicos dados do filme que queremos manter são esses dados em particular aqui. Não queremos todos os filmes, só queremos um filme em particular aqui. E, de fato, o que podemos fazer é voltar para a documentação do desenvolvedor aqui, vamos para filmes, filmes, filmes, onde vocês estão? Nós queremos fazer. Sim, vamos apenas obter detalhes. Enviar pedido. Cinco por três, isso não está funcionando para nós. Vamos copiar isto e colar. E, na verdade, cole apenas o texto que você quer, não no botão também. Lá vamos nós. Estes são todos os dados que vão voltar para nós. Então eu vou fechar o original. Feche o bootstrap. Acho que não vamos mais usar isso. E o que temos aqui? Temos orçamento, ID da página inicial, ID do IMDB, o que é muito legal. Idioma original, título original, visão geral, popularidade cartaz caminho. Devemos ter um pano de fundo também, que vai ser uma imagem ligeiramente diferente. Só um pano de fundo maior, como um cartaz gigante. Por exemplo. Status de receita da empresa de produção, slogan, et cetera, et cetera, et cetera, todos os tipos de coisas aqui. Então é isso que queremos usar. Queremos este Lincoln aqui. Então é só colocar isso no nosso bolso de trás por enquanto. Agora precisamos usar um fato. Então, sempre que este ID muda, precisamos então ir e buscar novos dados de TM db. Então precisamos importar, use o efeito de Reagir. E nós vamos escrever um efeito aqui imediatamente só para provar que isso vai funcionar. Então, vamos dizer “Use Efeito”. Ele vai tomar uma função de seta, Console.log, fazer uma solicitação de API. E o segundo parâmetro vai ser o que ele está procurando? Está à procura da identificação. Então, sempre que esse ID muda no URL, ele vai, ele vai fazer um, um, um, um pedido de API para qualquer que seja essa ideia. Então vamos em frente e salvar este estado de usuário não está definido. Sim, isso está correto. O estado do usuário não está definido. Então use um fato e também é importante dizer que o Rio, reclamando de algumas coisas que podemos consertar isso em um pouco. Guerra nas Estrelas. E não podemos ir a nenhum desses, mas vamos ao cinema, Slash 11. E podemos ver 11, fazer uma solicitação de API para 11. Isso é perfeito. Isso é o que queremos. Então, ok, vamos dar um passo para trás aqui e voltar para o nosso campo de busca. E vamos fazer Star Wars. E quando clicamos em um desses botões, ele não vai a lugar nenhum. Só nos traz de volta ao topo. E então queremos que isso realmente vá para nossas novas exibições de detalhes. E o que podemos fazer é entrar em nossa visão de pesquisa e trocar um HREF para link é igual a. E isto supostamente para ir ao cinema Slash fez o que quer que seja, vamos trocar isso por um const em apenas um segundo. Precisamos importar link. Então nós importamos link de React Rotterdam. E então podemos obter o URL de detalhes const. Eu chamo de URL de detalhes porque é assim que chamamos no Django. E a idéia é que ele vai mostrar apenas dados detalhados sobre um filme em particular. Portanto, ele não vai mostrar todos os seus filmes, que vai ser como uma exibição de listView ou de pesquisa, vai mostrar dados em um filme, um filme em particular com uma ID, e isso é chamado de exibição de detalhes. E então isso é suposto ir para cortar filmes e, em seguida, quaisquer que sejam essas idéias. E eu tenho esse ID do meu app.js. E isso vem para, para, para, para, para fazer rota, caminho filmes dois pontos ID. Agora o que eu quero fazer é substituir a identificação de dois pontos pela identificação de filme real. Então eu poderia fazer o filme DID, eu acredito que é. E vamos dar uma olhada nisso. Esta é a nossa resposta API. ID do filme é igual a 11. É o que procuramos. Então isso funciona perfeitamente. Detalhe URL e apenas substitua essa string pela nossa variável. Vamos guardar isso. E vamos voltar para a nossa página aqui. E você pode ver que quando eu passar o mouse no canto inferior esquerdo lá ele diz slash filme slash Slash 123475. Vamos clicar nesse e ele vai para um filme VW 13475, fazer um pedido de API e 13475. Então estamos chegando lá, estamos chegando lá. Estamos fazendo isso funcionar devagar, mas com certeza. Estamos criando uma exibição detalhada aqui. Então podemos fechar nossa visão de pesquisa porque eu acho que tudo está feito agora. E vamos voltar para a exibição do filme. E o que nós vamos querer fazer é que nós vamos querer buscar esses dados. E então vamos entrar aqui, pegar esse link. Ele tem a nossa chave API e não foram apenas totalmente bem. Vou desativar minha chave API mais tarde ou ela será desativada quando muitas pessoas acabarem usando-a. Mas aqui queremos trocar a identidade. Então nós fomos para api dot o filme db.org barra 3 filmes barra barra quaisquer que idéias. Então, no meu caso, eram 11. E, em seguida, a minha chave API. Então nós vamos pegar essa resposta e nós vamos dizer, hey, resposta ser JSON, ou ele está vindo como JSON e tipo de convertido de JSON XML, analisá-lo de JSON. Então vamos pegar esses dados e dizer que os detalhes do set do filme são os dados. E então aqui podemos mudar isso para ser algo como detalhes do filme. Dot título original. E enquanto os detalhes do filme vêm de hoje, é definido como nada. Mas o que poderíamos fazer. E o que estamos fazendo é que estamos usando esse efeito. Então, sempre que essa ID mudar, vamos fazer uma solicitação de API para essa ID. Vamos dizer, ei, é o JSON. Trabalhe com esses dados como JSON. Defina esses dados, que vão mudar os detalhes do nosso filme. E sempre que usarmos a parte do conjunto do nosso estado dos EUA, ele vai rerenderizar todo este componente para nós, nesse caso, e isso é muito bom. Isto vai ficar em branco no início e depois vai aparecer com um nome. Então vamos em frente e fazer isso. E vamos para o número 11. E você pode ver como quando eu atualizo, é tipo que não há nada lá e então, de repente, há algo lá. Isso é porque ele está fazendo solicitações de API. Está dizendo, ei, use o número 11, então faça a solicitação da API e ele está usando o número 11 novamente. Então vamos nos livrar do registro do console. E o que mais queremos fazer aqui? Isso é apenas sobre isso. Então o que vamos fazer na próxima lição é adicionar mais alguns detalhes aqui. Vamos adicionar um contêiner, uma linha e um monte de colunas, algumas informações extras. E nós vamos, nós vamos ter certeza de que há algum tipo de carregamento aqui para que, por padrão, se isso ainda está carregando, se isso ainda está carregando, ele vai dizer carregamento e então ele vai mostrar o título. Então, em vez de ficar em branco e depois juntar-se a isso, pelo menos mostra algo instantaneamente. Então vamos fazer isso na próxima lição. O que eu gostaria que você fizesse para esta lição em particular é em sua visão de filme, usar parâmetros, usar estado, vamos colocá-los juntos. Use o efeito. Obtenha essas solicitações de API. Certifique-se de colocar isso como sua ID. Se você não colocar isso como sua identificação, digamos que você coloque isso como detalhes do filme. Você vai definir os detalhes do filme. Ele vai ser, em seguida, acionar este efeito de uso, que é, em seguida, vai causar outras solicitações de API que vai definir detalhes de filme. Os detalhes do filme serão diferentes. Ele fará com que esse efeito seja executado. Novamente. Nós não queremos isso. Só queremos que o efeito seja executado quando o ID for alterado. Então, quando você vai de como barra de filme barra 11 para barra de filme barra 13475, vá em frente e experimente isso e quando você estiver pronto, vamos para a nossa próxima lição. 23. Estado de carregamento: Muito bem, vamos adicionar um estado de carregamento à nossa página aqui. E a razão é porque em nosso último vídeo, nós atualizamos a página e você pode ver que ela está em branco por um segundo, e então ele realmente aparece com os dados, então ele fica em branco por um segundo, em seguida, faz essa solicitação de API, obtém o dados e, em seguida, re-renderiza ou componente para nós. E isso é legal e tudo mais. Mas isso não é realmente uma boa experiência de usuário. Às vezes, só queremos que isso diga carregamento e, em seguida, substituí-lo automaticamente. Então a idéia é que seus usuários não ficam frustrados com a idéia de que existem, com o conceito de que não pode haver informação até que haja informação, eles só querem sempre ver algo. E então vamos em frente e adicionar um estado de carregamento. Então nós vamos dizer const está carregando e set é loading é igual ao estado dos EUA e por padrão, ele está carregando? - É. E uma vez que temos dados aqui, podemos dizer set is, load, é false, ele não está mais carregando. E podemos criar uma nova função dentro desta função. Digamos que a função renderize detalhes do filme. E podemos dizer se está carregando, queremos então retornar herói com um texto de ponto, ponto, ponto ou carregamento ponto-ponto, seria melhor. Caso contrário, se houver detalhes do filme e onde estou recebendo está carregando e detalhes do filme é aqui detalhes do filme e está carregando. E eu estou apenas definindo essas mudanças usando o estado. Então, se você está carregando, em seguida, ele vai fazer este pedido API e, em seguida, ele vai dizer que o carregamento é falso. Não está mais carregando. Se quando renderizarmos esses detalhes do filme, ele está de fato carregando, vai dizer carregando nosso herói. Caso contrário. Vamos apenas mover isto para esta linha aqui. E vamos renderizar os detalhes do filme. Então, em vez de uma declaração de retorno grande, vamos retornar uma função que, em seguida, vai retornar um pouco mais JS X4 como dependendo de um condicional. Certo, vamos nos refrescar. O CEO disse que carregava rápido. Carregando, carregando Star Wars carregando Star Wars, carregando Star Wars. Isso é o que queremos. Agora, a razão pela qual fazemos isso é porque se a conexão de alguém é muito, muito lenta, pode levar um pouco de tempo. Pode levar 2-3 segundos para qualquer API responder de volta. E enquanto eles estão esperando, pelo menos vai dizer carregamento. E vamos apenas fazer isso como um exemplo. Settimeout. E o que vamos fazer é mudar isto para esperar 2 segundos ou 2 mil milissegundos. É agarrou aquele movimento que até uma linha. E vamos refrescar. Diz que está carregando. E então ele diz que carregou tristeza ou assim nós imitamos a idéia de que uma API pode levar dois segundos para responder. Agora minha internet é boa e rápida, então ela pisca muito, muito, muito rapidamente. Mas se a internet de alguém é lenta, pode aparecer como ponto de carregamento, ponto, ponto por muito mais tempo. E é por isso que isso é importante. Então é assim que adicionamos o está carregando lá. Então dizemos que está carregando conjunto está carregando. E nós poderíamos ter feito tudo isso honestamente dentro do nosso retorno principal. Mas só para fazer isso parecer um pouco mais agradável, o que acabamos fazendo foi criar outra função aqui e dizendo, se está carregando, em seguida, retornar o herói com o carregamento. Caso contrário, devolva um monte de outras coisas. 24. API de componentes de filmes: Agora vamos em frente e tornar isso um pouco mais complicado. E não é complicado, eu acho que porque nós não estamos realmente fazendo nada complexo aqui. Vamos escrever algo grande, maior. Então vamos abrir um pouco de JS x aqui e fechar esse js X. E nós vamos ter um herói aqui, mas nós também vamos ter um nome de classe div. E vai ser um contentor. Nós também vamos escrever div. O nome da classe é igual à linha. E vamos colocar duas colunas em seu nome de classe div. A primeira coluna será col md E3. E esta vai ser a coluna da esquerda. E, em seguida, nome da classe div col MD nove. E esta vai ser a coluna certa. E vamos em frente e adicionar alguma margem também. Só o que não está abraçando nossa bandeira ou nosso herói o tempo todo. Olhe para a coluna da esquerda, coluna da direita. Então vamos na coluna da esquerda é ir em frente e adicionar uma imagem aqui. Então precisamos desse URL do pôster. E assim temos um URL de pôster. Onde você está? Pôster? Chama-se “Caminho do Poster”. E isso está voltando nos detalhes do nosso filme. Então, agora podemos dizer aqui const caminho poster é igual a e sabemos que vai ser detalhes do filme ponto poster caminho. E de onde veio essa imagem? Taxa aqui. Queremos esse 501 também. Então vamos pegar a primeira parte dessa URL. E vamos colocar isso aqui. E nós vamos anexá-lo com o caminho do filme. Agora o que eu quero que você faça é quando você terminar de trabalhar neste projeto como seu dever de casa, se não houver um caminho de cartaz que vale esse caminho de cartaz voltar como nulo? O que você faz isso? Porque isso vai dizer imagem que a equipe db.org barra T barra p barra w 500 barra nula ou pode nem mesmo dizer barra nula, ele pode ser apenas nulo. Então, como você lida com essa imagem perdida? E isso é algo para você trabalhar também. Então, lide com uma possível imagem ausente. E isso é realmente apenas um condicional. Se houver algo, se não houver algo, altere essa variável. Então, esse caminho de cartaz, vamos em frente e adicionar uma imagem em seu IMG SRC vai ser esse caminho de cartaz. Alt vai ser ponto-ponto-ponto. Podemos colocar o que quisermos lá dentro. O nome da classe vai ser fluído IMG para torná-lo responsivo usando Bootstrap. Vamos dar-lhe uma sombra e vamos contorná-la. E vamos ver como isso se parece. Oh, lá vamos nós. Tem uma pequena imagem lá dentro. E então vamos mudar algumas das coisas na coluna da direita. Então vamos dizer que vai haver um H2 aqui. E este vai ser o título original dos detalhes do filme. E vamos em frente e adicionar um p com um nome de classe de chumbo, e isso é apenas bootstrap. E vamos colocar os detalhes do filme. Acho que se chamava Visão Geral, visão geral de tarefas a fazer. Sobre o que se trata este filme. Detalhes do filme visão geral do ponto. E eu tenho isso. Então agora temos um pouco de uma visão geral aqui e você pode colocar mais detalhes aqui se você quiser. Você poderia colocar um link para a página inicial. Se você quisesse. Você pode vincular a uma página IMDB. Há audiências aqui também. Há contagem de votos, então a pessoa média gosta de nós. 8,2 de dez. O status foi liberado, pois não foi liberado. Por exemplo, vamos dar uma olhada no Deadpool. E acabei de descobrir hoje que vai haver uma piscina de três mortos. E esta é a identificação 5.3.3, cinco, 35. Vamos mudar isso aqui e ver se foi liberado. O status foi alterado. Lançou seu planejado. Então Deadpool 3 está planejado e não há votação para ele. Então, como lidas com isso se não há votos? Então, há muita coisa com que você pode trabalhar aqui. Nem sequer há uma visão geral. Sim, nós não sabemos sobre o que o filme vai ser. Então talvez coloque isso em uma declaração “se”. Então é assim que criamos um pouco de uma visão detalhada. Este não é o melhor exemplo só porque havia nada lá, mas o Star Wars parece muito bom. Agora, na próxima lição, vamos em frente e pegar um pano de fundo, que vai ser essa imagem de fundo. E vamos colocá-lo de volta aqui para que o texto esteja sempre em camadas no topo. E vamos escrever um pouco de CSS para isso. 25. Como adicionar um solto usando CSS: Muito bem, neste vídeo, e esta vai ser a nossa última lição antes do projecto final. Eu acredito. Queremos mudar esta imagem aqui atrás. Então agora é apenas cinza, mas vamos em frente e realmente mudá-lo para uma imagem para que haja algo um pouco mais temático sobre isso. E para isso, precisaremos trabalhar com nosso componente herói mais uma vez. Então vamos abrir nossa visão de filme. E aqui, nosso herói, vamos adicionar um pano de fundo. Backdrop é igual a algum tipo de URL. Então vamos chamar esse URL de pano de fundo. Ainda não sabemos o que é isso, mas vamos em frente e descobrir o que vai ser. Então const URL de pano de fundo é igual a algo e é chamado de caminho de fundo. Então, podemos colocar uma variável em seu caminho de fundo, detalhes do filme até o caminho de fundo. E então nós provavelmente poderíamos levar isso também. E vamos chamar isso de original. Acho que foi isso há alguns vídeos atrás. E nós vamos pegar a URL de fundo. E vamos colocá-lo em nosso herói, que significa que agora precisamos abrir nosso herói e aceitar um cenário opcional. E apenas para fundos estes, vamos em frente e vamos ver o que vai ser esse pano de fundo. E vamos abrir isto. Sim, é uma grande imagem, é exatamente o que queremos. Então, queremos colocar essa imagem de volta aqui. Agora, para isso, precisamos de um pouco de CSS. Então, primeiro de tudo, vamos em frente e chamar isso de nosso contêiner herói. E para H1, vamos dar a este um nome de classe do texto Hero. E para uma div opcional para a imagem. Vamos dizer ClassName, cenário de herói. E vamos manter este pano de fundo aqui, por enquanto , só para podermos aceder a isso se precisarmos daqui a pouco. Então agora o que queremos fazer é abrir nosso app.js S, que ainda não tocamos. E vamos dividir a tela. E então temos texto escuro BG, preenchimento branco, cinco contêiner herói. Então psu dot herói traço recipiente. E isso vai ser uma posição relativa. É esse índice de 100. Nós também temos herói 2.txt, nosso herói traço texto, posição, índice Zed relativo 200. E então temos o nosso cenário de herói, pano de fundo de herói. E esta vai ser a posição absoluta. Topo, 0, esquerda, 0, largura 100%, altura 100%. E o tamanho de fundo x2 está contido. E vamos deixar assim por enquanto. Vamos ajustá-lo um pouco. Tenho certeza de que isso não vai sair do jeito que eu espero. Então temos este cenário de herói e que combina aqui. Vamos em frente e salvar isso. Sim, vou fechar isto por enquanto. Podemos reabrir isso um pouco mais tarde, se precisarmos. E precisamos definir este pano de fundo, esta imagem de fundo. Então dizemos estilo, abriu nosso JavaScript e, em seguida, abrir um objeto com nosso mapeamento. Deixe-me dizer de volta, a imagem do solo é igual a, é aqui que fica estranho. Ticks de volta, URL, parênteses de abertura e fechamento. Em seguida, temos uma variável com abertura e fechamento chaves. E então colocamos nossa URL de pano de fundo aqui. Então isso é muito para escrever e o que eu gosto de fazer é apenas abrir e fechar URL. Então, dentro dessa URL, eu escrevo minha variável. E, em seguida, dentro dessa variável eu escrevo o fundo real nome da variável ou não fundo, mas pano de fundo. E isso apenas o mantém gerenciável. Porque neste ponto, isso começa a ser muito para olhar, mesmo que seja apenas, bem, o que faz esses dados para os 3839 caracteres que esta parte parece muito. Então vamos em frente e salvar isso e olhar para aquilo. Isso não parece ruim. E como esperado, não saiu do jeito que eu esperava. Então, vamos voltar para o nosso tamanho do quintal app.js S. vai ser coberto. E vamos mudar a posição de fundo para ser centro e centro. E se esse texto for branco sobre branco? Isso pode ser complicado. Então vamos fazer opacidade ou ele vai pagar a cidade 0,5. Basta fazer um pouco mais escuro e ele vai sempre aparecer. Vamos deixar isso um pouco mais escuro também. E lá vamos nós. Agora vamos ver outra imagem. Vamos fazer Jornada nas Estrelas, assim. Parece muito bom. Guerra nas Estrelas. Vamos dar uma olhada neste. Bom, isso parece bom e temático. E então agora usamos um pouco de CSS. Nós também usamos isso, vamos usar um condicional aqui apenas para garantir que esta div não apareça se não houver um pano de fundo. Então podemos dizer para trás cair. E, e nós vamos colocar essa div lá, atualizar. E funciona. Confira isso e até mesmo diz carregamento e, em seguida, carrega tudo de uma só vez. Isso é muito, muito bom. Nós realmente gostamos disso. Agora isso é praticamente tudo o que há para fazer para este projeto inteiro. Fizemos muito aqui. Então, no próximo vídeo, o que eu vou fazer é descrever para vocês alguns de seus bem, basicamente as coisas que você precisa fazer para terminar este projeto diz, eu tenho cerca de 90% lá. Aprendemos muito ao longo do caminho, mas há cerca de 10%, o que talvez 5%, o que eu gostaria que você fizesse. E falaremos sobre isso na próxima lição, que será seu projeto final. 26. SEU PROJETO: Muito bem, bem-vindos ao seu projeto final para reagir a um. Agora isso é um pouco interessante, um pouco diferente do jeito que eu costumo fazer as coisas. Normalmente eu te mostrei os fundamentos e faço você construir algo por conta própria. Mas porque React pode ser tão grande e há tanta informação por aí. O que fizemos foi construir todo o banco de dados de filmes procurando aplicativo quase inteiramente. E o que vou fazer é deixar o resto em suas mãos. Então há algumas coisas que eu quero que você faça para o seu projeto. E há alguns bugs que eu propositalmente não resolvi ainda. Portanto, não há página 404. Então, por exemplo, se eu for cortar página faltando, não há nada lá. Então deve haver algo que eu quero que você crie algum tipo de página de captura que diz, Ei, esta página não existe. Deve haver um 404 lá dentro. Às vezes, um resultado de pesquisa não tem uma imagem. E um bom exemplo é Wanda, eu estava tentando procurar uma divisão, por exemplo. E não há imagens para um, nem sequer posso dizer esse nome ou o filme chamado Wanda. E então o que eu quero que você faça é que se não houver um caminho de cartaz, eu quero que você o mude para ser algo apenas genérico, apenas para que haja sempre uma imagem lá dentro. Também não há manipulador se não houver resultados de pesquisa. Então, se eu digitar de um a 99999, não diz nada. E deve haver algo lá para boas experiências de usuário diz, ei, olha, eu sei que você está procurando por um para 99999, mas não há resultados. Simplesmente não existe. Então você vai precisar criar isso. E o botão de pesquisa, botão Pesquisar na navegação não funciona. Então, se eu digitar Wanda e clicar em pesquisar, ela não vai a lugar nenhum, não faz nada. E isso vai ser grande, que vai ser difícil para você implementar. Então vá em frente e dê uma chance a eles. Estou deixando você pendurado, cerca de 5% deles estavam cerca de 95% lá. Então você só precisa terminar esses últimos pedacinhos. E então terminamos. A coisa boa sobre isso e a razão pela qual eu estou fazendo isso dessa maneira, e é um pouco diferente de como eu costumo criar um projeto, são essas tarefas que eu propositadamente deixei de fora deste projeto para que você tenha que resolvê-las por conta própria. E isso é muito, muito, muito semelhante a basicamente uma atribuição levar para casa que uma empresa vai lhe dar quando você aplicar, quando você trabalha com eles. E assim que você passar por suas fases de entrevista, empresa geralmente lhe dará um pouco de código. Eles enviarão por e-mail para você ou algo assim. E então você tem que resolver alguns dos insetos. E você tem que descobrir o que são esses insetos e como resolvê-los por conta própria. E esta é realmente boa prática da vida real onde 95% lá, você tem que nos levar acima da linha de chegada com os últimos 5%. Porque é assim que fazemos no mundo profissional. É assim que toda a gente faz. E então este é apenas muito, muito bom treino para você. Então vá em frente e tente isso. E não se esqueça se ficar preso, pode deixar uma pergunta lá embaixo. Por último, mas não menos importante, meu nome tem sido Caleb Tolkien tem sido não, meu nome é Caleb Pauline. Obrigado por me seguir reagir a um. Não se esqueça, você pode baixar o código-fonte em qualquer momento e se divertir com ele. Talvez seja necessário trocar as chaves de API. Eu não estou muito preocupado com a chave API é ser minha ou de outra pessoa. Então você não tem que trocá-los. Mas você pode definitivamente dar uma olhada no código-fonte. Você sempre pode me seguir no Twitter em Caleb Tolkien ou no Instagram. Codificação, ponto por ponto. Todo mundo. Obrigado novamente por conferir reage a um. Espero que você tenha se divertido e espero que eu te veja em outro módulo meu, morda.