ReactJS [Link]

ReactJS
Prof. Sérgio Assunção Monteiro

Apresentação

Você vai aprender sobre os conceitos e os elementos fundamentais

para desenvolver aplicações WEB com a biblioteca ReactJS. Essas
aplicações são de altíssima qualidade no sentido de proporcionar uma
experiência de uso muito agradável para usuários de aplicações web e
aplicativos para dispositivos móveis.

Propósito

O ambiente de desenvolvimento utilizado aqui é o Windows 10. Você

deve instalar o [Link], utilizando a versão LTS, e o gerenciador de
pacotes NPM. Você vai precisar de um navegador web, como o Google
Chrome ou o Mozilla Firefox. Além disso, é ideal que você instale o
editor para os códigos-fonte Visual Studio Code (VSCode ). Os códigos

1 of 137 08/05/2024, 20:16

ReactJS [Link]

dos exemplos desenvolvidos com o VSCode estão disponíveis para

download aqui.

Objetivos

Módulo 1

Introdução e preparação do ambiente

Elaborar diferentes ambientes de desenvolvimento para o React.

Módulo 2

Conceitos básicos do ReactJS

Aplicar a sintaxe por meio da implementação de exemplos.

Módulo 3

React com requisições HTPP/Ajax & React

Hooks
Usar requisições HTTP/Ajax com o novo conceito de React Hooks.

2 of 137 08/05/2024, 20:16

ReactJS [Link]

Módulo 4

Rotas e Redux
Traçar rotas com React Router e o controle da camada de negócio
com React Redux.


Introdução
Não há dúvidas da importância das aplicações web nas nossas
vidas. Aqui, nós vamos estudar a biblioteca React do JavaScript,
mais conhecida como ReactJS. Vamos abordar alguns do
principais problemas que existiam nas aplicações web e mobile
até o desafio que seus criadores tiveram ao idealizar essa
biblioteca. Na sequência, abordaremos assuntos referentes ao
chamado “ecossistema” para desenvolver aplicações em React
por meio da explicação dos conceitos de componentes,
propriedades (props) e estado (state). Dessa forma, teremos um
ambiente bem sedimentado para desenvolvermos nossas
aplicações.

Além de todos esses pontos, também vamos realizar requisições

HTTP em APIs web e consumir dados de uma API de forma
nativa mediante a utilização de Ajax. Também vamos conhecer
uma função do React chamada de Hook para tratar os dados

3 of 137 08/05/2024, 20:16

ReactJS [Link]

recebidos e nos prevenir contra os possíveis efeitos colaterais

que as requisições assíncronas podem trazer à aplicação.

Por fim, apresentaremos os conceitos de roteamento, que é a

maneira utilizada pelo React tanto para manipular interfaces e
componentes por meio de rotas quanto para gerenciar melhor a
camada de negócio, de forma centralizada, com o React Redux.
Ao adquirir esse conhecimento, você vai aumentar as suas
chances de se destacar em um mercado que cada vez mais
demanda por profissionais nessa área.

4 of 137 08/05/2024, 20:16

ReactJS [Link]

1 - Introdução e preparação do ambiente

Ao �nal deste módulo, você será capaz de elaborar diferentes ambientes de desenvolvimento
para o React.

Elementos fundamentais do ReactJS

Neste trabalho, vamos conhecer alguns dos principais elementos do
ReactJS. Na prática, vamos desenvolver os aspectos motivacionais para
utilizarmos essa biblioteca no objetivo de criar aplicações de alta
qualidade.

Neste vídeo, apresentaremos alguns dos principais elementos do

ReactJS, como o uso de componentes, natureza declarativa e
vinculação unidirecional, além de também abordarmos a JSX.

Modelo baseado em componentes

O React é uma biblioteca JavaScript para criar interfaces de usuário.
Desenvolvida pelo Facebook, ela possui código aberto e é mantida por
uma imensa comunidade de desenvolvedores individuais, sendo
utilizada por grandes empresas, como: Netflix, Instagram, Tesla,
Walmart e Airbnb.

Comentário

A manutenção de atualizações da biblioteca facilita a manipulação do

5 of 137 08/05/2024, 20:16

ReactJS [Link]

front-end em páginas web e aplicativos móveis via React Native. O React

trabalha em um modelo que podemos chamar de composicional, ou
seja, o programador precisa enxergar seu ambiente de trabalho, o
aplicativo, a tela ou a página segmentada em diferentes pedaços, que
serão chamados de componentes.

Na imagem a seguir, observe o exemplo de um menu principal de um

aplicativo ou rodapé, um cabeçalho e até uma área de propagandas e
anúncios de uma página HTML.

Exemplo de componentes em uma página ou aplicativo.

Agora, observe o seguinte exemplo:

Componentes em uma página ou aplicativo (Twitter).

Uma forma simples de representar os componentes seria a utilização de

6 of 137 08/05/2024, 20:16

ReactJS [Link]

funções em JavaScript. Veja duas funções isoladas e uma terceira

reutilizando as anteriores.

Javascript 

Natureza declarativa
Uma característica do React é sua natureza declarativa. Além disso, o
React não é recomendado em aplicações que precisem de manutenção
ou mudanças frequentes, tornando o código com alto grau de
complexidade. Observe um código escrito em JavaScript na forma
procedural.

Javascript 

7 of 137 08/05/2024, 20:16

ReactJS [Link]

Na programação declarativa, existe um alto nível de abstração. Um

exemplo seria a linguagem SQL, na qual, em uma consulta a um banco
de dados, o resultado esperado é declarado sem se preocupar com o
resultado em si. Em JavaScript, diferentes funções facilitam esse
processo, por exemplo, percorrer uma lista, tornando o código mais
limpo, previsível e simples de depurar. A título de ilustração, vejamos, a
seguir, o trecho do mesmo código escrito anteriormente no formato
declarativo.

Javascript 

Vinculação unidirecional
O React segue uma forma de fluxo de dados unidirecional também
conhecido como vinculação unidirecional. Em geral, esse conceito
significa que os dados possuem uma e apenas uma maneira de serem
passados para outra parte da sua aplicação.

Comentário

O fluxo de dados unidirecional geralmente obedece à forma de um

componente pai para o seu componente filho. Com isso, o filho
consegue apenas ler dados do pai sem permitir uma alteração dessa
informação no componente pai.

8 of 137 08/05/2024, 20:16

ReactJS [Link]

Os dados armazenados no componente pai são chamados de estado

(states); o valor passado para o componente filho, de propriedades
(props). Caso o filho precise atualizar alguma informação no pai, serão
utilizados ações ou eventos, por exemplo, ao clicar em um botão.
Confira!

Fluxo de dados unidirecional.

Agora, vamos resumir o fluxo de dados unidirecional. Vamos lá!

Dados sempre de cima para

baixo.

Ações ou eventos no sentido de

baixo para cima.

9 of 137 08/05/2024, 20:16

ReactJS [Link]

As propriedades (props) são

passadas apenas de pais para
filhos e não podem ser alteradas.

O estado (state) mantém o

estado interno de cada
componente e pode ser alterado
pelos filhos.

JSX é obrigatório?
A JSX é uma extensão de sintaxe JavaScript cujo emprego não é
obrigatório na codificação. No entanto, a maioria dos programadores
acha prática sua utilização em trabalhos com uma interface dentro do
código JavaScript, permitindo ao React mostrar mensagens mais úteis
de aviso e erro.

Um exemplo de como o JSX facilita nossa codificação pode ser visto no

código adiante. Entretanto, observe primeiramente um código sem a
utilização de JSX.

Javascript 

10 of 137 08/05/2024, 20:16

ReactJS [Link]

Agora, vamos ver o mesmo código reescrito com JSX!

Javascript


O JSX consegue produzir elementos do React que aumentam a

facilidade de manipularmos interfaces. Somado à facilidade de escrita e
compreensão (basicamente, HTML e JavaScript), assim como ao
entendimento dos conceitos de componentes, propriedades e estados, o

11 of 137 08/05/2024, 20:16

ReactJS [Link]

entendimento dos conceitos de componentes, propriedades e estados, o

tempo para se dominar a biblioteca se torna bem curto.

Por fim, graças ao Virtual DOM, o React consegue realizar atualizações

muito mais rápidas que a execução dessas mudanças no DOM real.
Essa otimização o torna muito mais eficiente, evitando problemas
relacionados à complexidade dos processos pelos quais as páginas
reais geralmente são atualizadas.

DOM
O document object model (DOM) é uma interface multiplataforma e
independente de linguagem, que trata um documento XML ou HTML como
uma estrutura de árvore na qual cada nó é um objeto que representa uma
parte do documento.

Atividade 1
A biblioteca JavaScript usada para criação de interface de usuário,
React, tem como uma de suas principais características a natureza
declarativa. Analise os exemplos a seguir em relação à programação
declarativa.

I. HTML
II. XML
III. PHP

Está correto, em relação à programação declarativa, o que se afirma em:

12 of 137 08/05/2024, 20:16

ReactJS [Link]

A I, II e III.

B I e III.

C II e III.

D Somente I.

E I e II.

Parabéns! A alternativa E está correta.

A linguagem declarativa é baseada no aspecto lógico e funcional: ela

descreve o que se faz, e não exatamente como suas instruções
funcionam. Já a linguagem procedural é focada na mudança de estado
de variáveis, o que acontece em PHP.

Ambiente para testes

Aqui, vamos conhecer alguns ambientes onde poderemos testar as
nossas aplicações facilmente. Isso é extremamente útil na prática, pois
otimiza o nosso tempo de desenvolvimento e a demonstração de
resultados parciais para os usuários do sistema.

13 of 137 08/05/2024, 20:16

ReactJS [Link]

resultados parciais para os usuários do sistema.

Para iniciarmos nossos estudos em React, vamos compartilhar duas

ferramentas de edição on-line para testar nossos códigos!

CodePen 

Interface mais simples e algumas limitações na licença gratuita

disponível. Ele, por exemplo, não permite a criação de arquivos
separados para importar e exportar nossos componentes.

CodeSandBox 

Ferramenta muito parecida com a CodePen, a grande diferença

do CodeSandBox é sua capacidade, mesmo com plano gratuito,
de permitir ao usuário criar uma estrutura de pastas e arquivos e,
com isso, manipular seus componentes. Além disso, já possui
templates para React integrados, não sendo necessário
adicionar scripts externos.

Ambas são poderosas ferramentas, possuindo suas peculiaridades. As

duas requerem a criação de uma conta para o melhor aproveitamento,
permitindo salvar o progresso de seus códigos. Por conta disso, vamos
detalhar como criar projetos com ambas as ferramentas.

Os dois ambientes são boas opções. No nosso caso, escrevemos e

disponibilizamos a maior parte do nosso conteúdo no CodePen. Ao
longo deste estudo, iniciaremos a configuração do Visual Studio Code
com os códigos-fonte dos exemplos aqui publicados.

Neste vídeo, apresentaremos alguns ambientes de testes que são muito

14 of 137 08/05/2024, 20:16

ReactJS [Link]

Neste vídeo, apresentaremos alguns ambientes de testes que são muito

úteis na prática, a fim de identificarmos algum problema e termos uma
noção mais clara se, de fato, o desenvolvimento do sistema está
caminhando para atender às necessidades dos usuários do sistema.

Roteiro de prática
Vejamos o passo a passo para usar o CodePen!

Inicialmente, configuraremos nosso ambiente clicando em Start Coding.

Página inicial do CodePen.

Agora, acesse o painel de configurações clicando em Settings.

Acessando painel de configuração.

Na aba JS (1), selecione, em JavaScript Preprocessor, a opção Babel (2).

