Quiz-Single Page Application

Prévia do material em texto

DEIXA UM 
• Pergunta 1 
1 em 1 pontos 
 
Atualmente, serviços web devem garantir a qualidade do serviço em termos de navegabilidade, 
dinamismo, atualização da informação exibida na página e tempo de resposta. Neste contexto, o 
conceito de Single Page Application (SPA) se mostra como uma boa solução para assegurar uma 
boa experiencia do usuário com a aplicação web. Sendo assim, podemos certificar que a 
alternativa correta sobre SPA é: 
 
Resposta 
Selecionada: 
b. 
O modelo SPA utiliza templates que executam do lado do cliente. 
Respostas: a. 
O modelo SPA garante o desempenho da aplicação ao transferir a renderização 
para o servidor. 
 b. 
O modelo SPA utiliza templates que executam do lado do cliente. 
 
c. 
O modelo SPA precisa carregar e renderizar todos os elementos (barra de 
navegação, ads, headlines, texto, rodapé, entre outros) sempre que um recurso 
é solicitado. 
 
d. 
No modelo SPA, a página é carregada completamente na primeira requisição e 
isso faz com o desempenho da aplicação diminua e aumente o tráfego de 
dados entre cliente e servidor. 
 
e. 
No modelo SPA, a visualização do conteúdo no navegador é uma página HTML 
completa fixa e estática. 
Comentário 
da resposta: 
No modelo SPA, a página é carregada completamente na primeira requisição e a 
aplicação fica armazenada do lado do cliente em forma de templates e, assim, a 
renderização é realizada pelo lado do cliente. Isso aumenta o dinamismo da 
página, melhora o desempenho da aplicação e diminui o tráfego de dados entre 
cliente e servidor. 
 
https://emojipedia.org/samsung/one-ui-5.0/reversed-thumbs-up-sign-medium-light-skin-tone/
O modelo MPA (Multiple Page Application) precisa carregar e renderizar todos 
os elementos (barra de navegação, ads, headlines, texto, rodapé, entre outros) 
sempre que um recurso é solicitado. 
 
• Pergunta 2 
1 em 1 pontos 
 
O React Router possui diversos hooks que permitem acessar o estado do router e permitem 
navegar de uma página a outra através dos seus componentes. Dentre esses hooks, existe um 
que retorna a localização do objeto que representa a URL atual de uma rota. Qual é esse hook? 
 
Resposta Selecionada: 
useLocation 
Respostas: useHistory 
 useURL 
 
useLocation 
 useRouteMatch 
 useParams 
Comentário 
da resposta: 
O hook useLocation retorna um objeto com o novo local do domínio da página 
sempre que a URL muda. Já o useHistory dá acesso a uma instância do histórico 
de navegação, o useParams retorna um objeto com os pares key/value que 
estiverem em uma URL, o useRouteMatch verifica a URL atual com a rota 
acessada e o useURL não existe. 
 
 
• Pergunta 3 
1 em 1 pontos 
 
O Bootstrap é um framework popular para configurar estilos nos elementos HTML de uma 
página web. Ele disponibiliza uma série de classes pré-definidas tornando a implementação de 
páginas web mais rápidas e padronizada. 
Nesse contexto, a classe .container é uma das classes mais importantes e serve para: 
 
Resposta 
Selecionada: 
 
Configurar o espaçamento do conteúdo e a centralização dos elementos de 
acordo de acordo com largura da janela de visualização. 
Respostas: Configurar a margem do elemento de forma absoluta e a centralização do 
texto da página. 
 
 
Configurar uma caixa centralizada com bordas sólidas pretas de 1px. 
 Configurar o alinhamento à esquerda dos elementos da página que aparecem 
na tela de visualização. 
 Configurar a apresentação utilizando o sistema de Flexbox dos elementos ao 
serem visualizados em telas de dispositivos móveis. 
 
 
Configurar o espaçamento do conteúdo e a centralização dos elementos de 
acordo de acordo com largura da janela de visualização. 
Comentário da 
resposta: 
.container: define o espaçamento ao redor do conteúdo e a centralização dos 
elementos de acordo com a largura definida para diferentes tamanhos de telas, 
onde a página será exibida. Essa é necessária para utilizar o sistema de grades. 
 
