Single-Page-Application SENAC ADS

Prévia do material em texto

3/20/23, 9:37 PM Revisar envio do teste: Clique aqui para iniciar o Quiz &ndash...
https://senacsp.blackboard.com/webapps/assessment/review/review.jsp?attempt_id=_29819823_1&course_id=_205080_1&content… 1/8
 
Revisar envio do teste: Clique aqui para iniciar o Quiz
SP_GRAD_695413_2301_01 2301-SINGLE PAGE APPLICATION Quiz
REVISAR ENVIO DO TESTE: CLIQUE AQUI PARA INICIAR O QUIZ 
Usuário MATHEUS NOGUEIRA TANAKA
Curso 2301-SINGLE PAGE APPLICATION
Teste Clique aqui para iniciar o Quiz
Iniciado 20/03/23 21:05
Enviado 20/03/23 21:36
Data de vencimento 29/03/23 23:59
Status Completada
Resultado da tentativa 9 em 10 pontos  
Tempo decorrido 30 minutos
Resultados exibidos Todas as respostas, Respostas enviadas, Respostas corretas, Comentários
Pergunta 1
Resposta Selecionada: 
Respostas:
 
Comentário
da resposta:
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?
useLocation
useHistory
useURL
useLocation
useRouteMatch
useParams
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
Sala de Aula Tutoriais
1 em 1 pontos
MATHEUS NOGUEIRA TANAKA
47
https://senacsp.blackboard.com/webapps/blackboard/execute/courseMain?course_id=_205080_1
https://senacsp.blackboard.com/webapps/blackboard/content/listContent.jsp?course_id=_205080_1&content_id=_9196849_1&mode=reset
https://www.ead.senac.br/
https://senacsp.blackboard.com/webapps/portal/execute/tabs/tabAction?tab_tab_group_id=_260_1
https://senacsp.blackboard.com/webapps/portal/execute/tabs/tabAction?tab_tab_group_id=_210_1
https://senacsp.blackboard.com/webapps/login/?action=logout
3/20/23, 9:37 PM Revisar envio do teste: Clique aqui para iniciar o Quiz &ndash...
https://senacsp.blackboard.com/webapps/assessment/review/review.jsp?attempt_id=_29819823_1&course_id=_205080_1&content… 2/8
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 2
Resposta
Selecionada:
Respostas:
Comentário
da resposta:
Formulários em páginas web funcionam como uma interface para entrada de
informações e possibilitam coletar dados do usuário para serem enviados e
processados em um servidor. No React, o comportamento dos elementos HTML
usados em um formulário é um pouco diferente. Sobre essa diferença pode-se afirmar
corretamente que:
No HTML, os elementos do formulário usam os valores como texto,
enquanto, no React, esses elementos utilizam os valores
armazenado em props.
No HTML, os elementos do formulário usam os valores como texto,
enquanto, no React, esses elementos utilizam os valores
armazenado em props.
No React, ao submeter os dados de um formulário
automaticamente uma nova página é aberta.
No HTML, é mais conveniente utilizar uma função em JavaScript
para controlar o processo de submissão e essa função deverá ter
acesso a todos os dados dentro dos elementos do formulário.
No React, os valores dos elementos de um formulário são
interpretados como strings.
No HTML, os valores dos elementos de um formulário são
armazenados nas propriedades desses elementos.
No HTML, os elementos do formulário usam os valores como texto
(por exemplo, strings), no React, esses elementos utilizam os
valores armazenado em props.
Um formulário padrão do HTML, que ao submeter os dados abre
uma nova página, funcionará normalmente no React, porém é mais
conveniente utilizar uma função em JavaScript para controlar o
processo de submissão e essa função deverá ter acesso a todos os
dados dentro dos elementos do formulário.
1 em 1 pontos
3/20/23, 9:37 PM Revisar envio do teste: Clique aqui para iniciar o Quiz &ndash...
https://senacsp.blackboard.com/webapps/assessment/review/review.jsp?attempt_id=_29819823_1&course_id=_205080_1&content… 3/8
Pergunta 3
Resposta
Selecionada:
Respostas:
Comentário da
resposta:
React é uma biblioteca open-source lançada pelo Facebook em 2013 e usada para
construção rápida e interativa de interfaces do usuário. Atualmente, o React é a
ferramenta mais utilizada para o desenvolvimento de single page application. As
aplicações implementadas em React são formadas por componentes, que permitem o
desenvolvido modular de uma interface gráfica complexa.
Dentro desse contexto de aplicações React é correto afirmar que:
Uma prática comum, quando o componente React possui múltiplos
elementos filhos, é utilizar a sintaxe curta com marcação vazia ou
um componente padrão do React chamado Fragment.
A biblioteca do React possui os todos os recursos disponíveis para
implementar aplicações que são executadas no navegador e fazem
a comunicação com um bando de dados.
No React, não é permite renderizar um array com diversos
elementos React.
O React permite a visualização de dados renderizados como uma
página em HTML, que são atualizados estaticamente na aplicação.
A única forma de associar um estilo CSS em um componente React
é através de folhas de estilos, que são configuradas nos arquivos
com extensão .css.
Uma prática comum, quando o componente React possui múltiplos
elementos filhos, é utilizar a sintaxe curta com marcação vazia ou
um componente padrão do React chamado Fragment.
A aplicação desenvolvida em React é executada no navegador e
não pode se comunicar diretamente com um banco de dados, mas
pode ser combinado com outras tecnologias para criar uma
aplicação Full Stack.
A versão atual do React permite renderizar um array com diversos
elementos React.
No React os dados renderizados são atualizados dinamicamente
na aplicação e exibidos como uma página em HTML.
Os estilos CSS de componentes podem ser associados pelas
folhas de estilos ou diretamente no componente com o atributo
style.
Uma prática comum em aplicações React, quando se tem múltiplos
elementos filhos, é utilizar a sintaxe curta com marcação vazia ou
1 em 1 pontos
3/20/23, 9:37 PM Revisar envio do teste: Clique aqui para iniciar o Quiz &ndash...
https://senacsp.blackboard.com/webapps/assessment/review/review.jsp?attempt_id=_29819823_1&course_id=_205080_1&content… 4/8
um componente padrão do React chamado Fragment.
Pergunta 4
Resposta Selecionada:
 