Em seguida, em Add External Scripts/Pens, adicione os links externos
respectivamente representados pelos números (3) e (4) e confirme
clicando em Close (5), como a imagem seguinte apresenta.

15 of 137 08/05/2024, 20:16

ReactJS [Link]

Acessando painel de configuração.

A partir de agora, temos um ambiente para testar nossos códigos em

React.

Agora, observe um passo a passo de como deixar esse ambiente

CodeSandBox pronto para nosso conteúdo!

Primeiro, clique em Create Sandbox.

16 of 137 08/05/2024, 20:16

ReactJS [Link]

Página inicial do CodeSandBox.

Em seguida, escolha o template React.

Escolhendo nosso ambiente desejado: React.

Nosso ambiente já foi criado! Diferentemente do CodePen, aqui temos:

(1)

Painel de estrutura de arquivos.

(2)

Dependências utilizadas que

podem ser alteradas de acordo
com a necessidade de alguma
versão específica.

(3)

Links externos como um

17 of 137 08/05/2024, 20:16

ReactJS [Link]

repositório e a utilização de
Google Fonts.

(4)

Painel de edição do arquivo

selecionado.

(5)

Área do resultado final, um

navegador que exibirá nosso
código compilado.

Verifique a imagem seguinte para observar mais detalhes.

Ambiente CodeSandbox.

18 of 137  08/05/2024, 20:16

ReactJS [Link]


Faça você mesmo!
Considere o ambiente de desenvolvimento on-line [Link] que
vimos anteriormente. Agora, observe a seguinte saída:

Resultado da execução do codesandbox.

Agora, escreva um código que gere exatamente esse resultado no

[Link].

Digite sua resposta aqui

Chave de resposta

Ferramentas para desenvolvimento

19 of 137 08/05/2024, 20:16
ReactJS [Link]

Ferramentas para desenvolvimento

Os ambientes de testes são muito úteis para identificarmos erros e,
rapidamente, realizarmos ajustes, além de se apresentarem como uma
forma interessante de envolver os usuários finais com o
desenvolvimento do sistema. No entanto, para trabalharmos em uma
versão robusta, precisamos de ferramentas com mais recursos, como
veremos agora.

Neste vídeo, apresentaremos algumas das principais ferramentas para

desenvolver aplicações robustas no ReactJS.

[Link]
Vejamos agora alguns softwares necessários para a compilação de
nossos códigos React e algumas ferramentas que aceleram a
codificação, a depuração e a análise das nossas aplicações. De início,
saiba que a instalação do [Link] é obrigatória, mas a da extensão de
navegador e do editor é opcional.

Seguindo a documentação na página oficial, o [Link] é um runtime

JavaScript de código aberto e projetado para o desenvolvimento de
aplicações escaláveis de rede. O nosso intuito é explicar como se deve
instalar a versão para o nosso ambiente de desenvolvimento. Veja!

20 of 137 08/05/2024, 20:16

ReactJS [Link]

Página oficial do [Link] para realizar o download.

Atenção: Lembre-se de sempre baixar a versão LTS, como mostrado na

imagem a seguir!

Download concluído.

Vamos prosseguir agora com a instalação, atentando para as opções

selecionadas nestas imagens:

21 of 137 08/05/2024, 20:16

ReactJS [Link]

selecionadas nestas imagens:

Tela de instalação do [Link].

Escolha do local de instalação do [Link].

22 of 137 08/05/2024, 20:16

ReactJS [Link]

Tela de configuração do cliente.

Confirme as instalações de ferramentas necessárias.

23 of 137 08/05/2024, 20:16

ReactJS [Link]

Instalação do [Link] concluída.

Depois de concluir a instalação, abra um prompt de comando e digite:

node. Se tudo funcionar corretamente, será exibida a versão do
“[Link]”, que foi instalada no seu sistema operacional, como visto a
seguir.

Prompt de comando confirmando instalação do [Link].

Para continuar a configuração, siga a sequência:

24 of 137 08/05/2024, 20:16

ReactJS [Link]

Tela de instalação do [Link] confirmando a instalação da versão 16.14.2.

Extensão no navegador (opcional)

Algumas ferramentas podem ser de grande ajuda no desenvolvimento
de nosso material: uma delas é a extensão React Devtools, disponível
para Google Chrome e Mozilla Firefox. Não pretendemos detalhar o seu
uso, mas, ainda assim, sugerimos a leitura de sua documentação para
um melhor entendimento do assunto.

O React Devtools permite ao programador inspecionar uma árvore de

componentes React no navegador, verificando as propriedades (props) e
o estado (state) de seus componentes. Para isso, instale a extensão no
Google Chrome via Chrome Web Store (ou no Mozilla Firefox por meio
do Firefox Browser Add-ons), conforme podemos ver nas imagens
seguintes.

Instalando a extensão React Developer Tools no Google

Chrome.

25 of 137 08/05/2024, 20:16

ReactJS [Link]

Instalando a extensão React Developer Tools no Mozilla

Firefox.

Logo que a instalação for concluída, atualize a página. Caso o ícone

fique azul, isso significa que se trata de uma página criada com React.
Observe!

Extensão React Developer Tools instalada no Google Chrome.

Editor Visual Studio Code

O Visual Studio Code é um editor gratuito de códigos desenvolvido pela
Microsoft e possui versões para Windows, Linux e MacOS. Atualmente,
ele suporta quase todas as principais linguagens, como: HTML, C# e
Rubi.

Vamos utilizá-lo neste material, mas fique à vontade para usar qualquer
outro editor de sua preferência! Faremos agora um breve passo a passo
de sua instalação.

26 of 137 08/05/2024, 20:16

ReactJS [Link]

Download na página oficial do VSCode.

Download concluído (versão Windows).

27 of 137 08/05/2024, 20:16

ReactJS [Link]

Depois de baixar o arquivo, basta fazer a instalação no padrão “Next-

Next”. A versão final do Visual Code é dada conforme a seguir.

Tela Inicial do VSCode.

Atividade 2
O React é uma biblioteca do JavaScript muito útil no desenvolvimento
de aplicações. Vimos que, para desenvolver uma aplicação na máquina
local, precisamos instalar o [Link]. Nesse sentido, assinale a
alternativa correta que descreve o que é o [Link].

A É a linguagem JavaScript.

28 of 137 08/05/2024, 20:16

ReactJS [Link]

B É a biblioteca React do JavaScript.

C É um ambiente de desenvolvimento (IDE).

É um conjunto de componentes que podem ser

D
utilizados nas aplicações React.

É um ambiente em tempo de execução que permite

E desenvolver aplicações JavaScript sem a necessidade
de um navegador.

Parabéns! A alternativa E está correta.

De fato, o [Link] é essencial para o desenvolvimento de aplicações

JavaScript sem a necessidade de utilizar o navegador WEB. Além disso,
ele oferece a possibilidade de instalarmos recursos bastantes úteis para
criar aplicações mais sofisticadas.

Primeiro App React

Agora, estamos preparados para desenvolver o nosso primeiro
aplicativo no React. Apesar de ser bem simples, ele vai ser uma

29 of 137 08/05/2024, 20:16

ReactJS [Link]

importante referência para os projetos mais avançados que faremos

adiante.

Neste vídeo, explicaremos como desenvolver sua primeira aplicação no

React. Com o tempo, é natural que você avance no processo de
desenvolvimento, mas, neste momento, terá um projeto que servirá de
referência para os demais, auxiliando na consolidação do
conhecimento.

Create React App

Após a instalação do [Link] e de todas as dependências necessárias
para iniciar o desenvolvimento de nossos projetos, vamos criar nossa
primeira tela com o React. Para isso, utilizaremos uma ferramenta que
facilitará a estrutura inicial do projeto, configurando nosso ambiente
com funções mais recentes do JavaScript e otimizando nosso aplicativo
para produção.

Criaremos uma pasta para organizar nossos aplicativos React e, ao abrir

nosso terminal, no modo administrador, executar o comando:

npx create-react-app my-app

Em seguida, você deve confirmar todo o processo:

30 of 137 08/05/2024, 20:16

ReactJS [Link]

Instalando o pacote create-react-app e criando nosso primeiro projeto React.

Veja, na sequência, as instruções apresentadas:

Após a instalação concluída, vamos seguir as instruções.

Para iniciar nosso servidor React, digite o seguinte comando:

npm start

Entenda melhor:

Informações sobre a tabela. Imagem: Executando npm start.

31 of 137 08/05/2024, 20:16

ReactJS [Link]

Informações sobre a tabela. Imagem: Executando npm start.

Para as configurações anteriores, temos o seguinte resultado:

Compilação concluída.

Na próxima imagem, temos a primeira execução de uma aplicação

React. Confira!

Nossa primeira aplicação React em execução.

Se você conseguiu chegar até aqui sem erros, parabéns! Caso tenha tido
algum problema, revise os itens anteriores e verifique se o processo de
instalação apresentou alguma falha, refazendo todo o procedimento de
acordo com o que mencionamos.

32 of 137 08/05/2024, 20:16

ReactJS [Link]

Atividade 3
Para criarmos uma aplicação local do React, tivemos que digitar o
comando:

npx create-react-app my-app

Nesse sentido, assinale a alternativa correta que explique o que faz o

comando npx.

É uma versão mais simples do React para desenvolver

A
aplicações mais rápidas.

É um ambiente de desenvolvimento visual para criar

B
aplicações no React.

C É o programa responsável por compilar o JavaScript.

É um programa que pode executar pacotes ou

D
executáveis que estão na pasta node_modules.

E É uma outra forma de fazer referência ao [Link].

Parabéns! A alternativa D está correta.

33 of 137 08/05/2024, 20:16

ReactJS [Link]

O “npx” é um uma ferramenta que faz parte do [Link]. Quando

instalamos o [Link], também instalamos o npx. O objetivo dele é
executar os arquivos executáveis na pasta node-modules de uma
aplicação ou um pacote específico.

2 - Conceitos básicos do ReactJS

Ao �nal deste módulo, você será capaz de aplicar a sintaxe por meio da implementação de
exemplos.

Hello, world!
O exemplo “Hello, world!” é clássico para o aprendizado de qualquer
linguagem de programação, uso de bibliotecas ou de ferramentas

34 of 137 08/05/2024, 20:16

ReactJS [Link]

computacionais de um modo geral. O mesmo ocorre com o React.

Faremos um exemplo desse tipo e, assim, vamos nos familiarizar
melhor com a biblioteca.

Neste vídeo, explicaremos como implementar o programa Hello, world!

no React. Esse é um passo fundamental para entender como a
biblioteca funciona e, assim, criar as bases para o desenvolvimento de
aplicações mais complexas.

Elementos básicos do primeiro APP

Neste estudo, abordaremos os principais conceitos básicos para se
criar o famoso Hello, world!. Também é importante aprendermos a
utilizar binds a fim de manipular eventos, listas, chaves e alguns
exemplos de formulários.

Utilizando nosso ambiente de testes visto anteriormente, teste o código

e veja o resultado. Acesse o código on-line no site [Link]
ou utilize o QR Code em seu celular (localizado no canto inferior direito)
para acompanhar.

35 of 137 08/05/2024, 20:16

ReactJS [Link]

Hello, world!

Temos aqui nosso primeiro método React, o render(), que possui a

seguinte sintaxe:

[Link](element, container[, callback]);

Sua função é renderizar um elemento do React no DOM, no contêiner

passado por parâmetro, e retornar uma referência ao componente,
podendo haver um retorno nulo caso o componente não possua estado.
A atualização no DOM passa por um processo de comparação,
refletindo o elemento do React mais recente.

