React Web App “Correspondência de pares de filmes”

Vou compartilhar o progresso que alcancei enquanto estudava atualmente com a Academy Xi.
Estou estudando este curso há aproximadamente dois meses.
Criei um site de portfólio usando HTML e CSS e também criei um aplicativo de horóscopo diário que renderiza dados de API públicos com JavaScript. Para este projeto, desenvolvi uma aplicação web com dados de API usando a biblioteca React, que chamei de “Matching Movie Pairs”. Este é um jogo em que o usuário percorre as imagens do filme para encontrar um par correspondente.

Os requisitos para este projeto da seguinte forma:

・Use o gerador create-react-app para iniciar meu projeto
・ O aplicativo deve ter uma página HTML
・ Deve haver 3 rotas
・ Deve incorporar dados da API

O que aprendi ao longo do projeto:

Embora eu tenha aprendido um conhecimento básico de JavaScript nos projetos anteriores, o Vanilla JavaScript basicamente lidava com programação baseada em funções. No entanto, com o React você pode precisar lidar com componentes de classe ou componentes funcionais dependendo de sua demanda e requer uma compreensão firme dos conceitos do React, como; “componente” que desempenha um papel de classe ou função, “estado” que mantém o estado do objeto, propriedades (“props”) compartilhadas entre componentes, “ganchos” que podem ser mais dinamicamente manipular o estado em componentes funcionais e “JSX ” usado para exibição no aplicativo em React. Para este projeto, tentei colocar tudo o que aprendi neste aplicativo.
Além disso, pela primeira vez, implementei uma função de autenticação e um banco de dados em nuvem com firebase.

URL do aplicativo:https://ryoocht.github.io/MatchingMoviePairs/
Mais detalhes sobre o código:https://github.com/Ryoocht/MatchingMoviePairs

Procedimento de desenvolvimento e configuração:

1. Renderizando dados da API
Neste projeto, “The Movie DB” é usado para adquirir informações de 20 filmes para cada gênero.
2. Construção lógica do cartão correspondente
・ Selecione 10 filmes com imagens de 20 dados de filmes recuperados, depois duplique-os, crie um array em um estado embaralhado e exiba-o.
・Prepare um array com o mesmo comprimento que o array de filmes e preencha com 0 para todos os valores. Altere cada valor da matriz para verificar se a carta pressionada pelo jogador é virada ou o valor corresponde.
Status da correspondência => (padrão: 0, clicado: 1, correspondido: 2, não correspondido: 3)
Status do cartão => (padrão: -1, clicado: índice (id), não correspondido: -2)

Além disso, o número de índice do primeiro cartão pressionado é armazenado em outra variável, comparado com o valor do cartão pressionado mais recentemente e, com base no último valor retornado, o nome do elemento em JSX é inserido pelo resultado da instrução switch .

3. Autenticação (inscrever-se, fazer login, sair)
O Firebase Authentication é usado para autenticação. Para implementar a autenticação, as funções de autenticação, como o login instalado no componente firebase, são reunidas como um contexto e, envolvendo seus componentes filhos, a função de autenticação pode ser invocada a partir do componente filho usando “useContext” desestruturando suas funções.

4. Exiba a pontuação do jogo e conecte-se ao banco de dados
As pontuações totais são exibidas quando o usuário conclui o jogo.
Existem 2 funções que são invocadas quando um componente é montado para manipular partituras são criadas como um contexto, que se vincula ao banco de dados para adicionar/obter dados de registro do usuário.
I. Uma função que adiciona dados ao banco de dados quando o Score Board é montado
II. Uma função que recupera e exibe todos os dados de pontuação mantidos pelo usuário conectado.
Ambos chamam uma função dentro de “useEffect” e especificam uma dependência a ser renderizada novamente quando o estado mudar.

Qual foi o mais desafiador:

・ Criação de lógica de cartão correspondente
Certifique-se de comparar o primeiro cartão pressionado com o próximo cartão pressionado e altere o estado do cartão. Cartas que combinam uma vez não devem reagir quando pressionadas na próxima vez. Um após o outro, como não comparar o terceiro cartão com o segundo cartão, criou um problema, e o trabalho de repeti-lo continuou.

・ Uso de useContext
Eu usei para autenticação e gerenciamento de pontuação desta vez, mas demorou para entender e usar.

・ Uso do armazenamento do Firebase
Foi bastante difícil obter o tempo dos dados a serem adquiridos e armazenar e usar os dados no estado.