Exercicio_Reactjs_gabarito_

Prévia do material em texto

Você acertou 5 de 9 questões
Verifique o seu desempenho e continue treinando! Você pode refazer o exercício quantas vezes quiser.
Verificar Desempenho
1 Marcar para revisão
No código a seguir, marque a alternativa correta em relação ao resultado que devemos obter executando-o.
A
B
C
D
E
0
1
2
3
Erro de compilação
Resposta incorreta
Opa! A alternativa correta é a letra E. Confira o gabarito comentado!
Gabarito Comentado
Aqui um erro clássico ao utilizar eventos e useState, ao carregar o código pela primeira vez, a função onSomarHandler
é executada, pois estamos passando um parâmetro, gerando um loop infinito, impossibilitando sua renderização,
lembre-se, sempre que houver alguma atualização na variável que definimos com useState, a aplicação será
renderizada. Para corrigir, retire o parâmetro passado na linha 13, �2*contador � 1�, chamando apenas
onSomarHandler.
A
B
C
D
E
2 Marcar para revisão
Conforme código a seguir, qual seria o resultado esperado em tela levando em consideração a sintaxe JSX�
Não teria resultado, pois a variável resultado não contém marcação HTML, indicando erro de compilação.
Não teria resultado, pois a variável resultado não contém marcação HTML, mas sem erro de compilação, apenas
tela em branco.
"Rodrigo"2032014012.
Rodrigo2032014012.
Rodrigo 32014032.
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
A
B
C
D
Gabarito Comentado
Não é necessário indicar uma marcação HTML para gerar algum resultado, o JSX irá tratar como um texto qualquer, e
mesmo as variáveis idade e telefone sendo definidas como inteiras, para somar os valores seria necessária uma função
matemática em Javascript para obter um resultado como o da alternativa: Rodrigo 32014032.
3 Marcar para revisão
A partir da versão 16.8 do React, foi introduzido o conceito de Hooks, que trouxe uma nova dinâmica. Avalie as assertivas
relacionadas com a motivação de sua criação.
I� Classes em React sempre foram uma forma confusa de utilizar, como por exemplo a utilização do this. Em componentes
complexos, isso se tornava cada vez mais difícil sua reutilização.
II� Componentes complexos e grandes eram difíceis de refatorar.
III� A partir dessa versão, componentes de classes foram excluídas, forçando que todo o código antigo fosse refatorado.
Quais são as afirmativas CORRETAS?
I, II e III.
I e III.
I e II.
II e III.
E
A
Apenas a I.
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
A alternativa correta é a C, que afirma que as classes em React sempre foram uma forma confusa de utilizar,
especialmente em componentes complexos, e que componentes complexos e grandes eram difíceis de refatorar. A
terceira afirmativa está incorreta, pois, apesar da introdução dos Hooks, a versão 16.8 do React não excluiu o suporte
para componentes de classes. Na verdade, a documentação oficial do React sugere que a migração para Hooks seja
feita de forma gradual, permitindo que os desenvolvedores trabalhem com componentes de classes e Hooks de forma
paralela.
4 Marcar para revisão
Após a instalação das bibliotecas necessárias quando da configuração do ambiente, utiliza-se um comando para criar uma
aplicação React, o Create React App, basicamente um script que configura um novo projeto. Após sua execução, que
comando precisamos chamar para abrir nossa aplicação, considerando que estamos na pasta da referida aplicação?
npm init.
Exercicio
Reactjs
B
C
D
E
npx create-react-app nome_app.
npm install.
npx start.
npm start.
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
O comando npm init é utilizado para criar um pacote json. O comando npx create-react-app é usado para criar toda a
estrutura e dependências das bibliotecas básicas de uma aplicação React, porém, vale ressaltar que seu uso não é
obrigatório. O comando npm install é utilizado para instalar todas as dependências definidas no arquivo json, dentro
de um projeto. O comando npx start não existe. Por fim, o comando npm start é o que inicia o servidor React, abrindo
uma aplicação no navegador padrão do sistema operacional. Portanto, a alternativa correta é a E, que indica o
comando 'npm start'.
5 Marcar para revisão
A
B
C
D
E
Sobre ciclo de vida, diversos métodos podem acabar sendo chamados e reutilizados conforme a fase de vida de um
componente React, conforme as assertivas abaixo, analise as alternativas a seguir:
I� constructor() apenas ocorre na fase de Montagem.
II� render() ocorre apenas na fase de Atualização.
III� getDerivedStateFromProps() é chamado em duas fases, tanto na montagem quando na fase de atualização.
Quais as afirmativas CORRETAS?
I, II e III.
I e III.
I e II.
II e III.
Apenas a I.
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
A lt ti t é B fi ét d t t () f d M t
A
B
C
D
A alternativa correta é a B, que afirma que o método constructor() ocorre apenas na fase de Montagem e que o
método getDerivedStateFromProps() é chamado tanto na fase de Montagem quanto na fase de Atualização. A
afirmação II está incorreta, pois o método render() não ocorre apenas na fase de Atualização, mas também na fase de
Montagem. É importante lembrar que o método render() é o único método obrigatório em componentes do tipo classe
no React.
6 Marcar para revisão
Formulários em React trabalham de forma um pouco diferente do que estamos habituados em HTML. No React,
aproveitamos os estados dos componentes para manipular os dados. Marque a alternativa correta em relação a
componentes controlados e não controlados.
Em um componente controlado, os dados são manipulados por um componente React, diferente de um
componente não controlado, onde os dados podem ter vindo, por exemplo, de uma requisição AJAX.
Um input do tipo arquivo é um componente controlado.
Na marcação select, ao invés de utilizarmos a opção selecionada por padrão pelo atributo selected, utilizamos um
atributo value, na criação da marcação, usando como estado.
Podemos utilizar um array no atributo value, permitindo selecionar várias opções em select.
Uma forma muito utilizada de manipular diferentes inputs é usar um atributo name com o valor target name por
E
A
Uma forma muito utilizada de manipular diferentes inputs é usar um atributo name com o valor target.name, por
exemplo.
Resposta incorreta
Opa! A alternativa correta é a letra B. Confira o gabarito comentado!
Gabarito Comentado
A alternativa correta é a B. No contexto do React, um input do tipo arquivo é considerado um componente não
controlado. Isso ocorre porque a escolha do arquivo pelo usuário é um evento que ocorre fora do controle do React. A
aplicação não tem conhecimento prévio do arquivo que será selecionado pelo usuário. Portanto, é necessário criar uma
referência do objeto para salvar o nome do arquivo (por exemplo, fileInput.current.files[0].name). Isso permite que a
aplicação acesse e manipule o arquivo selecionado pelo usuário, mesmo sendo um componente não controlado.
7 Marcar para revisão
Redux reúne todos os estados, centralizando e otimizando a passagem de dados entre componentes e ficando responsável
por essa distribuição. Marque a alternativa correta em relação às suas diferentes responsabilidades e algumas definições:
I. A biblioteca não é nativa, necessitando de instalação através de um gerenciador de pacotes.
II. Store é o objeto que salva todos os estados que desejamos compartilhar.
III. Actions são dados enviados do nosso componente, sem permissão de utilizar outros objetos do Redux.
IV. Reducers são funções puras que recebem o estado anterior e uma ação, retornando para o próximo estado.
V. Nunca devemos modificar os argumentos passados para os reducers, a fim de manter que sejam funções puras.
I e II, apenas.
B
C
D
E
II e V, apenas.
I, II, IV eV, apenas.
I, III e V, apenas.
I, II, III e IV, apenas.
Resposta incorreta
Opa! A alternativa correta é a letra C. Confira o gabarito comentado!
Gabarito Comentado
A alternativa correta é a C, que afirma que a biblioteca Redux não é nativa e precisa ser instalada através de um
gerenciador de pacotes �I�, que a Store é o objeto que guarda todos os estados que desejamos compartilhar �II�, que
os Reducers são funções puras que recebem o estado anterior e uma ação, retornando para o próximo estado �IV� e
que nunca devemos modificar os argumentos passados para os reducers, para que continuem sendo funções puras
�V�. A afirmação III está incorreta, pois as Actions, na verdade, são ações enviadas do nosso componente e têm
permissão para acionar outros objetos do Redux, informando qual função deve ser executada e qual valor essa função
vai utilizar como parâmetro.
A
B
C
D
E
8 Marcar para revisão
Acerca das principais diferenças entre o DOM virtual e o DOM real, assinale a alternativa correta:
I. A atualização no DOM real acontece de forma mais lenta que o DOM virtual.
II. No DOM virtual não é possível atualizar diretamente o elemento HTML.
III. A manipulação do DOM real é muito custosa, devido à sua complexidade da árvore.
IV. Uma nova árvore do DOM é gerada para qualquer modificação feita em algum elemento de sua árvore.
V. Existe pouco desperdício de memória no DOM real, já no DOM virtual um grande desperdício.
I e II, apenas.
II e V, apenas.
I e III, apenas.
I, III e V, apenas.
I, II, III e IV, apenas.
Resposta incorreta
Opa! A alternativa correta é a letra E. Confira o gabarito comentado!
A
B
Gabarito Comentado
A alternativa correta é a E, que afirma que as afirmações I, II, III e IV estão corretas. A atualização no DOM real é de
fato mais lenta que no DOM virtual �I�, no DOM virtual não é possível atualizar diretamente o elemento HTML �II�, a
manipulação do DOM real é custosa devido à sua complexidade �III� e uma nova árvore do DOM é gerada para qualquer
modificação feita em algum elemento de sua árvore �IV�. A afirmação V está incorreta, pois o DOM virtual, ao utilizar o
JSX para manipular os elementos e através do algoritmo de Diffing, tem um uso de memória menor que o DOM real, e
não maior como a afirmação sugere.
9 Marcar para revisão
Algumas bibliotecas extras são úteis para a utilização de determinados métodos tanto no React Routes quanto no React
Redux. Assinale a alternativa correta quando falamos de algumas dessas bibliotecas.
I. Para utilizarmos o BrowserRouter, é necessário a instalação da biblioteca react-router-dom
II. Diversos outros métodos estão disponíveis na biblioteca react-router-dom, uma delas permite passar parâmetros entre
as páginas, o useParams
III. Redux necessita de instalação, e uma das principais bibliotecas extras que facilitam o uso de Redux é a @reduxjs/toolkit,
incorporando métodos que ajudam na construção dos objetos Redux
IV. createSlice internamente utiliza createAction e createReducer, visando reduzir linhas e linhas de código
V. useSelector não tem acesso aos estados da aplicação, sendo necessária implementar toda a lógica de passagem de
estados
I e II, apenas.
II e V apenas
B
C
D
E
II e V, apenas.
I, II, IV e V, apenas.
I, III e V, apenas.
I, II, III e IV, apenas.
Resposta correta
Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!
Gabarito Comentado
A alternativa correta é a letra E, que afirma que as afirmações I, II, III e IV estão corretas. A afirmação I está correta,
pois para utilizar o BrowserRouter é necessário instalar a biblioteca react-router-dom. A afirmação II também está
correta, pois a biblioteca react-router-dom disponibiliza diversos métodos, incluindo o useParams que permite passar
parâmetros entre as páginas. A afirmação III está correta, pois o Redux necessita de instalação e a biblioteca
@reduxjs/toolkit facilita o uso do Redux, incorporando métodos que auxiliam na construção dos objetos Redux. A
afirmação IV está correta, pois o createSlice utiliza internamente o createAction e o createReducer, visando reduzir a
quantidade de código. A afirmação V está incorreta, pois o useSelector tem acesso aos estados da aplicação, não
sendo necessária a implementação de toda a lógica de passagem de estados.