Comentário

Se a callback opcional for fornecida, ela será executada depois de o

componente ter sido renderizado ou atualizado. Esse algoritmo de
comparação é chamado de Diffing.

Trata-se da forma que os desenvolvedores do React encontraram para

resolver um problema: manipular o DOM. Uma cópia do DOM é criada
em memória (Virtual DOM) e sempre atualizada com o DOM real,
embora essa atualização passe por um processo denominado
reconciliação. Observe!

36 of 137 08/05/2024, 20:16

ReactJS [Link]

Aplicando o processo de reconciliação.

Caso os novos dados sejam iguais aos anteriores, o Virtual DOM vai
comparar as estruturas anteriores e confirmar que não houve alteração,
evitando um novo pedido de renderização no DOM do navegador. Esse
processo melhora a performance e o desempenho do navegador.
Sempre que houver uma atualização no DOM, ou seja, uma mudança na
árvore, o React precisa descobrir como realizá-la de forma mais
eficiente.

Uso do JSX
Vimos anteriormente uma prévia da utilização de JSX. Neste conteúdo,
daremos detalhes sobre suas principais características, iniciando com a
sintaxe de uma declaração de variável:

const element = <h1>Hello, world!</h1>;

Observamos como é possível tornar o código bem mais simples e fácil

de entender. Este exemplo declara duas variáveis e usa o método
render() novamente:


37 of 137 08/05/2024, 20:16
ReactJS [Link]

Javascript 

Veja agora o endereço [Link] do código on-line e a

imagem do resultado obtido.

Primeira imagem de variáveis em JSX.

Podemos usar qualquer expressão em JavaScript dentro das chaves em

JSX. Se quiséssemos usar uma expressão matemática, como o valor de
PI, por exemplo, junto a uma função que retorne um campo de outra
variável, teríamos o resultado gerado na imagem a seguir e disponível
no endereço [Link]

38 of 137 08/05/2024, 20:16

ReactJS [Link]

Segunda imagem de variáveis em JSX.

Também podemos usar JSX como expressões. Sempre depois de suas