• Pergunta 4 
1 em 1 pontos 
 
Os estados de uma aplicação são usados para representar a informação atual dos componentes 
em uma determinada situação e as ações são solicitações de alteração nos estados. 
No Redux, as funções que associam as ações com as alterações de estado são chamadas: 
 
Resposta Selecionada: 
Reducers. 
Respostas: Stores. 
 
Dispatchers. 
 Views. 
 
Reducers. 
 Routers. 
Comentário da 
resposta: 
A Store executa as ações por meio de funções puras chamadas Reducers. 
Desse modo, a Store invoca os Reducers, que definem como o estado mudará 
de acordo com a ação disparada. 
 
 
• Pergunta 5 
1 em 1 pontos 
 
API é um software que realiza a comunicação entre clientes e diferentes serviços 
disponibilizados na internet. Ela estabelece regras de comunicação com cada serviço. De forma 
geral, os métodos HTTP são comumente usados na implementação de API. 
 
Nesse caso, qual o método HTTP utilizado para requisitar um dado do serviço: 
 
Resposta Selecionada: 
GET 
Respostas: 
GET 
 PUT 
 POST 
 DELETE 
 UPDATE 
Comentário da 
resposta: 
O método GET possibilita ler informações de um banco de dados sem 
executar modificações nesses dados. 
 
 
• Pergunta 6 
1 em 1 pontos 
 
Uma empresa quer contratar um programador para implementar uma interface do usuário em 
React. Para isso, ela elaborou as seguintes afirmações para testar o conhecimento do 
candidato: 
I. O NPM é um gerenciador de módulos (bibliotecas de códigos), que serão usados em um 
ambiente de programação em JavaScript. 
II. O ReactJS possui um DOM (Document Object Model) virtual e, por isso, não depende 
exclusivamente do DOM do navegador. 
III. O React Native e o React são bibliotecas idênticas e ambos são usados para construir 
aplicações que executam no navegador quando para dispositivos móveis. 
IV. JSX lembra a linguagem de template JSON. 
O candidato para ser aprovado deve responder que quais afirmações estão corretas? 
 
Resposta Selecionada: 
I e II 
Respostas: I, II, III e IV 
 
 
II, III e IV 
 III e IV 
 
I e II 
 I e IV 
Comentário da 
resposta: 
O NPM (do inglês Node Package Manager) é um gerenciador de pacotes de 
códigos (ou bibliotecas de códigos), que serão usados em um ambiente de 
programação em JavaScript. 
Através do DOM virtual, o React cria diversos módulos com esses 
componentes e constrói a interface gráfica independentemente da resposta do 
navegador. 
O React Native é um framework baseado no ReactJS, que é usado para 
desenvolver aplicativos para dispositivos móveis. 
O JSX lembra uma linguagem de template, tal como o XML. 
 
• Pergunta 7 
1 em 1 pontos 
 
Com o Redux, é possível disparar uma ação diretamente utilizando o método store.dispatch(). 
Entretanto, é mais conveniente utilizar um método auxiliar, que conecta os componentes do 
React à Store do Redux. 
Qual o nome do método auxiliar mencionado no texto? 
 
Resposta Selecionada: 
connect 
Respostas: useSelector 
 combineReducers 
 useDispatch 
 render 
 
connect 
 
Comentário da 
resposta: 
O método connect funciona como uma conexão para permitir o acesso do 
componente aos dados necessários do estado da Store Redux e à função 
dispatch, que é usada para disparar as ações para a Store. 
 
• Pergunta 8 
1 em 1 pontos 
 
A etapa de desmontagem (Unmounting) é uma das etapas do ciclo de vida do componente. 
Nessa etapa. É possível chamar o método chamado componentWillUnmount(). Qual a função 
desse método? 
 
Resposta 
Selecionada: 
 
