Aprender e entender React - o tutorial prático

Aqui serão apresentados os temas que serão abordados adiante, e a motivação por trás deste curso será discutida.

Há inúmeros frameworks de UI para JavaScript – por que deveria ser o React? Além da popularidade incontestável desta biblioteca, existem também algumas razões mais profundas que favorecem o React.

Vamos configurar o ambiente de desenvolvimento nesta lição e em um piscar de olhos, criaremos nosso primeiro aplicativo React usando npm create vite.

Depois de termos criado um aplicativo React "fresco" na última lição, o objetivo aqui é entender a estrutura desse aplicativo e explicar como o React pode ser incorporado em um site.

Um pequeno lembrete sobre var vs. let/const.

A desconstrução permite extrair elementos de forma direcionada de objetos e arrays. Uma análise detalhada revelará muitas possibilidades de aplicação que tornam o código JS mais elegante e compacto.

Funções são essenciais no JS e até agora foram declaradas e definidas apenas pela palavra-chave function. O ES6 introduz uma forma elegante e curta de escrever que torna o código mais legível e oferece uma solução para um problema irritante com this.

Em NodeJs, os módulos têm sido usados desde o início, porém inicialmente era exclusivo do formato de módulo CommonJs com require. Desde o ES6, há uma definição de módulo no padrão e novas palavras-chave import/export. Atualmente, este formato é suportado por quase todas as bibliotecas de JS (novas) e o NodeJs também consegue lidar com ele nas versões mais recentes.

Com JSX, você descreve a interface de usuário de um componente e integra expressões JS nele. O arquivo de projeto do vídeo contém o código final desta seção do tutorial.

Componentes próprios do React podem ser facilmente escritos usando funções que retornam JSX.

Esta lição explica como os dados e expressões JavaScript podem ser integrados no JSX.

Sem um estado que possa mudar, dificilmente é possível implementar um aplicativo significativo. No React, normalmente o useState é utilizado para isso. Esta lição apresenta esse hook e explica seu uso.

Props são utilizados para passar dados para componentes filhos. Aqui é explicado como isso ocorre e no que se deve prestar atenção.

Quando as props mudam dinamicamente, a função de renderização correspondente do componente é chamada novamente.

Aqui será explicado como o aplicativo de lista de tarefas será estruturado. O vídeo inclui um arquivo de projeto que contém o código final desta seção do tutorial.

Quando um componente filho deseja comunicar algo ao componente pai, isso é feito através de uma propriedade de retorno de chamada (callback).

As tarefas pendentes devem ser concluídas em algum momento. Aqui discutimos como isso funciona no código.

A aparência de uma UI é sem dúvida importante. É por isso que estou explicando aqui como isso funciona com a biblioteca Emotion e como usar a propriedade className com ela. Além disso, também abordarei o atributo style, com o qual é possível estilizar cada elemento separadamente em detalhes.

Através da filtragem da matriz de afazeres, os afazeres podem ser divididos em dois grupos.

Claro que também é preciso ser capaz de excluir tarefas a fazer. Aqui é explicado como isso funciona através da filtragem de arrays.

Até agora, envolvemos sempre os componentes em DIVs. Mas em certos casos, isso também pode ser evitado.

Agora as coisas estão a ficar interessantes: as tarefas a fazer podem ser facilmente guardadas de forma persistente na memória do navegador e, é claro, também podem ser recarregadas, para que sobrevivam ao recarregamento da página.

Com o useEffect é possível integrar efeitos colaterais. Montar um componente também pode ser tratado com esta função.

Pequeno resumo sobre nosso aplicativo de lista de tarefas e últimas melhorias.

A aplicação do reprodutor de vídeo é criada com create vite e explica como a aplicação deve ser estruturada. O arquivo de projeto anexado ao vídeo contém o código final para o reprodutor de vídeo.

Com o atributo ref, é possível fazer referência a elementos do DOM e acessá-los com useRef. Aqui estamos fazendo isso com o elemento de vídeo.

Estamos criando o reprodutor de vídeo real, que já tem botões para reproduzir, pausar e parar.

Uma vez que nunca precisamos de reproduzir e pausar ao mesmo tempo, combinamos ambos num só botão.

Os próprios controles do elemento de vídeo controlam o vídeo da mesma forma, o que leva a que o nosso estado do botão de Play/Pause não seja ajustado adequadamente. Vamos corrigir isso usando manipuladores de eventos no elemento de vídeo.

Poderemos também modificar o volume através de um controle separado.

O salto para uma posição qualquer no vídeo (Seek) pode ser surpreendentemente fácil de realizar, simplesmente definindo a propriedade currentTime.

O comprimento do vídeo só é conhecido depois de carregar os metadados do vídeo, por isso temos que esperar pelo evento correto.

A lista de reprodução é implementada por uma lista, que pode ser implementada com o elemento HTML select.

Estamos a usar useEffect aqui para reagir à alteração da propriedade src e reiniciar o estado do leitor de vídeo.

A lista de reprodução é transformada de entradas fixas em uma matriz.

Agora vamos entrar na edição da lista de vídeos: vamos adicionar a adição de entradas de vídeo.

O que é adicionado deve poder ser removido. Fazemos isso de maneira semelhante ao aplicativo de lista de tarefas, por meio de filtragem.

A playlist não só deve servir como uma lista de marcadores, mas também reproduzir automaticamente os vídeos em sequência. Isso será realizado nesta lição.

Para os impacientes: botões para o próximo e vídeo anterior.

Um tratamento especial para o primeiro e o último vídeo será implementado: os botões de Próximo e Anterior devem ser desativados conforme necessário.

Agora vamos salvar e carregar a nossa lista de reprodução. Isso é feito de forma análoga ao aplicativo de lista de tarefas no armazenamento local do navegador.

Os vídeos usados como exemplo no aplicativo Video Player podem ser encontrados em sua versão original (todas com licença CC Attribution, consulte os respectivos sites):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

Por exemplo, o Hooks useJsonFetch- são usados para explicar como você pode escrever suas próprias funções de Hook.

A alteração de estado com o setter de useState pode ser complicada. Mas com useImmer, não há mais problema.

A IU será construída mais rapidamente e responderá mais rapidamente às entradas do utilizador, se não forem feitas chamadas desnecessárias às funções de renderização. Com memo, é possível evitar que os componentes sejam renderizados quando as suas props não mudam.

Com useCallback, é possível evitar a renderização desnecessária de componentes filhos quando são usadas props de Callback.

Os cálculos complexos dentro das funções de renderização devem ser executados apenas quando necessário. Com useMemo, os resultados desses cálculos podem ser armazenados em cache levando em consideração as dependências.

Aqui eu resumo os resultados do curso e dou sugestões sobre o que os participantes devem assistir depois do curso.