Reagir 101: Aprender o reato. js para iniciantes absolutos

1. Boas-vindas ao React.js para iniciantes: Bem-vindo a reagir um-para-um com seu anfitrião, Caleb, alto magro. Neste curso, o que vamos fazer é criar um gerador de personagens de Star Wars randomizado usando uma API. Então, toda vez que você clicar neste botão, ele vai encontrar um novo caractere para você usando uma API. Você vai ter experiência prática com solicitações de API de estado do componente, atualizando seu estado, trabalhando com adereços. Você criará um novo aplicativo usando o comando React create new app. E depois vamos substituí-la pelo nosso chamado Star Wars. O projeto no final deste curso é muito, muito divertido. Eu o demotei antes, vou demo de novo. É simplesmente um gerador de caracteres aleatórios. E isso funciona com uma API. Olá, o meu nome é Caleb a contar e tenho ensinado as pessoas a programar desde 2012. Ensinei mais de 350 mil alunos a codificar em todo o mundo. E hoje vou ensinar-te a reagir. Agora, por que eu acho que você deve aprender a reagir? Eu acho que você deve aprender a reagir porque é uma habilidade de alta demanda que um monte de agências de desenvolvimento web e freelancers precisam saber. E praticamente qualquer trabalho lá fora vai querer que você aprenda a reagir. E esta é uma introdução muito boa sobre como o React funciona. Alguns pré-requisitos, você precisa saber HTML. Você deve conhecer um pouco de CSS e você deve estar bastante familiarizado com JavaScript antes de fazer este curso. React usa JavaScript avançado. E isso significa que você precisa saber JavaScript avançado se você está pronto para começar a construir um gerador de caracteres aleatórios divertido usando uma API, então este é o curso para você. Não procure mais e espero vê-lo nessa primeira lição. 2. O que é React.js: Antes de começarmos, vamos dar uma olhada rápida no que React JS é. Então, se você seguir para reagir JS.org, você pode realmente ver que eles têm tutoriais e eles têm todo o tipo de coisas aqui. É realmente muito, muito bom site e eu sugiro, e eu recomendo que você fique um pouco familiarizado com ele ao longo do seu tempo aprendendo Reagir. Mas o que é reagir? React é uma biblioteca JavaScript para construir interfaces de usuário. Ok, isso é um pouco útil. É uma boa declaração sobre o que é React. Mas o que React realmente é, você sabe, como um site é feito de HTML, CSS e JavaScript, e então geralmente alguma linguagem back-end para processamento de dados. React permite que você crie sites interativos. Então HTML e CSS não podem fazer isso. Não pode ser super interativo, mas React pode torná-lo reativo, pode torná-lo divertido e envolvente, e é isso que reage faz. Agora React vem com uma sintaxe interessante chamada js X. Não é apenas JavaScript, parece JavaScript misturado com alguma versão louca do HTML. E vamos entrar nisso daqui a pouco. Mas basicamente, o que você precisa saber nesta lição particular é React simplesmente permite que você crie páginas muito dinâmicas. Como se eu fosse clicar nisso, ele só é instantâneo, ele se encaixa, é mais rápido do que usar jQuery é mais rápido do que usar outras bibliotecas. E se parece muito com isso. vez, vamos falar sobre a sintaxe dele em um pouco só porque parece um pouco bizarro no momento. Mas vamos falar disso daqui a pouco. Portanto, não há tarefa para você nesta lição em particular. Em seguida, vamos instalar Node e certifique-se de que ele está instalado no seu computador. 3. Como instalar Node.js e npm: Tudo bem, vamos em frente e baixar e instalar Node. Precisamos do mesmo chamado Node.js. Então vamos digitar no Google download Node JS, e isso vai nos trazer para NodeJs.org downloads barra. Então, se ele o levar para a página inicial, você pode simplesmente clicar no download. O ícone de download aqui ou o, Eu acho que não ícone, é um botão. Vá com LTS, isso é suporte a longo prazo. Isso significa que eles não estão tentando coisas novas. Quero dizer que 14 ou nó 16 será suportado por um longo período de tempo. O número ímpar é geralmente não são suportados e Ubunto funciona da mesma maneira para. Então, sempre que você pode ir com LTS, suporte a longo prazo, ele vai fazer o que você espera que ele faça. Para mim. Eu já tenho o nó 15 instalado no meu computador, então eu vou estar usando 15, mas o nó 14 vai funcionar da mesma forma para você. Então vamos para 14 e ele vai baixar isso. Se isso não acontecer, você sempre pode ir para downloads aqui e escolher o Windows Installer, o instalador do Mac OS ou o código-fonte que você pode baixar e instalar manualmente usando o Linux. Normalmente, basta clicar em um destes. Então, se você estiver no Mac, clique em instalador do Mac OS, se você estiver no Windows, clique no instalador do Windows, vá em frente e instale isso, execute as etapas de instalação. E quando você terminar, volte e eu vou lhe mostrar como você pode garantir que esse nó esteja instalado corretamente no seu computador. Tudo bem, então espero que você não tenha nenhum JS instalado no seu computador. O que precisamos fazer agora é ter certeza de que estamos executando a versão correta do Node e que ele está instalado e a versão certa do NPM, que é Node Package Manager, que vamos falar mais sobre todas essas coisas e vamos obter alguma experiência prática com um muito, muito em breve. Estou no Mac e abri um programa chamado Terminal. Se você estiver no Windows, pode abrir CMD. Se você está no Linux, você provavelmente tem um programa chamado bash ou você já está familiarizado com o programa de linha de comando que você gosta mais do que bash. Então para mim eu estou no Mac, então eu vou abrir o terminal, que é este programa aqui. E eu vou simplesmente digitar N ODE traço v, nó traço v. E isso diz versão nó traço, e isso me dá a versão dez. Então isso não está certo. Eu tenho o Node Version Manager instalado terminus vai mudar rapidamente isso para anotar versão 15. Lá vamos nós. Troco isso para o nó 15. E se eu não fizer traço v, aqui vamos nós, eu estou usando o nó 15. Então eu quero ter certeza de que eu estou usando o nó 15 ou para você usar o Node 14 ou o suporte a longo prazo. Então, se você está assistindo isso alguns anos da data de gravação, e nós estamos no nó 16 ou nó 18, e é LTS. Certifique-se de baixar e instalar a versão LTS. Em seguida, precisamos digitar npm dash v. E isso vai me mostrar minha versão do nó, minha versão do Node Package Manager. E este não importa tanto. Nós só precisamos ter certeza de que ele está realmente instalado em que ele não dá algum erro dizendo que o comando não existe. Se nenhum traço v funciona para você e npm dash v funciona para você, você está pronto para passar para a próxima lição. Então, sua tarefa para esta lição é ir para o nó js.org e fazer o download do Windows Installer, do instalador do Mac ou do código-fonte. Se você estiver no Linux, instale-o. Abra seu programa de linha de comando, se esse é o terminal de comando Bash, qualquer outro tipo de programa de linha de comando nó dash v ou npm dash três ou não ou mas, pegue ambos os tipos nó dash v e npm dash v. Se você ver que há uma versão lá e a versão do nó parece uma versão direita três para você. Para mim, este é o nó 15, você deve dizer nó 14 ou 16 ou alguma versão LTS, versão de suporte de longo prazo. Se isso estiver funcionando para você, você concluiu sua tarefa com sucesso. E vamos para a próxima lição. 4. Começando um novo projeto: Certo, vamos começar um novo projeto. Então eu estou usando VS Code e isso vem com um terminal que eu posso usar dentro dele. Então, se eu for para View e depois ir para onde é o terminal? Terminal, mostra este pequeno terminal para mim. E então eu estou em uma pasta chamada React 101. E só para tornar isso um pouco maior, tudo bem, então eu estou em uma pasta aqui chamada React 101. E o que queremos fazer é garantir que o React esteja instalado. Então você pode digitar npm install dash g, que é global. Criar aplicativo React. E o que isso vai fazer é ir em frente e instalar o aplicativo Criar Reagir globalmente em seu computador. Então você pode ver que isso foi muito rápido para mim. Pode demorar um pouco mais para você. Agora o que podemos fazer é digitar np x, Criar, Reagir aplicativo e, em seguida, dar-lhe um nome. E eu vou dar um nome do meu aplicativo de traço. Você vai ver como este edifício, como este está começando a criar o projeto, ele cria uma pasta chamada meu aplicativo de traço à esquerda. Então eu só vou dar um pouco de tempo a isto para fazer a sua coisa. É simplesmente baixar e instalar todas as coisas que reagem precisa. Ele vai obter todas as bibliotecas JavaScript que precisa. Vai instalar todos eles. Ele vai aparentemente instalar Yarn que ele possa baixar coisas usando yarn em vez de npm. É só um pouco mais rápido. É outro gerente de pacotes. Sério, não precisamos nos preocupar com isso. Tenho certeza que isso vai remover o fio. Sim, removeu o fio? E então ele diz todo tipo de coisas que podemos praticamente ignorar neste momento. Podemos trabalhar com isto ou ignorá-lo. Então ele diz, criado git commit. Legal, legal. Sucesso. Criei meu aplicativo em e, em seguida, o local da pasta do aplicativo. Dentro do diretório você pode executar vários comandos. Sugerimos que você comece digitando CD myapp. E o que isso vai fazer é mudar meu diretório de trabalho no meu terminal. Ou, se você estiver no Windows, você pode digitar DIR se estiver em um sistema como Unix, Mac OS ou Linux, por exemplo, e você pode digitar PWD. Você deve estar dentro da pasta do meu aplicativo no seu terminal. Só porque o abres aqui, não significa que esteja aberto no teu terminal. Então, só para esclarecer, agora, se abrirmos meu aplicativo à esquerda, temos um monte de coisas aqui. Temos módulos de nó, público, SRC, gitignore package.json, readme dot AMD, fio dot loc. Nós não vamos tocar em muitas dessas coisas porque isso entra em, em vários assuntos diferentes fora do mundo de React. Mas para este curso, vamos estar trabalhando principalmente no diretório SRC. Então vamos em frente e colocar isso em funcionamento. Então agora que eu tenho CDD no meu aplicativo no meu terminal e eu posso fazer é traço a. E isso me mostra todos os meus arquivos aqui. Ou posso digitar DIR Se eu estivesse no Windows. E você deveria ver todos esses arquivos aqui. Depois de ver esses arquivos, especialmente a pasta de módulos de nó aqui, você pode digitar npm start. E o que isso vai fazer é criar o aplicativo React e iniciá-lo em seu navegador automaticamente. E então isso vai me pedir permissão. Vai dizer: “Posso acessar o Google Chrome?” Vou dizer sim, de novo, e esperar que isto carregue. Só vai demorar um segundo. E aqui vamos nós. Temos um aplicativo React instalado e funcionando em nosso computador. Agora, se o seu navegador não abrir para você automaticamente, você sempre pode ir para HTTP dois pontos barra barra host local cólon 3 mil, e que vai para localhost porta 3 mil. Agora, se por algum motivo isso não funcionar para você, você sempre pode ir para 127 pontos. Número 1, cólon 3 mil. É exatamente a mesma coisa. Apenas alguns computadores são configurados um pouco diferente, então há duas maneiras diferentes de fazer isso. Sua próxima, vamos em frente e falar sobre algumas reacções sintaxe. Mas, por enquanto, sua tarefa será basicamente colocar isso em funcionamento. Verifique se você executou alguns comandos aqui. Então você tem executado npm instalar traço g para global, Criar Reagir aplicativo. Em seguida, digite np x Create React app, meu aplicativo dash. E isso vai criar todas essas pastas e toda essa estrutura para você. E então você CD nessa pasta específica. Então o meu foi chamado meu aplicativo de traço, então eu apenas CDD naquela pasta. Eu mudei meu diretório para aquela pasta. E então você digita npm start. Ele deve lançar um navegador para você. Vá para a porta localhost 3 mil e diz-lhe aqui em cima, porta de host local 3 mil. E ele irá mostrar-lhe o seu aplicativo React, mas você tem que se certificar de que o npm start está em execução para que isso funcione. Uma vez feito isso, vamos para a próxima lição. 5. Sintaxe de React.js: Certo, vamos dar uma olhada na sintaxe de reação. Então o que eu vou fazer é apenas fazer isso um pouco menor, apenas mover isso para baixo. Vou entrar no meu SRC, minha pasta de origem, e entrar em app.js. E isso parece muito, muito, muito bizarro. Vamos deixar isto um pouco mais pequeno porque não precisamos do terminal para esta lição. E isso parece muito bizarro. Então, se você está acostumado a escrever JavaScript de baunilha, você pode nunca ter visto um comando de importação antes. Isso pode ser novo para você. E se isso é novo para você, tudo bem. Vamos falar sobre isso e vamos ter um pouco de experiência com isso também. Vemos uma função que se parece com uma função regular em JavaScript e uma declaração de retorno com um parêntese de abertura. E se formos até aqui, há um parênteses de fechamento que coincide com ele. Você pode ver esta linha destaques aqui em cima. E depois temos um div. Agora isso parece estranho porque não estamos usando uma string, não estamos usando um template literal em JavaScript. Estamos usando HTML direto. E na verdade, isso realmente fica um pouco mais estranho só porque não estamos usando apenas HTML, estamos usando essa coisa chamada JS Acts, que é basicamente XHTML. Então é HTML, semelhante ao HTML5 normal, mas está escrito dentro de nosso JavaScript, o que é muito louco para C. Então, se esta é sua primeira vez olhando para isso e você está tipo, whoa, eu ou eu não gosto disso ou eu não tenho idéia do que está acontecendo nua comigo por um tempo. Fica muito mais fácil e fica muito bom trabalhar com ele na estrada. Então vamos ler esta linha por linha. Temos um div. E reparem que não é classe. Classe é um nome real em JavaScript, é uma palavra-chave, não podemos usar isso, então usamos o nome da classe é igual ao aplicativo. Vemos a mesma coisa aqui e aqui temos uma imagem. É SRC é, bem, isso parece um pouco bizarro. Então, em vez de um arquivo, logotipo lago ponto SVG, nós importamos logotipo ponto SVG. Então vamos abrir esse arquivo. É apenas um arquivo SVG normal. Nós importamos isso como uma variável chamada Logotipo. Sempre que usamos um destes e reagir, dizemos que o nome do atributo ou o nome da propriedade é igual a. E em vez de ter aspas em ambos os lados, como normalmente fazemos em HTML, temos colchetes e abertura de colchetes e um colchete de fechamento. E então colocamos esse nome de variável dentro dela. E o que isso vai fazer é injetar esse logotipo diretamente nesta fonte de imagem. Novamente, temos o nome da classe, não a classe, o nome da classe, é um atributo js X. E podemos ver que aqui assim que eu passar o mouse sobre isso, ele diz como um DJ ESX atributos e alt tags regulares e nomes de classe, yada, yada, parágrafo com algum código, HTML padrão. Temos um link aqui, nome da classe, mas o HRF é o mesmo, o alvo é o mesmo, o trilho é o mesmo e diz aprender Reagir. Uma coisa a observar, porém, é na sua declaração de retorno, notar que estamos usando um colchetes ou um parêntese no início e no final aqui. Nós também embrulhamos tudo dentro de um div. Então você não pode simplesmente digitar texto normal. Você realmente precisa ter um elemento HTML com mais código dentro dele. E então isso é uma pequena peculiaridade com React. Mas se eu me certificar de que meu servidor está rodando aqui, parece que está. Está na localhost 3 mil. Isto é o que vamos ver. Agora, para mudar isso, digamos que eu queria mudar essa linha aqui. Tudo o que tenho que fazer é mudar este texto. E então, quando eu salvá-lo, e isso é uma coisa realmente legal, ele automaticamente recarrega meu navegador para mim. Então, quando eu voltar para o Chrome, Firefox ou Safari, ele mudou para mim, está vivo, atualizado. Eu não preciso apertar Refresh, o que é muito legal porque às vezes isso fica muito irritante se você fizer isso o suficiente em um dia. Tudo o que tenho que fazer é digitar. E você vê que uma vida mudou bem na minha frente. E é quase instância, então eu estou em Salvar e, em seguida, eu vou passar para o Chrome muito rápido. E você vai ser capaz de ver que realmente mudou. Foi muito, muito rápido, mas vimos mudar. Então o que eu vou fazer é apenas fazer isso. Você pode ver que toda vez que eu salvei meu app.js, esse nó também está atualizando. Então diz que está compilando toda vez que eu carrego em salvar, compilar, compilar, compilar. Então, sua tarefa para esta lição é eu quero que você abra seu app.js, certifique-se de que seu servidor está em execução e apenas altere um pouco de texto. Não se preocupe com o logotipo ou qualquer coisa avançada. Preocupe-se em mudar o texto. E em seu navegador, ele deve mudar o texto para você uma vez que você tem isso pronto e funcionando, vamos para a próxima lição. 6. Como importar componentes: Tudo bem, vamos dar uma olhada na importação de componentes. E podemos importar todo tipo de coisas. Eles não têm necessariamente que ser um componente. Vou falar mais sobre componentes em um pouco. Mas se dermos uma olhada em nosso app.js, que vive em nossa pasta de origem. Estamos dizendo o logotipo de importação. Esse é o nome que estamos usando dos logotipos de barra de pontos. Então isso está dizendo que a mesma pasta em que estamos atualmente, mesma pasta em que app.js está, Logo dot SVG. Vamos em frente e abrir este arquivo, logo ponto SVG. E podemos ver que é um SVG padrão. É apenas importante para nós e o torna disponível para nós para usar neste arquivo particular. Da mesma forma, podemos dizer importação, e não precisamos dar um nome necessariamente. Em uma string, podemos dizer ponto barra. Então esta pasta exata, aplicativo dot CSS. Vamos abrir isto. Este é app.use ESS, e isso apenas torna o CSS disponível para nós em nosso arquivo ab.js aplicativo. Então, podemos usar ClassName é igual ao aplicativo. E vamos dar uma olhada aqui. Temos um aplicativo aqui, centro de alinhamento de texto. Vamos em frente e mudar este texto alinhar à esquerda. Você pode vê-lo recompilado rapidamente na parte inferior lá. E isso fez alguma coisa? Parece que não fez nada. Hmmm Eu tenho que salvar novamente app.js? Não. É apenas CSS funky para que pareça que não é realmente muito útil. Vamos mudar a cor do texto para preto. E vamos dar um tapa e importante, porque eu não sei o que mais tem aqui. Eu realmente não li através dele e eu não quero perder seu tempo lendo apenas o CSS padrão também. Então vamos em frente e salvar isso. E isso não funcionou, provavelmente devido à especificidade. Então vamos dar uma olhada no cabeçalho do aplicativo. Queremos alterar o texto do parágrafo do cabeçalho do aplicativo. Então este é apenas um trabalho de front-end que estamos fazendo aqui. Então nós temos App, temos cabeçalho aplicativo em algum lugar, cabeçalho aplicativo. E a cor lá é branca. Então vamos em frente e mudar isso para preto. Vamos ver se isso faz o truque aqui. Lá vamos nós, mudamos para preto e ele automaticamente compilou seu CSS para nós. Para que pudéssemos mudar isto para azul. Para este texto muda automaticamente para nós também, o que é muito, muito bom. Então é assim que importamos comandos. Simplesmente a palavra-chave import e o nome da variável opcional. Ou queremos importar um componente em particular que entraremos em apenas um pouco. Por favor, tenha paciência comigo. Estamos chegando lá, prometo. De e, em seguida, um nome de arquivo. E esse nome de arquivo vai estar em uma string. Então, em outras línguas, python, não colocamos isso em uma string. Em JavaScript, colocamos isso em uma string, e depois terminamos com um ponto-e-vírgula. Agora, o que eu gostaria que você fizesse para esta lição é aberto o seu App.use CSS e fazer algumas alterações em sua nada grande. Então eu mudei a cor do texto para azul. Eu vou mudar isso de volta para, eu vou mudá-lo para amarelo para que fique brilhante e visível. Se eu mudar para preto, é difícil de ler. Azul é difícil de ler, amarelo é bom e brilhante. Vá em frente e altere um pouco de CSS, certifique-se de que ele apareça no seu navegador da maneira que você espera que ele apareça. E quando acabar com isso, vamos para a próxima lição. 7. Sintaxe JSX: Vamos em frente e explorar index.js. Então é aqui que nosso aplicativo realmente é renderizado. E podemos ver que fechei meu terminal lá, deixe isso correr. Eu sempre posso abri-lo com o terminal de visão e você pode ver que ele ainda está em execução, então eu simplesmente desmoronei. E agora diz importação Reagir de Reagir como uma string. Esse é um pacote que instalamos reagir quando escrevemos npm instalar traço, traço g, Criar Reagir aplicativo. Ele criou um pacote lá para nós chamado reagir. Agora, se eu entrar nas pastas do módulo do nó, você vai ver. Tem muita coisa aqui. Mas se percorrermos todo o caminho para baixo, a, C, D, E, F, G, H, todo o caminho para baixo. Onde você está? P, Q, R, S. Onde você está reagindo? Aí está você. Reagir. Então é disso que estamos importando, importar, reagir, de reagir. E podemos ver todo o código-fonte do React aqui também. Se quiséssemos, vamos importar DOM reagiu de Reagir Dom. Então, se voltarmos aqui e olharmos para React DOM, há reagir Dom. Ele também vai importar um relevante, não irrelevante, mas um parente, eu acho que também é relevante, mas um arquivo relativo chamado index.js s. Então, em nosso arquivo index.js, estamos importando, eu vou fechar este. Estamos importando índice dot css. E então isso só vai adicionar alguma margem e algum código lá, e não margem, mas algum corpo. Inclui uma margem e algum código aqui. Então é só isso que está fazendo. Vamos importar App. Estes são basicamente os nossos componentes. Então, se formos para o aplicativo, temos uma função chamada App, e na parte inferior vemos o aplicativo padrão de exportação. E o que isso vai fazer é dizer pegar esta função APP e exportá-la. E isso permite que ele seja portátil. Então, vamos importar App do mesmo aplicativo de pasta. Então vamos importar os sinais vitais da web. E isso vem de um relato de URL relativo sinais vitais da web, que só vai relatar um monte de coisas para nós. Não vamos entrar nisso neste módulo em particular. E então chegamos ao “nitty-gritty “, o código real. Então temos reagir DOM ou Document Object Model dot render. No modo estrito Reagir. Vamos colocar nosso aplicativo dentro dele. E então este é o GSS. Isto parece muito, muito bizarro. Mas basicamente nosso aplicativo em JavaScript era uma função. Agora podemos escrevê-lo como se fosse HTML padrão ou XHTML. E a coisa boa sobre isso como React é apenas ir para os bastidores e dizer, oh, eu sei exatamente o que é isso. E eu vou trabalhar com isso. Eu só vou magicamente fazer isso funcionar. E assim podemos realmente ficar muito, muito complicados com isso. E podemos adicionar coisas como variáveis dinamicamente a cada componente. Falaremos sobre isso no futuro. Por último, mas não menos importante, temos duas opções aqui. Então este é o nosso primeiro argumento para o comando render. Este é o segundo argumento para um comando render. O que isso está dizendo é dizê-lo dizendo em modo estrito, renderizar nosso aplicativo e modo estrito e colocá-lo em nosso, nossos elementos que tem um ID de raiz. Então, se entrarmos em uma pasta pública e irmos para index.html, vamos ver em algum lugar aqui, onde você está? Identificação de raiz? Este é o lugar onde nosso aplicativo vai viver. Então, se nos livrarmos disso, isso não funcionará mais para nós. Portanto, queremos ter certeza de que isso sempre existe. Agora não precisa ser chamado de raiz. Pode chamar isso de qualquer outra coisa. Muitas vezes você verá também chamado App. Então, apenas um ID do aplicativo. E se você mudar isso, você tem que mudá-lo aqui também. Então, certifique-se de que isso está sempre combinando. Por último, mas não menos importante, estamos executando sinais vitais da web. E isso é realmente, muito útil para, que nos diz aqui para começar a medir o desempenho em seu aplicativo. Passe uma função para registrar resultados. Por exemplo, relatar sinais vitais da Web, console.log. Então essa é uma das sintaxe bizarras que vamos ver com React. E isso é chamado de JS X. A principal coisa que eu quero que você tire daqui e não há tarefa para esta lição é que eu só quero que você dê uma olhada nisso, apenas leia através dele. Entenda que isso está sendo importado. Esta é uma classe, este é um método nessa classe. Então estamos entrando em programação JavaScript orientada a objetos. É preciso um parâmetro, podemos dizer que é um parâmetro porque há uma vírgula aqui. E o segundo parâmetro é onde esse aplicativo deve ser renderizado. E, em seguida, reagir como indo para compilar um monte de coisas. Vai dizer, oh, reagir modo estrito, ok, eu sei como usar isso. Seu aplicativo vai entender o que seu aplicativo é e ele vai renderizá-lo aqui também. O que é bom nisso é que estamos começando a entrar em componentes. Então, se tivéssemos um aplicativo secundário, poderíamos ter outro aplicativo aqui. Importação que nos permite fingir que importamos. Podemos chamá-lo de aplicativo ou podemos chamá-lo de loja. E ele vai renderizar nosso aplicativo e nossa loja em nossa raiz de documentos. Portanto, mais uma vez, não há tarefa para esta lição. Eu só quero que você pegue um, você sabe, coçar. A tarefa é realmente abrir o seu index.js e apenas ler através destas linhas aqui, apenas uma espécie de ter uma idéia de como isso parece, porque isso é realmente bizarro no início. E isso não é nada como qualquer outra coisa na web. Este é um completamente novo, este é chamado de js X. E então basicamente você tem um componente e componente final e dentro dele, e ele se parece exatamente com HTML. Temos algo lá dentro. Então isso é como em HTML podemos ter uma div barra div, e então podemos ter um H1 dentro dele. É muito, muito parecido. Assim, a curva de aprendizagem para esta parte em particular é bastante baixa. Uma vez que você terminar de ler isso, vamos para a próxima lição e vamos talvez começar com a criação do nosso primeiro componente. 8. Seu primeiro componente: Tudo bem, vamos em frente e criar nossos primeiros componentes. Então o que vamos fazer é antes de mais nada vamos dizer importação, Reagir do pacote Reagir. E isso só nos permite usar o React. E então o que podemos fazer é criar um novo componente aqui. E parece com essa classe, meu nome componente. Então vamos chamá-lo de um item, estende react.com. E aqui é preciso um método de renderização. Parece muito com uma função. E aqui, ele leva uma declaração de retorno, então ele retorna algo que vamos abrir e fechar com parênteses e apenas colocar um h1 aqui. Olá mundo. Agora isso é bom. Mas você pode ver que esse tipo de não é a cor certa. Parece que parece fraco. E isso significa basicamente que não está sendo usado. Então vamos em frente e usar isso. Agora temos este componente React. E a coisa boa sobre isso é que podemos escrevê-lo exatamente como vimos em nosso index.js, assim como este. Então vamos em frente e criar um novo item dentro do nosso código. E vamos remover este parágrafo. E primeiro, vamos remover o parágrafo. Vamos voltar ao nosso navegador e garantir que esse parágrafo não existe. Isto é o que parecia antes de dizer mudanças de texto. Eu me livrei dele. Ele se foi. Está bem. Legal. Então, agora que isso foi excluído, eu posso digitar item. E este é apenas um salvamento XHTML padrão. E diz “Olá mundo”. Então, agora, na verdade, não disse nada aqui. Eu escrevi, eu escrevi. Eu escrevi isso aqui. E posso escrever o que quiser aqui. Eu posso dizer “olá mundo”. E então, em letras pequenas, isso é um teste. E o que é bom sobre isso é que na verdade não precisamos alterá-lo em nosso aplicativo uma vez que definimos esse item, podemos fazer muito de nossa lógica, muito de nosso processamento em um componente. Agora vamos em frente e dividir este componente em seu próprio arquivo de componente de parede. Então o que vou fazer é cortar isto. Corte isso. E eu vou dizer item de importação de. E eu vou criar um novo arquivo aqui chamado meu item. E podemos nos livrar dessa linha também porque ela não vai ser usada neste arquivo. E eu vou criar um novo arquivo aqui chamado meu item dot js. Então note que eu chamei de meu item de JS, mas é chamado de meu item aqui. Quando reagir compila seu código, ele sabe, ele entende que isso vai ser mais provável um arquivo JavaScript. Agora, por exemplo, nós especificamos aplicativo dot CSS porque nós tivemos que dizer, hey, a propósito, não importa app.js, não importa logotipo ab.js logotipo importante ponto SVG, mas por padrão, ele vai assumir JavaScripts. Então eu criei um arquivo chamado meu item ab.js e não era um colar aquela primeira linha lá. E, em seguida, cole este código aqui também. E vamos em frente e consertar aquele recuo ali. Isso parece bom. E agora você pode ver que o item também está amaldiçoado novamente, ele não está sendo usado. O que precisamos dizer aqui é exportar este item para que seja impossível mais tarde, exportar por padrão este item. E se eu voltar para app.js, vamos importar o item do meu item. Agora vamos abrir o nosso terminal e não há erros em seu, se nós digitarmos isso nós dissemos item dois. Diz “falha na compilação”. O item não está definido. Vamos colocá-lo de volta à maneira que ele deveria e nós não obtemos nenhum tipo de erro de compilação em nosso terminal. Agora vamos voltar ao nosso navegador. E funciona. Agora criamos um componente e dividi-lo em seu próprio arquivo de componente. E podemos mudar isso a qualquer momento. E só como exemplo, olá de Caleb Talia e esse sou eu. E diz olá de Caleb Tolkien. E então agora podemos dividir componentes, não apenas de grandes quantidades de lógica, porque seu app.js poderia ficar bastante grande. Agora você pode dividir esse componente em seu próprio arquivo para que ele fique mais sustentável no futuro. E toda a sua lógica e todo o seu processamento para este item específico no seu, para este que estamos renderizando pode ir dentro do seu componente item. Então sua tarefa para esta lição é o passo número um. O que eu quero que você faça é adicionar isso, o texto que eu acabei de destacar para o seu app.js. E então eu quero que você realmente instancie. Eu quero que você use o componente que você criou e você pode copiar meu código. Eu não vou te dar o código-fonte necessariamente, só porque isso é muito, muito simples. E é realmente, muito boa prática escrever isso para que você saiba que, por exemplo, as classes têm chaves, mas return usa parênteses. Então vá em frente e tente isso. Esse é o primeiro passo. O segundo passo é então pegar esse código do seu app.js e dividi-lo em seus próprios componentes, como eu fiz. Assim que acabares com isso, vamos para a próxima lição. 9. Trabalhando com acessórios: Certo, vamos falar sobre essa coisa chamada adereços. Então, onde está um bom exemplo? Um bom exemplo seria um exemplo limpo seria em nosso index.js, temos um componente chamado App. E podemos ter essa coisa como um HTML onde temos um atributo é igual a algum tipo de valor. Em React, chamamos de adereço. Então um adereço é igual a algum tipo de valor e podemos passar isso. Agora, quando passamos em um prop ou um atributo em nosso componente, podemos acessar isso como uma variável JavaScript. Então vamos em frente e eu desfiz isso. Vou fechar esse arquivo, abrir app.js e onde eu tenho item aqui, vou dar um nome a este item. E então este nome vai ser simplesmente ravina. Então eu guardo isso e vamos ver que absolutamente nada acontece. E no meu item aqui, onde eu tenho este item, eu não posso simplesmente digitar ravinas porque um que não é uma variável. Não consigo digitar Gully e certamente não consigo digitar o nome. Você pensaria que seríamos capazes, mas simplesmente não podemos. Então, se eu salvar isso, vamos dizer que vamos ver que ele diz falha ao compilar o uso inesperado do nome. Então vamos em frente e desfazer este lugar aqui e salvar isso. Agora o que podemos fazer é acessar adereços usando a, esta palavra-chave. Então, em reagir, quando temos qualquer tipo de referência a outro reator, outro JavaScript, nós sempre abrimos e fechamos com a sintaxe do bigode com uma abertura e fechamento. Então dizemos este ponto, adereços ponto, e então qual era o nome do adereço? nome do adereço era só nome. Então podemos dizer este ponto adereços nome ponto, mas guarde isso. E diz que agora posso abrir isto no navegador. E aí está, olá de Gully. Agora isso é muito bom porque podemos usar este item em vários lugares agora. Então, podemos criar um item aqui. Podemos copiar e colar isto numa nova linha, ruibarbo. Esses são os dois gatos com quem moro. Eu os amo muito, muito. Eles são super fofos e eu quero que eles estejam neste vídeo. Então eu voltei e ele diz olá de Gully, olá de ruibarbo. Eu coloquei outro, eu. Olá do Caleb. Olá de Gully, Olá de ruibarbo, Olá de Caleb. E assim, escrevendo uma quantidade mínima de código, simplesmente usando um componente, um componente reutilizável chamado um item que nomeamos. Aqui. Podemos passar em uma variável chamada Nome, e esse nome pode ser acessado através deste ponto adereços nome ponto. E a razão pela qual usamos isso é porque estamos dentro de uma aula aqui. Então isso se refere a toda essa classe, apenas esta, não qualquer outra classe. Isto é simplesmente referindo-se a esta classe como um componente. Em seguida, nós namespace com adereços para que não seja apenas this.name porque isso pode ficar muito confuso quando você tem um projeto maior, dizemos this.name culturas como em propriedades, e então o nome da propriedade. Agora, o que acontece se escrevermos o errado aqui? Digamos que fazemos este ponto adereços, nome de ponto com um N. maiúsculo compilado, funcionou bem, mas não funciona para nós. E a razão para isso é porque isso não está procurando por um adereço chamado nome com um N maiúsculo e então isso é muito, muito sensível a maiúsculas e minúsculas. Certifique-se de que o seu nome funciona sempre. Eu disse nome com um n minúsculo, ali, ali e ali. E quero ter certeza que funciona aqui. Agora, o que eu gostaria que você fizesse como sua tarefa é para o componente que você criou. Quero que lhe dês uma propriedade e quando lhe deres um adereço, e podes usar o meu exemplo também se quiseres. Pode ser um nome é igual a algo. E, em seu componente, quero que você acesse essa propriedade. Eu quero que você seja capaz de mostrá-lo em sua página. Então diga olá a partir deste ponto adereços e, em seguida, o nome da sua propriedade. Certifique-se de que ele aparece no seu navegador da maneira que você espera que ele apareça. E quando você tiver feito isso, vamos para a próxima lição em que falamos sobre a adição de eventos de cliques. 10. Clique eventos no React.js: Vamos dar uma olhada na adição de um evento de clique. Então eu tenho um componente aqui chamado item. Tenho três deles com nomes diferentes. Então está usando a mesma lógica. Estamos simplesmente substituindo o nome. E aqui estamos usando esse problema. Isto é da nossa última lição. Agora, o que acontece se você clicar em, digamos este. Isso é um exemplo terrível, mas isso vai realmente levar para casa a idéia de que pode haver um evento clique. E assim como os eventos de clique funcionam ou como a maioria dos eventos funcionam é que ele realmente usa HTML da velha escola, que não vemos há muito tempo. Então, uma maneira de escrever uma função é onclick é igual a e, em seguida, você pode colocar alguma função JavaScript ou JavaScript aqui. Agora, muitos lugares não nos ensinam mais porque é muito, muito antigo. Mas React aproveita isso muito, muito pesadamente. Então, para criar um evento onclick, dizemos onclick, e então damos algum tipo de valor. Vamos apagar isso por enquanto. E eu vou voltar a isso em apenas um segundo. Precisamos dar a ele algum tipo de método, algum tipo de ação. Então vamos criar uma nova função aqui chamada Click Me. E tudo isso vai dizer como registro do console, eu fui clicado. E, em seguida, de volta ao onclick aqui. Colocamos isso em sintaxe de bigode ou chaves encaracoladas. E podemos dizer função de seta, executar este ponto, Click Me como uma função. Isso parece um pouco estranho no começo, mas você vai se acostumar com isso, eu prometo. Então nós temos essa abertura encaracolado, chave encaracolada é essa sintaxe encaracolada estranha aqui. E isso está dizendo que tudo entre aqui vai ser JavaScript, vai ser reagir. O resto disso se parece muito com HTML. Mas hey, reaja quando você vai compilar isso, e isso vai ser JavaScript apenas para que você saiba, então quando você clica em algo, vai haver algum tipo de evento e vai então executar este ponto clique em mim. E isso é programação orientada a objetos. E cada vez que clicamos isso vai para o log do console eu fui clicado. Então vamos em frente e salvar isso. Parecia uma definição compilada. E se eu entrar aqui, clique com o botão direito do mouse em inspecionar, entrar no meu console. E vamos fazer isso significativamente maior. Se eu clicar no caraças, diz que fui clicado. Ruibarbo disse que eu fui clicado e Caleb disse que eu fui clicado. Agora o que é legal sobre isso é porque cada componente é seu próprio pedaço de código basicamente. Então Gully vai ficar como evento on-click, ruibarbo recebe o seu evento onclick e eu recebo o meu evento onclick. Então o que podemos dizer agora é que eu fui clicado. E vamos colocar isso, Vamos colocar um segundo parâmetro aqui que diz este ponto adereços nome ponto. E vai dizer que cliquei e depois só o nome. Então vamos em frente e dar uma olhada. Diz que se refrescou. Vamos limpar nossa consola lá. E vamos clicar nisto. Eu cliquei em Deus. Eu cliquei em ruibarbo, cliquei em Caleb. Então agora podemos executar algum tipo de lógica baseada nisso. Podemos dizer, hey, se você clicou na impressão de ruibarbo, este era um gato laranja. Ou se você clicar em barranco console log outra coisa ou se você clicar em Caleb, dizer que isso não é uma captura, podemos executar algum tipo de lógica baseada no nome da propriedade e um evento clique. O que eu gostaria que você fizesse como sua tarefa é que eu quero que você adicione um evento onclick com uma função click e simplesmente console log a propriedade que está sendo passada para sua propriedade a partir da última lição. Então agora estamos ficando um pouco mais avançados aqui. E para quebrar isso apenas mais uma vez, estamos dizendo que onclick é igual a chave. É assim que sabemos que vai ser javascript e reagir dentro desta função vai então executar isso, que é todo este componente. Dot clique em mim com parênteses porque isso corresponde aqui. Isso, então, vai ser executado. E você pode registrar o que quiser lá dentro. Pode ser apenas uma string regular ou você pode registrar seu nome de ponto adereços. Você pode consolar registrar qualquer coisa. Você pode criar uma solicitação de API se você quiser, que nós vamos chegar ao final da estrada, você pode realmente fazer qualquer coisa neste momento no tempo porque este é apenas JavaScript regular. Então agora você combinou seu HTML com um evento onclick conectando-se ao seu JavaScript. Em React, vá em frente e dê uma chance, passe alguns minutos nisso. E lembre-se, se você tiver algum problema. Digamos que houve um erro de digitação aqui. Podemos salvar isso. Vai compilar perfeitamente bem. Mas quando testarmos isso, vamos atualizar a página. Nós testamos isso. Simplesmente não funciona. Então você quer ter certeza de que seu código está sempre, sempre funcionando. E se você quiser ver esse intervalo, isso vai te dar algum tipo de erro. Veja isto. Erro de tipo não é possível ler prompts de propriedade de indefinido. Então está dizendo que há algum tipo de problema aqui. E isso porque isso é uma propriedade, não um método. Isso está agindo como uma variável, não uma função. Então, sempre que você encontrar um problema, você sempre pode ler através dele desapareceu, mas você pode ler através do erro e ele provavelmente vai dar-lhe uma idéia do que está acontecendo. Não é perfeito, mas vai te dar uma boa idéia do que está acontecendo e como corrigi-lo. 11. Como adicionar estado aos seus componentes do React: Tudo bem, vamos em frente e adicionar algum estado ao nosso componente. E o que é estado, é muito parecido com adereços. Props é um valor que você está passando para seus componentes. Então é uma propriedade, é uma propriedade personalizada que você está passando para o seu componente. State é como uma variável que está sendo rastreada internamente dentro de seu componente. Então, toda vez que você cria um novo item, ele obtém um novo estado. E isso é meio complicado de explicar. E para mim, pelo menos quando eu estava aprendendo isso há muito tempo, a melhor maneira de aprender isso era simplesmente fazê-lo. Então vamos em frente e criar algum estado. Por isto. Vamos precisar usar um método mágico chamado con structure. E eu preciso ser capaz de soletrar nossa construção de ajuda ou, e isso pode levar um adereço se quisermos. E poderíamos escrever super adereços. Então estamos apenas lidando com adereços lá. Se isso fosse estender a partir de um componente diferente, um que escrevemos, isso garantiria que todos os outros componentes de, digamos, não item, mas talvez uma lista que escreveríamos estaria disponível para nós aqui. E isso é tudo o que está dizendo. Então podemos dizer que este estado de ponto é igual a, e este é um objeto. E vamos contar o número de cliques. Então podemos dizer que cliques vai ser 0 e esse é o número de vezes que isso foi clicado. Agora em nosso estado Click Me, outro estado onde Click Me método. O que podemos dizer é que toda vez que isso é clicado, este estado conjunto de pontos como uma função leva um objeto e basicamente corresponde a este objeto aqui. Então vamos colocar a chave de cliques, e vai ser este ponto estado, ponto cliques mais um. Agora, isso é legal e totalmente inútil. Não está fazendo nada. Pelo menos temos a tendência de ver que está a fazer qualquer coisa. Então vamos em frente e certifique-se de que quando você clica em um desses, ele realmente faz alguma coisa. Tão interior. Um. Toda vez que isso é clique, vai fazer alguma coisa. Então vamos colocar o número de cliques abaixo dele. Isso mesmo, um novo espaço aqui. E isso só vai mostrar o número de cliques. Podemos dizer que este estado de ponto, cliques de ponto é o número de cliques. E isso vai fazer duas coisas, três coisas na verdade. Então o primeiro aqui é que precisamos envolver tudo isso em algum tipo de elemento HTML. Vamos em frente e mover isso para cima. E você percebeu que isso estava me dando um grande problema lá. Estava me dando todos aqueles sublinhados rabiscados. Isso ocorre porque a instrução return está sempre esperando pelo menos um elemento para ser encapsulado em todo o seu outro código. Então esse é o número um. Eu salvo, eu vou aqui. Número dois é, você pode ver que ele diz 0 como o número de cliques Havia o número de cliques, zeros, o número de cliques. Escrevi isto num só lugar. Mas porque eu tenho este componente sendo usado três vezes, ele automaticamente atualizado em três lugares diferentes. Isso é incrível. Isso significa que você tem que fazer muito menos digitação e seu trabalho fica muito mais fácil ou fica mais fácil. Foi uma maneira engraçada de dizer isso. Ok, então a terceira coisa vai fazer é atualizar o número de cliques. Você pode ver que, por padrão, ele diz 0. Se eu clicar no barranco, toda vez que eu clicar nisso, eu provavelmente deveria ter feito isso um botão em vez de um H1, mas toda vez que eu clico isso, esse número sobe. O mesmo com ruibarbo, o mesmo com Caleb. E a coisa realmente legal sobre isso é que o número de cliques é local para este componente em particular. O número de cliques para ruibarbo é local para este componente, e gully é local para este componente. O que isso significa é que este não é um item. Este é um item diferente. Este é um item diferente. Mas escrevemos uma lógica apenas uma vez. Então temos o estado do construtor é igual a um objeto com cliques é por padrão 0. Em seguida, quando você clica nele e atualizações eo número de cliques por um. E tudo o que vai fazer é atualizá-lo para um componente. Então, quando eu clico em ruibarbo, três transformações em 412 não muda para não muda. Só três sabem. E o único componente está sendo atualizado. Esse é o poder por trás do estado. Agora, a sintaxe para isso é um pouco estranha e parece um pouco mágica. Mas podemos basicamente dizer, quando você tem um construtor, esse estado de ponto é igual a, e eu não sei por que isso se moveu. Mas esse estado DOD é igual a um valor de chave de objeto. Podemos ter vários valores aqui também. Podemos dizer que o total restante é igual a 100. E se quiséssemos atualizar o total restante, iríamos apenas adicionar uma vírgula aqui e dizer o total restante. Vamos atualizar tudo isso de uma vez restante. Certifique-se de que está escrito o mesmo sim. É igual a, é igual a este estado de ponto, ponto total restante menos um. E não um ponto e vírgula porque este é um objeto, não uma linha regular de JavaScript. E então poderíamos dizer aqui, o total restante será este ponto estado total restante. E lembre-se que usamos essa sintaxe, essa sintaxe de chave. É assim que ele sabe que isso vai ser JavaScript e não apenas HTML. Então agora toda vez que eu clicar nisso, isso vai cair. Você pode ver que ele está descendo de 90 para 80. O mesmo com este, o mesmo com este. E os números estão subindo. Então agora temos dois estados diferentes trabalhando ao mesmo tempo para cada item específico ou cada componente. Agora o que eu gostaria que você fizesse para sua tarefa é eu quero que você primeiro de tudo, adicione algum estado que você precisa para escrever seu método construtor. Não faz mal passar em adereços e super seus adereços lá dentro. Crie seu estado em seu construtor. Em seguida, em sua função de clique da última lição, Eu quero que você escreva este estado conjunto de pontos. Ele leva um objeto que parece basicamente idêntico a este objeto e apenas alterar esse valor. Você pode alterá-lo para um nome, você pode alterá-lo para o número de cliques. Pode mudar para o que quiser. Por último, mas não menos importante, você precisa ser capaz de realmente colocar esse estado em seu modelo de objeto de documento em seu HTML. E então tudo o que fazemos lá é dizer chave encaracolada, este estado ponto, ponto nome da propriedade do nosso objeto que é. E, em seguida, fechando chaves, HTML normal ou JavaScript. É tudo o que temos que fazer. Vá em frente, experimente isso e quando estiver pronto, vamos para a próxima lição. 12. Componente de Star Wars: Tudo bem, vamos criar um novo componente. Então o que eu vou fazer é me livrar de, bem, eu vou comentar isso para que eu possa mostrar como é um comentário e deixe-me deletar esses outros dois. Então, um comentário em JS Acts ou em React parece com esta chave encaracolada. Então sabemos que isso vai ser JavaScript, termina com quebras encaracoladas. Então nós sabemos que tudo entre aqui vai ser JavaScript, em seguida, um comentário javascript, e um comentário javascript final. Então é assim que parece. Se você estiver no VS Code, você pode pressionar Command. Eu vou digitar isso na verdade Cmd mais isso, que barra. Se você estiver no Windows, eu não consigo lembrar se é barra de controle ou barra, mas de qualquer maneira, você pode simplesmente ir para a sua linha e barra de comando para mim. E ele apenas comentou para mim para que eu possa ir em frente e salvar isso. E nós vamos dar uma olhada e ele diz compilado com advertências item é definido, mas nunca usado aqui em cima. Então podemos ir em frente e podemos comentar isso também. Isso usa um comentário JavaScript regular porque ele não está dentro do js X. Salvar. E vamos em frente e criar um novo componente aqui, e então vamos dividi-lo. Então vamos criar um novo componente chamado Star Wars. Então Classe Star Wars estende-se reagir. Isso foi um estranho react.component autocomplete. E como estamos usando React.Component, precisamos importar React. Então, podemos dizer importação Reagir de. E então a corda reage porque é um pacote. Então aqui precisamos de algum tipo de função de renderização. Então renderizar e ele vai retornar em várias linhas, então usamos parênteses e H1. E aqui, esta é a Guerra das Estrelas. É tudo o que vamos fazer por enquanto. Neste componente em particular, pelo menos, vamos em frente e agarrar Star Wars. E porque ele não está sendo usado, vamos torná-lo usado. Então vamos em frente e nos livrar do nosso cabeçalho. Não precisamos disso. E vamos limpar isso um pouco. Então vamos dizer que este é um teste para ter certeza que isso funciona da maneira que esperamos isso como um teste. Nós realmente queremos esse cabeçalho lá, porque isso está vindo com um bom estilo. Então, vamos manter esse cabeçalho. Acabei de desfazer o Controle Z ou o Comando Z. Isto é um teste. Lá vamos nós. Isto é o que queremos. Então o que eu posso fazer aqui é agora que eu tenho basicamente eviscerado o interior do meu aplicativo React padrão, eu posso ir em frente e colocar Star Wars aqui. Vamos escrever “Star Wars”. E este é um componente React. Então nós escrevemos como JS Acts diz logotipos que não estão sendo usados. Vamos em frente e nos livrar disso. E não temos mais reclamações são avisos. E diz que isto é Guerra nas Estrelas. Então, em apenas alguns minutos, estamos agora criando um componente React on the fly muito, muito rapidamente. Agora, ao longo do próximo número de lições, o que vamos fazer é criar uma API ou não vamos criar uma API, vamos consumir uma API. Vamos usar uma API que nos permite gerar caracteres de Star Wars aleatoriamente cada vez que você clicar em um botão. Então o que eu preciso que você faça para esta lição é que eu preciso que você crie uma nova classe, um novo componente, que se estende a partir de React.com. Basta renderizar uma coisa. Podemos mudar o que ele renderiza um pouco mais tarde e, em seguida, usar isso em seus JS Acts. Quando isso estiver realmente funcionando em seu navegador, sinta-se à vontade para passar para a próxima lição. 13. Programação com Pseudo: Certo, vamos fazer uma pseudocodificação aqui. Primeiro de tudo, vamos criar um gerador aleatório de Star Wars usando uma API. Então vamos em frente e encontrar uma API. Então vamos fazer Star Wars API, não dados, GitHub. E podemos ir para swap dot def. Trocar ponto co não existe mais. Há também alguns copy.txt se você quiser. Esta é a troca de API de Star Wars. E sempre que você vai para HTTPS swapping dot.gov barra API pessoas barra barra um, por exemplo. Vai dar-te informações sobre o Luke Skywalker. Então vamos em frente e digite isso em nossa URL apenas para ter certeza de que isso funciona. Slash api barra pessoas barra um. E aqui podemos ver que isso é o que vai acabar voltando para nós. Agora os estilos um pouco estranho porque há como texto branco em um fundo cinza claro. Mas este é o JSON que vamos recuperar. E vamos em frente e adicionar um nome, altura. Vamos adicionar um URL do mundo natal e os filmes que este personagem é N. Então vamos fazer um pouco de pseudocodificação aqui. Só vamos nos preparar para o sucesso. Então vamos criar uma div, que vai ser o nosso contêiner para todo o nosso código. Então aqui vamos ter um nome. E então o que eu disse? Vamos adicionar uma altura. Vamos adicionar essa altura em centímetros. O mundo natal é uma espécie de mundo natal. Ainda não sabemos. Então isso vai ser um URL, que vai ser um link. E então p talvez não vamos fazer um P, vamos fazer UL, uma lista desordenada com um LI. Apenas como exemplo, não uma LU, mas uma LI filmes aqui. E isso vai parecer terrível, mas isso vai funcionar para nós, pelo menos. Então diz nome. Este é todo o texto alinhar à esquerda. Vamos mudar isso. Eu mudo i para o início, índice de ponto CSS. Não, estava em app.js S text-align. Vamos nos livrar disso porque ele não está fazendo nada alinhar o texto. Você pode ver que ele foi recompilado para baixo perto. Lá vamos nós. Está centrado. O último, mas não menos importante. Também precisamos de algum tipo de botão aqui. Porque como vamos gerar aleatoriamente um personagem sem um botão? Então vamos em frente e adicionar um grande botão lá dentro. Então nós digitar botão, botão e isso é apenas HTML. O tipo vai ser um botão normal. Classe vai ter algum tipo de nome de classe que podemos adicionar. Um choque é chamado botão btn, eu acho. E isso vai dizer Randomize caractere. Ok, temos um pequeno botão lá dentro. Vamos em frente e fazer esse botão maior, abrindo nosso aplicativo dot CSS. E eu vou rolar para a parte inferior e digite ponto btn porque isso corresponde ao nome da classe. Isto é apenas CSS aqui. Então note que o arquivo, mas o nome da classe aqui, então este é CSS regular e eu realmente cometi um erro. Não é classe, é o nome da classe é igual a btn. E temos uma aula aqui chamada btn. Vamos mudar a cor de fundo para preto. Fronteira. Um pixel, preto sólido. Não, vamos fazer amarelo. A cor do texto também será amarela. O preenchimento vai ter 20 pixels em todo o lugar e o tamanho da fonte vai ser muito maior. Vamos fazer isso 25 pixels e salvar, esperar por ele para compilar caracteres aleatórios. Então este é um botão que é realmente factível. Temos um erro na sua classe Embora. Você quis dizer o nome da classe? Vamos em frente e refresque-se. E isso foi apenas um erro de Hill Hast compilar. Então eu apenas refrescante e me livrei desse erro. Então agora precisamos aleatorizar este personagem, mas temos pseudocódigo um pouco aqui. E tudo o que fizemos foi dizer, hey, vai haver um nome e vai ser maior centímetros. Haverá o mundo natal é URL. Vai haver filmes aqui. Então nós não estamos realmente fazendo qualquer codificação JavaScript real no momento. Só estamos fazendo isso desbaste nosso código para sabermos com o que trabalhar. Na próxima lição, o que eu gostaria que você fizesse é me espelhar. Quero que faça uma pseudocodificação. Então, se você não quiser usar a API de troca, este aqui, se você não quiser que você Star Wars, há outro chamado Pokemon API. Você só tem que procurar no Google. Ele lhe dará basicamente um site de aparência muito semelhante com estruturas de dados muito semelhantes. Mas vou usar o Star Wars. E eu queria saber o nome de um personagem, a altura, o mundo natal e os filmes. E é isso que vamos começar a fazer a partir da próxima lição. Então vá em frente, me imite e quando estiver pronto, vamos para a próxima lição. 14. Outra ferramenta de react.js: Tudo bem, agora precisamos adicionar um recurso rápido, então um recurso onclick. Então nós temos este componente Star Wars aqui e ele está renderizando HTML com um monte de H1, PP, UL, aliado e um botão. E toda vez que você clica nesse botão ele precisa fazer alguma coisa. Então, passamos por isso uma vez. Vamos em frente e repassar mais uma vez. Então, vamos dizer que onclick é igual a. E então, em vez de suas citações regulares como costumamos fazer em HTML ou XHTML. E nós vamos dizer que isso vai ser Javascript. Usamos chaves encaracoladas. Em seguida, aqui podemos dizer obter novo personagem vai ser uma função, e isso vai simplesmente obter um novo personagem. Mas vamos apenas ter certeza que isso, ele funciona por console registrando algo, obter um novo personagem de um botão. E nós não preenchemos isso no clique. Então OnClick, isso precisa ser, isso vai ser uma função de seta. Este ponto ganha um novo personagem. Este é um método, então usamos parênteses. E o que podemos fazer aqui, e vocês verão isso muito, é que podemos colocar tudo em novas linhas também, então é um pouco mais legível assim. E sim, você vai ver isso um pouco abaixo da estrada, bem como quando você está escrevendo um monte de reagir. Então temos uma função onclick aqui. Vamos continuar e salvar isso e atualizar nossa página. É só limpar o console para mim no fundo aqui. E quando eu clico nele, ele diz obter um novo personagem de um botão. Então está funcionando. Nosso evento de clique está realmente funcionando. Agora isso é tudo o que vamos fazer para esta lição em particular. E eu gostaria que você fizesse o mesmo. Certifique-se de que você tem um evento onclick. Tem que desencadear alguma coisa. Não se preocupe em fazer solicitações de API ainda. Chegaremos a isso daqui a pouco. Mas certifique-se de que você tem um evento clique que realmente funciona e eu apenas escrever log console como um teste. Vamos acabar apagando esse código daqui a pouco. Mas é um bom teste. Isso me diz que realmente está funcionando. Então vá em frente e consiga essa configuração e quando estiver pronto, vamos para a próxima lição onde começamos a trabalhar com um pouco de estado. 15. Como armazenar dados usando o React: Tudo bem, vamos em frente e adicionar algum estado ao nosso gerador de personagens aleatórios Star Wars usando uma API. Primeiro, precisamos adicionar um construtor con, instrutor. Podemos passar nos adereços se quisermos, não há problema. Então vamos pular isso. E vamos dizer que este estado de ponto é igual a. E então é preciso um objeto. Ou se você vem de Python, é preciso um dicionário. E precisamos armazenar, o que precisamos armazenar? O nome, a altura, o mundo natal e os filmes em que estão. Então vamos em frente e armazenar o nome como nulo. Ainda não sabemos qual será esse nome. A altura vai ser nula. Ainda não sabemos qual será essa altura. Esse dever de casa também será nulo. Ainda não sabemos o que isso vai ser. E os filmes, isso vai ser uma matriz vazia. E do jeito que consegui isso, e voltaremos a isso em um segundo com um zelador. Mas a maneira como eu tenho nulo em todos os lugares é porque nós não sabemos qual é o nome, altura ou mundo natal. Mas os filmes, sabemos que isso vai ser pelo menos uma lista ou uma matriz. E se voltarmos aqui, vamos ver filmes. Veja bem aqui, isto é uma matriz. E assim, queremos armazenar esses dados exatamente como estão dentro de nosso aplicativo. Agora vamos em frente e executar isso. E isso está dizendo que super precisa vir antes. Então vamos correr super legal. Isso parece funcionar. Bom o suficiente. Agora, cada vez que clicamos em obter novo personagem, precisamos atualizar este estado. E fazemos isso com este estado de ponto definido. E vou literalmente copiar e colar isto. E vamos codificar alguns destes apenas por enquanto. Então o nome vai ser Luke. A altura vai ser um 172. Se eu me lembro. Ted, por favor, não me julgue se eu soletrar isso errado. E eu vou deixar os filmes como um item e você é apenas um item. Na verdade, vou colocar o item dois aqui também, só para vermos o que isto parece. Então vamos apenas codificar esses valores e, em seguida, podemos alterá-lo aqui. Então podemos dizer este estado de ponto, nome de ponto, altura em centímetros, eu acho que é em centímetros. Este estado de ponto, altura de ponto. O mundo inteiro vai ser uma URL. Então este ponto estado, ponto mundo natal. E novamente estamos estabelecendo esse estado. Nós originalmente dissemos esse estado e quando você clicar, vamos definir esse S8 ou vamos atualizar esse estado. E por último, os filmes vão entrar aqui. Esta vai ser interessante. Vamos trabalhar com isso um pouco mais tarde. Mas poderíamos dizer que este ponto estado filmes ponto ponto. E nós codificamos isso como não usando um pedido de API que você pode ver que parece um pouco feio, um pouco quebrado no momento. Quando clicamos nele, ele preenche automaticamente essas coisas para nós. Confira isso. Isso é muito bom. Agora, vamos em frente e garantir que isso não apareça. Vamos fazer isso na próxima lição. Então toda vez que você carrega a página, há apenas um botão. E nada disso vai aparecer até que o botão seja clicado. Faremos isso na próxima lição. Mas, por enquanto, certifique-se de ter esse código. Não se preocupe com as solicitações de API. Só precisamos ter certeza que você tem uma construção ou ter certeza que você corre super primeiro. Babum, babum, este.tab estado, você vai querer nomear filmes de altura do mundo natal, ou qualquer outro dado que você deseja usar de swaps, da API pantanosa. Certifique-se de que, ao clicar, você estará definindo esse estado. Então você quer definir o nome, a altura, o mundo inteiro, os filmes ou quaisquer propriedades que você definir em seu objeto e seu objeto de estado. E, em seguida, simplesmente imprima isso para a página em sua função de renderização. Vá em frente e experimente isso e quando estiver pronto, vamos para a próxima lição onde escondemos tudo isso até que esteja realmente disponível para ver. 16. Se condições no React: Vamos dar uma olhada em esconder essas coisas. Então, se voltarmos aqui e atualizarmos nossa página, ela diz centímetros do mundo natal e há uma lista e não queremos que isso apareça. O que precisamos é de algum tipo de declaração if dentro do nosso método de renderização. Então o que podemos fazer, então, há algumas maneiras diferentes de fazer isso, mas vou mostrar a vocês o JS XY. Então podemos dizer chaves abertas ou encaracoladas. Isso só significa que vai haver alguma lógica JavaScript aqui. Vamos dizer se algo é verdade, e então podemos dar uma div a isso. Então vamos voltar para JS X. E vamos mover todas essas coisas para cá, exceto o botão. Então para cima, para cima, para dentro, para dentro. E algo precisa ser verdade. Então o que podemos fazer é trabalhar com o Estado aqui. Então, por padrão, podemos dizer que algo é falso. Quando esse botão é clicado, algo é verdade. Então podemos dizer que este ponto tem caráter ou digamos caracter carregado. E isso vai ser um estado, então este.tab estado. E precisamos configurar isso aqui no nosso construtor. Então nós queremos dizer caracter carregado, isso vai ser falso por padrão. E quando você tiver um novo personagem, vamos atualizar isso para ser verdade. E o que isso vai fazer é que não vai mostrar nada até clicarmos nisso. O que é muito bom, porque não queríamos aquele CME ou aquele mundo inteiro, ou apenas aquela pequena bala ali. Não queríamos que nada disso aparecesse até que houvesse alguns dados. Então, recapitulando, o que fizemos aqui foi abrir nossa sintaxe JavaScript. Então JavaScript dentro de js X, dissemos se o estado do caractere carregado é verdadeiro e este é um atalho do JavaScript. Então dizemos e terminamos. Colocamos alguma mensagem aqui ou alguns JS Acts. Isso então diz, se esse personagem foi carregado, nós temos todo esse outro estado. E, basicamente, por padrão, dissemos caracteres não carregados. O botão ainda não foi clicado. Quando o botão é clicado, vamos dizer como personagem é carregado. Quando esse personagem é carregado, todas essas outras coisas serão definidas ao mesmo tempo, e podemos mostrá-lo aqui. Finalmente, fechamos nossa sintaxe com uma chave de fechamento, e isso simplesmente diz que tudo aqui vai ser alguma forma de lógica JavaScript. Não é apenas XHTML. Vá em frente, experimente isso. Certifique-se de que está funcionando para você. Quando estiveres pronto. Vamos para a próxima lição juntos. Te vejo lá. 17. Seu primeiro pedido de API baseado no redefinição: Tudo bem, vamos em frente e fazer nossas primeiras solicitações de API. Então o que precisamos fazer é em nosso novo personagem, não só precisamos definir o estado, mas precisamos fazer uma solicitação de API sobre para trocar você tem que obter algumas informações. Então vamos trabalhar com isso. Em um assunto muito, muito simples, para começar. Vamos trocar E.gov. E eu vou conseguir essa API cortar as pessoas cortar uma URL. E eu vou colocar isso aqui como const URL é igual a apenas esse URL, em seguida, vamos criar uma busca solicitações API. Então, vamos dizer buscar essa URL usando uma solicitação get por padrão. Então vamos pegar essa resposta e vamos para JSON, desafiá-lo ou decodificado do JSON porque sabemos que essa resposta virá do JSON. Este é o formato JSON aqui. Então queremos ter certeza que essa resposta, seja lá o que for, será JSON. Então, uma vez que isso é feito, nós vamos pegar esses dados, todos que JSON, e nós vamos trabalhar com ele e nós vamos dizer dados console.log. E vamos nos livrar do nosso primeiro console.log para não desordenar nosso console. Tudo parece uma ordem. Ele compilou perfeitamente bem. Vamos voltar ao nosso aplicativo React e atualizar. E você pode ver que nossas coisas carregaram primeiro, isso é só porque são codificadas. Isso é bom. Não vamos nos preocupar com isso por enquanto. Vamos substituir isso em um segundo. O que queríamos ter certeza que funcionava era isso. Na nossa consola. Conseguiu toda a informação. Chegou ao ano de nascimento, entendeu quem é esse? Este é Luke Skywalker tem seu nome, sua altura, sua massa é cor de cabelo, cor de pele, filmes, sexo, altura, mundo natal, massa, blá, blá, blá, blá, todo tipo de coisas lá. Então agora temos esses dados para trabalhar em um objeto ou em um objeto. Em JavaScript, eu quase o chamei de dicionário porque eu escrevo um monte de Python, basicamente a mesma coisa. Então o que queremos fazer agora é pegar esse código, o estado definido. E queremos movê-lo para cima para os dados aqui. E queremos definir esses dados para serem relevantes. Então o nome dos dados vai ser Luke Skywalker. Recebemos dados daqui. Então todo esse objeto aqui vai ser chamado de dados. Foi para isso que atribuímos aqui. E depois dissemos que o nome vai estar ali. Temos o nome. Então data.frame altura vai ser altura é 172, eu acho certo? Agora vamos fazer altura de ponto de dados. Mundo natal. Isto vai ser um URL. Então vai ser um mundo natal. E você pode trabalhar com isso um pouco mais tarde. Uma vez que você tem este projeto funcionando, você pode então dizer, oh, há um URL do mundo natal. Vamos em frente e também buscar esses dados. Mas por enquanto vamos mantê-lo simples e dizer data.dat home world, e vai ser apenas uma URL e está tudo bem. E o filme é chamado de filmes em seu sim. Filmes. Há quatro deles. Lucas e filme 1236. Estas são as ideias, não a ordem do filme, a propósito. Então, fazemos filmes de data dot. E vamos em frente e testar isso. Então o que isso vai fazer agora é quando eu atualizar ou você não precisa atualizar. Eu gosto de atualizar apenas como um hábito de tipo de limpar para o meu console rapidamente. O que isso vai fazer é eu vou clicar neste botão e ele vai então fazer um pedido para trocar e dot dev. E eu vou te mostrar, ele vai aparecer no nosso console aqui. E uma vez que o pedido é feito, assumindo que eu não tenho nenhum erro de digitação, ele vai carregar os dados aqui e ele sempre vai mostrar Luke Skywalker. Lá vamos nós. Luke Skywalker, um mundo natal de 172 centímetros é planetas cortar um anys em filmes, um, ID de dois, Film ID de três idéia de filme para estes não são os episódios a propósito, esta é apenas uma maneira diferente de ordenar dados. Então temos isso funcionando agora. Eu quero que você tenha certeza que você tem isso funcionando da mesma forma que eu tenho isso funcionando. E na próxima lição vamos realmente aleatorizar isso porque agora toda vez que eu clicar nisso, ele carrega Luke. E você sabe, tão bom quanto Luke é. Talvez quiséssemos que fosse exposto a outra pessoa, alguns outros personagens que vêm da troca de ponto dev. 18. Personagens de Randomização: Certo, vamos gerar um personagem aleatório de Star Wars. Então você pode ver aqui que temos troca ponto dev barra, API barra pessoas barra um. E isso só vai pegar o primeiro caractere em seu banco de dados. Id número um é o primeiro caractere na troca de dados de devs dot. E se formos ao site deles e olharmos para as pessoas atacarem quem era o número quatro? Darth Vader, legal, outro personagem comum. Então essa é uma boa para usar. E se quiséssemos pegar o número de quem? Eu não sei. Vou adivinhar o número 11. Ou você deve estar brincando comigo. Eu vou erroneamente aqui e ele pode Skywalker agradável. Então, você sabe, manter isso na família. Certo, então vamos aleatoriamente. Vamos ver o que acontece quando chegarmos ao número 100. Não há 100. E assim com um monte de APIs, e o que podemos fazer é porque este é um URL detalhado, podemos simplesmente ir para cortar as pessoas e isso vai nos mostrar todas as pessoas. Diz que há uma contagem de 82. Sabemos que há pelo menos 82 caracteres com uma identificação. Agora precisamos de um número aleatório entre 0 ou não 0, mas um número aleatório entre 182. Então vamos criar um número aleatório. Número aleatório é igual a, e isso é apenas JavaScript simples aqui. Então vamos arredondar o que quer que seja esse número, matemático ponto aleatório. E isso vai nos dar um número entre 01. E então vamos multiplicar isso por 82 e certificar-nos de que isso é arredondado. Então, se for como 0,4. 1.5.2 três, ele vai multiplicar isso por AD2 e, em seguida, arredondar isso para um número inteiro. Então podemos pegar esse número e podemos transformar isso em um modelo literal em vez de uma string regular. E nós podemos jogar esta variável aqui novamente, este é apenas JavaScript regular neste ponto. E o que isso vai fazer é obter um número aleatório entre 182. E assim cada vez que clicarmos nisso, cada vez que clicarmos nessa função, esse evento de clique vai criar um novo número aleatório, criar uma nova URL aleatória. E isso vai afetar esse URL e, em seguida, definir esses dados para nós. E toda vez que esses dados são definidos, nossa página é atualizada automaticamente. Então vamos em frente e dar uma olhada neste caractere aleatório de atualização. Um deles é o Ben. E cada vez que eu clicar nisso, ele ganha um novo personagem. Então agora nós realmente temos isso pronto e funcionando. Agora ainda temos algumas coisas para trabalhar, como o filme, ok? Se houver vários filmes, vamos encontrar um que tenha vários filmes. Aqui está uma boa. C3po está em todos os filmes que eles têm em seu banco de dados. Esta é uma corda longa. O que queremos fazer é mostrar isso como talvez um link e transformar isso em um link também. Então vamos em frente e, em primeiro lugar, na próxima lição, vamos criar o link aqui. Vou te mostrar como fazer isso. E então, na lição depois disso, vamos em frente e transformar isso em vários pontos de bala. 19. Como criar links com texto no React: Tudo bem, vamos em frente e link de phi são mundos home ou home world é data dot home world e isso é uma URL. E quando aparece aqui, diz “mundo natal” e, em seguida, apenas uma URL aqui. Então vamos, vamos em frente e realmente cortar isso. E o que vamos fazer é criar uma ligação. Este vai ser um vídeo muito, muito curto. Então eu só colei isso lá dentro. Este é um link regular. E olhe para isso bem compilado. A única coisa estranha aqui é que HREF não tem apóstrofos em torno dele. Estamos usando JavaScript dentro dele. Então nós estamos dizendo, hey, reaja quando você compilar esta chave encaracolada, isso vai ser JavaScript aqui, então certifique-se de que você sabe o que fazer. Oh, a propósito, estamos fechando o JavaScript, o resto vai ser HTML. E nos bastidores, isso funciona com muita lógica e entender o que precisa fazer. Então, quando eu atualizar aqui, vamos ver que este é um link agora que é difícil de ler, mas na verdade é um link. E se eu clicar nisso, isso me leva ao planeta 42. Haroun Cal, eu acho. Oh, eu sinto muito. Se você é um grande fã de Star Wars, eu sou uma grande estrela, estava bem, mas eu não sei como navegar os nomes. Então me desculpe se eu massacrei isso. Mas isso me trouxe para o mundo natal do Windows. E novamente, tudo o que fizemos lá foi dizer que HREF é igual a abrir e fechar essas chaves, em seguida, colocar seu JavaScript dentro dele. Era tudo o que tínhamos que fazer na próxima lição. Vamos trabalhar numa espécie de ligação que desafia estes filmes. Mas temos que aprender a percorrer alguns desses primeiro, e isso vai ser uma lição maior. Portanto, certifique-se de que você tem isso funcionando e quando estiver pronto, vamos passar para a próxima lição onde aprendemos a percorrer as coisas em nosso HTML interno ou js X em vez disso. 20. Como fazer loop por meio de painéis no React: Certo, vamos passar por todos os filmes. Sabemos que os filmes vão ser uma matriz, então podemos percorrer esses filmes. E como passaremos por isso? Em reagir? Bem, reage usa uma maneira diferente de fazer loop. Então você provavelmente está familiarizado com um loop for ou um para cada loop neste ponto. E eu quero me livrar disso também, porque nós queremos que cada LI esteja em todos os filmes. Mas vamos usar uma nova maneira. Em vez de usar um loop for ou um para cada loop, vamos estar usando mapa. Então nós abrimos nossa lógica aqui e dizemos este estado ponto, dot filmes dot dot dot map. E isso é uma função. E isso vai levar um filme, então ele vai percorrer cada item. Vamos chamar-lhe filme. E poderíamos voltar, deitar-nos com o filme lá dentro. Vamos ver o que isso faz. Vamos criar um novo aqui e olhar para isso. Isso está funcionando para nós. Isso é muito, muito legal. Mas e se quiséssemos jogar isso em um novo componente? Poderíamos fazer isso muito, muito facilmente. E então o que vou fazer aqui é porque há muito código. Vou fazer isto um pouco mais pequeno aqui. E vamos nos livrar disso. E vamos simplesmente chamar isto de filmes. E aqui em nossa função de renderização acima de nossa declaração de retorno, porque nada abaixo de uma declaração de retorno é executado, precisa estar acima de nosso retorno. Salve isso. E podemos dizer que filmes const é igual a este estado ponto, filmes ponto ponto ponto mapa. E o que podemos mapear aqui? Primeiro de tudo, podemos mapear o nome do filme em si ou o URL do filme. Então vamos chamar essa URL. E também podemos dar-lhe um índice. Nós vamos precisar disso em um segundo e eu vou te mostrar o porquê. E em vez de dizer algo como LI, que não fez o que eu queria que fizesse. Em vez de dizer algo parecido com isso e escrever js X aqui ou HTML melhor, podemos escrever dois js X. Então poderíamos retornar o filme Item Row, que ainda não existe, mas poderíamos fazê-lo existir. E isso está me dando um realce de sintaxe engraçado e porque eu estava perdendo aquela seta lá dentro. Então agora temos este novo componente. Ainda não criamos este componente. Precisamos criar este componente. Agora isso vai ser um componente bastante simples. Então vamos em frente e dizer filme de classe, Item, Linha estende react.com, renderizar. E nós retornamos, vamos retornar várias linhas. Então usamos abertura, fechamento, parênteses. Vamos devolver um LI todas as vezes. Vai haver uma ligação que vai a algum lugar. Ainda não sabemos o que é isso. E vai haver alguma mensagem. E em apenas um segundo vamos passar em algumas propriedades que podemos dinamicamente colocar alguns dados dentro de nossa linha de itens de filme. Então vamos descer e encontrar seu filme Item Row, Filme Item Row. E tudo isso vai fazer é colocar todos os filmes em um conceito chamado filmes, que podemos então colocar dentro daqui. Vamos em frente e tentar isso e Recebemos um erro? O atributo href requer um valor válido. Ok? Esse foi o meu erro. Valor válido. Digamos que não vá a lugar nenhum. HTML de ponto. Lá vamos nós. Chega de reclamações. K, vamos refrescar. E você pode ver aqui que diz algum texto, algum texto e esse URL, se você olhar para o canto inferior esquerdo, diz não ir a lugar nenhum. Agora o que é interessante sobre isso é que se eu fizer este console apenas um pouco menor aqui podemos ler este erro. Diz que cada criança em uma lista deve ter uma chave única. Se você vir isso, o que você precisa fazer é passar em um adereço. E o que fazemos aqui, porque cada componente do React precisa ser, para mais ou menos, precisa ser único. E assim passamos em uma chave para torná-la única. E vamos passar por isso. Eu, vamos em frente e salvar isso. Refresque. Não recebemos mais esse erro. E vamos em frente e substituir este texto pelo URL e esse URL pelo URL. Então vamos passá-lo outra propriedade aqui chamada URL é igual a URL e isso está vindo daqui. Então o que isso está fazendo essencialmente é, está passando por todos os nossos filmes. Para cada filme, ele vai mapear esse URL e, em seguida, o índice neste basicamente um loop for. Para cada filme. Ele vai então retornar um novo componente que tem uma chave única lá dentro. Então vai ser 0123, et cetera, et cetera, com uma URL prop também. O que é bom nisso é que não temos que escrever vários componentes. Podemos simplesmente colocar o adereço aqui. Podemos dizer que este ponto adereços ponto URL. E eu estou pegando isso do ponto-ponto-ponto. Estou tirando isso de onde estou? Vamos fechar um pouco disso. Estou pegando a URL daqui. Então isso é um adereço. Portanto, este ponto adereços ponto URL não pertence entre parênteses porque é uma string. Queremos que isto execute alguma lógica real nos bastidores. E vamos colocar o mesmo aqui. Este ponto adereços, ponto URL, Salve nossos compiladores que não houve problemas. Vamos atualizar nossa página. Gosto de me refrescar. Normalmente, não é necessário atualizar a menos que você veja um erro e ele não é atualizado automaticamente para você. Eu gosto de refrescar isso como um velho hábito e verificar isso. Diz a troca de filmes API de desenvolvimento de pontos para filmes API cinco, filmes API seis. Vamos em frente e clique neste link. Api, filmes seis, que combina aqui. Então esse é um link apropriado. É Revenge of the CIF episódio ID é três, e tem todos esses personagens em seus, todos esses planetas, todas essas naves estelares, todos esses veículos, todas essas espécies tem todo tipo de coisa lá dentro. Então isso está funcionando para nós. Essencialmente, o que fizemos foi tomar uma maneira mais longa de fazer isso. Este é um componente muito, muito simples. E então provavelmente não precisávamos colocar isso em um componente, mas fizemos. Colocamos isso em um novo componente que renderiza um aliado para cada filme em que um personagem está. Então dissemos, passe esse URL como um adereço. E como um adereço parece com isso. Passamos esse URL. Então, para cada filme que chamamos de URL, poderíamos facilmente chamar este filme. E isso vai funcionar exatamente da mesma maneira. Isso não vai nos dar erros. Se há quatro filmes, há quatro filmes que vão armazená-lo em uma constante, uma variável constante chamada filmes. E então acessamos filmes aqui embaixo. Agora eu quero que você dê uma chance. Vá pelo caminho mais difícil. Não faça a maneira mais fácil que eu mostrei no primeiro minuto ou 90 segundos mais ou menos. Tente isso da maneira mais difícil, porque é assim que React é como na produção. Como um desenvolvedor profissional, você verá Componentes divididos em pequenos, pequenos componentes como este, ou componentes maiores que usam muitos outros componentes. Então você precisa estar realmente familiarizado com como usar um componente. Por último, mas não menos importante, cada item de uma lista. Cada item em uma lista onde você precisa de uma chave e essa chave. Eu só disse que esta chave vai ser i. Então, se esta é a primeira iteração, i vai ser 0, segunda iteração, 1, terceira iteração, vai ser o número dois. E isso só vai dizer que cada um deles vai ter um valor-chave diferente. E isso só o torna único para que reajam tão agradável e feliz com isso e para que ele saiba como lidar com esse componente na estrada. Em vez de dizer que cada componente é exatamente o mesmo, vá em frente e experimente isso. Se você ficar preso, deixe sua pergunta abaixo ou fique à vontade para fazer sua pergunta. No grupo do Facebook, aprendendo a codificar. Quando terminar isso, vá para a próxima lição. E eu vou te dar um projeto. 21. SEU PROJETO: Muito bem, bem-vindos ao vosso projecto final. Quero que faça algo diferente. Então eu tenho este URL aqui, e eu fui para o errado. Opa. GitHub.com barra, também conhecido como bab barra Star Wars traço API. E aqui, se você entrar em API, pode entrar em Id. E se entrares na identificação número um, diz que é Luke Skywalker. Assim como trocar o ponto que o Dev tem. A diferença é que há uma imagem e você pode carregar essa imagem no seu aplicativo. Então, quando você pega um personagem aleatoriamente, em vez de dizer apenas Sand Hill, mostre uma foto de San Hill, ou mostre uma foto de qualquer outra pessoa que apareça aqui. Agora você precisará alterar o URL. Portanto, você não pode usar o ponto de troca, ponto, ponto porque ele não suporta imagens. Mas se você usar este URL aqui, se você apenas clicar em como ID, um ponto JSON, ele vai lhe dar este caractere particular. Ou se o seu número foi aleatório. E há 88 caracteres. Vamos ver quem é o número 88 mantido no plasma. Se o seu número acabou por ser um número aleatório, 88, ele deve procurar este URL. Então você vai querer ter certeza que oito é um número dinâmico, é um número aleatório. Obter esse URL, obter o nome. E talvez toda a moral, Eu gosto disso? Isto não é realmente um URL, este é um nome que eu gosto, isso é um pouco melhor. Pegue essa imagem. E talvez, talvez, talvez obter suas espécies ou afiliações ou algo assim e colocar isso em seu aplicativo também. Então, basicamente, eu quero que você recrie o que nós criamos neste curso ou neste módulo. E quero que coloque uma imagem aqui em cima. Você vai precisar usar o estado um pouco. Você pode querer usar prompts. Você vai querer mudar o URL da API e você vai querer mudar o número aleatório que estamos gerando porque estamos gerando apenas até 8082, eu acredito que foi. Isso suporta até o número 88. Não te esqueças se alguma vez ficares preso. Você pode fazer perguntas e aprender a código do grupo Facebook, venha se juntar a nós. É um grupo completamente livre. Você pode fazer qualquer pergunta sobre qualquer coisa desenvolvimento web relacionado. Você pode ver que já há mais de 65 mil membros aqui. Sinta-se à vontade para entrar, fazer perguntas, receber feedback e ajudar outras pessoas, se quiser. Normalmente, você pode obter uma resposta dentro de alguns minutos após o seu post ser aprovado, o que é muito, muito bom. É muito, muito rápido. Tem muita gente prestativa aqui. Por último, mas não menos importante, meu nome é Caleb Italian. Eu tenho sido seu professor, garganta reagir um a um. Espero que tenham gostado deste curso. Espero que isso tenha sido divertido e uma introdução divertida em React JS. Se você quiser Me seguir, pode sempre me seguir em todos os lugares diferentes, mas o Twitter é bom. Você sempre pode me seguir no Instagram, ou se você quiser, você pode obter dicas de codificação e truques indo para Instagram.com barra codificação para todos. E você obtém dicas e truques agradáveis como como trabalhar com o Django, como trabalhar com decoradores Python, como trabalhar com React, et cetera, et cetera. Muito obrigado por fazer este curso. Agradeço muito o seu tempo e espero vê-lo em mais um dos meus cursos. Ou se você estiver em um dos meus cursos maiores, espero vê-lo no próximo módulo. Obrigado de novo, e te vejo por aí. Tchau.