É o método chamado quando o componente é retirado do DOM. 
Respostas: É o método chamado antes que o componente seja montado, para garantir 
que o componente não esteja no DOM sempre que ele for montado. 
 É o método que produz o HTML para o DOM que será montado no navegador. 
 É o método chamado imediatamente após o componente estar renderizado e 
montado no DOM. 
 Esse método é chamado imediatamente apósalguma atualização de estado 
ou propriedades acontecer. 
 
É o método chamado quando o componente é retirado do DOM. 
Comentário da 
resposta: 
componentWillUnmount(): é o método chamado quando o componente é 
retirado do DOM. 
 
 
• Pergunta 9 
1 em 1 pontos 
 
O JSX é uma extensão de sintaxe da linguagem de programação JavaScript, que permite definir 
os elementos do React. Sobre JSX é correto afirmar que: 
 
Resposta 
Selecionada: 
 
O JSX utiliza uma sintaxe baseada em marcações (tags)semelhante ao 
HTML. 
Respostas: 
O JSX utiliza uma sintaxe baseada em marcações (tags)semelhante ao 
HTML. 
 O uso do JSX em aplicação React é obrigatório. 
 
 
O JSX não permite embutir expressões do JavaScript em seu código. 
 Os atributos das marcações no JSX são idênticos as do HTML. 
 Não é possível utilizar as funções do JavaScript forEach(), map(), filter() e 
find() no JSX. 
Comentário 
da resposta: 
O JavaScript XML (JSX) é uma extensão de sintaxe da linguagem de 
programação JavaScript, que permite definir os elementos do React utilizando 
uma sintaxe baseada em marcações (tags)semelhante ao HTML. 
O JSX torna o código em React mais limpo e elegante, mas seu uso não é 
obrigatório. 
As expressões do JavaScript são embutidas, no código em JSX, colocando-as 
encapsuladas entre chaves. 
O JSX tem suporte para todos os elementos comuns do HTML, sendo assim, é 
possível utilizar atributos do HTML no JSX com algumas pequenas mudanças. 
Por exemplo, ao invés do atributo class usado no HTML, o JSX utiliza a palavra 
reservada ClassName para definir uma classe a uma tag ou componente. 
O JXS utiliza frequentemente diversas funcionalidades do JavaScript, 
principalmente os métodos para manipular arrays forEach(), map(), filter() e 
find(). 
 
• Pergunta 10 
0 em 1 pontos 
 
O React cria suas aplicações através de componentes e mantém uma hierarquia, onde existe um 
componente raiz e diversos outros componentes filhos. Todo componente React pode ter 
estados e fazer uso do recurso de propriedades (props). Nesse contexto, é correto afirmar que: 
 
Resposta 
Selecionada: 
 
Props são informações de um componente em uma determinada situação, 
que indicam como o componente será renderizado e o seu comportamento. 
Respostas: Props são informações de um componente em uma determinada situação, 
que indicam como o componente será renderizado e o seu comportamento. 
 
 
Eventos são ações disparadas em resposta a alguma interação com o usuário 
ou a um evento do sistema. 
 
 Todo componente criado no React possui um ciclo de vida, porém não é 
possível controlá-lo ou manipulá-lo durante o seu clico de vida. 
 O Flux é um padrão de gerenciamento de propriedades em componentes 
React. 
 A ideia principal do Flux é existir diversas fontes de informações, 
chamadas dispatcher, que só podem ser atualizadas por ações. 
Comentário da 
resposta: 
Estados ou hooks são informações de um componente em uma determinada 
situação, que indicam como o componente será renderizado e o seu 
comportamento. 
Eventos são ações disparadas em resposta a alguma interação com o usuário 
ou a um evento do sistema. 
Todo componente criado no React possui um ciclo de vida com três etapas, 
onde é possível controlá-lo ou manipulá-lo através de métodos pertencentes a 
essas etapas 
O Flux é um padrão de gerenciamento do fluxo de dados propriedades em 
componentes React. 
A ideia principal do Flux é existir uma única fonte de informações (stores) que 
só podem ser atualizadas por ações.