Commencer avec React JS

1. Introdução: Oi lá. Meu nome é Daniel. Sou desenvolvedor aqui no Skillshare e gostaria de lhe dar as boas-vindas a este começo com os códigos do React. O objetivo deste curso é fornecer os conceitos e ideias necessários para poder começar a usar o ReactJS em seus aplicativos web. O curso é dividido em duas seções. A parte básica, onde discutiremos os blocos de construção do React, coisas como componentes do React, propriedades, estado ou como usar CSS para estilizar seus componentes. Todas as lições desta seção, mostrarei modular e direto ao ponto para que você possa usá-las mais tarde como referências. Além disso, há a parte dos exemplos. Aqui, construiremos exemplos mais complexos que desenvolvi em várias lições. Veremos como os conceitos básicos do React são combinados para criar um aplicativo completo. Eu encorajo você a acompanhar e programar ao lado. O curso vem com mais de 15 conceitos e cada lição tem seu projeto inicial e também uma amostra final de como esses arquivos devem ser parecidos no final da lição. Além disso, antes de iniciar este curso, certifique-se de ter instalado o utilitário do aplicativo Create React. Os links são fornecidos na descrição deste curso. Observe que, embora este seja um curso dedicado a apresentá-lo ao ReactJS, você deve ter um entendimento básico de JavaScript, HTML e CSS em geral. Vamos começar e ver como o React pode facilitar sua vida e impulsionar sua carreira. 2. Seu primeiro componente de React: O modelo inicial do nosso primeiro exercício está quase vazio. Temos esse arquivo js de índice que contém apenas um elemento e também um index.html com um corpo vazio. Tenha em mente que, para iniciar nosso exercício, baixei nosso modelo inicial, compactei e depois de executar o npm install e o npm [inaudível], devemos ter esse alerta aparecendo sempre que salvarmos um arquivo. O escopo desta lição é fazer nosso primeiro componente reagir. Para isso, primeiro precisarei adicionar no index.js, a instrução de importação para react. Existem várias maneiras de criar componentes react. A abordagem mais clássica é usar classes JavaScript. Para isso, primeiro criarei uma classe chamada primeiro componente. Este primeiro componente estenderá o React.Component. O componente cacau para react [inaudível] é a função render. React expandirá a tag correspondente a esse componente para o que for retornado da função de renderização. No nosso caso, se quisermos que nosso primeiro componente seja apenas um h1, aqui, direi que quero retornar h1 com o texto, hello world. Agora, se salvarmos e a página for atualizada, ainda recebiremos apenas esse alerta como saída. Isso ocorre porque não dissemos ao react onde no HTML colocar esse componente. Primeiro, vamos mover esse alerta e depois, entrarei no index.html aqui, criarei uma div com o id de root. Essa nova div criada servirá como contêiner para o nosso componente. De volta ao index js, adicionarei uma nova instrução de impulso. Desta vez para um ReactDom. ReactDom também tem uma função de renderização, mas esta pega um componente react específico e o anexa a uma nota HTML. Podemos dizer ReactDOM.Render e, como primeiro parâmetro, daremos nosso primeiro componente e, como segundo parâmetro, usaríamos o document.getElementById e diremos que queremos anexar este primeiro componente ao o ID da raiz. Agora, se eu salvar, podemos ver na tela nosso primeiro componente react. Como conclusão, a ideia é que qualquer componente react tenha essa função de renderização e react expandirá por padrão a tag react real para o que é retornado dessa função aleatória. 3. Componentes Nested: O componente que temos na tela é muito simples. Ele só tem um nó HTML h1 com algum conteúdo. Mas quando estamos nessa função, também podemos retornar estruturas HTML mais complexas. Por exemplo, aqui posso adicionar um link. Se salvarmos, podemos ver que as coisas funcionam como antes. E se nosso componente precisar ser transformado em direção ainda mais complexa? Digamos que depois disso h1, também queremos ter uma linha horizontal. Se salvarmos, veremos que recebiremos um erro. Isso está acontecendo porque em condições normais, a função render deve retornar apenas um único elemento raiz. Em novas inovações, há soluções alternativas para este mundo. Mas a correção mais fácil no nosso caso, será apenas adicionar aqui div de fechamento que servirá como elemento raiz. Se salvarmos, podemos ver que agora nosso componente também tem um h1, um link, mas também essa linha horizontal que adicionamos anteriormente. Mas as coisas podem ficar ainda mais interessantes. E se precisarmos de outro componente que seja feito de dois componentes desse tipo? No final, um aplicativo React é uma coleção de elementos do React que trabalham juntos para atingir um objetivo comum. Adicionaremos um novo componente e esse componente será chamado de App. Para construí-lo, vou apenas copiar e colar este primeiro componente, alterar seu nome para App e, a partir desse final da função inicialmente, retornaremos essa div vazia. Agora, no ReactDom, se substituirmos isso por um componente a ser definido como Aplicativo e salvar, apenas obteremos a tela vazia. Isso está acontecendo, é claro, porque a partir desse fim da função, apenas retornaremos a div vazia. Mas podemos vir aqui e da instrução return também adicionar dois componentes do tipo primeiro componente. Se salvarmos, podemos ver na tela que nosso aplicativo acabou de ficar mais complexo. É possível ser tão complexo quanto quisermos com esse tipo de estrutura. Veremos nas lições futuras como podemos usar coisas como propriedades, contexto ou eventos para enviar dados de um componente para outro. 4. JSX e interpolação: Vamos dar uma olhada no que temos na tela. Temos uma classe JavaScript e também alguns outros objetos JavaScript que são importados e usados. Você pode se perguntar, mesmo se estivermos em um arquivo JavaScript, como podemos usar estruturas HTML como esta? Bem, isso ocorre porque sobre a sintaxe chamada JSX que vem do JavaScript XML e foi desenvolvida pelo pessoal do Facebook para ser usada com o React. A coisa legal é que podemos usar esse tipo de mix entre HTML e JavaScript mesmo em um nível mais profundo. Este método de renderização é uma função JavaScript no final. Portanto, usando o JSX, posso interpolar alguma variável JavaScript no HTML real. Isso significa que posso declarar aqui uma variável chamada x com um valor de 10, e dentro da instrução return, adicionar um novo parágrafo que diga algo como, o valor de x é, e usando chaves curly, Vou apenas inserir aqui o nome da variável, no nosso caso x, e se eu salvar, veremos na tela que temos este novo parágrafo que é feito de algum texto HTML estático, mas também oferecemos valor que vem diretamente de JavaScript, este 10, ainda mais para que possamos adicionar expressões Ruby ou JavaScript aqui. Algo como o duplo de x é, e aqui dentro de chaves encaracoladas eu posso adicionar qualquer coisa que eu quiser, desde que seja uma expressão JavaScript e diga algo x multiplicado por 2, e teremos o dobro de x é 20, e isso é não restrito a números. Por exemplo, posso usar objetos JavaScript ou outras coisas. Digamos que definiremos aqui uma nova variável chamada my-string com o valor de React é legal, e depois disso vá na instrução return e aqui adicione um novo parágrafo que diz que os primeiros cinco caracteres são e usando chaves curly, Vou pegar a my-string e dizer sub-string de zero e cinco e isso funcionará como podemos ver na tela, os primeiros cinco caracteres são React. É assim que podemos usar o JSX e a interpolação para fazer com que nossos componentes React exibam alguns dados complexos. 5. React de componentes: Para explicar quais são as propriedades do react, vamos começar do exemplo atual. Temos nosso aplicativo React que exibe dois parágrafos. Um com o conteúdo, “Olá, meu nome é Bob” e o outro com o conteúdo, “Olá, meu nome é Joe”. Dado o fato de que o conteúdo é muito semelhante, fará todo o sentido eliminar essa redundância e criar um componente react que exiba esse texto. Algo como, o componente say hi, a partir de seu método de renderização, apenas retornarei um parágrafo vazio com o conteúdo, “Olá, meu nome é”. Em teoria, devemos ser capazes de substituir esses dois elementos por algo como, digamos oi componente para o primeiro parágrafo e o segundo componente para o segundo parágrafo. Mas há um problema aqui, e esse é o fato de que, para o primeiro parágrafo, o nome é Bob, e para o segundo, o nome é Joe. As propriedades do React são exatamente o que HTML [inaudível]. Por exemplo, se eu tomar uma nota de link aqui, com algum texto. Eu tenho esse atributo href que posso apontar esse link para algo como google.com. Posso vir aqui e dizer, ok, o nome do primeiro componente é igual a Bob, e o nome do segundo componente é igual a Joe. Temos isso no lugar dentro do componente real, digamos oi no método render, criarei uma nova constante chamada nome, e esse nome será igual a this.props.name. Tendo esse nome extraído, agora posso substituir isso usando a interpolação, o nome da constante que acabei de criar. Se salvarmos agora, podemos ver que para o primeiro componente temos, “Olá, meu nome é Bob”, o valor que enviamos aqui e, para o segundo, temos, “Olá, meu nome é Joe”. Qualquer coisa que esteja armazenada nessas referências de propriedade é uma constante. Não podemos modificar o valor de uma propriedade. Por exemplo, se eu digitar aqui this.props.name é igual a Daniel, e se salvarmos, obteremos o seguinte erro dizendo que não podemos receber um novo valor a uma propriedade. Tenha em mente que as propriedades são constantes. No entanto, o que podemos fazer é usar a destruição do JavaScript, a fim de escrever menos código quando extraímos nossas propriedades. Ao ter essas coisas no lugar, agora posso remover os parágrafos estáticos. Você pode se perguntar se em um aplicativo react posso dizer que há um parâmetro, outra coisa além de uma string, algo como, digamos a idade dos que dizem oi, e a resposta é claro, sim. Posso usar números, booleanos, objetos ou até funções como parâmetros. A única diferença é que, para coisas que não são strings, precisarei usar chaves para enviar um valor. Por exemplo, se eu quiser adicionar idade igual a, e direi em chaves encaracoladas, 25. Se eu enviar este 25 como uma string, dentro do meu componente, isso também será coletado como uma string. É aqui que usaremos chaves curly para enviar um número. No componente dizer oi, essa estrutura, também essa propriedade de idade e aqui adiciona algo, “Minha idade é” e dentro do curly prepara a idade. Se salvarmos agora, veremos que, para o primeiro componente, ele nos diria que, “Minha idade é 25", e para o segundo, nada será impresso pois não enviamos nenhuma idade propriedade. 6. Eventos de interface básica: Nesta lição, vamos dar uma olhada em como os eventos do usuário do React estão funcionando. Nossos componentes não valem muito se não souberem lidar com eventos do usuário. Talvez o evento mais usado seja o clique básico. Digamos que queremos fazer esse botão para nos mostrar um alerta quando clicado. Vou ter aqui uma função chamada show message. Esta função show message terá um alerta dizendo algo como “Olá”. React sabe como lidar com eventos usando propriedades de função. Existem algumas propriedades internas que sabem como lidar com eventos básicos, como onClick. Vou dizer que, para o meu evento onClick, quero chamar essa função que acabei de escrever. Eu direi isso, aquela mensagem de exibição. Depois de salvarmos, agora, se eu pressionar este botão, receberemos o alerta que acabamos de colocar na função show message e teremos mais eventos. Por exemplo, se quisermos interceptar um evento de entrada do mouse, vou adicionar aqui OnMouseEnter. Vou apontar esse evento para isso que OnMouseEnter e, claro, também terei que criar essa função. Por enquanto, aqui vou adicionar uma simples mensagem de registro do console dizendo algo como “isso está no mouse enter”. Agora, se salvarmos e abrirmos o console, veremos que todo o tempo que estivermos pairando o botão obterá essa mensagem impressa no console. Na documentação do React, há uma lista completa dos eventos da interface do usuário que eu suportei. Vou colocar este link na descrição da lição. Temos coisas como clicar duas vezes, passar o mouse, sair do mouse, eventos de teclado, eventos de foco e muito mais. 7. Binding de eventos: Talvez a armadilha mais comum ao selecionar usar os componentes da engrenagem seja a ligação do escopo. O que é essa vinculação de escopo? Digamos que tenhamos a situação atual. Um botão que tem o manipulador onClick e OnMouseEnter. Mais tarde, em nosso aplicativo, temos a necessidade de ter vários desses botões. Nesse caso, quero criar uma nova classe chamada MyButton. Este MyButton apenas retornará um botão que tenha esses manipuladores onClick e OnMouse anexados a ele. Dentro do aplicativo, removerei os manipuladores e, em vez do botão HTML padrão, usarei apenas essa classe MyButton que acabei de criar anteriormente. Como dito, queremos ter dois desses botões em nosso aplicativo. Agora, a parte interessante, será, para poder personalizar esses dois conjuntos de botões, ambos agora estão exibindo exatamente a mesma mensagem. Podemos fazer isso usando uma propriedade. Vou dizer aqui que, para o primeiro botão, a mensagem é igual a alguma mensagem. Para o segundo botão, a mensagem é igual a alguma outra mensagem. Tendo essas propriedades, posso vir aqui agora no alerta e usar em vez da mensagem padrão, algo como this.props.message. No entanto, quando clicarmos no botão, veremos que receberemos esse erro, “Não é possível ler 'props' em indefinido”. Isso ocorre por causa do problema que mencionamos anteriormente sobre essa combinação. A ideia é que quando passamos pelo manipulador, estamos em um contexto diferente e o React não sabe sobre a classe de carga. Para corrigir isso, temos duas opções. A primeira opção, estará aqui para vincular a função ShowMessage a este elemento. Se salvarmos, podemos ver agora que, se eu clicar, receberemos a mensagem do show e, se eu escolher a segunda, receberemos outra mensagem. Mas, de alguma forma, isso é um pouco complicado sempre adicionar a um manipulador que se liga a isso. Podemos usar em nossa vantagem. O fato de que as funções de seta para ECMAScript 6 estão diretamente vinculadas ao escopo pai. Com isso, o que posso fazer é pegar este ShowMessage e torná-lo uma função de seta. Agora posso remover facilmente a ligação e, se eu clicar, as coisas funcionarão conforme o esperado. Como regra geral, sempre que estamos usando as classes ECMAScript 6 para criar seus componentes, sempre use funções de seta para criar manipuladores de eventos. 8. Estado de componente: O estado React está nos permitindo gerenciar a alteração de todos os elementos Componentes do React e atualizar os recursos visuais de acordo. Para introduzir esse conceito de estado nos Componentes do React, vamos simular o comportamento dos usuários que fazem login em um aplicativo. Inicialmente, temos esses dois botões. Nós clicamos em patos terrestres ligados a eles. Se eu clicar neste botão, receberemos a seguinte mensagem de registro do console e, se eu clicar neste, receberemos outra mensagem de registro do console. Isso está acontecendo porque aqui eu tenho onClick definido para usuário conectado e logado no administrador. Dito isto, o que eu quero que aconteça no aplicativo final também é ter exibido aqui o tipo de usuário que está atualmente conectado. Por exemplo, se eu clicar em “Fazer login como administrador” aqui, ele terá que orientar o UserType é admin e se eu clicar em “Login como usuário padrão” aqui, ele terá que guiar o UserType é usuário. Para usar o estado, primeiro temos que declará-lo. Ao usar o Enigma pular seis classes, podemos declarar o estado em espera. A maneira menos verbal é usando atributos de classe. Em algum lugar aqui vou dizer que o estado é igual, e o estado de um Componente React é sempre um objeto que contém as variáveis de estado. Em nosso exemplo, só precisamos de uma dessas variáveis e ela será chamada UserType. Inicialmente, ele terá um valor de uma string none. A segunda maneira de declarar o estado está dentro do construtor da classe e a sintaxe se parece com isso. No final, o resultado é o mesmo que essa função de construtor leva um pouco mais de tempo para escrever. Vou removê-lo e usar a variação inicial. O que posso fazer aqui depois que o estado for declarado é que posso entrar aqui e escrever this.state e direi que quero exibir o UserType. Mesmo que, no momento em que salvamos, veremos que o resultado é exatamente o mesmo. O que podemos fazer com esse mecanismo de estado definido é que aqui, eu posso substituir a mensagem de log do console por um método chamado set state e this.setState é sempre o método que queremos usar para modificar o estado em um Componente React. O que vou fazer é dar a ele um objeto com as coisas que eu quero mudar para esse estado. Aqui, direi que o UserType, quero ser definido como usuário. Para a segunda mensagem de log do console, terei isso.setState e direi que o UserType precisa ser alterado para admin. Vamos ver o que acontece agora depois que eu salvar. Se eu for aqui e pressionar “Fazer login como administrador”, terei que a alteração de texto no tipo de usuário é admin e aqui, se eu pressionar “Login como usuário padrão”, terei que o tipo de usuário é usuário. O que consegui realizar é ter esse estado de uma atualização de componente, mas também os visuais desse componente a serem alterados de acordo. Algumas coisas que eu gostaria de salientar. Primeiro, use sempre o estado definido para alterar o estado. Se fôssemos apenas algo assim. State.UserType é igual a algo. Quando eu salvar, em primeiro lugar, veremos que receberemos um aviso em nosso console, mas também se pressionarmos o botão do usuário, nenhuma alteração acontecerá em nossa tela. Isso está acontecendo porque, mesmo que o estado seja alterado, o método render não foi chamado. Se quisermos que nossa UI também seja atualizada, sempre aqui, tenha algo parecido com isso.setState e o que quisermos mudar. A segunda observação será que sempre temos que inicializar o estado antes de usá-lo. Por exemplo, se eu excluir aqui a inicialização do nosso estado se salvarmos, veremos que obteremos uma caixa de erro informando que não podemos usar algo como UserType até que esse estado não seja inicializado. Finalmente, o terceiro, this.setState mescla esse parâmetro com o estado atual, ele não substitui o estado atual. Basicamente, o que isso significa é que aqui, no estado inicial, se eu tiver uma nova variável de estado de x definida como cinco, quando vou chamar LoginUser ou LoginAdmin, este estado definido e eu darei um novo valor para o UserType. Somente esse tipo de usuário será alterado. O x inicial será definido como cinco e nenhuma alteração será feita e então nós o teremos. Esses são os primeiros passos, mas também as primeiras armadilhas que você encontrará ao usar o React SetState. 9. Estilos: O escopo desta lição é ver como podemos usar o CSS para estilizar nossos componentes React. Ao final das lições, queremos ser capazes de construir componentes que pareçam quadrados e que podemos especificar qual cor de fundo esse quadrado deve ser. Como uma configuração inicial, eu já tenho aqui o quadrado da classe, um componente que retorna apenas uma div e nos obtém uma propriedade de texto, e esse texto é exibido na tela. A primeira coisa que queremos fazer é anexar um arquivo CSS a este index.js. Para isso, irei aqui e criarei um novo arquivo. Este arquivo será salvo como index.css. O material interessante no React, é o fato de que podemos importar para cada arquivo alguns arquivos CSS que precisamos lá. Aqui, posso dizer que quero importar e, da pasta atual, importar, index.css. Só para ver que tudo está funcionando, irei aqui e vou pegar o atributo HTML. Vou dizer que quero que uma borda cinza de pixels brancos seja anexada a ela. Agora, se dissermos, podemos ver que basicamente o index js e o index css agora estão vinculados, e os estilos do CSS são aplicados no meu arquivo index.js. Sabendo disso e tendo como objetivo final, componentes como este, voltarei ao CSS de índice e aqui criarei uma classe chamada square. Começarei a listar as propriedades CSS que precisarei para fazer com que nossas divs pareçam com as da imagem. Primeiro, precisarei adicionar uma borda de preto de um pixel. Depois disso, direi que a altura da linha do nosso texto é de 100 pixels. Além disso, a largura de nossos componentes é de 100 pixels. Também vou precisar de alinhamento de texto, definido para o centro. Finalmente, precisaremos de um pouco de margem de 10 pixels. Este quadrado de classe nos dará o layout básico para nossos componentes. Agora, se entrarmos no CSS de índice, o que podemos fazer é vir aqui e dizer que className é igual. Vou dizer que quero que essa div tenha uma classe de quadrado. Se salvarmos, veremos que agora nossas divs também obtiveram as propriedades CSS listadas nesta classe. Uma coisa que eu gostaria de salientar é o fato de que aqui eu usei o className para atribuir uma classe CSS a um atributo HTML. Isso ocorre porque no mundo JS já temos a classe como palavra-chave. Em circunstâncias normais, você usaria um className para atribuir classes CSS a tags HTML. Ainda assim, nosso exemplo não está completo. Seria bom poder dizer que este é um quadrado vermelho e este é amarelo. Para isso, usaremos os instyles do React. Em um componente React, é possível ir e definir um atributo de estilo que recebe como parâmetro, um objeto que contém esses instilos desse componente. Agora vou dizer aqui algo como, o estilo é igual. Digamos que a cor inicialmente seja vermelha. Se salvarmos e voltarmos em nosso aplicativo, agora você verá que ambos os nossos quadrados agora têm um texto definido como vermelho. Mas o interessante é que podemos mapear esse valor para o valor de uma propriedade. Posso vir aqui e dizer que a cor é igual a vermelho. Para este, a cor é igual a amarelo. Finalmente, podemos alterar o valor inicial do vermelho aqui para this.properties, e direi a cor. Se salvarmos, veremos que, para o primeiro quadrado, a cor é vermelha. Para o final, a cor, é amarela. Para defini-lo como uma cor de fundo, vou ter aqui para escrever, esta é uma cor de fundo, e CamelCase a cor funcionou. Se salvarmos, finalmente veremos nossa saída desejada. Como conclusão, lembre-se de que podemos anexar arquivos CSS aos nossos componentes React e podemos estilizar esses componentes ou usando o className e anexar uma classe CSS específica a ele. Ou usando estilos em linha com esse atributo de estilo para adicionar mais flexibilidade ao nosso estilo. 10. Como usar o objeto de crianças: Olá e seja bem-vindo. Há grandes chances de você ter ouvido falar sobre esses dados para crianças antes. Em sua essência, as sondas que as crianças são usadas quando você tem um componente react como esta galeria. Você deseja usar dentro dele o conteúdo HTML via declaração de componente recebe. Por enquanto, temos uma galeria de imagens vazia. Se eu quiser adicionar algum conteúdo aqui, digamos que essa tag de parágrafo simples e este parágrafo seja renderizado em nosso componente de galeria. Eu posso ir e escrever dentro de aparelhos encaracolados, isso que sustenta seus filhos e feito. Temos isso funcionando. Claro, substituímos este texto, esquecemos a imagem e temos nosso gato pessoal na galeria. Mas o React também sabe como exibir vários elementos filhos, não apenas um. Ninguém pode nos impedir de adicionar mais uma foto porque você nunca pode ter fotos suficientes. Se atualizarmos, teremos uma nova imagem a bordo. Se você der uma olhada nos documentos do React js, verá que na verdade existe esse objeto filho que nos dá acesso a um conjunto de métodos. Pode ser uma boa ideia verificar mais tarde todos esses métodos vêm aqui. Por exemplo, se você quiser mostrar quantos elementos filho seu componente possui, você pode usar o método count. Para não ter que escrever o tempo todo reagir a essas crianças, adicionarei o objeto children como uma importação separada. Agora vou criar um novo parágrafo com algum conteúdo e aqui usar children.count e passá-lo, o que queremos contar? Após a atualização, podemos ver agora que temos na tela também o número de crianças. Se quisermos forçar nosso componente de galeria apenas a receber uma criança, podemos usar apenas crianças e assim por diante. Mas talvez o método infantil mais útil seja o mapa que o usa, podemos passar por todas as crianças e mapeá-las para o nosso elemento de retorno. No nosso caso, poderíamos dizer algo como crianças, esse mapa mais essa função anônima. Levará uma criança de cada vez e retornará o que ela deve ser exibida. Por enquanto, a saída é exatamente a mesma, mas a coisa legal é que agora podemos controlar esses elementos. Por exemplo, se quisermos que nossa biblioteca permita apenas imagens como crianças, podemos dizer aqui, se o elemento desse tipo, não for igual a imagem, então lance um novo erro. Por enquanto, tudo é o mesmo de antes, mas se eu adicionar na galeria, digamos h1, bem, vamos ter esse erro, teremos que excluir isso por enquanto só para ter todo o código funcionando novamente. Outra coisa para a qual podemos usar o map é manipular os elementos compartilhados não apenas para restringi-los. Por exemplo, se uma imagem não tiver um atributo title, gostaríamos de adicionar um padrão. Esse parâmetro de elemento é do tipo via componente. Podemos dizer aqui algo como se não houver elemento que sustenta esse título, então elemento que adereça esse título é igual apenas ao gato. Vamos receber esse erro agora. Bem, você pode se lembrar que a prop acabou via componente somente leitura. Felizmente, podemos andar por aí usando o elemento clone. Vamos atribuir esse elemento a um clone de si mesmo. Mas em um elemento de clone react, também podemos passar um segundo parâmetro para configurar novas propriedades. No nosso caso, definirei o título para ser apenas um gato, e devemos estar prontos para ir. Quando vou salvar, veremos que, quando inspecionarmos esse elemento, também obtemos essa aparência padrão da API de título. Espero que você tenha gostado desse programa para os tutoriais do aplicativo. Se você tiver dúvidas, sinta-se à vontade para perguntar nos comentários abaixo. Sou Daniel e te vejo na próxima vez. Saúde. 11. Crie um jogo com o React 1: Olá e seja bem-vindo. Meu nome é Daniel e serei seu instrutor para este prático exemplo de VRGS. Nosso escopo para este tutorial será construir esse jogo muito simples de pedra, papel, tesoura. Neste jogo, temos dois jogadores, o vermelho e o azul. Quando colocamos o botão “Executar jogo”, nosso jogo mostrará uma animação embaralhada e selecionará aleatoriamente um dos elementos totalmente disponíveis. Com base no que é selecionado para cada jogador, nosso aplicativo decidirá qual dos jogadores é o vencedor. Vamos começar a trabalhar. No modelo inicial deste projeto, trabalho na instalação do NPM. Se você não fez isso antes, você pode ver nos links para este episódio, um guia sobre como configurar seu ambiente. Depois que a instalação do NPM estiver concluída, podemos digitar o NPM start e devemos ter nosso aplicativo em funcionamento. Vamos dar uma olhada no que atualmente temos no código inicial. Primeiro, o arquivo index.js, que só renderiza nosso aplicativo. Juntamente com ele, temos este aplicativo, CSS, que contém os estilos para o nosso aplicativo. Agora, dado o fato de que este é um curso ReactJS, não discutiremos muitos detalhes sobre como os estilos CSS foram construídos. Somente quando necessário, lidaremos com as partes CSS que são importantes para nossa aplicação. A parte mais importante é esse aplicativo que arquivo JS, que servirá como ponto de entrada para o nosso aplicativo. Por enquanto, ele apenas renderiza um componente React simples que tem apenas uma div vazia. A primeira coisa que vamos enfrentar é a criação dessas duas cartas de jogador. Se pensarmos um pouco sobre eles, eles são componentes sem estado, que dependem de duas propriedades, da cor do jogador e do símbolo. Com isso em mente, voltarei ao código e criarei um novo componente sem estado. Este componente sem estado será nomeado cartão de jogador. Inicialmente, nossa carta de jogador será apenas uma div vazia com um nome de classe definido como cartão de jogador. Esse nome de classe já está definido no CSS do aplicativo e mostra a renderização básica de nossos cartões. Agora, com esse componente sem estado criado, posso voltar ao método de renderização e, aqui, adicionar dois novos componentes do cartão de jogador tipo. Agora, depois de salvarmos e a página for atualizada, podemos ver no lado direito os dois novos componentes criados. Como dissemos anteriormente, nossas cartas de jogador dependem de duas propriedades. Eles estão dependendo da cor e também do símbolo. Com as novas propriedades declaradas, definirei a cor do primeiro cartão como vermelho e seu símbolo para papel. Para o segundo, definirei a cor para azul e o símbolo para rock. Para garantir que tudo esteja bem, voltarei para o componente do cartão do jogador. Aqui, vou exibir a propriedade symbol. Depois de salvarmos, podemos ver agora que nossos componentes também têm os símbolos dados. Você pode estar se perguntando por que o segundo componente tem seus textos escritos de cabeça para baixo. Bem, isso ocorre porque dentro do arquivo CSS do aplicativo, temos uma regra especial que discutiremos no final do próximo episódio. Se voltarmos ao nosso exemplo final, cada um desses cartões deve ser colorido na cor correspondente. Esta é uma ótima oportunidade para usar os estilos inline do React. Para isso, criarei um novo objeto chamado estilo, e dentro dele, definirei o plano de fundo como igual ao que recebemos do parâmetro de cor. Finalmente, na instrução return do método render, atribuirei o estilo da div para ser igual ao objeto de estilo que acabamos de criar. Agora, depois de salvarmos, podemos ver que temos um cartão de jogador colorido em vermelho e o outro colorido em azul. 12. Crie um jogo com o React 2: Olá, e seja bem-vindo de volta. Na primeira parte, adicionamos os elementos básicos para o nosso jogo. Vamos agora fazer nosso jogo selecionar um símbolo aleatório. Para conseguir isso, primeiro precisamos dizer ao jogo, quais são todos os símbolos disponíveis? Vou no aplicativo principal e adicionarei um construtor padrão que, por enquanto, só faz uma super bobina com as propriedades padrão. O próximo passo será adicionar campos de símbolos sob essa referência. Ele apontará para uma matriz que contém todos os símbolos, rocha, papel e tesoura disponíveis gratuitamente . Também precisaremos de um botão para iniciar o jogo. Vou na renderização principal aqui, adicione este botão com o texto Executar jogo. Também adicionarei um método de jogo de execução que inicialmente bem só tem um registro de console simples com o texto iniciar o jogo. Esse método será atribuído ao evento on click do botão. Depois de salvarmos, se eu abrir o console, veremos que toda vez que pressionarmos o botão, teremos essa mensagem aparecendo no console. Ter o conjunto no lugar. O próximo passo lógico será ensinar nosso jogo como fazer elemento aleatório no clique inferior. Basicamente, precisamos gerar um índice aleatório e tirar o elemento correspondente dessa matriz. Primeiro, criarei o índice aleatório e darei a ele um nome de índice. Para gerar o número aleatório, usarei Math.Random, e multiplicaremos isso pelo número máximo de símbolos no nosso caso, três. Também usaremos Math.FLOOR para garantir que não obteremos números como 2,5 ou 1,3 ou qualquer coisa que não seja um número inteiro. Com esse índice aleatório construído, podemos simplesmente ir agora e fazer um log de console desses, esses símbolos e de índice. Agora, se atualizarmos a página, quando pressionarmos o botão, obteremos um elemento aleatório depois disso, outro, outro e assim por diante. Vamos colocar esses símbolos aleatórios na exibição agora. Teremos que substituir esse valor estático e também este, temos algo como o elemento aleatório gerado aqui. Este é um exemplo perfeito para usar o estado dos componentes. Primeiro, substituirei isso por estes estados PlayerRed, e também para este, vou escrever esses estados, PlayerBlue. Esses dois valores de estado serão definidos no método do jogo Executar. Dado o fato de que temos que lidar com propriedades de estado, teremos que usar isso que setState e passá-lo um objeto. Dentro desse objeto, direi que o PlayerRed é igual a esses símbolos e, como índice, vou colar toda essa fórmula. Vamos reutilizar exatamente a mesma fórmula, mas desta vez para o PlayerBlue. Excluiremos e adicionaremos o código e depois de salvarmos, veremos que recebemos um erro. Isso ocorre porque aqui, estamos tentando acessar algo do estado e ainda não criamos esse estado. Isso é muito fácil de consertar. Vou entrar no construtor e um guia que esse estado é igual a um objeto vazio e com este conjunto no lugar, voltarei para a janela do jogo e agora veremos que toda vez que pressionarmos o botão Executar, obtemos um símbolo aleatório exibido em nossa tela. Vamos dar outra olhada na versão final do nosso jogo. Aqui, temos esses bons ícones para os símbolos e não o texto estático. Voltando ao código na pasta pública, temos essa pasta de imagem que contém os três ícones de símbolos. Todos eles têm uma extensão png. Para construir isso em nosso projeto, usarei os estilos em linha da pasta de propriedades de imagem de fundo. Aqui, vou definir que o URL será a pasta de imagem, mais o símbolo correspondente e mais a extensão do arquivo de png. Removeremos o código formal e agora, se salvarmos e executarmos o jogo, você verá que também temos esses ícones na tela. Você pode se perguntar por que essa segunda imagem é girada 180 graus. Bem, isso é por causa dessa propriedade CSS que eu adicionei aqui e que define que, para o segundo item desse tipo, devemos ter uma escala CSS e flip CSS como um filtro. 13. Crie um jogo com o React 3: Conseguimos a sorte de nossa aplicação. Nosso jogo tem agora um layout básico, sabe desenhar alguns símbolos aleatórios e também como mostrar os ícones correspondentes para os símbolos. Uma coisa que poderíamos fazer a seguir é mostrar essas animações embaralhadas quando o botão é pressionado. Existem várias técnicas que podemos usar para conseguir isso, mas para o bem do nosso exemplo, vamos escolher o JavaScript puro. Em JavaScript, temos dois horários principais de funções. Primeiro, temos o setInterval e, segundo, o setTimeout. Para ambos. A ideia principal é que eles executem uma função específica após algum tempo. Damos a eles uma função para executar e o atraso para aplicar a esta função. A principal diferença entre eles é que setTimeout executará que dá uma função apenas uma vez. Enquanto isso, setInterval o executará até ser cancelado. Dado o fato de que, em nosso exemplo, esse efeito de nitidez é feito de vários porcos aleatórios usarão a função set interval. Dito isto, o que devemos fazer agora é voltar ao nosso código. Primeiro, pego toda essa parte que gera os símbolos aleatórios e envolva-a em uma função e usarei essa função com o setInterval. Vou definir um intervalo de 100 milissegundos, o que significa que há disfunção será executada a cada 100 milissegundos até ser cancelada. Depois de salvarmos, se colocarmos o botão de execução do jogo, veremos a animação em ação. Ainda assim, as coisas ainda não estão completas. Um problema que enfrentamos agora é que nossa animação não está parando. Por enquanto. Vou pará-lo manualmente atualizando a página, precisamos encontrar uma maneira de interromper a execução dessa função de forma programática. Se voltarmos à documentação, descobriremos essa função integral clara que podemos usar combinada com uma referência a um intervalo definido específico. Sabendo disso, o plano será assim. Vamos deixar a função ser executada por 40 vezes e depois disso, usaremos o intervalo claro para cancelar a execução de nossa função. Primeiro, voltarei para a fonte. Aqui, criarei uma nova variável chamada contador. Este contador começa com o valor de zero em um novo jogo. Toda vez que essa função é executada, esse contador é incrementado. Em seguida, precisaremos de uma referência ao nosso intervalo. Para isso, definirei uma nova variável chamada meu intervalo. Como você pode ver, ele apontará para o setInterval. Depois disso, usarei uma declaração para verificar se nosso contador atingiu um nível acima de 40 e, em caso afirmativo, direi limpar o intervalo do meu intervalo. Depois disso, quando a página for atualizada, quando começamos de novo, o jogo verá que nossa animação vai parar após 40 rodadas. No último passo, devemos ensinar nosso jogo como decidir o vencedor. Para isso, introduziremos um novo valor ou para o estado chamado vencedor e definiremos inicialmente para uma string vazia. A decisão será tomada em uma nova função chamada de lado. Esta função será chamada depois de limpar o setInterval, dado o fato de que temos que lidar com variáveis de estado, usaremos o método de estado de assistência e diremos que o vencedor deve ser isso.DecideWinner. Fora dessa função, obteremos o resultado do nosso jogo. Começaremos usando uma declaração destrutiva para extrair o valor do jogador azul e vermelho do jogador para fora do estado. Inicialmente, verificaremos se o jogador vermelho é igual ao jogador azul, caso em que retornaremos que temos um resultado de dupla. Em seguida, verificarei se o jogador vermelho não é o vencedor. Sendo uma declaração de log, vou colar o código. Mas basicamente, vamos apenas verificar aqui cada um dos três casos que podem deixar o jogador vermelho com o vencedor. Nesse caso, teremos que o jogador vermelho é o vencedor. Finalmente, se não tivermos um resultado de dupla e o jogador vermelho não for o vencedor, é seguro assumir que o jogador azul ganhou o jogo. Agora, tudo o que nos resta fazer é entrar no método aleatório. Aqui em um parágrafo, irei exibir a variável de estado para o vencedor e também fechar o parágrafo. Nosso jogo deve estar pronto para fazer um test drive. Se executarmos o jogo, ele selecionará para o papel do jogador alvo, para o jogador azul. Ele nos dirá que o jogador vermelho acabou de ganhar. Isso concluiu nossa aplicação. Neste exemplo, vimos em ação coisas como componentes básicos do React, manipuladores de eventos ou como usar funções de temporização JavaScript com o React. Obrigado por assistir e espero que você tenha gostado. Codificação feliz e te vejo da próxima vez.