Respostas:
 
Comentário da
resposta:
Proptype é uma biblioteca utilizada para verificar o tipo de dados de um valor passado
de um componente para outro através de propriedades. Isso é necessário porque a
linguagem de programação JavaScript é fracamente tipada. Desse modo, essa
biblioteca disponibiliza alguns validadores de tipo para verificar o tipo dos valores
passados nas propriedades.
Como seria o validador de componente Lista, que recebe um determinado objeto
item de forma obrigatória.
Lista.propTypes = {
    item: PropTypes.string.isRequired,
};
Lista.propTypes = {
    item: PropTypes.object.isRequired,
};
Lista.propTypes.object.isRequired;
item.propTypes.array.isRequired;
Lista.propTypes = {
   item: PropTypes.object.isObrigatory,
};
Lista.propTypes = {
   item: PropTypes.string.isRequired,
};
O validador para uma propriedade obrigatória deve ser
construído com a seguinte sintaxe:
Nome_componente.propTypes = {
    props: PropTypes.tipo_dados.isRequired
}
Pergunta 5
Quando uma aplicação web se torna complexa e passa a conter múltiplos
componentes em várias camadas, surge o problema de gerenciamento dos estados
da aplicação. Isso ocorre, pois sempre que algum componente requisita uma
0 em 1 pontos
1 em 1 pontos
3/20/23, 9:37 PM Revisar envio do teste: Clique aqui para iniciar o Quiz &ndash...
https://senacsp.blackboard.com/webapps/assessment/review/review.jsp?attempt_id=_29819823_1&course_id=_205080_1&content… 5/8
Resposta Selecionada: 
Respostas: 
Comentário da
resposta:
alteração no estado, essa solicitação é propagada para o seu componentepai e,
então, para o resto da aplicação.
 
O Redux resolve esse problema ao gerenciar os estados da aplicação em um único
objeto global. Dentre as alternativas abaixo, marque a que corresponde ao nome
desse objeto.
Store.
Store.
Reducer.
Linker.
Router.
Action.
O Redux armazena os estados da aplicação em um repositório
central, ou seja, o Redux possui uma única Store.
Pergunta 6
Resposta Selecionada: 
Respostas:
 
