ReactJS e Redux — crie 4 aplicativos para web [2/4] | David Katz | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

ReactJS e Redux — crie 4 aplicativos para web [2/4]

teacher avatar David Katz, Software Engineer - Coding Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

15 aulas (1 h 10 min)
    • 1. Como introduzir o curso

      1:33
    • 2. Wireframe Musicde

      1:34
    • 3. Como configurar o MusicMaster

      1:40
    • 4. Como criar o componente de aplicativo

      4:21
    • 5. Estilo com Bootstrap

      4:28
    • 6. Como procurar artistas

      4:01
    • 7. Como preparar uma solicitação na web

      5:45
    • 8. Como dar dados com uma Url

      3:03
    • 9. Como criar o perfil do artista

      5:20
    • 10. Como estilizar novos componentes com CSS

      9:57
    • 11. Como expandir o Requst

      6:49
    • 12. Como criar uma galeria

      9:33
    • 13. Como reproduzir áudio com JavaScript

      2:24
    • 14. Como usar uma faixa

      3:33
    • 15. Estilização animado

      5:47
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

1.274

Estudantes

1

Projeto

Sobre este curso

Torne-se um engenheiro de software de alta exigido, seguindo este tutorial no React JS e Redux. Como uma das habilidades mais bem pago para profissionais de web para desenvolventes para a web, aprenda o React vai abrir portas e trabalhos para você

 

Este curso baseado em projeto vai ter você em nosso curso de Crie quatro aplicativos de exemplo cuidadosamente de a sua questão de a nossa

 

Primeiro, aprenda os princípios do React JS você construindo duas aplicações. Um apresenta o ES6/Babel, e o outro como lidar com as solicitações de Web de One Com o terceiro aplicativo, aprenda como manipular os cookies de navegador. Por fim, você vai criar um aplicativo inteiro com autenticação completa e um banco de banco em tempo real para finalizar.

 

Além disso, aprenda a engenharia do Redux. Você vai descobrir que Redux de a de três passos simples!

Não se preocupe se você for novo no desenvolvimento da web. Algumas experiências de JavaScript vai ajudar, mas este curso é de garantir explicar cada novo conceito


Faça mergulho no React JS e Redux. Vamos começar a programar!

Além disso, aqui está um link para o repositório online para este curso: https://github.com/15Dkatz/ReactJS_Videas Video

Conheça seu professor

Teacher Profile Image

David Katz

Software Engineer - Coding Instructor