compilações, os valores ficarão disponíveis para serem utilizados em
um laço condicional ou de repetição ([Link] Confira!

Javascript 

39 of 137 08/05/2024, 20:16

ReactJS [Link]

Veja na imagem a seguir o resultado do código apresentado.

Terceira imagem de variáveis em JSX.

Como não passamos nenhum parâmetro na função getGreeting(), a

própria função retornou com o elemento da linha 18. Mas como
podemos fazer para entrar na linha 14, isto é, na condicional verdadeira
que criamos?

É simples. Basta passar um objeto do tipo usuário nessa função com

esta sintaxe:

getGreeting({ firstName: "João", lastName: "Roberto" })

40 of 137 08/05/2024, 20:16

ReactJS [Link]

O resultado pode ser visto a seguir ([Link]

Quarta imagem de variáveis em JSX.

Por padrão, o React DOM utiliza o camelCase como convenção ao dar

nomes de propriedades em vez dos nomes de atributos do HTML; logo,
usaremos className no lugar de class e tabIndex em vez de tabindex.

Se uma tag está vazia, podemos fechá-la imediatamente, o que é

igualmente utilizado em XML:

const elemento = <img src={[Link]filUrl} />;

A tag JSX pode conter elementos filhos:

Javascript

41 of 137 08/05/2024, 20:16
ReactJS [Link]

Javascript 

Renderizando elementos
Em nossos exemplos anteriores, a marcação <div id=”root”> sempre foi
utilizada para renderizar nossos elementos. Com o que aprendemos até
agora, já sabemos que os elementos React são imutáveis, ou seja, uma
vez criados, não é possível alterar seus elementos filhos ou atributos.
Além disso, só conseguiremos atualizar a interface se criarmos um novo
elemento React e enviarmos por meio do render().

O React atualiza no DOM apenas os dados novos. Veremos isso na

prática com este código:

42 of 137 08/05/2024, 20:16

ReactJS [Link]

Exemplo de React DOM.

Inspecionando a página, vemos que a única mudança ocorre na

marcação <h2>, comprovando o que estudamos anteriormente: o React
DOM faz toda essa comparação.

Atividade 1
Considerando o React, avalie as afirmativas:

I. Um elemento descreve o que será renderizado em tela. Um

componente é uma função ou uma classe, contendo opcionalmente
parâmetros que retornam um elemento.
II. Algumas das vantagens de se utilizar o React são o aumento de
performance da aplicação devido ao uso de Virtual DOM e a capacidade
de renderização tanto no lado cliente quanto no do servidor.
III. States e props são objetos JavaScript que armazenam informações
que influenciam a exibição de um componente. Ambos são definidos
pelos próprios componentes, podendo ser repassados como
parâmetros de uma função.

Agora, aponte a alternativa correta.

A I, II e III.

B II e III.

43 of 137 08/05/2024, 20:16

ReactJS [Link]

C III.

D I e III.

E I e II.

Parabéns! A alternativa E está correta.

Apenas os states são definidos pelo próprio componente como se

fossem variáveis locais de uma função. Já as props são definidas fora
do escopo do componente, sendo repassadas como parâmetros de uma
função.

Estruturação de componentes
Podemos considerar que o componente é o coração do React. Um
componente constitui um bloco de código independente e reutilizável,
permitindo dividir toda a interface do usuário em pedaços menores, os
quais, por sua vez, aceitam entradas chamadas de props e retornam
elementos React.

O React trabalha com dois tipos de componentes: funcionais e de

classe. Vamos iniciar o nosso estudo sobre esses componentes

44 of 137 08/05/2024, 20:16

ReactJS [Link]

funcionais.

Neste vídeo, apresentaremos quais são os tipos de componentes do

React e como podemos utilizá-los na prática.

Componentes funcionais
O componente funcional basicamente é uma função JavaScript que
retorna um elemento React responsável por descrever o que será
apresentado na aplicação. Além de poder receber parâmetros,
comumente chamados de props, esse componente, por padrão, não
possui gerenciamento de estado do componente, necessitando dos
Hooks para isso.

Observe o exemplo de código de um componente funcional que recebe

props como parâmetro.

Javascript 

Componentes de classe
São classes do ES6 (JavaScript) que também retornam um elemento do
React. Veja algumas de suas funções:

45 of 137 08/05/2024, 20:16

ReactJS [Link]

React. Veja algumas de suas funções:

Gerenciam o próprio estado.

Possuem grande nível de poder

dentro da aplicação.

Herdam os chamados métodos

de ciclo de vida do React.

Lidam com partes lógicas.

Manipulam eventos por

intermédio de métodos que
podem ser chamados de
qualquer lugar do componente
ou em seus filhos.

Observe um exemplo de um componente do tipo classe que, ao final,

gera o mesmo elemento React do exemplo anterior:

Javascript 

46 of 137 08/05/2024, 20:16

ReactJS [Link]

Atividade 2
Um termo bastante comum no React é o nome componentes. No
entanto, os componentes podem ter comportamentos e estruturas
muito distintas. Nesse sentido, assinale a alternativa correta a respeito
de qual tipo de componente devemos utilizar quando o nosso objetivo é
trabalhar com generalizações de comportamentos a partir da
propriedade herança.

A Nesse caso, devemos usar componentes de classe.

É uma situação típica do uso de componentes

B
funcionais.

Uma vez que o objetivo do React é desenvolver

C
aplicações visuais, devemos usar componentes gráficos.

47 of 137 08/05/2024, 20:16

ReactJS [Link]

Essencialmente, uma aplicação React executa do lado

D do servidor, por isso devemos usar componentes de
serviço.

É um exemplo de como trabalharmos com componentes

E
genéricos que se adaptam para qualquer tipo de entrada.

Parabéns! A alternativa A está correta.

O cenário descrito na questão é um caso típico do uso de componentes

de classe em que temos a possibilidade de utilizar os recursos da
programação orientada a objetos, como a herança. Dessa forma,
aumentamos as chances de ter um código mais padronizado e com
menos chances de ocorrências de vulnerabilidades.

Renderização e manipulação de
componentes
Só utilizamos até agora exemplos cujas funções retornam sempre um
elemento React representando tags do DOM; porém, ao se definir uma
classe, resta a dúvida: como é feita a passagem do parâmetro?

Neste vídeo, explicaremos como é possível renderizar e manipular

componentes no React.

48 of 137 08/05/2024, 20:16

ReactJS [Link]

Renderização de componentes
Vamos usar a classe criada anteriormente (BemVindo ), definindo um
valor para o name com a seguinte sintaxe:

const element = <BemVindo name="Rodrigo"/>;

Reescrevendo nosso código em [Link] temos:

Javascript 

49 of 137 08/05/2024, 20:16

ReactJS [Link]

Para o React, a classe <BemVindo> com o atributo que foi passado

(name=”Rodrigo”) é chamada de props. Para usar esse atributo, é
preciso usar a palavra reservada “this”. Veja agora o resultado do
código!

Exemplo de atributo props.

Nossa classe do exemplo utilizou apenas um atributo ([Link]). Se

tivéssemos outros, teríamos esta sintaxe:

const element = <BemVindo name="Rodrigo" age="20" country="Brasil"/

>;

O React passaria como props o seguinte valor: {name:'Rodrigo', age:'20',

country:'Brasil'}

Em nossa classe, acessaríamos conforme o campo necessário.

50 of 137 08/05/2024, 20:16

ReactJS [Link]

Atenção!

O React DOM utiliza o camelCase na convenção dos nomes, tratando

componentes com nomes iniciados com letras minúsculas como uma
tag do DOM e aqueles iniciados com maiúsculas como componentes.
Desse modo, é necessário que ele esteja no escopo ao criarmos nosso
componente do tipo classe.

Prefira sempre escolher componentes funcionais quando precisar exibir

apenas alguma interface, já que sua construção será mais simples,
principalmente se reescrevermos essa função com arrays functions. Os
componentes de classe são mais recomendados em tarefas mais
complexas que manipulam eventos, precisam lidar com alguma lógica e
gerenciam o estado.

Manipulação de componentes
Já sabemos criar componentes, mas precisamos agora entender como
manipulá-los. Configurando uma composição de componentes, por
exemplo, uma página, teremos formulário, botões, barra de menu e
outros elementos que serão componentes em nosso projeto.

No próximo exemplo, montaremos uma página simples com cabeçalho,

coluna de navegação, coluna principal, topo e rodapé.

51 of 137 08/05/2024, 20:16

ReactJS [Link]

Estrutura de uma página.

Vamos iniciar pelo componente Header, que será um <header> com

nome de classe ‘cabecalho’, contendo ainda um <h1> de nome de classe
‘boasVindas’ com um texto “Bem-vindo” e uma props com um atributo
name. Esse componente também possui um <h2> de nome de classe
‘titulo’ com texto “Manipulando Componentes”, conforme aponta o
código seguinte.

Javascript 

Em seguida, há outro componente chamado Navegação. Trata-se de

uma <div> de nome de classe ‘navegacao’ e um texto “Barra de
Navegação”, veja:

52 of 137 08/05/2024, 20:16

ReactJS [Link]

Javascript 

Continuando, vemos que o próximo componente, cujo nome é Principal,

possui uma <div> com nome de classe ‘principal’ e uma “Coluna
Principal” como texto incluso.

Javascript 

Finalizando os componentes, de forma isolada, existe o Rodapé , um

<footer> com classe nomeada de ‘rodape’ que contém um parágrafo
com texto “Rodapé”.

Javascript 

53 of 137 08/05/2024, 20:16

ReactJS [Link]

Até aqui não houve nenhuma novidade em relação à criação desses

componentes. Mas como fazer para chamar um componente dentro do
outro? Observe a sintaxe:

Javascript 

Com mais de um componente, é preciso encapsulá-los dentro de uma

tag DOM (no exemplo, <div>) e obedecer à seguinte sintaxe:

Javascript 

Deve-se criar um componente Topo, conforme o diagrama inicial, que é

a junção dos componentes Header e Navegação. Lembre-se de que a
Header possui uma mensagem de boas-vindas com o nome do visitante
(um parâmetro, ou seja, uma props). Eis o código:

Javascript 
54 of 137 08/05/2024, 20:16
ReactJS [Link]

Já temos toda a estrutura escrita. Contudo, qual delas será utilizada

para substituir o elemento “root” em nosso ambiente de testes?

Como solução, criaremos um componente reunindo todos os

componentes criados ([Link]

Javascript 

Agora, confira a saída esperada!

55 of 137 08/05/2024, 20:16

ReactJS [Link]

Exemplo de página.

No entanto, como se consegue incluir o componente de um mesmo

nome sem acrescentar um novo nó? Podemos utilizar fragmentos, o que
nos permite agrupar uma lista de componentes sem adicionar nós
extras ao DOM. Veja a sintaxe:

Javascript 

Ou de uma forma mais simplificada:

Javascript


Verifique agora o resultado do nosso exemplo anterior com a utilização

56 of 137 08/05/2024, 20:16

ReactJS [Link]

Verifique agora o resultado do nosso exemplo anterior com a utilização

da forma simplificada de fragmentos ([Link]

Exemplo de página com fragmentos.

E inspecionando o código compilado a seguir, o que confirma a

eliminação da <div>:

Código compilado.

Sempre é recomendado dividir componentes em unidades menores,

simplificando a codificação e criando componentes reutilizáveis que
podem ser utilizados em outros aplicativos ou projetos. No início, tal
processo será demorado, mas ter esses componentes disponíveis
tornará seus futuros trabalhos mais rápidos, limpos e prontos para sua
produção.

Comentário
57 of 137 08/05/2024, 20:16
ReactJS [Link]

Comentário

É possível vermos a utilização de props passando o nome do usuário

como atributo ou carregando esse valor na classe <header> com o this.
Ao empregarmos o this, usamos o valor da props renderizado naquele
instante.

Outro importante conceito é que os componentes React agem sempre

com funções puras em relação ao seus props. Função pura é aquela que
não altera suas entradas, retornando sempre o mesmo resultado para as
mesmas entradas. Veja um exemplo de uma função pura:

Javascript 

De maneira oposta, uma função impura é aquela que altera a própria

entrada na qual o valor pode variar. Observe:

Javascript 

O problema dessa função está no valor da variável global c, que possui

58 of 137 08/05/2024, 20:16

ReactJS [Link]

um estado compartilhado e está fora do escopo da função, não havendo

previsão do seu resultado. O estado compartilhado acaba provocando
uma dependência de tempo.

Entretanto, as interfaces são dinâmicas, mudando conforme o tempo e

as ações do usuário. Mas como não ir contra essa regra de função
pura? Veremos a resposta conhecendo o conceito de estados (state) e o
ciclo de vida dos componentes.

Atividade 3
No desenvolvimento de uma aplicação do React, constantemente,
precisamos trabalhar com componentes. Inclusive, é comum utilizarmos
a estrutura:

class MinhaClasse extends [Link]

Nesse sentido, selecione a opção correta a respeito dessa estrutura

sintática.

A classe Component herda característica da biblioteca

A React que, por sua vez, amplia o comportamento da
classe “Minha classe”.

Quando uma classe herda de [Link], ela

B
pode padronizar comportamentos e propriedades.

59 of 137 08/05/2024, 20:16

ReactJS [Link]

Trata-se de uma notação funcional de componentes cujo

C objetivo é estabelecer o padrão visual dos componentes
gráficos da classe “Minha Classe”.

Trata-se do uso de uma classe especial de Interface

D
chamada de [Link]

É um exemplo típico de como podemos usar diversas

E classes simultaneamente na linguagem de programação
React.

Parabéns! A alternativa B está correta.

Logo de início, devemos nos lembrar que o React não é uma linguagem
de programação, e sim uma biblioteca do JavaScript, essa sim é uma
linguagem de programação. Sobre a notação sintática em si, o que está
ocorrendo é que a classe “MinhaClasse” está herdando as propriedades
e os comportamentos de [Link]. Isso é muito importante
para construirmos aplicações padronizadas e com as melhores práticas
de programação.

Estado e ciclo de vida dos

componentes

60 of 137 08/05/2024, 20:16

ReactJS [Link]

Como já vimos, os componentes são elementos que fazem parte da

base estrutural de uma aplicação do React. Agora, vamos estudar os
estados que eles podem assumir e o ciclo de vida que é essencial para
entendermos as engrenagens de um App React.

Neste vídeo, apresentaremos os estados que um componente React

pode assumir e quais são as fases do ciclo que passam. Isso é bastante
útil na construção das nossas soluções para obtermos melhores
desempenhos, que, para esse tipo de aplicação, é crucial.

States
Enquanto as props são parâmetros passados por funções e imutáveis,
os states são declarados e manipulados dentro dos componentes,
podendo ser editáveis. Para cada modificação no seu valor (setState),
uma nova renderização é feita. Observe!

Modificação do estado de um componente.

Como estudaremos os Hooks somente mais adiante, empregaremos

agora um componente do tipo classe para exemplificar o uso de
estados em React. Criaremos uma aplicação simples com um único
botão incrementando uma variável desse componente.

É importante observar a chamada do construtor da classe. Observe o

código:

61 of 137 08/05/2024, 20:16

ReactJS [Link]

Javascript


Sugerimos verificar isso on-line no endereço [Link] e

acompanhar o resultado, que pode ser visto na imagem a seguir.

Uso de estados em React.

Sempre que precisarmos utilizar valores que serão modificados na

renderização, essas variáveis deverão ser declaradas como atributos no
estado da classe. Vejamos outro exemplo!

Javascript 

62 of 137 08/05/2024, 20:16

ReactJS [Link]

Observe a adição de um método mudarUsuario, que tem como objetivo

alterar o estado por meio das propriedades passadas. Propositalmente,
escolhemos não alterar o sobrenome e a nacionalidade dentro do
método, demonstrando que o React faz uma mesclagem renderizando
apenas os valores que foram atualizados (nome e idade).

Outro método adicionado foi o incremento da idade em uma unidade.

Veja o resultado ([Link]

63 of 137 08/05/2024, 20:16

ReactJS [Link]

Renderização realizada pelo React.

É preciso seguir algumas recomendações ao manipular estados.

Sempre que precisássemos atualizar um estado, intuitivamente
usaríamos o seguinte:

[Link] = [Link] + 1;

Entretanto, isso não renderizará novamente nosso componente: o único

local em que podemos atribuir [Link] é no construtor. Para
atualizarmos seu valor, utilizamos sempre o setState.

Outro problema está na sincronização dos estados; afinal, o React pode

agrupar várias chamadas setStates em uma única atualização na
aplicação. Eis um exemplo de código que pode acabar retornando um
valor diferente devido à utilização de states e props:

[Link]({ numero: [Link] + [Link] });

Uma forma de corrigir seria reescrever o nosso parâmetro como uma

função que, conforme demonstra o código adiante, terá como primeiro
parâmetro o estado anterior e como segundo as propriedades.

Javascript 

64 of 137 08/05/2024, 20:16

ReactJS [Link]

Outra opção é fazer isso com uma notação com arrows functions:

Javascript


Acompanhe os endereços [Link] e [Link]

para verificar que tais recomendações foram seguidas e que os
exemplos anteriores foram reescritos da forma correta.

Ciclo de vida dos componentes

Nosso estudo sobre o ciclo de vida dos componentes pretende
descrever seus métodos e comportamentos, além de apontar quais são
os mais utilizados. Em qualquer linguagem de programação, ciclo de
vida significa o tempo em que uma aplicação, um objeto ou parte de um
código está em execução.

Esse processo sempre começa por uma inicialização, podendo sofrer

alguma alteração e terminando quando ela está “morta”. Os
componentes seguem o mesmo conceito: iniciados quando o

65 of 137 08/05/2024, 20:16

ReactJS [Link]

componente é renderizado, eles serão atualizados sempre que houver a

necessidade e finalizados ao serem removidos da tela. Entenda!

Diagrama do ciclo de vida de um componente React.

Fases do ciclo de vida

O ciclo de vida é dividido em três fases e cada uma contém métodos

que auxiliam na codificação da nossa aplicação, sendo executados no
momento já definido e apropriado para aquele componente.

Descreveremos de forma detalhada cada uma dessas fases!

Montagem 

Na primeira fase, configuramos os estados iniciais (states) e as

propriedades (props) do componente, preparando-o para sua
renderização, isto é, para que ele seja escrito efetivamente no
DOM do navegador e o que será feito após sua primeira
renderização.

Observe agora os seus métodos e, principalmente, a ordem na

qual eles são chamados quando instanciamos um componente:

• constructor()

66 of 137 08/05/2024, 20:16

ReactJS [Link]

• static getDerivedStateFromProps()

• render()

• componentDidMount()

Atualização 

Na segunda fase, o componente React já está no navegador e

aumenta conforme ele recebe atualizações. Essas atualizações
podem ocorrer por meio de novas props ou modificação do seu
estado. Observe seus métodos e a ordem em que são
chamados:

• static getDerivedStateFromProps()

• shouldComponentUpdate()

• getSnapshotBeforeUpdate()

• render()

• componentDidUpdate()

Desmontagem 

Na terceira fase, o componente não é mais necessário, sendo

removido do DOM. Ela possui apenas um único método:

• componentWillUnmount()

67 of 137 08/05/2024, 20:16

ReactJS [Link]

Atividade 4
Os componentes desempenham um papel essencial no uso de uma
aplicação com React. Eles estabelecem comportamentos e fazem uso
de propriedades que padronizam a forma de trabalhar. Nesse sentido,
selecione a opção correta a respeito do ciclo de vida dos componentes
do React.

O getSnapshotBeforeUpdate é executado logo antes de

A a renderização ser confirmada no DOM. Qualquer valor
retornado será encaminhado para o constructor.

O componentWillUnmount será usado para executar

B quaisquer solicitações de rede de saída e para criar
ouvintes de eventos associados ao componente.

O render não é considerado uma função do ciclo de vida

C
e seu uso não é obrigatório.

O componentDidMount é executado após a primeira

D renderização e no local em que todas as atualizações de
estado devem ocorrer.

Para atualizar um estado, utilizamos o método setState

E

68 of 137 08/05/2024, 20:16

ReactJS [Link]

E
dentro do método constructor.

Parabéns! A alternativa A está correta.

O getSnapshotBeforeUpdate realmente é executado logo antes de a

renderização ser confirmada no DOM, mas seu valor retornado é
encaminhado para o componentDidUpdate, sendo útil para capturar
informações do DOM, por exemplo. O ComponentWillUnmount é usado
para cancelar (em vez de criar ou executar solicitações) e destruir
ouvintes de eventos associados ao componente. O render é considerado
uma função do ciclo de vida, sendo, entre eles, o único obrigatório. O
único local onde não devemos executar uma atualização de estados é
dentro do constructor: apenas a atribuição inicial do nosso estado
precisa ser executada no método constructor.

Constructor
Trata-se de um dos principais métodos do ciclo de vida do React.
Embora sua implementação não seja obrigatória, ele é chamado antes
que o componente seja montado, sendo utilizado normalmente para a
atribuição inicial de nossos estados iniciais ([Link]).

Neste vídeo, explicaremos o que é o método especial Constructor do

React e as diversas formas como ele pode ser usado na prática de
acordo com o contexto da aplicação.

69 of 137 08/05/2024, 20:16

ReactJS [Link]

Métodos constructor (props)

Caso seu componente seja uma subclasse de component, deve-se
chamar sempre super (props) no início do código, permitindo, com isso,
a utilização de ([Link]) e evitando erros ou bugs na execução.
Normalmente, ele também é utilizado com binds de outros métodos.
Observe um trecho de código do método construtor:

Javascript 

static getDerivedStateFromProps (props, state)

Método raramente utilizado, é aplicado quando o state possui uma

dependência temporal de props.

Exemplo

70 of 137 08/05/2024, 20:16

ReactJS [Link]

Exemplo

Um componente gráfico que compare seus filhos anteriores e os

subsequentes para decidir quais devem ser animados. Mesmo assim,
uma solução melhor seria utilizar outro método mais simples, como o
componente DidUpdate.

O static getDerivedStateFromProps sempre é executado imediatamente

antes de o método render, ambos ocorrendo na montagem inicial e
sempre que haja alguma atualização. Ele admite dois parâmetros de
entrada (props e state) preenchidos automaticamente pelo React e
retorna um objeto para atualizar o state ou um null, o que indica que não
houve mudança.

render()

Trata-se do único método obrigatório em um componente do tipo

classe. Quando é chamado, ele examina [Link] e [Link],
retornando um elemento do tipo React a ser carregado pelo
componente.

Recomendação

Sempre que um componente for carregado para ser renderizado e a

qualquer momento em que houver uma atualização, esse método será
chamado. Na documentação, aconselha-se que a função render() deva
ser pura, não modificando o state, o que fará com que os componentes
sejam mais fáceis de se utilizar.

Caso precise interagir com o navegador, utilize o método

componentDidMount() ou outros métodos do ciclo de vida. Se o método
shouldComponentUpdate() retornar falso, o método render() não será
chamado.

componentDidMount()

Método chamado imediatamente após um componente ser montado, ou

71 of 137 08/05/2024, 20:16

ReactJS [Link]

Método chamado imediatamente após um componente ser montado, ou

seja, inserido na árvore DOM, sendo chamado o método render() e
ocorrendo a renderização de fato do componente. É um local ideal para
scripts que podem dificultar a renderização da página ou aplicação,
pois, com a tela já renderizada, não haverá bloqueio e travamentos
nesse processamento.

Utilize-o caso precise carregar dados de origem de alguma API externa.

Não se esqueça de liberar esse recurso em componentWillUnmount().

É possível chamar o setState() diretamente nesse método. Entretanto,

embora o estado intermediário do componente não seja visto pelo
usuário, isso adicionará uma renderização extra e tudo ocorrerá antes
de o navegador atualizar a tela, o que pode gerar uma queda de
desempenho, pois o render() foi chamado duas vezes ao final do
processo.

shouldComponentUpdate (nextProps, nextState)

Método que verifica se os valores atualizados do componente precisam

ser novamente renderizados, ajudando na performance em alguns
casos de constantes atualizações. Por padrão, retorna um valor
verdadeiro; se, ao contrário, ele retornar um falso, os métodos render() e
componentDidUpdate() não serão executados.

getSnapshotBeforeUpdate (prevProps, prevState)

Executado antes de a árvore DOM ser renderizada, ele é utilizado para

armazenar valores anteriores do estado do componente após uma
atualização do DOM. Qualquer valor retornado por ele será usado como
parâmetro no método componentDidUpdate().

componentDidUpdate (prevProps, prevState, snapshot)

Executado sempre que um estado do componente é atualizado logo

após a chamada do componentDidMount(). É um local considerado

72 of 137 08/05/2024, 20:16

ReactJS [Link]

ideal para realizar as requisições de rede enquanto as props atuais e as

anteriores são comparadas.

Dica

Quando você precisar atualizar o estado de um componente (setState),

lembre-se sempre de encapsular essa parte do código com algum bloco
condicional, evitando, assim, um loop infinito e gerando renderização
extra sem necessidade, o que afeta a performance do componente.

O último parâmetro vem do retorno do método

getSnapshotBeforeUpdate(), que só será utilizado ao implementarmos
em nosso componente; caso contrário, ele não é definido. Dificilmente,
porém, implementaríamos esse método em nosso componente. Se o
método shouldComponetUpdate() retornar falso, o
componentDidUpdate() não será executado.

componentWillUnmount()

Executado antes de o componente ser destruído, ele é chamado na fase

de desmontagem do componente. Devem ser codificados neste
método:

Toda a limpeza relacionada a

temporizadores.

Alguma dependência de
assinatura gerada no
componentDidMount().

73 of 137 08/05/2024, 20:16

ReactJS [Link]

Logout.

Tokens de autenticação que

precisam ser removidos.

Cancelamento de requisições de
rede.

Atividade 5
A classe [Link] desempenha um importante papel no
desenvolvimento de uma aplicação no React. Entre os diversos métodos
que ela possui, há o método “constructor”. Nesse sentido, selecione a
opção correta sobre o objetivo desse método.

É o único método que pode alterar o estado de um

A
componente.

É usado para agilizar a renderização dos componentes

B
visuais na tela.

74 of 137 08/05/2024, 20:16

ReactJS [Link]

Ele reduz a necessidade de realizar chamadas a outros

C métodos, uma vez que funciona como um gerenciador
do ciclo de vida da classe.

Ele elimina da memória todos os valores de variáveis

D
que não estão sendo mais utilizados pela classe.

Ele estabelece o estado inicial do componente e faz a

E
vinculação com os manipuladores de eventos.

Parabéns! A alternativa E está correta.

O método construtor é uma das bases das classes da programação

orientada a objetos. No caso da biblioteca React, o objetivo dele é fazer
a configuração inicial do componente – por meio da definição dos
valores padrões dos estados que ele pode assumir –, além disso, ele
também faz a vinculação entre os componentes e os manipuladores de
eventos.

75 of 137 08/05/2024, 20:16

ReactJS [Link]

3 - React com requisições HTPP/Ajax & React Hooks

Ao �nal deste módulo, você será capaz de usar requisições HTTP/Ajax com o novo conceito de
React Hooks.

Bind e eventos
Bind é uma ligação que permite alterar o comportamento do this de
determinado elemento. Em um evento, o this refere-se, na maioria dos
casos, ao componente que invocou esse evento. Ele facilita o trabalho
com elementos visuais por meio do uso de listas.

Neste vídeo, explicaremos o conceito de bind no React. A partir dele,

você vai ligar (bind) eventos com funcionalidades.

Bind no React
Para iniciar o nosso estudo sobre bind no React, vamos começar com a
análise de um exemplo de sua utilização em JavaScript!

76 of 137 08/05/2024, 20:16

ReactJS [Link]

Javascript 

Nesse exemplo ([Link] conseguimos criar uma função

exibirContexto que basicamente exibe o this no console (linha 2). Em
seguida, criamos um objeto Usuário com os atributos nome, idade e
nacionalidade.

Note que, se tentarmos acessar os atributos dentro da função

exibirContexto(), haverá um erro, pois eles não existem no contexto da
função. No entanto, utilizando o bind conforme a linha 12 da imagem
adiante, conseguimos acessar os atributos de usuário. Não se esqueça
de utilizar o this!

77 of 137 08/05/2024, 20:16

ReactJS [Link]

Exemplo de bind.

Em React, é possível usar o bind para substituir alguma arrow function.

Reutilizaremos agora parte de um código visto anteriormente, o que
demonstra como sua utilização facilita o entendimento na codificação.
Veja!

Javascript 

Dentro do construtor, criamos uma função bindMudarUsuario (linha 8),

fazendo o bind na função mudarUsuario (11) e passando o this como
parâmetro. Já na linha 23, passamos simplesmente como referência o
[Link] no evento onClick, o que facilita o uso das
funções, conforme aparece em [Link]

Manipulando eventos
Vamos estudar agora como o React manipula eventos. Para isso,
veremos desde como é feita a passagem de uma função para o evento

78 of 137 08/05/2024, 20:16

ReactJS [Link]

veremos desde como é feita a passagem de uma função para o evento

até de que modo é repassado um state.

Basicamente, um evento é o resultado de uma ação.

Quando o usuário clica com o botão esquerdo do
mouse ou pressiona alguma tecla, a aplicação recebe
um evento, um onClick ou um keyEvent, por exemplo.

Comparemos o mesmo evento, mostrando como ele é escrito em HTML

e como o seria em React:

<button onclick="enviarForm()">Enviar formulário</button>

Quando nosso botão (Enviar formulário) for pressionado pelo usuário, o

evento onclick será chamado e a função enviarForm(), executada. Nesse
exemplo HTML, contudo, há um problema: a manipulação de diferentes
eventos.

Os eventos em React são nomeados usando camelCase. É possível

passar uma função no lugar de uma string.

<button onClick={enviarForm}>Enviar formulário</button>

Não estamos chamando o método enviarForm(), e sim uma referência

{enviarForm}. Outra diferença: não podemos impedir o comportamento
padrão do React retornado um booleano falso. Em vez disso, devemos
chamar o preventDefault explicitamente. Por exemplo, em um HTML,
caso precisássemos evitar que uma nova página fosse aberta,
escreveríamos assim:

79 of 137 08/05/2024, 20:16

ReactJS [Link]

escreveríamos assim:

Html


Já em React, isso seria reescrito da seguinte forma:

Javascript 

Note que não utilizamos os parênteses ao chamar a função em onClick.

Caso os colocássemos, assim que a página fosse exibida, a função
seria executada sem clicar no link.

80 of 137 08/05/2024, 20:16

ReactJS [Link]

Para evitar esse comportamento, usemos o preventDefault, cancelando

o comportamento padrão do objeto. Também precisamos realizar uma
ligação com o bind. Confira!

Javascript 

O parâmetro “e” utilizado em handleClick() é um evento sintético. Isso

significa que se trata de um evento específico passado como instância e
acumulado, ou seja, o evento “e” será reutilizado algumas vezes e suas
propriedades serão anuladas após o callback do evento ser acionado e
finalizado.

Outra forma seria por meio de arrows functions que já incorporam o

bind em sua implementação, não havendo a necessidade da utilização
de eventos sintéticos. Observe novamente como podemos reescrever o
código com arrows functions.

Javascript 

81 of 137 08/05/2024, 20:16

ReactJS [Link]

O React define esses eventos de acordo com as especificações do W3C,

garantindo uma compatibilidade entre navegadores. Geralmente, não é
necessário utilizar o addEventListener para adicionar ouvintes a um
elemento no DOM depois que ele é criado. É possível somente definir
um ouvinte quando o elemento é inicialmente renderizado.

Caso precisássemos passar algum parâmetro no evento, bastaria

definirmos dentro da nossa função as entradas necessárias e, por meio
de arrows functions, repassá-las.

Javascript 

82 of 137 08/05/2024, 20:16

ReactJS [Link]

Atividade 1
O React é uma excelente biblioteca do JavaScript para desenvolvermos
aplicações com recursos de interface com usuário (UI). No entanto, há
outras formas de desenvolver aplicações semelhantes, inclusive, no
próprio HTML. Nesse sentido, selecione a opção correta que justifica o
uso do React em relação a outras linguagens e bibliotecas de
desenvolvimento.

Para trabalhar com React, basta conhecer JavaScript e

A
programação orientada a objetos.

A curva de aprendizado para desenvolver no React é

B
muito mais rápida do que no HTML.

O JavaScript torna o trabalho com React extremamente

83 of 137 08/05/2024, 20:16

ReactJS [Link]

O JavaScript torna o trabalho com React extremamente

C simples sendo necessário usar poucos recursos da
biblioteca.

O React oferece recursos para o desenvolvedor ter maior

D
controle e qualidade da aplicação.

Desenvolver uma aplicação no React é muito mais

E
simples do que trabalhar com HTML.

Parabéns! A alternativa D está correta.

O React é uma biblioteca do JavaScript com muitos recursos baseados

em componentes que possuem um ciclo de vida bem definido e na
programação orientada a objetos que oferece muitas ferramentas para
que o desenvolvedor tenha bastante controle da aplicação e, assim,
obtenha alta qualidade na manipulação dos eventos, o que a torna muito
superior ao uso do HTML, por exemplo. Isso inclusive é muito claro na
forma como o mercado possui alta empregabilidade para o
desenvolvedor de React.

Elementos Visuais
Em React, manipular listas se torna uma tarefa bem simples: de forma
idêntica à do JavaScript, pode-se usar as principais funções para auxiliar
na criação de novas listas. Com a utilização do JSX, criar elementos

84 of 137 08/05/2024, 20:16

ReactJS [Link]

na criação de novas listas. Com a utilização do JSX, criar elementos

visuais se torna rápido, mas sempre existirá a necessidade de criar uma
chave (key) em cada elemento, identificando de forma única e evitando
uma perda de performance na renderização desse elemento.

Neste vídeo, explicaremos o passo a passo para construir um formulário

no React por meio da utilização de todos os conceitos que estudamos
até agora.

Listas e chaves
Neste estudo, veremos alguns exemplos e práticas comuns na criação
de listas e suas sintaxes. No primeiro exemplo ([Link]
com o auxílio da função map, geraremos uma lista de elementos <li>
populados por um array de carros.

Javascript 

85 of 137 08/05/2024, 20:16

ReactJS [Link]

Veja a saída esperada:

Exemplo de array.

Outra forma de gerar esses elementos seria, por meio de props, passar
um array com o conteúdo desejado. Também renomearemos as
variáveis, tornando a função mais genérica para qualquer lista de
objetos passados via props. Confira!

Javascript


86 of 137 08/05/2024, 20:16

ReactJS [Link]

Veja que o resultado é o mesmo, porém, uma mensagem de aviso

aparece no console do navegador:

Mensagem no console.

Desse modo, precisamos ter uma chave para cada elemento gerado. No
exemplo a seguir, podemos modificar nossa lista, atribuindo como
chave o próprio valor do elemento. Caso não o faça, o React atribuirá os
índices como chave. O código pode ser verificado neste endereço:
[Link]

Javascript 

87 of 137 08/05/2024, 20:16

ReactJS [Link]

Na maioria das vezes, utilizamos um ID do objeto. Caso não tenhamos

um ID estável para isso, podemos usar o índice gerado na listagem. Mas
use-o como último recurso!

const listaElementos = [Link]((e, index) => <li key={index}>{e}

</li>);

É importante destacar que as chaves são únicas apenas em

componentes irmãos, não precisando sê-lo de forma global, podendo
ser as mesmas na criação de dois arrays diferentes.

Formulários
Veremos agora como o React trata elementos nos formulários,
aproveitando os estados dos componentes e facilitando a manipulação
dos dados nas funções que precisamos compartilhar entre eles.
Observe o exemplo:

Javascript


88 of 137 08/05/2024, 20:16

ReactJS [Link]

Veja, a seguir, a saída esperada!

Exemplo de formulário.

Nesse exemplo, repare que as duas funções que retornam os valores

digitados de nome e idade são idênticas, mudando apenas o campo.
Com isso, podemos utilizar uma prática comum: nomear os elementos
e, dentro do nosso estado, utilizá-los. Confira!

Javascript


Todo elemento possui um nome que podemos definir ao criarmos. No

89 of 137 08/05/2024, 20:16

ReactJS [Link]

estado, podemos utilizá-lo por meio de colchetes, tornando nosso

código bem mais simples ([Link]

Em outro exemplo, utilizaremos dois elementos com comportamentos

um pouco diferentes daqueles utilizados em HTML: TextArea e Select.
Veja!

Html 

O texto no elemento <textarea> é definido por seus filhos. No React,

utilizaremos o atributo value. Já no <select>, geralmente, é preciso
definir o elemento selecionado por padrão. No React, esse valor é
definido no elemento raiz (select), e novamente no atributo value.

Este exemplo emprega os dois elementos ([Link]

90 of 137 08/05/2024, 20:16

ReactJS [Link]

Exemplo de formulário.

Note que há um problema no carro escolhido: o texto que selecionamos

para exibir é a própria chave. Uma solução encontrada foi modificar
nossa função handleCampo, que vai verificar qual é o tipo do alvo
(target) usado. Observando a árvore do elemento, podemos retornar o
valor que precisamos e salvá-lo no estado como textoCarro. Vejamos o
resultado em [Link]

Exemplo de formulário.

Em todos esses exemplos, usamos o conceito de componentes

controlados, no qual o valor é controlado pelo React. No entanto, acaba
sendo cansativo tratar de todos os eventos e inputs.

91 of 137 08/05/2024, 20:16

ReactJS [Link]


Faça você mesmo!
Considere o seguinte trecho de código desenvolvido no [Link]:

Javascript 

O desenvolvedor esperava que fosse exibida uma lista das letras “A”, “B”,
“C”, “D” e “E”. No entanto, o programa não exibiu nenhum resultado.
Corrija o programa, para que ele funcione corretamente.

Digite sua resposta aqui

92 of 137 08/05/2024, 20:16

ReactJS [Link]

Digite sua resposta aqui

Chave de resposta

Ambiente do Visual Studio Code

A partir de agora, vamos utilizar o editor Visual Studio Code. Para isso,
vamos criar um projeto, organizar as pastas e importar e exportar
componentes, bem como utilizar uma API externa, com suas
requisições utilizando Hooks.

Neste vídeo, identificaremos os principais recursos do VS Code para

desenvolvimento de uma aplicação no React. Esse tópico é
extremamente importante, pois estamos lidando com uma das
principais IDEs (ambiente de desenvolvimento integrado) utilizadas no
mercado, o que aumenta bastante as nossas chances de
empregabilidade.

Preparação do ambiente do VS Code

93 of 137 08/05/2024, 20:16

ReactJS [Link]

Usaremos o ambiente criado anteriormente, modificando alguns

arquivos e preparando-o para podermos iniciar o nosso estudo com
requisições. Vamos escolher no Visual Studio Code e abrir a pasta do
projeto criado (my-app). Veja a estrutura dos arquivos!

Ambiente Visual Studio Code.

O script criou uma pasta node_modules na qual estão todos os módulos

necessários para a utilização do React. Na pasta public, em que está a
nossa página inicial ([Link]) que contém a <div id=”root”> sempre
utilizada em nossos exemplos, podemos remover todo seu conteúdo,
deixando apenas uma estrutura básica para exibir nosso componente e
apagando alguns arquivos que não serão usados, conforme imagem a
seguir.

94 of 137 08/05/2024, 20:16

ReactJS [Link]

Pasta public.

Dentro da pasta src fica nosso componente, que está produzindo toda a
dinâmica da logo a girar do React. O arquivo que faz esse efeito é o
[Link], que carrega um único componente, chamado de App, cuja
lógica se encontra inteiramente em outro arquivo: [Link].

Execução de uma aplicação no VS Code

Aqui, já começamos a ver uma diferença em relação aos exemplos
anteriores, pois sempre utilizávamos neles um arquivo único. Abrindo
inicialmente o [Link], veja o código!

Javascript 

Os dois primeiros imports foram utilizados para inserir tanto a logo do

React que gira na página inicial (linha 8) quanto um arquivo CSS. Na

95 of 137 08/05/2024, 20:16

ReactJS [Link]

última linha, definiremos qual função terá acesso por outro componente,
sem nos esquecermos do parâmetro default. Também removeremos os
arquivos que não vamos utilizar. Nosso componente App ficará assim:

Javascript 

No último arquivo a ser modificado, o [Link], identificamos uma

composição de componentes – nesse caso, apenas o App. Verifica-se
novamente a presença de arquivos de estilização ([Link]) e de alguns
para testes e reports, como podemos ver neste código:

Javascript


96 of 137 08/05/2024, 20:16

ReactJS [Link]

Na linha 4, podemos ver como é feita a importação de um componente

seguindo a sintaxe:

import NomeComponente from 'Nome_Arquivo_Componente';

Na linha 7, está salvo o nó da árvore DOM a ser renderizada em nosso

componente. Já na 8 ocorre a renderização. O modo restrito definido
pelo React (linha 9) serve para ativar verificações e avisos adicionais
para os componentes que serão renderizados dentro dele. Tais
verificações são executadas apenas no modo de desenvolvimento.

Removendo os arquivos e os códigos que não vamos utilizar, nossa

estrutura e nosso código final ficam da seguinte maneira:

Estrutura do APP.

Observe o código seguinte!

Javascript


97 of 137 08/05/2024, 20:16

ReactJS [Link]

E, agora, apresentamos o resultado da página:

Uma sugestão para praticar e revisar nossos exemplos: reescreva para o Visual Studio separando as
pastas por seção.

Atividade 2
O VS Code é uma ferramenta muito útil para desenvolver aplicações em
diversas linguagens de programação, incluindo aplicações JavaScript
com React. Ao abrirmos a pasta de uma aplicação, vemos diversos
arquivos e subpastas. Nesse sentido, selecione a opção correta a
respeito do arquivo responsável por registrar as dependências de uma
aplicação no [Link].

A É o arquivo src.

As dependências estão registradas no arquivo

98 of 137 08/05/2024, 20:16

ReactJS [Link]

As dependências estão registradas no arquivo

B
[Link].

Todas as dependências ficam registradas na pasta raiz

C
da aplicação do React.

Podemos encontrar as dependências nos arquivos da

D
pasta public.

O arquivo .gitignore mantém a lista de todas as

E
dependências que uma aplicação React precisa.

Parabéns! A alternativa B está correta.

O arquivo “[Link]” é responsável por registrar todas as

dependências utilizadas por uma aplicação React. Essas dependências
são instaladas por meio do programa npm.

Hooks
Antes de ver como são feitas as requisições HTTP em React,
precisamos estudar uma nova função responsável por oferecer uma
dinâmica diferente, facilitando bastante a manipulação de estados em
nossos componentes sem modificar suas hierarquias: o Hooks. Ele

99 of 137 08/05/2024, 20:16

ReactJS [Link]

permite a quebra do nosso componente em funções menores,

mantendo seus relacionamentos sem a necessidade de utilizar os
métodos de ciclo de vida. Vamos agora conhecer alguns dos principais
Hooks utilizados, o useState e o useEffect.

Neste vídeo, explicaremos como identificar os principais aspectos do

Hooks e como ele agiliza o desenvolvimento de uma aplicação no
React.

Função useState
Quando utilizamos uma classe, definimos no construtor o estado com
[Link] com alguns atributos. Para atualizá-los, usamos dentro da
classe o [Link], passando os valores dos atributos que
gostaríamos de modificar. O React renderiza nosso componente apenas
nos pontos em que eles foram atualizados.

useState é uma função que retorna um par de valores.

O primeiro é o valor atual. Já o segundo se trata de
uma função que, idêntica ao setState, é utilizada para
atualizar, mas sem se mesclar com o antigo valor.

Além de sua sintaxe, observe a seguir como o conceito de

desestruturação de arrays facilita a atribuição dessas variáveis!

Javascript 

100 of 137 08/05/2024, 20:16

ReactJS [Link]

Por convenção, utilizamos sempre um nome para a variável e a função

para modificá-la com set na frente. É possível usar variáveis ou um array
como parâmetro no useState. Para utilizarmos as variáveis, repetiremos
as tags jsx sem a necessidade de utilizar o this. Vamos demonstrar
mais um exemplo de useState, incrementando uma variável ao
pressionar um botão!

Javascript 

101 of 137 08/05/2024, 20:16

ReactJS [Link]

Demonstramos aqui as três formas de utilizar o setValor. Use a notação

com a qual esteja mais familiarizado, como função ou arrow function.

Função useEffect
Esta é outra função muito utilizada e que serve para executar efeitos
colaterais em nossos componentes funcionais. Isso pode parecer
confuso, mas já usamos tal conceito nos componentes de classe.
Combinados, os métodos componetDidMount, componentDidUpdate e
componetWillUmont definem o useEffect.

Comentário

A grande vantagem da utilização do useEffect é que, diferentemente dos

métodos que cuidam das atualizações dos componentes de classe,
esses efeitos não bloqueiam o navegador ao efetivarem a atualização
da tela, pois a maior parte deles não precisa ocorrer de forma síncrona.

No uso do useEffect, vimos que são gerados efeitos colaterais: alguns

deles não precisam de limpeza; outros, sim. Os efeitos sem limpeza não
retornam nada na função. Já aqueles que precisam dela retornam uma
função que será executada no momento que aquele componente for
desmontado. Veja sua sintaxe:

Javascript 

102 of 137 08/05/2024, 20:16

ReactJS [Link]

A função que for passada como primeiro parâmetro será executada

quando ocorrer alguma atualização em sua dependência.

Exemplo

Se, na função passada, tivermos uma variável contador, quando essa

variável for modificada, nosso efeito colateral será executado. Caso seja
definido um retorno nesse efeito colateral, ela será chamada quando
essa variável de dependência for destruída.

O segundo parâmetro é um vetor dessas dependências. Quando ele está

em branco, o React entende que todas as variáveis utilizadas na função
estão sendo monitoradas. Caso se queira excluir alguma, aí sim será
preciso explicitar cada uma delas nesse vetor. Segue um exemplo do
uso dessa função:

Javascript


Ao se clicar no botão somar, percebe-se uma demora na atualização do

título da página. Isso ocorre pelo fato de o React esperar a renderização
de toda a tela finalizar para assim executar a função definida dentro do
useEffect, conforme apresentado na imagem a seguir.

103 of 137 08/05/2024, 20:16

ReactJS [Link]

Resultado da execução do código.

Em [Link], modificamos o código para que, após cinco segundos, seja

possível remover todos os componentes da tela e ver o retorno da nossa
função ser executada.

Javascript 

104 of 137 08/05/2024, 20:16

ReactJS [Link]

Se incluirmos o segundo parâmetro da função com um vetor vazio, o

nosso título não será atualizado ao clicar em somar.

Javascript 

Veja, a seguir, a saída esperada!

Resultado ao aplicar useEffect.

Atividade 3
O Hooks surgiu no React para permitir a utilização dos estados e de
outros recursos sem a necessidade de criar classes. Analise as
afirmativas a seguir em relação à utilização de Hooks em nossas
aplicações:

I. Hooks são funções que lhe permitem “ligar-se” aos recursos de state e

105 of 137 08/05/2024, 20:16

ReactJS [Link]

ciclo de vida do React a partir de componentes funcionais.

II. O useState é chamado de dentro de um componente de classe para
adicionar states locais a ele.
III. O useState possui mais de um argumento que é basicamente o
estado inicial que queremos atualizar mais tarde com setState.

Está correto o que se afirma em:

A I, II e III.

B I e III.

C II e III.

D Somente I.

E I e II.

Parabéns! A alternativa E está correta.

Hooks são funções que permitem o uso de binds com recursos de state
e ciclo de vida a partir de componentes funcionais.

106 of 137 08/05/2024, 20:16

ReactJS [Link]

Acessando uma API

Vamos falar aqui como se deve consumir uma API externa para realizar
requisições a serviços para acessar e manipular dados.

Neste vídeo, explicaremos como desenvolver uma aplicação no React

que acesse uma API a partir das bibliotecas Fecth API, Axios e JQuery.

Roteiro de prática 1
Inicialmente, você precisa iniciar a prática sobre APIs no React com a
biblioteca Fetch API. Como as requisições de APIs externas são
assíncronas, uma boa prática é tratar dessa função com o useEffect.
Inicialmente, acesse o endereço:

[Link]

Passo 1

Agora, você terá a possibilidade de gerar dados no formato JSON com

diferentes tamanhos e formatos de dados. Em nosso exemplo,
usaremos os dados de 10 usuários com o seguinte formato:

[Link]

Segue parte do JSON.

Json

107 of 137 08/05/2024, 20:16
ReactJS [Link]

Json 

Passo 2

Para fins práticos, usaremos apenas uma variável para salvar os dados
retornados. Com o auxílio de map, percorreremos a lista, associando a
chave da tag <li> para cada ID e preenchendo com os dados que
escolhemos exibir. Para isso, execute o seguinte código:

Javascript 

108 of 137 08/05/2024, 20:16

ReactJS [Link]

O resultado é:

Resultado do uso da biblioteca Fecth API.

Passo 3

Agora, vamos instalar o módulo necessário para a utilização do Axios.

Como vimos anteriormente, temos de abrir nosso terminal e, dentro da
pasta de nossa aplicação, executar o comando:

npm install axios

109 of 137 08/05/2024, 20:16

ReactJS [Link]

Observe a imagem:

Resultado da execução do comando npm install axios.

Agora, vamos utilizar outro exemplo como fonte de dados, só que, dessa
vez, com 100 postagens:

[Link]

O resultado é dado por:

Json 

Passo 4

Execute o código abaixo para utilizar essa API e visualizar o resultado de

forma correta.

110 of 137 08/05/2024, 20:16

ReactJS [Link]

Javascript 

Dessa forma, obtemos o seguinte resultado:

111 of 137 08/05/2024, 20:16

ReactJS [Link]

Resultado do uso do Axios.

Passo 5

Novamente, é preciso instalar o módulo necessário para sua utilização.

Isso será feito de forma idêntica, abrindo o terminal e, dentro da pasta
de nossa aplicação, executando – conforme a documentação do jQuery
em [Link] – o seguinte comando:

npm install jquery

Observe a imagem:

Instalação do jquery.

Agora, vejamos um exemplo com 500 comentários que pode ser obtido
em:

[Link]

Passo 6

Execute o seguinte código:

Javascript 

112 of 137 08/05/2024, 20:16

ReactJS [Link]

Agora, é sua vez de colocar seus conhecimentos em prática. Bons

estudos!


Faça você mesmo!
Considere o seguinte cenário, o cliente pediu para fazer uma
modificação na saída do programa que traz os dados dos usuários da
base de dados:

[Link]

Desse modo, a saída deve ficar assim:

Nome:Leanne Graham

113 of 137 08/05/2024, 20:16

ReactJS [Link]

Nome:Bret
e-mail:Sincere@[Link]
endereço: Kulas Light
número: Apt. 556

Apresente o programa modificado.

Digite sua resposta aqui

Chave de resposta

114 of 137 08/05/2024, 20:16

ReactJS [Link]

4 - Rotas e Redux
Ao �nal deste módulo, você será capaz de traçar rotas com React Router e o controle da
camada de negócio com React Redux.

Biblioteca React Route

Agora, vamos usar duas extensões muito importantes no React: React
Router e React Redux. O Router é uma poderosa biblioteca de
roteamento que ajuda a adicionar novas telas e fluxos para nossa
aplicação de uma forma rápida, mantendo a URL sincronizada com
estado atual da nossa aplicação. Já o Redux surgiu devido à dificuldade
que as aplicações possuíam ao compartilharem informações
persistentes entre componentes.

Neste vídeo, apresentaremos as extensões React Router e React Redux.

Ambas são importantes para traçarmos fluxos de trabalho dentro de
uma aplicação React de forma eficiente.

Instalação
Como qualquer outra biblioteca, precisamos instalar os módulos
necessários para sua utilização. Seguindo a documentação oficial
([Link]
digitaremos este comando em nosso terminal:

npm install react—router-dom

115 of 137 08/05/2024, 20:16

ReactJS [Link]

Observe a imagem:

Instalação do react-router-dom.

Após sua instalação, a biblioteca disponibiliza quatro elementos novos

para se trabalhar:

• BrowserRouter

• Routes

• Route

• Link

Descreveremos, a seguir, cada um deles, abordando ainda suas sintaxes

e funcionalidades.

BrowserRouter
O primeiro elemento possui uma sintaxe bem simples. Basicamente, ele
encapsula nossa aplicação na origem de tudo, ou seja, [Link]. Confira!

Javascript 

116 of 137 08/05/2024, 20:16

ReactJS [Link]

Nesse momento, a nossa aplicação não sofreu nenhuma mudança

visual, só que agora podemos trabalhar com as rotas. Todas as rotas
deverão ser declaradas dentro desse escopo, caso contrário não serão
reconhecidas pela aplicação. Uma observação importante é que não
pode ter outro BrowserRouter no projeto.

Routes

É usado para encapsular todas as rotas. Sempre que declararmos o

Routes, a rota será buscada; assim que ela for localizada, a busca se
verá interrompida. Sua sintaxe é simples, encapsulando as rotas em si,
veja:

<Routes>
<Route ..../>
...
<Route ... />
</Routes>

117 of 137 08/05/2024, 20:16

ReactJS [Link]

Route

O mais importante elemento entre todos que estamos estudando, o

Route possui a responsabilidade de renderizar a interface, seja ela uma
página ou um componente. É possível declarar diferentes rotas
contendo o respectivo caminho, o componente e, caso necessário, até o
props. Sua sintaxe é a seguinte:

<Route path="sobre" element={<About />} />

Link

Permite que haja a navegação em si. Eis a sua sintaxe:

<Link to="/about"<Sobre>/Link>

Resultado Final
Modificando nosso [Link] para criar nossas rotas, veja agora o
resultado final com todos os exemplos estudados até o momento.

Javascript 

118 of 137 08/05/2024, 20:16

ReactJS [Link]

Observe que configuramos uma rota para Home, sendo o elemento e o

caminho vazios (linhas 18 e 29) necessários apenas para eliminar as
mensagens de aviso no console do navegador. Caso você não tenha
reparado, saiba que o histórico funciona automaticamente, permitindo o
retorno à página anterior.

Atividade 1
O React Router é uma biblioteca que permite navegar entre outras
interfaces em nossa aplicação. Neste material, falamos exclusivamente
da versão V6, modificando algumas sintaxes com novos recursos. Em
relação aos principais componentes dessa versão nova do Router,
assinale a alternativa correta.

O link é o elemento que encapsula a aplicação na origem

A
de tudo.

O Route é o componente menos importante, podendo ter

B apenas uma única rota contendo o caminho e o
componente, sem permitir a passagem de parâmetros.

119 of 137 08/05/2024, 20:16

ReactJS [Link]

O BrowserRouter permite a passagem de props e aceita

C
diferentes rotas – e não apenas uma.

O Route é o componente mais importante, pois é

D
responsável pela renderização da aplicação.

O BrowserRouter permite ao usuário navegar para outra

E
página.

Parabéns! A alternativa D está correta.

O Route é o componente mais importante, pois é responsável pela

renderização da aplicação. Ele permite a passagem de props e aceita
diferentes rotas – e não apenas uma.

Biblioteca React Redux

A React Redux é uma biblioteca oficial de vinculação da Redux UI para o
React, embora também possa ser utilizada por diferentes frameworks,
como Angular, Vue e Ember, por exemplo. Isso apenas reforça a
independência dela.

No React, por padrão, qualquer atualização em algum componente

executará uma nova renderização de todos os componentes dentro
daquele nó da árvore DOM, o que é custoso. Além disso, se os dados de

120 of 137 08/05/2024, 20:16

ReactJS [Link]

determinado componente filho não forem alterados, a nova

renderização fará um esforço desnecessário, pois o resultado da tela
será o mesmo.

Neste vídeo, explicaremos como instalar a biblioteca React Redux com o

objetivo de melhorar a renderização dos componentes visuais das telas.

Instalação
No React, por padrão, qualquer atualização em algum componente
executará uma nova renderização de todos os componentes dentro
daquele nó da árvore DOM, o que é custoso. Além disso, se os dados de
determinado componente filho não forem alterados, a nova
renderização fará um esforço desnecessário, pois o resultado da tela
será o mesmo.

Comentário

O React Redux implementa diversas otimizações, pulando renderizações

desnecessárias e aumentando a performance da nossa aplicação. Um
problema que os componentes enfrentavam se dava na passagem de
props entre os componentes.

Veja na imagem o percurso que um valor de props do componente D

precisa fazer até chegar ao seu destino, o componente H.

121 of 137 08/05/2024, 20:16

ReactJS [Link]

Passagem de props entre componentes.

O Redux trouxe uma forma de centralizar essas informações, ficando

responsável também por repassá-las para o componente que precisar
delas. Observe as imagens seguintes.

Organização das informações.

Breve resumo do fluxo dos dados em Redux.

122 of 137 08/05/2024, 20:16

ReactJS [Link]

Explicaremos agora alguns conceitos para a utilização do Redux de

forma simples. Com um formulário, vamos simular o login de um
usuário e transitar com esse usuário em outro componente.

Antes disso, porém, precisamos instalar algumas bibliotecas que

permitem a utilização de certos métodos que auxiliam e agilizam nossa
codificação. O intuito, afinal, é aprender a utilizar o Redux com a React.

Executaremos agora alguns comandos para a correta instalação das

bibliotecas.

npm install react-redux

npm install @reduxj/toolkit react-redux

Vejamos:

Instalação do react-redux.

123 of 137 08/05/2024, 20:16

ReactJS [Link]

Instalação do toolkit do react-redux.

Finalizando a instalação e iniciando nosso servidor, verifica-se que estão

disponibilizados os métodos que ajudam na manipulação dos estados.
Com o auxílio do fluxo de dados do Redux, iniciaremos agora nossa
implementação, explicando cada bloco e trecho do código.

Store
Este é o objeto em que salvaremos todos os estados que desejarmos
compartilhar de forma global em nossa aplicação. Sempre que qualquer
componente precisar ler um estado, basta consultar tal objeto e, assim,
resgatar o conteúdo.

Para alterar o estado, porém, precisamos utilizar outro conceito: as

actions.

Actions
São ações enviadas do nosso componente: elas acionam os reducers e
informam qual função terá de ser executada e qual valor que ela usará
como parâmetro. De forma resumida, é como se um comando fosse
enviado da seguinte forma: “O componente G quer alterar o estado B
usando a função F”.

Atividade 2
124 of 137 08/05/2024, 20:16
ReactJS [Link]

Atividade 2
Biblioteca utilizada para auxiliar o gerenciamento de estado, o Redux
centraliza as informações, sendo responsável por repassá-las para o
componente que precisa utilizar essas informações. Assinale a opção
correta a respeito do Redux.

Biblioteca JavaScript de código aberto exclusiva para o

A
React.

O Redux gera cópias de objetos, permitindo distribuir as

informações de seus estados. Com isso, ele permite que
B
os componentes possam acessar essas informações
por meio das próprias declarações.

O Redux é nativo do React, não precisando de uma

C
instalação extra.

Actions são basicamente as instruções enviadas aos

reducers, informando qual a função terá de ser
D
executada e que valor essa função utilizará como
parâmetro.

As actions recebem os dados não tratados e precisam

E que o Redux sinalize os componentes da atualização dos
estados.

125 of 137 08/05/2024, 20:16

ReactJS [Link]

Parabéns! A alternativa D está correta.

Apesar de ser a biblioteca oficial do Redux UI para o React, a forma com

que ela foi desenvolvida nos permite utilizá-la em qualquer framework,
inclusive em seus “concorrentes” diretos, como Angular e Vue, por
exemplo. Todos os estados são centralizados no objeto denominado
Store, não havendo a necessidade de gerar cópias. O Redux requer a
instalação de pelo menos uma biblioteca, a React Redux. Outra que
pode auxiliar nesse caso é a Redux Toolkit: com vários métodos já
definidos, ela ajuda na criação de nossos componentes.

Reducers, slicer e componentes login

e logout
Agora, vamos explorar ainda mais os recursos que instalamos no toolkit
do React. Assim, conseguimos ter mais controle sobre a nossa
aplicação e, finalmente, vamos explorar os componentes de login e
logout.

Neste vídeo, desenvolveremos uma aplicação com os componentes de

login e logout do toolkit do React.

126 of 137 08/05/2024, 20:16

ReactJS [Link]

Reducers
Depois que os dados são tratados, a atualização do estado é realizada e
todos os outros componentes que precisam usar esse novo estado são
avisados.

Slicers
A toolkit instalada nos trouxe um método que facilita a manipulação da
lógica por trás de reducers e actions, juntando-os em um único arquivo.
Veja como ficou a estrutura de pastas do nosso projeto:

127 of 137 08/05/2024, 20:16

ReactJS [Link]

Estrutura do projeto.

Componentes dentro da pasta components são os arquivos que cuidam

de actions, reducers e store dentro da pasta redux e, na raiz do projeto,
aqueles que iniciam a nossa aplicação. Uma primeira modificação é
encapsular com uma tag Provider o nó raiz (nesse caso, App). Confira!

Javascript 

128 of 137 08/05/2024, 20:16

ReactJS [Link]

É necessário passar como parâmetro nossa store, que será definida da

seguinte forma:

Javascript 

O método configureStore, que veio da biblioteca, recebe um parâmetro

do tipo reducer. No nosso exemplo, ele é nomeado como user.

Definiremos agora nosso slicer com a lógica de que precisamos para

manipular o usuário com reducers e actions.

Javascript 

129 of 137 08/05/2024, 20:16

ReactJS [Link]

O slice é criado ao chamar o método createSlice, que recebe como

primeiro parâmetro um nome. O segundo parâmetro será nosso estado
inicial; o terceiro, nossos reducers.

Definimos dois reducers (changeUser), em que o primeiro parâmetro é o

estado atual e o segundo, uma action que desestruturamos, obtendo
apenas o payload da função. Seu retorno sempre deve conter todos os
estados anteriores (...state) e os novos estados.

No logout, usamos apenas o estado atual sem a necessidade de definir

uma action de retorno. Seu retorno contém todos os estados anteriores
(...state) e os novos estados. Ao final do código, com o auxílio do slice,
podemos exportar nossas actions (linha 19) e os reducers (linha 23).

Componentes login e logout

O próximo código a ser verificado é o nosso componente login, que é
responsável por mudar o usuário ao clicar no botão login da nossa
aplicação. Confira!

Javascript


130 of 137 08/05/2024, 20:16

ReactJS [Link]

O userDispatch (linha 7) é um Hook do React Redux usado para a

execução de nossas actions. Sua sintaxe é simples, recebendo como
parâmetro uma action – no nosso código, o changeUser(name).

O logout seria bem semelhante ao login, utilizando a mesma função

userDispatch. Observe nosso código!

Javascript 

131 of 137 08/05/2024, 20:16

ReactJS [Link]

Para finalizar, veja o nosso componente User. Utilizando outro Hook do

React Redux, o useSelector, que recebe uma função que retém todo o
estado da aplicação, novamente o desestruturamos para pegar apenas
o nome do usuário.

Javascript 

Eis o resultado da aplicação:

132 of 137 08/05/2024, 20:16

ReactJS [Link]

Tela de login.

Atividade 3
No desenvolvimento do componente de logout, em um dado momento,
vimos a construção:

const handleLogout = () => {

dispatch(logout(name));
}

No entanto, também vimos uma estrutura sintática semelhante no

componente de login:

const handleLogin = () => {

dispatch(changeUser(name));
}

Nesse sentido, selecione a opção correta a respeito dessas estruturas

133 of 137 08/05/2024, 20:16

ReactJS [Link]

sintáticas.

São exemplos de arrows functions baseadas em

A
programação funcional.

São estruturas sintáticas típicas da programação

B
imperativa, que é bem característica do React.

Trata-se de exemplos da declaração de constantes no

Java Script com o objetivo de manter um
C
comportamento estático para os eventos de saída e
entrada do usuário do sistema.

São escolhas do desenvolvedor relacionadas às

D preferências dele sobre a forma de tratar a saída e
entrada do usuário do sistema.

Trata-se de uma construção sintática formada por

camadas que empilham os eventos solicitados pelo
E
usuário, para que sejam tratados logo que for possível
pelo React.

Parabéns! A alternativa A está correta.

A programação funcional é bastante utilizada pela biblioteca React do

Java Script, pois descreve mais naturalmente a forma como uma função

134 of 137 08/05/2024, 20:16

ReactJS [Link]

pode manipular dados e eventos. No caso dos exemplos apresentados

no enunciado, temos duas arrows functions específicas para tratar a
saída e a entrada do usuário no sistema.

O que você aprendeu neste

conteúdo?
• Os principais conceitos da biblioteca React.

• Como explorar os componentes do React para obter melhor

desempenho.

• Identificar alguns dos principais ambientes de desenvolvimento de

aplicações com o React, tanto on-line como no desktop.

• Como instalar as bibliotecas para usar APIs no React.

• Como desenvolver e aplicar os componentes de login e logout

como parte de aplicações gerais no React.

Explore +

135 of 137 08/05/2024, 20:16

ReactJS [Link]

Confira as indicações que separamos especialmente para você!

Acesse o site oficial do React e pesquise por “tutorial ”. Nele você

aprenderá ainda mais sobre os principais conceitos do React, o uso de
Hooks, bem como obterá mais informações sobre as APIS e encontrará
diversos exemplos que vão ajudar você a aprofundar os seus
conhecimentos.

Vá ao site oficial do nodejs e procure por procure por “Quick Start”. Lá,
encontrará diversos exemplos de JavaScript que vão ajudar você a se
aprofundar nessa linguagem de programação, que é fundamental para o
desenvolvimento de aplicações no React.

Referências
MAJ, W. W. Mostrar ciclos de vida menos comuns. Projects Wojtekamj.
Consultado na internet em: 23 jun. 2022.

REACT - uma biblioteca JavaScript para criar interfaces. Legacy.

Consultado na internet em: 6 maio de 2023.

SILVA, M. S. React - aprenda praticando: desenvolva aplicações web

reais com uso de biblioteca React e de seus módulos auxiliares. 1. ed.
Rio de Janeiro: Novatec, 2021.

STOYAN, S. Primeiros passos com React: construindo aplicações web.

1. ed. São Paulo: Novatec, 2019.

136 of 137 08/05/2024, 20:16

ReactJS [Link]

Material para download

Clique no botão abaixo para fazer o download do
conteúdo completo em formato PDF.

Download material

O que você achou do conteúdo?

Relatar problema

137 of 137 08/05/2024, 20:16