Comentário da
resposta:
No Redux, a Store funciona como uma fonte única de verdade, pois ela é um
repositório único que gerencia todos os estados de todos os componentes da
aplicação. O que torna a aplicação previsível e facilita o rastreio de quais
componentes e ações modificaram um estado. 
No React Redux, a Store é criada através da função createStore. Quantos
argumentos essa função possui?
3
1
2
3
4
0
reducers: que são as funções dos reducers da aplicação.
initialState: que é o valor inicial do estado da aplicação.
Esse argumento é opcional.
A função createStore possui três argumentos:
1 em 1 pontos
3/20/23, 9:37 PM Revisar envio do teste: Clique aqui para iniciar o Quiz &ndash...
https://senacsp.blackboard.com/webapps/assessment/review/review.jsp?attempt_id=_29819823_1&course_id=_205080_1&content… 6/8
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__(): essa
instrução indica para a extensão React DevTools deverá
aparecer na barra de endereços do Firefox.
E possui a seguinte sintaxe:
createStore(reducer, [intialState], [enhancer])
Pergunta 7
Resposta
Selecionada:
Respostas:
Comentário da
resposta:
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:
Configurar o espaçamento do conteúdo e a centralização dos
elementos de acordo de acordo com largura da janela de
visualização.
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.
.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 8
1 em 1 pontos
1 em 1 pontos
3/20/23, 9:37 PM Revisar envio do teste: Clique aqui para iniciar o Quiz &ndash...
https://senacsp.blackboard.com/webapps/assessment/review/review.jsp?attempt_id=_29819823_1&course_id=_205080_1&content… 7/8
Resposta Selecionada: 
Respostas:
 
Comentário da
resposta:
Quando rotas são utilizadas no React, com o emprego do módulo react-router, é
necessária a utilização de um componente que garanta que somente o componente
React de uma única rota seja renderizado a cada momento. 
Qual o componente do React-router que garante essa unicidade?
Switch
BrowserRouter
Switch
Route
Link
Prompt
Em uma aplicação React Router, utiliza-se o componente <Switch>
para garantir uma rota única ou exclusiva, ou seja, o esse
componente irá renderizar o componente <Route> que corresponda
com a rota desejada e ignorar os outros componentes <Route>
dentro do <Switch>.
Pergunta 9
Resposta
Selecionada:
Respostas:
Toda aplicação implementada em React é formada por componentes e esses
componentes formam cada parte da interface do usuário exibido no navegador web.
Nesse contexto, é correto afirmar que:
Toda aplicação em React deve possuir apenas um componente
raiz.
Os componentes em uma aplicação React são dependentes,
isolados e reutilizáveis.
Componentes só podem ser implementando utilizando classe.
O componente criado em React ter um ou mais elementos no
nível superior no método return().
Componentes não podem ser aninhados, ou seja, componentes
mais básicos não podem ser agrupados em um componente pai.
Toda aplicação em React deve possuir apenas um componente
raiz.
1 em 1 pontos
3/20/23, 9:37 PM Revisar envio do teste: Clique aqui para iniciar o Quiz &ndash...
https://senacsp.blackboard.com/webapps/assessment/review/review.jsp?attempt_id=_29819823_1&course_id=_205080_1&content… 8/8
Segunda-feira, 20 de Março de 2023 21h36min06s BRT
Comentário da
resposta:
Uma aplicação React é formada de diversos componentes
independentes, isolados e reutilizáveis, que permite o desenvolvido
modular de uma interface gráfica complexa.
Até a versão 16.8, a criação de componentes era realizada apenas
utilizando classes, mas com a adição do recurso de Hooks tornou-
se possível criar componentes através de funções.
Todo componente criado deve ter um elemento React no nível
superior, assim o método return() apenas um elemento pai e os
elementos filhos devem estar aninhados a esse único elemento
pai.
Componentes podem ser aninhados, ou seja, componentes mais
básicos podem ser agrupados em um componente pai.
Todo projeto React possui pelo um componente raiz, que
representa a aplicação inteira e possui diversos componentes
filhos.
Pergunta 10
Resposta Selecionada: 
Respostas:
 
Comentário da
resposta:
Em React, é possível passar informações de um componente para outro e, desse
modo configurar argumentos que são passados na criação do componente. Esses
argumentos permitem transferir valores estáticos ou dinâmicos, conteúdo de variáveis
e estados de um componente, entre outros. Sendo assim, como são chamados esses
argumentos:
Props.
State.
Props.
Hooks.
Keys.
propTypes.
Propriedades (ou abrev. props) são argumentos que podem ser
passados para componentes React e desse modo transferir
informações de um componente pai para o filho.
← OK
1 em 1 pontos