Professor

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Como introduzir o curso: bem-vindo a um excelente recurso sobre como aprender a reação. Sim e Redox. Parabéns. A reação de aprendizagem colocará você um passo à frente, pois é uma das habilidades mais exigidas e pagas na indústria de software. Eu projetei este curso com um objetivo abrangente para fazer você ter reagido em um Redux em seu currículo e preparado para construir seus próprios projetos de reação a partir do zero. Neste curso, você criará quatro aplicativos. Um vai colocá-lo em funcionamento com os princípios de reagir e introduzir JavaScript es seis sintaxe. A próxima vontade usando um P I e mostrar que você tinha um acordo com pedidos da Web Em reagir. Terceiro, você aprende Redux. Ele constrói um aplicativo que também armazena informações localmente no navegador. E, finalmente, melhor de tudo, teremos um aplicativo Redox que tem educação completa para cadastrar usuários também. Como um banco de dados de volta veio, vou explicar cada novo conceito precisamente verificando e medindo cada idéia nova. Dessa forma, você tem uma compreensão completa do casaco e engenharia. Além disso, vou te contar um segredo agora mesmo. Redux pode se sentir complicado no início, mas você pode resumir a três etapas básicas. Tudo bem, se você quiser finalmente desbloquear a chave para reagir e redux e adicioná-los ao seu conjunto de habilidades ou você só quer retocar suas costeletas de desenvolvimento Web, então este curso é perfeito para você. Então, o que você está esperando? Vamos começar a codificar. 2. Wireframe Musicde: Bem-vindo. Temos música, Mestre. O segundo aplicativo que vamos construir para obtê-lo funciona assim. Pesquise o nome de um artista. Então você vai encontrar algumas informações sobre eles, juntamente com um bom perfil e seu bônus. Obtenha uma prévia de suas 10 principais faixas e elas podem ser jogadas. Vamos procurar nos besouros. Por exemplo. Vamos jogar Ei Jude ou deixe pra lá. Talvez queira um artista diferente sobre Frank Sinatra. Lá vamos nós. Que tal me levar para a lua ou eu tenho você debaixo da minha pele? Este aproveita os olhos Spotify Public AP I para permitir que os dados de acesso dos EUA, tais como imagens de perfil e, claro sons envolve bem, certos olhos AP geralmente exigem em uma chave p I. Felizmente, neste momento, Spotify olhos AP. Permiti acesso gratuito aos dados que queremos. Além disso, esta aplicação tem design responsivo em preocupação. Dessa forma, até mesmo um dispositivo múltiplo ou plataforma será capaz de ver este site ou aplicativo Web bonito e carne. Tudo bem. Esta aplicação tem muito mais interatividade do que a contagem anterior em. Então vamos começar a vir e construir música Mestre 3. Como configurar o MusicMaster: Vamos montar o Projeto Mestre da Música. Certifique-se de ir para o terminal agora navega no mesmo diretório. Você foi criado seu primeiro tipo de projeto de reagir Ellis, você deve ver seu primeiro campeão de contagem regressiva de projeto já lá, juntamente com quaisquer outros arquivos ou projetos que você pode ter colocado dentro entre agora e então, agora vamos usar o Create React para mais uma vez, a fim de inicializar nosso projeto. Certo, criar, reagir. Lembre-se, é o nome do nosso pedido. Então, Ministro da Música, isso pode levar um minuto ou dois dependendo da sua conexão. Então eu vou em frente e saltar em frente no vídeo para quando ele terminar. Sinta-se livre para fazer uma pausa até que o seu termine também. Com sucesso, sua saída deve ser assim. Agora, antes de lançarmos nosso código e rodarmos no início PM, podemos dar um passo extra para nos prepararmos antes de recodificar antes do tempo. E no Celeriac. Bootstrap já. Então simplesmente execute o comando e estou instalado. Reagir Bootstrap na bandeira dupla. Seguro e levantado. Na verdade, esqueci de navegar para o projeto primeiro, então não se esqueça de fazer isso. Então eu vou abrir minha pasta e apenas para liderar os módulos conhecidos que foram instalados indo para ir em frente e limpar meu terminal não entrar em music master e, em seguida, executar o mesmo comando. Com todo esse insulto, poderíamos começar a criar o aplicativo mestre de música e nosso primeiro componente, Vamos fazê-lo. 4. Como criar o componente de aplicativo: Agora que temos tudo instalado. Vamos lançar nosso aplicativo inicial executando o NPM Start também, vamos abri-lo em nosso editor de código. Vou em frente e redimensionar tudo. Assim, o tamanho é mais pertinente para o que estamos fazendo. A primeira coisa a fazer. Vamos fazer isso. Toda esta pasta de origem. Sim, e a razão para excluir tudo é começar do zero para que possamos entender exatamente o que está acontecendo enquanto criamos nosso aplicativo. A primeira coisa que precisamos fazer é importar reagir de reagir. E então, como muitos de vocês devem se lembrar, ele reage a partir da reativa. Agora podemos simplesmente renderizar a partir do reator, não renderizar a função. Fizemos isso que gostaríamos. Por enquanto, vamos chamá-lo de Mestre da Música e queremos agarrar o Div com a idéia de rota no público. HTML. Vamos em frente e salvar, e lá vamos nós. Temos mestres musicais aparecendo no canto. Por mais pequeno que seja, vamos continuar configurando a aplicação superior. A primeira coisa que queremos é um componente APP. É um novo arquivo no ponto J 6. Vamos importar reagir e o componente componente de reagir. É tudo o que precisamos por agora. Embora vamos adicionar CSN Slip, vamos criar alguma estrutura básica. Então classe em estende componente. Eu não gostaria de exportar isso por padrão antes de esquecer. Então, é claro, você quer fazer Sanjay sexo e voltar. Vamos tentar voltar, não é? Diz o Music Master da AP? Não, e depois vamos substituí-lo. O índice de pontos Js fez aqui com o nosso. Portanto, é importar em a partir do diretório atual e encontrar o em. Eles vão simplesmente usar um pouco de auto-encerramento para o nosso e nós sentimos para compilar. Eles não conseguem encontrar o aplicativo no diretório atual agora. Às vezes você tem que recarregar todo o servidor antes que ele reconheça um novo módulo. E depois vamos. Nós vemos o mestre de música de em e agora vamos continuar adicionando a estrutura real para o aplicativo. Primeiro, precisamos de um título antes da nossa inscrição. Eu vou dizer Mestre da Música como o título. Vamos em frente e dar-nos um nome de classe no título por enquanto e então vamos precisar de um componente de barra de pesquisa . Lembre-se, queremos um espaço reservado de campo de entrada de Pesquisar um artista por enquanto e, em seguida, um botão compactado que diria apenas é Enviar. Teremos uma seção de perfil para que o nome da classe é igual ao perfil Aqui, podemos simplesmente dizer Artista nomeado para agora e, em seguida, para uma boa medida irá adicionar imagem do artista Div e, finalmente, vai precisar de um componente de galeria. Podemos dizer “galeria “para não, é claro. Dê o nome da nossa classe de galerias. Vamos salvar e é ele atualiza. Temos um aplicativo muito básico procurando que realmente não faz nada, exceto mesmo clicar em um botão para não então Vamos seguir em frente em algum estilo básico. Sua aplicação para realmente tornar isso visível e irritável em outras palavras, maior e adicionar um pouco de bootstrap para o aplicativo. 5. Estilo com Bootstrap: antes de fazermos qualquer outra coisa, já podemos limpar o estilo deste aplicativo, incluindo os homens. Se eu arquivo CSS de reagir. Bootstrap. Nunca volte a reagir. Bootstraps começando página e copiar o link do mais recente compilado em diversão CSS unificada . Alguns vão copiá-lo, Navegue de volta para o índice de faixa pública dot html e incluído acima do tipo. E já devemos vê-la em atualização com algum novo estilo, a mudança de fundo, bem como a entrada e o botão. Agora vamos adicionar nosso próprio estilo à bagunça musical. Vamos adicionar um arquivo CSS no detentor da fonte. Vamos ver no ponto CSS como antes e antes de seguir em frente. Vamos adicionar um nome de classe em preparação para o DIV geral do aplicativo. Agora enfraquecer o estilo que eu quero que tudo seja alinhado ao centro. Eu não gosto de como é para a esquerda agora e então eu quero um pouco mesquinho então vamos dizer 5% Patty Agora. Claro, precisamos realmente importar são stylings, inundações, importação app dot CSS e lá vamos nós. Nosso estilo se aplica. Em seguida, vamos alterar o componente da barra de pesquisa. Parece meio feio agora. Nem sequer diz “submeter-se “como queríamos. Independentemente disso, nós vamos importar algumas coisas de um dandy útil reagir. Biblioteca de bootstrap, reimporte o componente de grupo de formulários, deforme o componente de controle. Um grupo de entrada, bem como os ícones de penhasco de reagir. Bootstrap. E agora vamos mudar toda essa busca. Então vamos em frente e simplesmente excluí-lo. Vamos colocá-lo com um componente de grupo de formulários e, em seguida, dentro do grupo de formulários, vamos ter apenas como um campo de entrada, um controle de formulário alimentado e este controle de formulário será auto no fechamento. Então, na verdade, não precisamos de impostos. Seu tipo será texto e o espaço reservado será procurado no artista. Agora isso realmente precisa ser embrulhado com um grupo de entrada em si incluir grupo Vamos tomar este controle de formulário. Coloque-o dentro do grupo de entrada. E, finalmente, a razão para isso reagir código Duceppe é que queremos este botão dedo do pé olhar um pouco. Vai ter um ícone. Tenho uma lupa que parece uma barra de busca. Então é no grupo de entrada e sobre, e dentro deste add on terá um ícone de falha. E então este penhasco vai simplesmente dizer, procurar e nunca ir. Isso não parece legal? Agora você pode olhar através de todos os ícones de brilho dentro da biblioteca React Bootstrap. Há uma tonelada delas. Além disso, é lupa para vantagens. Usuários de perfil, etc. Vamos continuar modelando nosso aplicativo antes de seguirmos em frente. Eu sinto que pode ser uma boa idéia para a transição do tema geral de nossa aplicação. Assim, podemos diferenciá-lo dos outros que reconstroem. Vamos em frente e mirar todo o corpo e mudar o fundo Desviar, que é 000 inacessível. Eles só precisam ter certeza de que a cor ainda é feita. Então, faça-o f f ou branco. E à medida que guardamos as mudanças de tema a partir da noite de hoje, a última coisa que queremos é um apetite maior. Então vamos aumentar o tamanho do barco 2 26 pixels. Ótimo. Temos um design de aplicativo muito limpo indo para nós, avançando agora para que possamos continuar construindo a partir disso. Vamos seguir em frente. 6. Como procurar artistas: vamos conectar um método de pesquisa para este aplicativo. Nosso método de busca por agora simplesmente registrará para o cônsul qualquer tipo de usuário de texto dentro do campo de entrada. Lembre-se que os campos de entrada em reagir têm uma função não mudança que nos permite agarrar o conteúdo do valor alvo de seus dados. Então precisamos configurar um estado primeiro onde o usuário possa controlar sua pedreira para procurar. Vamos definir um construtor agora para esta classe. Lembre-se de passar o argumento de adereços, e então na primeira linha, você sempre quer super adereços. Em seguida, vamos declarar o objeto de estado fora desta classe. Por enquanto, teremos uma consulta chave, e isso será o que quer que o usuário digita com campo de entrada. Vamos configurá-lo para uma string vazia por enquanto. Ótima. Não vamos alterar a propriedade value deste campo de entrada para este não ST dot kwehr. Então, logo abaixo do espaço reservado, a consulta é igual a este ponto estado dot queer awesome. E agora podemos usar isso na função de mudança. Lembre-se, nós tínhamos um identificador na variável de evento. Em seguida, simplesmente definir o estado fora da consulta para o valor de destino de ponto de evento. Incrível. Agora precisamos de alguma forma de testar se isto está realmente a funcionar. Por enquanto, vamos ligar um método de pesquisa. E então nesse método de pesquisa, vamos registrar o estado. Então é o registro de pontos do cônsul. Nós diremos que este não estado neste estado ponto, então nós sabemos o que ele realmente está se referindo. Perfeito. Finalmente, precisaremos adicionar a chamada para o método de pesquisa real a partir do botão. Clique. Então, aqui mesmo no grupo de entrada ponto Adicionar em que sat on click recurso dentro da tag, e precisamos usar a função de seta anônima aqui. Você chama isso de busca DOT e acidentalmente deletou que Adam então espero que eles funcionem. Vamos inspecionar o próprio. E isso em vez de dizer Query deve realmente dizer valor. E aqui vamos nós. Vamos procurar um artista. Frank Sinatra. Talvez lá vamos nós. A pergunta é Frank Sinatra. Uma última coisa No último aplicativo, Countdown Champ teve um desafio de adicionar funcionalidade, permitindo que o usuário enviasse seus pedidos pressionando o botão Enter. Podemos realizar esse recurso usando o recurso pressionado na tecla do campo de entrada. Da mesma forma, dedo na mudança precisamos lidar com a variável de evento aqui. Precisamos verificar a propriedade da chave do evento. Então vamos em frente e console Registrar isso por enquanto. Então, vamos dizer na tecla pressionar é igual a manipulação da variável de evento. É o Cônsul Dot Log que até mesmo patinho para não, só para ver como é. Como eu digo, enquanto estou aqui, o venti é um d f mas quando eu aperto Return ou Enter, até o Burro entra. Então agora podemos simplesmente chamar a função de pesquisa. Se o evento Daki é igual a enter, vamos adicionar essa lógica agora, em uma simples declaração se, precisamos envolver a coisa toda abraça. Vamos verificar se, se evento hóquei é igual a entrar e, em caso afirmativo, chamaria isso de não procurar. Vamos procurar. Frank Sinatra. Nem pressione Enter. Lá vamos nós. Consolamos. Não registre com este estado inicial e sei que a busca foi chamada porque é um concerto longo que estamos usando. Ótima. Agora que temos um método de pesquisa de trabalho, vamos continuar construindo música Master 7. Como preparar uma solicitação na web: Nós temos um método de pesquisa ligado a uma defesa, mas nós realmente queremos que métodos puxar para cima alguns dados para pegar uma informação sobre artistas vai usar o incrível Spotify público um p eu ir em frente e chegar a um novo navegador ou Tad e pesquisar Spotify BP Você viu um dos primeiros links como Web API I Spotify desenvolvedor? Você deseja encontrar sua referência de ponto final em Web API I A p I n referência de ponto. Em seguida, encontre o recurso de pesquisa. Como você pode ver, a busca por um item em ponto nos permite simplesmente obter informações do catálogo do Spotify sobre artistas, faixas de álbuns ou playlist. Aquela consulta mágica que a pesquisa. Felizmente, para usar isso e apontar, nós não precisamos de uma chave A P I para que possamos ir em frente e apenas copiar este link por enquanto. Dedo já. Comece a usá-lo. Você não precisa fazer parte. Vá em paz dentro de sua função de pesquisa. Ótima. Agora vamos declarar isso seu como base, você está fora. Agora vamos explorar o Spotify a p I por alguns instantes. Como você pode ver, eles têm parâmetros de consulta. A B ice normalmente terá parâmetros para cada um dos seus pontos finais para nos permitir especificar o tipo de informação que queremos. Se você já notou links que você usa, às vezes têm chaves ou palavras antes de sinal desigual que mapeia para um valor que é um especificar as informações exatas que o aplicativo Web deve mostrar na página e os pontos funcionam da mesma maneira para obter um recurso de pesquisa do Spotify. Nós especificamos nossa consulta ou a palavra que estamos procurando usando o cuchi para que possamos usar Q igual a Frank Sinatra, por exemplo. Então vamos declarar uma nova busca. Seu, Eu vou dizer é igual à base que você está fora mais Que é igual. Seja qual for o estado da nossa consulta, também vamos querer aproveitar mais alguns parâmetros, por exemplo, o tipo e o limite. Eu também quero ter nosso tipo limitado apenas a artistas, então adicione um segundo parâmetro. Precisamos disso e assiná-lo vai dizer artista tipo pessoas e mais um parâmetro são limite será um artista por enquanto. Antes de fazermos qualquer outra coisa, que é Cônsul ponto log este buscar você é l para ver o que parece. Eu vou ver. Vá e navegue de volta para o seu aplicativo e você realmente não precisa de chaves. Vocês provavelmente pegaram que em referência à variável vai salvar e recarregar. E lá está tudo funcionando bem. Então vamos olhar para Frank Sinatra Agora, como eu vejo isso, u r l Eu notei que há uma coisa faltando antes do sinal Q. Nós realmente queremos ter um trabalho de perguntas. O ponto de interrogação inicializar é parâmetros de consulta para vir depois, por isso é muito importante. Vou salvar-nos agora. E vamos procurar Frank Sinatra mais uma vez. Aqui temos o nosso verdadeiro buscar-te, Earl. Ir para o novo ataque do navegador. Passe-o para dentro e lá vai você. Aqui estão muitas informações sobre Frank Sinatra. Ele tem seus l's externos, seu número de seguidores gêneros que ele faz algumas imagens sobre ele para que possamos ter alguns perfis. É este enorme objeto Jason que Spotify nos permite usar dentro de nosso aplicativo. Finalmente, antes de seguirmos em frente, podemos fazer isso. Você é todo código mais conciso tirando proveito de cadeias de caracteres de modelo em Essex JavaScript vez de usar sinais de adição ou mais sinais de igual mais, mais. Podemos manter tudo isso muito bom em uma corda, embrulhando-o em carrapatos traseiros. Então vamos dizer em vez disso que temos essa coisa toda nos ticks traseiros, e esse personagem está bem ao lado de uma tecla no teclado e todas as nossas variáveis serão embrulhadas. Abraces prosseguidos por um cifrão e, como você pode ver são variáveis agora é realçado em uma cor diferente, e agora não precisamos mais do plus ou a cotação funciona mais. Então aqui temos outra variável e podemos nos livrar desses caracteres desnecessários agora. Então, como você pode ver, o Essex nos permite ter strings mais concisas com strings de modelo. Na verdade, cabe a você a sua preferência usar qualquer um. Mas saiba que mais e mais Strings de Temple começarão a aparecer no código de script de trabalho que você verá no futuro. Vamos testar tudo mais uma vez. Vou guardar isto. Volte para o aplicativo React e vamos procurar nos Beatles. Aqui está o nosso “L “para os Beatles. Lá vamos nós. Temos outro objeto Jason. Eles são conhecidos pela invasão britânica, rock clássico, beterraba Mercy, proto punk, psicodélico e rock grande. Ele ainda funciona, então vamos passar para a próxima seção, onde nós realmente implementamos algum código para pegar os dados em reagir 8. Como dar dados com uma Url: desde que criamos um trabalho Busque sua ajuda. A captura de dados sobre artistas de Spotify Eyes a p I. Nós simplesmente precisamos implementar o código que agarra esses dados dentro do nosso aplicativo reagir. Podemos tirar proveito dos scripts Essex Java. Fetch função que lida com solicitações em JavaScript Coat, nós simplesmente precisamos especificar são Fetch Terrell como o primeiro parâmetro e, em seguida, um objeto como um segundo parâmetro relativo a uma chave de método e o método que irá usar e onde. Solicitação que lidamos principalmente com métodos de pós e obter métodos. Os métodos de publicação enviarão dados para o banco de dados de um servidor ou empresa, dependendo do que o usuário forneceu em uma página da Web. No entanto, obter solicitações recuperar dados através da web, e nosso Fetcher L é um exemplo desse método get. Então vamos ler o método com a função fetch. Então primeiro irá especificar o Fed zero. Então nosso segundo parâmetro será esse objeto. Teremos uma chave de método e diremos: “Sai agora”. Estes dados por si só não provarão o suficiente para pegar o método fetch em JavaScript retorna promessa e uma promessa em JavaScript é simplesmente código retornado por uma função que representa dados que podem ter disponibilidade agora no futuro ou nunca até. Neste caso, vamos verificar a promessa no que é chamado de função de retorno de chamada em JavaScript com uma função de seta anônima. Então, aqui está a nossa decisão. De volta a uma declaração então, teremos uma resposta. Variável. E aqui vem a nossa função de seta anônima, e por enquanto, isso é o conselho ponto log esta resposta para ver como ela se parece. Pergunto-me se isto será suficiente. Ele está dizendo que recarrega? E vamos procurar os Beatles. Agora aqui temos uma resposta. Temos um euro. Isso é verdade, um status que é Ok, então nós certamente temos informações e aqui está o nosso corpo, mas não se parece com o que procuramos anteriormente com nosso enorme objeto Jason quando digitamos em nosso endpoint. Isso é porque ainda precisamos embrulhar outra promessa. Precisamos retornar a resposta. Jason função a partir desta variável de promessa. Então vamos ter outra declaração de amassado desta vez. Esse é o Cônsul Log, o Jason que é devolvido como eu salvo. Estou pensando em revistar Whitney. Use-o. É o seu aqui. Temos um objeto de artista, e lá vamos nós. Não se parece com o objeto Jason que vimos antes com os seguidores externos, seu l é o seu I d. algumas imagens. Ótima. Acabamos de implementar a busca em Essex. JavaScript. Então, agora que pegamos dados em nosso código, vamos passar para a construção de um perfil com essa informação. 9. Como criar o perfil do artista: com os dados de busca deste Jason, podemos adicionar o estado de turnê do artista resultante para o aplicativo porque limitamos nossa solicitação a sempre um artista o objeto artista dentro da J Song sempre terá apenas um item em seus itens. Chave do objeto do artista. Então vamos mudar as chaves dele para que pudéssemos começar a manipular o Jason em mais de uma linha e depois declarar o artista como um Jason. Os artistas, os itens zeroth componente em que itens direita. Mas o conselho não registra o artista por enquanto para ver como ele se parece. Como eles dizem, o aplicativo será recarregado. Vamos olhar um Bruno Mars, e aqui temos um artista. Então agora podemos simplesmente definir o estado do nosso artista para artista ou usar uma abreviação musical quando a chave no valor é a mesma. E então, é claro, precisaremos inicializar artistas para saber muito importante que você tem isso como não no estado inicial. Então vamos salvar e os artistas e atualizar. Agora queremos construir um perfil para este artista. Vamos avançar em um componente de perfil para a fonte. Perfil de arquivo totalmente novo ponto gsx. Vamos em frente no padrão reagir cozido, por isso é importar reagir e o componente de reagir para nos preparar antes do tempo. Vamos importar isso, diz ele. Vamos estender nosso componente na classe de perfil Extends componente Antes de fazer qualquer outra coisa , vamos exportar este perfil como padrão. Agora vamos em frente e Orender Return costurado JSX por enquanto com um diff que só diz perfil. Nomeie outro que diga seguidores de perfil. A próxima coisa que precisamos fazer é substituir o JSX padrão que tínhamos anteriormente para o perfil pelo componente de perfil real que acabamos de criar. Vamos importar a prova do perfil e parece que a minha funcionou imediatamente. Agora alguns de vocês podem ter um modelo desaparecido. Então, se isso acontecer com você, vá e volte para o seu terminal para recarregar o servidor. Não, não estou recebendo o ar, mas estou recebendo um aviso de que não estou usando o perfil. Vamos em frente e usá-lo. E agora e a próxima coisa que eu vou fazer. Basta argumentar para o perfil tem adereços artista do estado do artista legal, modo que isso salva o aviso vai embora, Eu vou perfil nome seguidores perfil, que é o que nós especificou aqui e em nosso método de renderização. Vamos em frente e Orender esta parada cultiva para que possamos ver se o artista real está lá quando nos submetemos antes. Tudo bem, então aqui temos em nossos adereços, artista é não. Mas assim que olho para Bruno Mars completamente, vemos que o artista não sabe que temos um objeto completo com nossos artistas. Informação. Ótima. Então, por enquanto, devo declarar um objeto de artista. Eu vou dizer que seu nome está em branco e tem uma contagem de seguidores de um total que é Blake. E então, se esse artista adereços nunca souber, vamos em frente e mudar o artista para o artista de adereços de ações. Então, essencialmente, o que está acontecendo aqui? Artista é geralmente não em apoiado, mas assim que Render vê que o nosso não é não, em outras palavras, que ele tem dados em adereços. Vamos mudar seu artista inicial para aquele artista adereços e agora podemos mudar isso para os artistas padrão Não nomeie neste para o artista padrão até que seguidores tomados Vamos salvar. Vamos tirar esta parte aqui. Não, vamos procurar Bruno Mars e assim que não souber, vemos Bruno Mars aparecer como um nome e então seu número de seguidores parece ser cerca 5.300.000. Então, não é grande coisa. Eu provavelmente preciso, mas me dê alguns meses e chegue ao mesmo número. Tão ótimo, temos algumas informações básicas para baixo, então vamos continuar expandindo sobre este perfil na próxima parte e torná-lo bom. 10. Como estilizar novos componentes com CSS: vamos expandir sobre o componente de perfil. Queremos incluir uma imagem de perfil. Claro que sim. Vamos bloquear o nome, como era uma conta de acompanhamento, e então também vamos adicionar uma lista de seus gêneros. Antes de o fazermos, no entanto, podemos encurtar o acima. declaração If com expressão Turner. Vamos simplesmente verificar. O artista não sabe. Se não for, enviaremos para isto. Pare adereços o artista. Caso contrário, teremos como sério. Podemos encurtá-lo ainda mais tirando todo esse objeto substituindo-o pelo artista aqui. Mas eu sinto que essa linha seria muito longa, e na verdade parece mais simples com essas duas linhas aqui. Agora vamos lidar com uma imagem de perfil. Então, mais uma vez, vamos procurar um usuário ou um artista. Bruno Mars. Poderíamos ver uma de suas imagens de perfil indo para imagens no primeiro objeto, e que você estava. Queremos sempre seguir o padrão que eles fornecem para você no objeto Jason. Assim, é mais simples porque é um padrão que estamos usando. Então as imagens não são matriz e, em seguida, chapéus , objetos, então inicialize um objeto vazio aqui e então nós temos uma Europa que agora é anti. Então agora podemos aproveitar isso por ter uma imagem aqui com uma imagem normal. HTML ou apenas extrair imagens e JSX sempre tem uma alternativa no caso de que é, nenhuma imagem fornecida para alternativa será perfil. Vamos dar-lhe um nome de classe para que possamos dar o seu próprio estilo mais tarde da imagem do perfil . E então nossa fonte será imagens de ponto de artista e o objeto zero e é você. Então é seguro. Vamos procurar Bruno Mars novamente e que há uma imagem gigante de Bruno Mars. Então, obviamente, ainda precisamos adicionar um pouco de estilo a isso. No entanto, vamos passar para a criação do componente do gênero. Agora o gênero age como tudo bem. É uma lista, então alguém terá que mapear sobre a matriz do Jonah para um item de gênero tão fácil dentro dele. Então, gêneros, como você pode ver, ele está em um desastre. Vamos declarar uma matriz vazia dentro do nosso objeto inicial aqui, e então teremos que mapear sobre o gênero dentro dessa função. Então, felizmente, navios JavaScript da função fosca para um aumento que nos permite mapear sobre ele por agora simplesmente mapear sobre cada gênero com uma função da era anônima. Eles vão envolver o gênero dentro de um espaço, basta extrair para ver como ele se parece. Os doadores não estão definidos. Isso é porque queremos artistas saltos gêneros. Então é como outra pessoa. Os negócios. Há uma foto gigante deles de novo, e a razão de não aparecer agora é que nos esquecemos de devolver o sexo J. É como se o método de renderização precisasse devolver o sexo J. A função de mapa também precisa retornar o JSX como cued por este ar bem aqui, esperado para retornar um valor nesta função. Então, enquanto você salva, vamos tentar os Beatles novamente. Incrível. Aqui você pode ver todos os seus gêneros não precisam olhar ainda. E aqui temos um aviso. Cada criança, em um aerador de raridade, deve ter uma propriedade de chave única, então eles estão esperando que cada chave ou cada tag span tenha uma determinada propriedade. No entanto, não podemos necessariamente saber que todos os gêneros ar exclusivo para que você não pode ter o gênero como apenas gênero, no entanto, mas felizmente, mesmo que a função vem com a seção argumento opcional do índice e poderíamos nomear isso qualquer coisa que queremos ser nomeados Chave de Índice ou um vamos chamá-lo de K para abreviar. Então teremos a chave no pontapé. Vamos salvar as recargas. Vamos procurar os Beatles mais uma vez e lá vamos nós. Esse aviso vai embora agora. Obviamente queremos algum espaçamento entre aqui, e provavelmente queremos algumas vírgulas. No entanto, não queremos que uma vírgula apareça no final da lista, então não podemos simplesmente fazer um espaço em um comum aqui. Para corrigi-lo, vamos precisar usar expressão de paternidade para verificar se o gênero não é o último item dentro da matriz. Porque se não for, vamos adicionar uma vírgula. No entanto, se for, não adicionaremos um par. Vamos apenas adicionar um espaço para que seja um gênero igual Vamos verificar se o gênero não é o último na lista. Então encontre o último valor de índice. Estamos encontrando o último valor de índice simplesmente olhando para o comprimento menos um, que será sempre o último valor de índice. Então não é o último valor próximo bem, em um espaço com o gênero. Aí vem o nosso modelo de psiquiatra teve que vir. Caso contrário, vamos simplesmente ter e declaração para o nosso último no gênero em si. E vamos ver como isso se parece. Assim, os gêneros não estão definidos. Mais uma vez, queremos artistas de pontos gêneros um artista. Honras holandesas aqui. Então vamos procurar os Beatles e o ar do gênero realmente parecendo muito agradável. Então vamos adicionar um pouco de estilo a esta coisa toda. Vamos em frente e embrulhe todas essas informações de texto dentro de um ativo separado. Vai dar o nome de Miss Tive Profile info. Vamos dar a cada um desses nomes de classe também, então este será um nome profundo. Este será seguidores de perfil, e este será o perfil gêneros pro file. E agora podemos começar a lidar com o CSS. Vamos adicionar uma nova seção para perfil e eu pressionar o comando Slash para fazer isso. Comentando automaticamente a nossa imagem de perfil. A primeira coisa que vamos fazer é adicionar uma exibição de flex para nossas vendas. Vamos tirar vantagem do Flex. Ele nos permite atribuir partes da tela a certos elementos para que eles possam se expandir em relação uns aos outros com base em seus números flexíveis e preocupação com diferentes tamanhos e formas de dispositivos . Ele também permite um alinhamento muito simples em termos de eixos controlados pelo just by content , propriedade e align items propriedade respectivamente. Então é muito fácil centralizar as coisas. Então vamos ver como funciona o flex quando mudamos seu perfil. Então temos um display flex apenas pelo conteúdo, tudo para o centro. Uma imagem de perfil, é claro, é muito grande. Mas podemos corrigir isso atribuindo um dentro da altura, e vamos torná-lo 150 pixels por enquanto. Também gosto de dar às coisas uma fronteira para que ele se destaque. Esta é uma preferência pessoal minha, mas você pode ir em frente e usar um diferente vai torná-lo branco ou um texto. Um equivalente decimal, que é F f f e o raio da borda, desde que eu quero ser um círculo será exatamente metade do dentro da altura. Então, enviando cinco pixels e então faremos seu objeto se encaixar para cobrir. Assim, parece bom como uma imagem. Então eu, os Beatles e olha que ele já está começando a ficar muito bonito. Só precisamos explodir esta mensagem aqui. Vamos alterar o nome do perfil fará seu tamanho de fonte maior e aumentado para 26 pixels . Além disso, os seguidores do perfil. Eu queria ter um tamanho de telefone decente não tão grande quanto o nome, mas ainda significativo. Digamos que 18 pixels, bem como os gêneros, terão um tamanho de 18 pixels para garantir que eu soletrar as coisas certas e os gêneros de perfil. Lá vamos nós. Isso é 40 parecendo muito melhor. A última coisa que quero fazer é basicamente centralizar. Todas essas informações de perfil um pouco melhor, então vamos para a tag de informações do perfil. Então, enquanto eu estou abrindo o perfil, Info simplesmente vai dar uma margem esquerda de 10 pixels porque nós vamos texto, alinhar tudo para a esquerda e não queremos que ele toque no perfil, e isso é bonito. Agora. A próxima coisa que você quer fazer é ter certeza que isso tem seguidores. Só parece um número aleatório, por enquanto. Então estava dizendo seguidores aqui. Mais uma vez, vamos procurar os Beatles e fixe. Temos um perfil muito bonito por enquanto. Vamos seguir em frente 11. Como expandir o Requst: Como temos um componente de perfil de trabalho, vamos estender essa informação do artista pegando uma lista de suas faixas mais populares e tornando-as jogáveis. Antes de fazer isso, no entanto, podemos alterar o nosso código um pouco para algumas correções de interface de usuário e apenas para torná-lo mais legível. Primeiro, vamos reformar alguns de nosso código no perfil Dajae sexo, a fim de torná-lo mais limpo. Vou inventar isto porque parece muito grande online, como sempre, como sempre, minha expressão urinária. Vou colocar este ponto de interrogação alinhado com o cheque de igualdade, e isso já está melhor. Vamos em seu rosto depois que os seguidores antes dos seguidores e legal agora com um aplicativo dot jsx . Eu não quero ver este template ing antes mesmo de ele procurar por qualquer coisa para que o temporalmente será feito no perfil e na galeria. Vamos colocar isso aqui dentro, e então não vamos mostrá-lo até que o estado do artista não seja. Não, então não sabemos se mostraremos o perfil. Se for Não, mostraremos que sim. Isso não tem nada com isso. Vamos salvar. Aqui está a coisa sobre dibs subsequentes que precisamos envolver o Dave dentro um do outro ou dentro de outra morte. Assim não teremos que reagir reclamando. E à medida que salvamos, está tudo bem. Então agora, enquanto procuro por um artista como Bruno Mars, o template ing não aparece até que o artista seja válido. Legal. Agora podemos ir buscar um artista. Faixas superiores. Vamos voltar ao perfil e também dentro de outro navegador ou guia. Navegue de volta para o Spotify a p I. Desta vez queremos as informações do Spotify na seção de artistas. Você quer financiar em um ponto que diz, obter artistas melhores faixas. Então, que P I obtendo artistas Top treks. Como você pode ver, o endpoint funciona de forma muito simples, assim como antes. Precisamos usar um http get requests, a fim de pegar os dados formatados Jason para um artista . Principais faixas dentro do seu l. Nós simplesmente especificar o I D de artistas que gostaríamos de obter, então ele vai copiar este ponto final aqui. Vá para a sua função de pesquisa. Acompanhe-o como o álbum que você era. Vou chamá-lo de Constante Mural de Alba. - Foi. Tire a ponta aqui, então vai para a seção de artistas agora. Felizmente, quando declaramos artistas aqui, já tem uma propriedade de identificação, para que possamos tirar proveito disso para procurar as melhores faixas. Então, não, podemos modificar essa aposta que você ia buscar alguns álbuns. Teremos um sermão de gorjeta de novo. Nosso 1º 1 será álbum Euro slash, em seguida, o artista que eu d. Então nós queremos terminar sua força vai dizer faixas top. E, finalmente, a última parte necessária é o código do país. E por enquanto, podemos usar os EUA EUA e a razão pela qual é necessária é porque o Spotify e o torna necessário. Então, se você estiver fora dos EUA ou quiser receber solicitações de um país diferente, vá em frente e clique neste link aqui. Ele vincula a um artigo da Wikipédia. Onde tem todos os códigos de país relevantes? Agora? Nós simplesmente precisamos usar a função de busca se todos o mesmo padrão de antes, de Promessa uma promessa de retornar o Jason que precisamos. Então vamos buscar o zero. Nosso método, claro, é claro,ainda está e então vamos retornar uma resposta, e estamos basicamente declarando a variável. E depois devolveremos o Jason que queremos. Esperemos que sejam os artistas, artistas, artistas, faixas de topo e Jason. Então vamos verificar se isso realmente funciona. Vamos voltar a reagir à aplicação no nosso quinto ano. Lembro-me que declaramos como uma constante Bem, já que estamos declarando, devemos declarar uma licença. Assim é modificável. É recarregar. Vamos procurar Bruno Mars. E como podemos ver com este trate zero. Eu adicionei uma barra extra aqui, então vamos tirar essa barra vocês provavelmente pegaram isso. Vamos tentar mais uma vez. Bruno Mars e ótimo. Parece que temos algumas faixas de topo e aqui estão todas elas. Eles têm uma prévia e eu d. A melhor parte é, tem um objeto de álbum onde podemos encontrar alguns arquivos reproduzíveis. Tão grande agora que temos faixas de registro, vamos nos preparar e disse que a faixa para o estado então deixe faixas Em vez disso, Const. Faixas iguais a Jason Tracks e vamos sepa estado de faixas. Duas faixas. Lembrem-se, podemos usar uma abreviação teísta. Estava no cofre dois trilhos, é claro. Ele quer que você inicialize faixas para um anti estupro e, em seguida, Finalmente, aqui está outro ano seis truque quando o nome da variável e a chave que queremos acessar dentro de uma função ou objeto é exatamente o mesmo. Podemos ver aqui que as faixas são iguais a Jason Now. Isso se torna especialmente útil quando você está declarando várias variáveis ao mesmo tempo quando você está tentando pegar várias chaves de um objeto. Então, por exemplo, se eu tivesse faixas e álbuns artista aqui e Jason tivesse cada uma dessas chaves, nós declararíamos todas essas três variáveis ao mesmo tempo. Só temos um, , então digamos que as faixas salvem. Procure os Beatles para variar. Então, já que tudo está funcionando, podemos avançar para a criação de uma galeria para todas essas faixas e, claro, eventualmente, torná-las jogáveis. 12. Como criar uma galeria: temos faixas Interstate para o aplicativo. Portanto, podemos passá-los para um novo componente que lida com renderização. Vamos chamar este componente de nosso componente de galeria. Vamos criar um novo arquivo JSX de ponto de galeria dentro da nossa galeria de pasta de origem dot jsx. Agora vamos ter o código de componente reagir padrão e seguir o mesmo padrão que temos nossos componentes antes de importar reagir eo componente de reagir, vamos importar no ponto CSS. Vamos declarar a classe da galeria e estender componente. Claro, vamos exportar a galeria por padrão como seu componente padrão. Agora é renderizar na tela e retornar qualquer JSX que precisamos para Não, vamos fazer uma galeria fez e, em seguida, também conselho ponto registrar os adereços da galeria. Legal. Vamos incluir a galeria agora após perfil Importar galeria de e certifique-se de fazê-lo na cadeia de caracteres da Galeria. Vamos substituir o que fez não com a nossa galeria real e dizer que queremos que as faixas sejam passadas como adereços através deste estado de aplicação. Aqui vamos nós. Vamos procurar um artista. Que tal Billie Joe? Então adereços de galeria. Vemos algumas faixas e lá vamos nós, e também estou percebendo algum estilo. Às vezes são esmagados, então vamos consertar isso agora. Uma solução fácil é ir para as informações do perfil. Dê uma flexão, explique. Assim, sempre tem um certo tamanho. Lá vamos nós. Mas agora isso faz com que seja para um pouco sq. Precisamos mudar a direção flex agora para Collender, porque é linha por padrão, que alinha a outra maneira. Finalmente, consideramos as coisas um pouco melhor com o conteúdo justificar do centro. Legal. Vamos voltar para o componente de cozinha agora, uma vez que temos adereços ansiando por nós, a fim de renderizar todos esses adereços na matriz, tivemos que aproveitar a função de mapa JavaScript novamente. Primeiro, vamos definir uma constante de faixas iguais a isso. Adereços que acompanham Lembre-se do truque de Essex que aprendemos da última vez. Podemos encurtar isso apenas fazendo trilhas dentro de algumas chaves, ele definindo-o para este adereços de parada. Isso será útil se tivéssemos outras chaves e variáveis que queríamos acessar como adereços e declarar em uma linha. Agora podemos mapear sobre os trilhos e podemos fazer isso uma faixa de cada vez. Vamos nos certificar de ter nosso índice como K ou pronto, usamos que funções de seta anônimas no imposto. Por enquanto, vamos voltar no geral, Dave com uma chave. OK, é classe. O nome deve ser Trek. Então teremos uma imagem lá dentro. Agora, com um auto na tag de fechamento, sua fonte será imagem de faixa. Ele também lhe dará um nome de classe da imagem traço trilha. Uma alternativa de pista. No entanto, precisamos declarar esta imagem da faixa. Agora. Eu vou dizer que a imagem franca custo é igual ao álbum de pontos As imagens Primeiro elemento não seu próprio. Agora, antes de salvarmos isso, lembre-se, precisamos retornar todo esse JSX dentro da função de mapa, mesmo que já estamos retornando aqui, mas na função de renderização, porque isso declara um habilidade totalmente nova seguindo em frente. Também queremos a propriedade do nome. Vamos declarar uma tag P para parágrafo. O nome da classe será texto Trek e, em seguida, acessaremos o nome da faixa. Tudo bem, vamos testá-lo, ter um Bruno Mars novamente, e olhar para todas essas faixas tão grandes que poderíamos definitivamente estilizá-los um pouco melhor. Então é cabeça toe app dot CSS para algumas mudanças de estilo. Agora estamos nos componentes da cozinha, vou fazer barra de comando para comentar ou rastrear. Ele vai ter um pouco de estilo. Primeiro foi mudar o com 2 220 pixels, bem como uma altura. Você fez menos de 20 pixels? Vamos dar-lhe uma borda de três pixels, sólido e branco, sólido e branco, que é F F F F e Hexi decimal. Vamos dar-lhe um raio de fronteira ao redor das coisas. Um pouco de três pixels. Vamos dar-lhe algum preenchimento de 10 pixels. Vamos alinhar todo o texto dele à esquerda. Aqui está um recurso legal mais tarde em um um para torná-lo clicável. Então, em um componente cursor de Pointer agora nossa imagem de faixa, ele ainda vai ser tão grande. Eu só queria ser tão grande quanto a pista. Então herdará a mesma largura e altura. Torne ambos 220 pixels de largura e 2020 pixels. Tom. Este terá a mesma fronteira. As três escolhas sólidas. Espere, o raio da borda será de três pixels. O curso fará com que se oponha. Escolhido para cobrir, então parece bom e sua posição será absoluta antes de seguirmos em frente. Vamos tornar todas essas faixas relativas para que elas se alinhem lado a lado, então parece legal. Nossa caminhada precisa ter uma exibição de bloco em linha que está parecendo muito bom, e as coisas estão um pouco fora do centro. Bem, em vez de dar um tapinha no interior, vamos dar uma margem no lado de fora. Então as coisas centradas no ar e espaçadas. Além disso, eu não tenho certeza se eles precisam de um raio de fronteira do lado de fora para a pista, na verdade, muito menos a fronteira, e isso está realmente parecendo perfeito. Legal. Eu acredito que é responsivo também, então vamos em frente e redimensionar. E lá vai você. Você pode ver todos os rastros deles. Legal. Vamos encontrar um artista com algumas capas de álbuns mais escuras, como Michael Jackson. Ali, aquele fundo branco está muito bom. Agora vamos cuidar do texto da faixa. Queremos ver o nome dele. Claro, texto curto. Teremos uma cor de fundo de preto a cor de branco, e o que vamos fazer é mostrar o texto sobre a imagem com um retângulo preto atrás dela. Assim, ele se levanta que a linha traseira precisa de 75% de capacidade com 220 pixels e o que leva uma linha para o centro. E assim ele aparece sobre as faixas relativas tornará sua posição absoluta. Vamos ver se está perto o suficiente. Agora parece muito bom. É um pouco demais, mas não quero que cubra toda a fronteira. Então, se você fizer 214 é certamente menor, mas precisamos dar uma margem esquerda. Então, dessa forma, ele é realmente centrado em três pixels. Doce e, em seguida, eu quero que isso não seja no topo no fundo. Então, quando eu disse que é alinhamento inferior para zero Grande, que parece melhor. Sr. Bruno Mars novamente só para ver como ele se parece. Muito legal. Tudo bem, isso foi um monte de CSS. Mais uma coisa quando nos damos um pouco de estofamento para que possamos ver que dirigindo um pouco melhor. Tudo bem, isso está muito bonito. Vamos passar para realmente tornar essas faixas jogáveis 13. Como reproduzir áudio com JavaScript: Agora que temos todas as nossas faixas renderizadas na tela, vamos realmente torná-las jogáveis. Primeiro, vamos remover este registro de pontos do conselho para a galeria. Em vez disso, depenado. Vamos registrar cada faixa no console. Verifique o seu conteúdo para conselho ponto log trilha. Vamos salvar a busca por um novo artista ou o mesmo. Temos andado à procura de rapazes brutais, e, como podem ver aqui, cada faixa tem uma pré-visualização. Este é, na verdade, um arquivo de som que podemos visualizar, acompanhando o link. Como você pode ver, cada faixa vem com seu próprio Sul. Agora podemos aproveitar o dedo do objeto de áudio JavaScript, na verdade reproduzir a mordida de som da nossa aplicação. Tudo o que precisamos fazer é declarar um novo objeto de áudio, argumentou. A visualização está fora como o primeiro argumento. Vamos criar um novo método auxiliar dentro da nossa classe de galeria. Vamos chamar este áudio de praga, e teremos um argumento, que é a pré-visualização do seu outro. Vamos declarar um novo objeto de áudio Áudio Capital, ele argumentou. A visualização u R L como a construção. Então vamos simplesmente chamar áudio dot play. Oh, vamos anexar este método dois. Sempre que o usuário clica em uma das faixas. Lembrem-se, precisamos usar uma função anónima da era. Chamamos isso de não reproduzir áudio nas faixas. Pré-visualização. Você estava fora. Vamos ver se isso funciona como uma recarga de salvamento. É como um Bruno mais uma vez. Vamos procurar Sochi no chão. Incrível! Temos som indo, mas só parei porque silenciei meu sistema. Então, vamos pensar em pausar e repetir no próximo vídeo. 14. Como usar uma faixa: Agora que temos faixas jogáveis, devemos ser capazes de pas um, caso um usuário queira tocar uma faixa diferente ou simplesmente parar a faixa atual de admitir som. Primeiro, vamos implementar a mudança de jogar o seu outro para que sempre tenhamos um ativo jogando seu L no estado como jogando sua saúde. Então vamos adicionar um construtor aqui. Uma vez que agora precisamos estado dentro da nossa galeria, Vamos limpar nosso objeto estado e vamos dizer que estão jogando seu L agora é uma string vazia . Ótima. Agora precisamos reconhecer se estamos tocando alguma coisa. Quando pressionamos em um caminhão vai manter o controle, bem como do objeto de áudio atualmente no estado. Então é um áudio agora é não. Além disso, precisamos verificar se algo está realmente tocando. Então, tem uma mosca a brincar. E, claro, no início, nada está jogando, então jogar é falso. Primeiro, vamos verificar se não há nada jogando no momento, porque se não há nada jogando, primeira coisa que queremos fazer é jogar com você. Vamos remover a primeira reprodução de áudio, depois queremos atualizar algum estado. Bem, agora estamos realmente fazendo algo para que a mosca do avião seja enviada para a verdade. Bem, disse que a jogada atual você está fora para o ano anterior. L no argumento e, em seguida, vamos definir o objeto de áudio atual para este objeto de áudio. Lembre-se, estou usando a estenografia de Essex. Caso contrário, podemos assumir que o áudio já está sendo reproduzido. Há dois cenários a considerar. Queremos impedir que o mesmo áudio seja reproduzido ou queremos mudar o áudio. Então, se a visualização ou L é igual ao estado do plano, seu l, podemos supor que devemos pausar o áudio. O áudio é armazenado sob este pensamento. Diga que o áudio. Então vamos usar uma função pas neste início. Ficou o áudio e, em seguida, bem, disse que o estado jogando É um falso Caso contrário, Neste caso, estamos simplesmente parando o áudio atual e, em seguida, reproduzindo o próximo. Então, pararemos o áudio atual pausando-o, reproduzimos o próximo, e então atualizaremos o estado também. Então, estamos mudando nossa pré-visualização de Your Alatorre. Seu l tocando agora é verdade, claro, e então novamente, estamos enviando nosso objeto de áudio. Vamos mudar ordem isso para coincidir com o acima seria salvar. Adicionamos uma nova lógica. Então vamos testá-lo. Vamos ver se ainda toca e funciona. Podemos pausar? E lá vamos nós. Está pausando. Aqui está outro. E daí se trocarmos imediatamente? Ótima. Parece que tudo está funcionando. Então, agora que temos a funcionalidade completa de pausar e alternar, vamos apenas adicionar algumas animações ao aplicativo e algum estilo para amarrar a coisa toda . 15. Estilização animado: nunca tivemos pausa, reprodução e parada de áudio. Seria bom para o usuário ter mais feedback sobre a funcionalidade exata de cada faixa como ele está indo para cima ícone processo pairando sobre cada faixa sem um recurso realmente agradável , também, também, modo que cada faixa é jogável. E por que não jogado em animação para tornar o aplicativo ainda mais dinâmico? Vamos fazer isso agora. Precisamos adicionar uma div extra dentro da pista. Este Dave será chamado Track Plane. Vamos embrulhar outro DIV lá dentro. Este será chamado de jantar prato pista, e então vamos fornecer um pequeno ícone Unicode para agora de um tem 9654 que essencialmente se parece com um botão de reprodução triângulo direito. Ótima. Nada vai aparecer ainda porque ainda precisamos editar o CSS aplicativo. Vamos apenas ir em frente e enfrentar a posição da faixa de jogo será absoluta e ter um com de 220 pixels e altura de dois dos 20 pixels, assim como a imagem e a faixa. Atrativamente interno também tinha uma posição absoluta, e isso é controlar o triângulo que vamos ver mais tarde. Vamos alinhar tudo para o centro. Então, assim é no centro, são divertidos. O tamanho será um pouco maior. Nós não queremos um pequeno ícone, e eles vão dar um BRAC volta em torno de cor porque nós temos um círculo preto fechado nosso triângulo. O raio da borda desse triângulo será de 30 pixels porque a largura e a altura serão 60 picles finalmente tornarão sua cor branca. Vamos dar-lhe um pouco de preenchimento superior de 13 pixels, e então precisamos dar-lhe algumas margens. Dessa forma, ele ainda está centralizado em 80 pixels em uma margem superior de 80 pixels. Então, isso deve ser suficiente por enquanto, a fim de obter um botão play mostrando na tela. Então, alinhe o texto. Precisamos especificar que ele se centra. Vocês devem ter percebido isso enquanto eu estava programando para vocês. Vamos ver Bruno Mars e lá vamos nós. Temos um botão “play” agora. Nem sempre quisemos aparecer. Provavelmente só queríamos aparecer quando passarmos sobre o L. Então, por enquanto, vamos definir a capacidade para zero. Então, seja alto o elemento. No entanto, quando passarmos sobre o Presságio, faremos a opacidade. Há apontando? Vamos ver como isso se parece. Então, se eu pairar, aparece. Mas podemos tirar proveito de um CSS três recurso quadros-chave de animação, a fim de adicionar um pouco de chamada civil desbotada. Um quadros-chave desaparecem no futuro. É muito simples. Tudo o que fizemos você fazer é declarar um objeto olhando chave de sintaxe e ter um ir de zero opacidade para a capacidade é o seu apontar. E agora podemos especificar. O nome da animação para este componente pairar está desbotado como você declarou aqui. Mas, em seguida, precisamos dar esta animação duração ou quantidade de tempo que ele foi enviado aqui na tela. Vamos dizer meio segundo e verificar aqui. Não desaparecemos na tela. Há mais uma coisa. Se eu tocar faixa, , não poderemos mais ver o botão “play”. Devemos ver um botão de pausa para que possamos adicionar essa funcionalidade. Agora. Simplesmente, vamos ter uma expressão de Turner aqui e simplesmente verificar se o estado do avião você ajudou. É a Eagle para acompanhar a Europa. Se for, então podemos supor que precisamos pausar o mas. E um botão de pausa implicitamente parecia duas barras verticais, que é o caractere ao lado dos colchetes. Caso contrário, teremos o nosso manual de jogadas normal, que acabam com o hash. 9654 e mais uma coisa. Este texto por si só não funcionará. Precisamos embrulhar estes dentro de tags span, então gastar que negociamos esquecerá que o tempo de fechamento extra iria economizar e verificá-lo mais uma vez como um JSX recarrega. Então, confira. Vamos jogar agora. É possível que joguemos trancados fora do céu. Temos que postar e ótimo. Isso está muito bonito. Então, com isso, tínhamos acabado de construir o Mestre da Música. Excelente trabalho, e temos uma aplicação muito divertida em suas mãos. Eu tenho que dizer que aprendemos tudo sobre buscar solicitações em reagir e como lidar com dados através da Web também. Alguns novos conceitos com codificação Essex e CS tem três animações nas próximas seções combinarão nosso conhecimento React com a Biblioteca Redux para melhorar o design de nossas aplicações. Também dentro da próxima parte vai encontrar um resumo desta aplicação e os conceitos que aprendemos , bem como alguns desafios. Se você quer continuar estendendo sobre ele, trabalho incrível. Vamos ficar com o Cody