Logo Passei Direto
Buscar

SEGUNDA_PROVA_ON_LINE__Topicos_Especiais_em_Sistemas_de_Informacao__Aplicacoes_Hibridas_-_2020_1

Ferramentas de estudo

Questões resolvidas

Por que a atualização do estado de um componente React não pode ser feita diretamente no objeto state, mas deve ser feita por meio do método setState?
Porque o objeto state é declarado como uma constante e, assim, não pode ser atualizado diretamente.
Porque o objeto state é recebido do componente pai e a atualização deve ser encaminhada a ele.
Porque o objeto state é baseado nos atributos do elemento HTML do componente, que também precisa ser atualizado.
Porque além de atualizar o valor do objeto state, o método setState força a atualização da interface do componente.

Por que um componente React pode precisar passar seus métodos para um determinado subcomponente?
Porque toda alteração do estado de um componente deve ser feita no nível mais baixo da árvore de componentes.
Porque o subcomponente pode ter alguma operação de interface que altera o estado do componente pai.
Porque os subcomponentes são recursos usados quando um componente precisa delegar o seu estado.
Porque os subcomponentes garantem uma melhor organização da interface ao dividi-la em partes mais específicas.

O que significa elevar o estado de um componente em React?
Significa tornar público o estado do componente.
Significa transferir o seu estado para o componente pai.
Significa aumentar os valores das propriedades do estado.
Significa passar o estado para a superclasse do componente.

Em React, qual das seguintes características dos componentes de classe não existe em um componente de função?
O objeto de estado (state).
Um conteúdo em HTML a ser retornado.
O objeto de propriedades (props).
A renderização condicional de conteúdo.

As aplicações em React são aplicações chamadas de Single Page Web Apps (SPA), ou aplicações web de página única). A razão para isso é que
a interface da aplicação React é construída por meio de um conjunto de componentes que são apresentados de acordo com a necessidade.
uma aplicação React não permite o uso de links para navegação para outras páginas, de tal forma que todo o código deve ficar em um único arquivo HTML.
todos os recursos, como os conteúdos, os scripts e as folhas de estilo da aplicação React são combinados em uma única página quando a aplicação é exportada.
há apenas uma versão da aplicação que pode ser executada em diversas plataformas, como computadores, tablets e smartphones.

Qual é o nome do hook que é executado quando um componente de função React é renderizado?
useEffect

Qual é o trecho que associa corretamente o método trataEvento ao evento click de um botão em React?
Clique aqui
Clique aqui
Clique aqui
Clique aqui

Considere um componente React que seja encaixado na interface dessa forma:

Esta é uma descrição.

. Qual propriedade do objeto props deve ser usada quando quisermos recuperar o conteúdo deste elemento?
children

Qual é o nome do método dos componentes de classe em React que é chamado toda vez que um componente é renderizado pela segunda vez ou vez posterior?
componentDidUpdate

Apesar de não ser uma prática muito recomendada, é possível fazermos formatação CSS inline em um componente React (formatação inline significa no próprio elemento HTML). O código que contém o uso correto de uma declaração de estilos inline em React é:

...


...


...


...

Um tipo de componente comum nas aplicações React é aquele que apresenta uma lista de dados, geralmente armazenados em um vetor. Por exemplo, veja que o estado de um possível componente que contém uma lista de nomes: state = { nomes: ['José', 'Ana', 'Paula', 'Pedro'] }. Essa lista deve ser apresentada pelo método render do componente por meio de um elemento
    , sendo que cada nome deve ser encaixado dentro de um elemento
  • . Qual dos seguintes trechos de código apresentará essa lista corretamente?
      {this.state.nomes.map((n) => (
    • {n}
    • ))}

      {this.state.nomes.map((i, n) => (
    • {n}
    • ))}

      {this.state.nomes.map((n, i) => (
    • {n}
    • ))}

    • {this.state.nomes}

O elemento React.Fragment é usado em um componente React quando
precisamos o componente seja construído por mais de um código HTML, de tal forma que cada fragmento representará um pedaço da interface desse componente.
precisamos dividir a interface em subcomponentes, de tal forma que cada fragmento será representado por um subcomponente diferente.
precisamos encapsular alguns elementos HTML no nível mais alto da interface do componente, mas sem gerar um elemento correspondente no DOM da aplicação.
precisamos retornar algum conteúdo HTML para o componente, pois todo código HTML deve estar inserido como descendente desse elemento.

Que vantagem a Expo oferece para o desenvolvimento de aplicações React Native?
A publicação automática da aplicação nas lojas das plataformas mobile, poupando o desenvolvedor de fazê-la manualmente.
Um ambiente de desenvolvimento (IDE) específico para aplicações híbridas, que contém bibliotecas adicionais às da React Native.
A possibilidade de se compartilhar a aplicação com outros usuários sem a complexidade da exportação para as lojas de apps.
Simuladores das plataformas iOS e Android que permitem o teste rápido das aplicações híbridas sendo desenvolvidas.

Os recursos nativos dos dispositivos, como a câmera, o GPS ou a autenticação biométrica, podem ser usados nas aplicações nativas desenvolvidas com React Native.
É correto o que se afirma em:
I. Para cada recurso nativo usado, é necessário a importação de um componente específico, que mapeia as operações do recurso nativo em métodos e propriedades do componente.
II. Sempre que possível, a React Native usará as implementações já disponíveis no navegador, como os objetos localStorage e geolocation.
III. Os componentes podem ter funcionalidades que são específicas de uma ou outra plataforma, pois os recursos nativos a que estão associados podem ter diferenças nas operações que executam.
I, apenas.
II, apenas.
III, apenas.
I e II, apenas.
I e III, apenas.
II e III, apenas.
I, II, e III.

Qual será o valor apresentado no componente de texto alguns segundos depois de ter sido carregado?
nenhum
primeiro
segundo
Uma string vazia

Qual é o nome do método do objeto AsyncStorage usado para armazenar dados localmente no dispositivo do usuário?
saveItem
putItem
setItem
getItem

Podemos criar uma lista rolável em uma aplicação React Native usando o componente FlatList.
Qual é o nome do atributo do componente FlatList que é responsável por identificar o valor a ser usado como chave (key) para os itens da lista?
keyExtractor

Material
páginas com resultados encontrados.
páginas com resultados encontrados.
left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Questões resolvidas

Por que a atualização do estado de um componente React não pode ser feita diretamente no objeto state, mas deve ser feita por meio do método setState?
Porque o objeto state é declarado como uma constante e, assim, não pode ser atualizado diretamente.
Porque o objeto state é recebido do componente pai e a atualização deve ser encaminhada a ele.
Porque o objeto state é baseado nos atributos do elemento HTML do componente, que também precisa ser atualizado.
Porque além de atualizar o valor do objeto state, o método setState força a atualização da interface do componente.

Por que um componente React pode precisar passar seus métodos para um determinado subcomponente?
Porque toda alteração do estado de um componente deve ser feita no nível mais baixo da árvore de componentes.
Porque o subcomponente pode ter alguma operação de interface que altera o estado do componente pai.
Porque os subcomponentes são recursos usados quando um componente precisa delegar o seu estado.
Porque os subcomponentes garantem uma melhor organização da interface ao dividi-la em partes mais específicas.

O que significa elevar o estado de um componente em React?
Significa tornar público o estado do componente.
Significa transferir o seu estado para o componente pai.
Significa aumentar os valores das propriedades do estado.
Significa passar o estado para a superclasse do componente.

Em React, qual das seguintes características dos componentes de classe não existe em um componente de função?
O objeto de estado (state).
Um conteúdo em HTML a ser retornado.
O objeto de propriedades (props).
A renderização condicional de conteúdo.

As aplicações em React são aplicações chamadas de Single Page Web Apps (SPA), ou aplicações web de página única). A razão para isso é que
a interface da aplicação React é construída por meio de um conjunto de componentes que são apresentados de acordo com a necessidade.
uma aplicação React não permite o uso de links para navegação para outras páginas, de tal forma que todo o código deve ficar em um único arquivo HTML.
todos os recursos, como os conteúdos, os scripts e as folhas de estilo da aplicação React são combinados em uma única página quando a aplicação é exportada.
há apenas uma versão da aplicação que pode ser executada em diversas plataformas, como computadores, tablets e smartphones.

Qual é o nome do hook que é executado quando um componente de função React é renderizado?
useEffect

Qual é o trecho que associa corretamente o método trataEvento ao evento click de um botão em React?
Clique aqui
Clique aqui
Clique aqui
Clique aqui

Considere um componente React que seja encaixado na interface dessa forma:

Esta é uma descrição.

. Qual propriedade do objeto props deve ser usada quando quisermos recuperar o conteúdo deste elemento?
children

Qual é o nome do método dos componentes de classe em React que é chamado toda vez que um componente é renderizado pela segunda vez ou vez posterior?
componentDidUpdate

Apesar de não ser uma prática muito recomendada, é possível fazermos formatação CSS inline em um componente React (formatação inline significa no próprio elemento HTML). O código que contém o uso correto de uma declaração de estilos inline em React é:

...


...


...


...

Um tipo de componente comum nas aplicações React é aquele que apresenta uma lista de dados, geralmente armazenados em um vetor. Por exemplo, veja que o estado de um possível componente que contém uma lista de nomes: state = { nomes: ['José', 'Ana', 'Paula', 'Pedro'] }. Essa lista deve ser apresentada pelo método render do componente por meio de um elemento
    , sendo que cada nome deve ser encaixado dentro de um elemento
  • . Qual dos seguintes trechos de código apresentará essa lista corretamente?
      {this.state.nomes.map((n) => (
    • {n}
    • ))}

      {this.state.nomes.map((i, n) => (
    • {n}
    • ))}

      {this.state.nomes.map((n, i) => (
    • {n}
    • ))}

    • {this.state.nomes}

O elemento React.Fragment é usado em um componente React quando
precisamos o componente seja construído por mais de um código HTML, de tal forma que cada fragmento representará um pedaço da interface desse componente.
precisamos dividir a interface em subcomponentes, de tal forma que cada fragmento será representado por um subcomponente diferente.
precisamos encapsular alguns elementos HTML no nível mais alto da interface do componente, mas sem gerar um elemento correspondente no DOM da aplicação.
precisamos retornar algum conteúdo HTML para o componente, pois todo código HTML deve estar inserido como descendente desse elemento.

Que vantagem a Expo oferece para o desenvolvimento de aplicações React Native?
A publicação automática da aplicação nas lojas das plataformas mobile, poupando o desenvolvedor de fazê-la manualmente.
Um ambiente de desenvolvimento (IDE) específico para aplicações híbridas, que contém bibliotecas adicionais às da React Native.
A possibilidade de se compartilhar a aplicação com outros usuários sem a complexidade da exportação para as lojas de apps.
Simuladores das plataformas iOS e Android que permitem o teste rápido das aplicações híbridas sendo desenvolvidas.

Os recursos nativos dos dispositivos, como a câmera, o GPS ou a autenticação biométrica, podem ser usados nas aplicações nativas desenvolvidas com React Native.
É correto o que se afirma em:
I. Para cada recurso nativo usado, é necessário a importação de um componente específico, que mapeia as operações do recurso nativo em métodos e propriedades do componente.
II. Sempre que possível, a React Native usará as implementações já disponíveis no navegador, como os objetos localStorage e geolocation.
III. Os componentes podem ter funcionalidades que são específicas de uma ou outra plataforma, pois os recursos nativos a que estão associados podem ter diferenças nas operações que executam.
I, apenas.
II, apenas.
III, apenas.
I e II, apenas.
I e III, apenas.
II e III, apenas.
I, II, e III.

Qual será o valor apresentado no componente de texto alguns segundos depois de ter sido carregado?
nenhum
primeiro
segundo
Uma string vazia

Qual é o nome do método do objeto AsyncStorage usado para armazenar dados localmente no dispositivo do usuário?
saveItem
putItem
setItem
getItem

Podemos criar uma lista rolável em uma aplicação React Native usando o componente FlatList.
Qual é o nome do atributo do componente FlatList que é responsável por identificar o valor a ser usado como chave (key) para os itens da lista?
keyExtractor

Prévia do material em texto

11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 1/20
SEGUNDA PROVA ON LINE
Entrega 6 jun em 19:30 Pontos 25 Perguntas 20
Disponível 6 jun em 14:00 - 6 jun em 19:30 aproximadamente 6 horas
Limite de tempo 90 Minutos
Instruções
Este teste não está mais disponível, pois o curso foi concluído.
Histórico de tentativas
Tentativa Tempo Pontuação
MAIS RECENTE Tentativa 1 90 minutos 17,5 de 25
INSTRUÇÕES DA SEGUNDA PROVA ON LINE
 
A prova tem a duração de 90 minutose se realizará das 14h às 19:30 horas, horário de Brasília.
Ao clicar em Segunda Prova ON LINE, no menu “tarefas” você iniciará a prova. A partir daí,
você deverá realizar a avaliação valendo-se de 1 (uma) única tentativa.
Ao final da prova não se esqueça de enviá-la clicando no botão “ENVIAR TESTE”. Só utilize
esse botão quando tiver finalizado a avaliação.
Não deixe para começar no final do turno, pois assim você terá menos tempo para a realização
da avaliação. Exemplo: a prova se encerra às 19h30min, se o aluno começar às 19 horas terá
somente 30 minutos para a realização.
Atenção, mesmo abrindo e fechando o navegador o tempo de realização continuará contando
após iniciada a avaliação.
Utilize preferencialmente o navegador Google Chrome.
Caso sua avaliação possua questões discursivas que requeiram um envio de arquivo, anexe o
arquivo em formato PDF.
 
ATENÇÃO: Todas as provas iniciadas e que não houverem sido submetidas, serão
automaticamente encerradas pelo sistema transcorridos os 90 minutos de duração.
 
Boa Prova!
https://pucminas.instructure.com/courses/8628/quizzes/55357/history?version=1
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 2/20
Pontuação deste teste: 17,5 de 25
Enviado 6 jun em 15:33
Esta tentativa levou 90 minutos.
1,25 / 1,25 ptsPergunta 1
Por que a atualização do estado de um componente React não pode
ser feita diretamente no objeto state, mas deve ser feita por meio do
método setState?
 
Porque o objeto state é declarado como uma constante e, assim, não
pode ser atualizado diretamente.
 
Porque o objeto state é recebido do componente pai e a atualização
deve ser encaminhada a ele.
 
Porque o objeto state é baseado nos atributos do elemento HTML do
componente, que também precisa ser atualizado.
 
Porque além de atualizar o valor do objeto state, o método setState
força a atualização da interface do componente.
Correto!Correto!
Para que a interface do componente seja automaticamente
atualizada, devemos fazer as mudanças do seu estado por
meio do método do método setState. Esse método efetivará as
alterações necessárias ao objeto state e provocará a
atualização da página.
1,25 / 1,25 ptsPergunta 2
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 3/20
Por que um componente React pode precisar passar seus métodos
para um determinado subcomponente?
 
Porque toda alteração do estado de um componente deve ser feita no
nível mais baixo da árvore de componentes.
 
Porque o subcomponente pode ter alguma operação de interface que
altera o estado do componente pai.
Correto!Correto!
 
Porque os subcomponentes são recursos usados quando um
componente precisa delegar o seu estado.
 
Porque os subcomponentes garantem uma melhor organização da
interface ao dividi-la em partes mais específicas.
Quando um subcomponente precisa alterar alguma propriedade
do estado do componente pai, ele precisa receber os métodos
do pai para fazer essa alteração, pois, caso contrário, ele não
terá acesso nem ao estado nem a qualquer outro recurso do
componente pai. Essa passagem de métodos é feita por meio
dos atributos do elemento HTML que representa o
subcomponente e é recebida, por este, por meio do seu objeto
props.
1,25 / 1,25 ptsPergunta 3
O que significa elevar o estado de um componente em React?
 Significa tornar público o estado do componente.
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 4/20
 Significa transferir o seu estado para o componente pai.
Correto!Correto!
 Significa aumentar os valores das propriedades do estado.
 Significa passar o estado para a superclasse do componente.
Quando o estado de um componente precisa ser compartilhado
com outros componentes de mesmo nível ou de níveis
superiores, precisamos elevar o estado, isto é, transferir os
dados do objeto de estado para componentes em níveis mais
altos da árvore de componentes.
1,25 / 1,25 ptsPergunta 4
Em React, qual das seguintes características dos componentes de
classe não existe em um componente de função?
 O objeto de estado (state).
Correto!Correto!
 Um conteúdo em HTML a ser retornado.
 O objeto de propriedades (props).
 A renderização condicional de conteúdo.
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 5/20
Um componente de função é mais simples de ser criado do que
um componente de classe. No entanto, um componente de
função, de uma forma básica, não possui métodos ou atributos.
Assim, não pode ter um estado.
É possível se contornar esse problema usando os React Hooks,
mas, sem alguma ação adicional, o componente de função
realmente não tem estado.
0 / 1,25 ptsPergunta 5
As aplicações em React são aplicações chamadas de Single Page
Web Apps (SPA), ou aplicações web de página única). A razão para
isso é que 
 
a interface da aplicação React é construída por meio de um conjunto
de componentes que são apresentados de acordo com a necessidade.
esposta corretaesposta correta
 
uma aplicação React não permite o uso de links para navegação para
outras páginas, de tal forma que todo o código deve ficar em um único
arquivo HTML.
 
todos os recursos, como os conteúdos, os scripts e as folhas de estilo
da aplicação React são combinados em uma única página quando a
aplicação é exportada.
 
há apenas uma versão da aplicação que pode ser executada em
diversas plataformas, como computadores, tablets e smartphones.
ocê respondeuocê respondeu
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 6/20
Uma aplicação web de página única é uma aplicação em que o
conteúdo é alterado de acordo com a necessidade. Os
possíveis conteúdos são organizados em componentes de
interface, que podem ser combinados na construção da página
e que podem ser substituídos por outros componentes
conforme o estado da aplicação.
1,25 / 1,25 ptsPergunta 6
Qual é o nome do hook que é executado quando um componente de
função React é renderizado?
 
Obs: Não inclua nenhum espaço em branco na sua resposta e use
letras maiúsculas e minúsculas corretamente. Qualquer diferença
desses critérios será considerado resposta incorreta.
useEffect
Correto!Correto!
espostas corretasespostas corretas useEffect 
Toda vez que um componente de função é renderizado, o hook
useEffect é automaticamente executado. Pode-se dizer, assim,
que esse hook acrescenta parte de um ciclo de vida ao
componente, substituindo os métodos componentDidMount e
componentDidUpdate dos componentes de classe.
1,25 / 1,25 ptsPergunta 7
Qual é o trecho que associa corretamente o método trataEvento ao
evento click de um botão em React?
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=5508767/20
 <button onClick={this.trataEvento}>Clique aqui</button>
Correto!Correto!
 <button onClick={this.trataEvento()}>Clique aqui</button>
 <button onclick={this.trataEvento}>Clique aqui</button>
 <button onclick={this.trataEvento()}>Clique aqui</button>
A associação é feita por meio da atribuição do nome da função
(ou de uma expressão de função) para o evento. Mas não
usamos os parênteses, porque isso executaria a função ao
invés de passá-la para o botão.
Além disso, o atributo do evento não é o mesmo atributo da
especificação HTML (onclick), mas de uma propriedade do
componente React (onClick).
Assim, o código correto é: 
<button onClick={this.trataEvento}>Clique aqui</button>
1,25 / 1,25 ptsPergunta 8
Considere um componente React que seja encaixado na interface
dessa forma:
<Descricao><p>Esta é uma descrição.</p></Descricao>
Qual propriedade do objeto props deve ser usada quando quisermos
recuperar o conteúdo deste elemento?
 
Obs.: não use espaços em branco na sua resposta, pois ela seria
considerada errada. Você também não precisa escrever o nome do
objeto props, apenas o da sua propriedade que representa o conteúdo.
Lembre-se de respeitar as letras maiúsculas e minúsculas, conforme a
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 8/20
necessidade. Qualquer diferença desses critérios será considerado
resposta incorreta.
children
Correto!Correto!
espostas corretasespostas corretas children 
A forma correta para recuperarmos o conteúdo de um elemento
que tenha sido criado por meio de um componente é usando a
propriedade children do objeto props. Essa propriedade
retornará um conteúdo em HTML que pode ser manipulado de
acordo com a necessidade.
0 / 1,25 ptsPergunta 9
Qual é o nome do método dos componentes de classe em React que é
chamado toda vez que um componente é renderizado pela segunda
vez ou vez posterior?
 
Obs: Não inclua nenhum espaço em branco, parênteses ou outros
símbolos na sua resposta e use letras maiúsculas e minúsculas
corretamente. Qualquer diferença desses critérios será considerado
resposta incorreta.
componentDidUpdate
ocê respondeuocê respondeu
espostas corretasespostas corretas componenteDidUpdate 
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 9/20
Quando um componente é renderizado pela primeira vez, o
método componentDidMount é automaticamente executado. Nas
vezes seguintes que esse componente for apresentado,
geralmente por causa da atualização do seu estado, o método
componentDidUpdate será automaticamente executado.
1,25 / 1,25 ptsPergunta 10
Apesar de não ser uma prática muito recomendada, é possível
fazermos formatação CSS inline em um componente React
(formatação inline significa no próprio elemento HTML).
O código que contém o uso correto de uma declaração de estilos inline
em React é:
 <p style={font-family: "Arial"; color: "#F00"}>...</p>
 <p style="{font-family: Arial; color: #F00}">...</p>
 <p style={{fontFamily: "Arial", color: "#F00"}}>...</p>
Correto!Correto!
 <p style={fontFamily: "Arial", color: "#F00"}>...</p>
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 10/20
A interpolação de dados em um código HTML é feita por meio
de chaves. Assim, qualquer recurso JavaScript que precisemos
embutir na HTML deve estar entre chaves.
A formatação de um elemento é feita por meio de um objeto
JavaScript cujas propriedades também estão escritas em
JavaScript (usando a notação camelCase).
Dessa forma, acabamos com dois pares de chaves - o externo
é usado para a interpolação e o interno é o delimitador do
objeto de propriedades:
<p style={{fontFamily: "Arial", color: "#F00"}}>...</p>
0 / 1,25 ptsPergunta 11
Um tipo de componente comum nas aplicações React é aquele que
apresenta uma lista de dados, geralmente armazenados em um vetor.
Por exemplo, veja que o estado de um possível componente que
contém uma lista de nomes:
state = {
 nomes: ['José', 'Ana', 'Paula', 'Pedro']
}
Essa lista deve ser apresentada pelo método render do componente
por meio de um elemento <ul>, sendo que cada nome deve ser
encaixado dentro de um elemento <li>.
Qual dos seguintes trechos de código apresentará essa lista
corretamente?
 <ul>{this.state.nomes.map((n) => (<li>{n}</li>))}</ul>ocê respondeuocê respondeu
 
<ul>{this.state.nomes.map((i, n) => (<li key={i}>{n}</li>))}</ul
>
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 11/20
 
<ul>{this.state.nomes.map((n, i) => (<li key={i}>{n}</li>))}</ul
>
esposta corretaesposta correta
 <ul><li>{this.state.nomes}</li></ul>
O método map dos vetores executa uma função callback com um
ou dois parâmetros, de acordo com a necessidade. O primeiro
parâmetro receberá o valor do item do vetor sendo processado
e o segundo parâmetro, quando usado, receberá um valor
correspondente à posição desse item no vetor.
Cada elemento do vetor será, por meio do método map
convertido em um elemento <li> diferente. No entanto, o React
exige que cada item de uma lista apresentada tenha um atributo
key com valor específico, independentemente desse valor
(basta que sejam diferentes).
Assim, poderíamos implementar essa lista de duas formas:
<ul>{this.state.nomes.map((n, i) => (<li key={i}>{n}</li>))}</ul>
e
<ul>{this.state.nomes.map((n) => (<li key={n}>{n}</li>))}</ul>
No entanto, apenas a primeira forma constava na lista de
alternativas de resposta.
1,25 / 1,25 ptsPergunta 12
O elemento React.Fragment é usado em um componente React quando
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 12/20
 
precisamos o componente seja construído por mais de um código
HTML, de tal forma que cada fragmento representará um pedaço da
interface desse componente.
 
precisamos dividir a interface em subcomponentes, de tal forma que
cada fragmento será representado por um subcomponente diferente.
 
precisamos encapsular alguns elementos HTML no nível mais alto da
interface do componente, mas sem gerar um elemento correspondente
no DOM da aplicação.
Correto!Correto!
 
precisamos retornar algum conteúdo HTML para o componente, pois
todo código HTML deve estar inserido como descendente desse
elemento.
O método render de um componente React não pode retornar
elementos irmãos no seu nível mais alto. Por exemplo, o código
abaixo é inválido:
render() {
 return (
 <h3></h3>
 <div></div>
 );
}
Quando precisamos ter dois elementos assim, podemos
encapsulá-los em um elemento React.Fragment, mas sem gerar
nenhum código extra no DOM:
render() {
 return (
 <React.Fragment>
 <h3></h3>
 <div></div>
 </React.Fragment>
 );
}
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 13/20
1,25 / 1,25 ptsPergunta 13
Qual é o nome do componente React Native que torna um
componente Text (ou de outro tipo) interativo e que, ao ser tocado,
altera a transparência desse componente?
 
Obs: Não inclua nenhum espaço em branco na sua resposta e use
letras maiúsculas e minúsculas corretamente. Qualquer diferença
desses critérios será considerado resposta incorreta.
TouchableOpacity
Correto!Correto!
espostas corretasespostas corretas TouchableOpacity 
O componente TouchableOpacity encapsula um outro
componente qualquer, permitindo que ele se torne interativo.
O feedbackvisual oferecido por esse componente é a redução
da opacidade (ou aumento da transparência) do componente
tocado. Seu uso é feito da seguinte forma:
<TouchableOpacity onPress={algumaFuncao}>
 <Text>Algum texto</Text>
</TouchableOpacity>
1,25 / 1,25 ptsPergunta 14
Quando temos algum campo sendo editado na tela do smartphone, o
teclado virtual é apresentado automaticamente. No entanto, a área da
tela ocupada pelo teclado pode acabar sobrepondo outros elementos
da inteface.
Para evitar isso, usamos um componente de visão que
automaticamente se ajusta à área disponível (excluindo a área
ocupada pelo teclado). 
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 14/20
Esse componente é o:
 KeyboardSafeView 
 SafeAreaView 
 ScrollView 
 KeyboardAvoidingView Correto!Correto!
Quando o teclado sobrepõe algum elemento de interface,
podemos trocar o componente View de mais alto nível por um
componente do tipo KeyboardAvoidingView . Como esse
componente tem comportamento diferente entre as plataformas,
ele precisa de um atributo behavior , como mostrado abaixo:
<KeyboardAvoidingView 
 behavior={Platform.OS == 'ios' ? 'padding' : 'height'} 
 style={estilos.app}
>
...
</KeyboardAvoidingView>
 
0 / 1,25 ptsPergunta 15
Que vantagem a Expo oferece para o desenvolvimento de aplicações
React Native?
 
A publicação automática da aplicação nas lojas das plataformas
mobile, poupando o desenvolvedor de fazê-la manualmente.
 
Um ambiente de desenvolvimento (IDE) específico para aplicações
híbridas, que contém bibliotecas adicionais às da React Native.
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 15/20
 
A possibilidade de se compartilhar a aplicação com outros usuários
sem a complexidade da exportação para as lojas de apps.
esposta corretaesposta correta
 
Simuladores das plataformas iOS e Android que permitem o teste
rápido das aplicações híbridas sendo desenvolvidas.
ocê respondeuocê respondeu
A Expo funciona como um framework que encapsula a
aplicação, nos poupando da complexidade da exportação e
publicação da aplicação nas lojas das plataformas mobile. As
aplicações criadas com a Expo devem ser executadas por meio
do Expo Client (e não baixadas das lojas virtuais).
Em particular, a Expo é interessante para a prototipação rápida
de aplicações React Native.
0 / 1,25 ptsPergunta 16
Os recursos nativos dos dispositivos, como a câmera, o GPS ou a
autenticação biométrica, podem ser usados nas aplicações nativas
desenvolvidas com React Native.
Considere as seguintes afirmativas sobre esse uso:
I. Para cada recurso nativo usado, é necessário a importação de um
componente específico, que mapeia as operações do recurso
nativo em métodos e propriedades do componente.
II. Sempre que possível, a React Native usará as implementações já
disponíveis no navegador, como os objetos localStorage e
geolocation.
III. Os componentes podem ter funcionalidades que são específicas de
uma ou outra plataforma, pois os recursos nativos a que estão
associados podem ter diferenças nas operações que executam.
É correto o que se afirma em:
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 16/20
 I, apenas. 
 II, apenas. 
 III, apenas. 
 I e II, apenas. 
 I e III, apenas. esposta corretaesposta correta
 II e III, apenas. 
 I, II, e III. ocê respondeuocê respondeu
Para cada recurso nativo, precisaremos instalar e importar um
componente específico para usá-lo. Não é possível, porém,
usar as implementações dos navegadores, pois as interfaces
em React Native não são apresentadas por meio deles, mas
sim por meio de componentes nativos de cada plataforma. 
Realmente há diferenças nas funcionalidades dos recursos
nativos entre as plataformas e os componentes React Native
podem ter métodos, parâmetros ou atributos específicos para
cada uma delas.
0 / 1,25 ptsPergunta 17
Considere o componente abaixo que contém um método assíncrono:
import React, { Component } from 'react'; 
import { View, Text } from 'react-native'; 
 
export default class App extends Component { 
 state = { 
 valor: 'nenhum', 
 }; 
 
 fn = async () => { 
 let resultado = 'primeiro'; 
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 17/20
 let promise = new Promise((resolve, reject) => { 
 setTimeout(() => resolve('segundo'), 1000); 
 }); 
 resultado = await promise; 
 this.setState({ valor: resultado }); 
 }; 
 
 render() {
 this.fn(); 
 return ( 
 <View> 
 <Text>{this.state.valor}</Text> 
 </View> 
 ); 
 } 
} 
Qual será o valor apresentado no componente de texto alguns
segundos depois de ter sido carregado?
 nenhum
ocê respondeuocê respondeu
 primeiro
 segundo
esposta corretaesposta correta
 Uma string vazia
A execução da função é pausada quando encontra a instrução
await promise e só é retomada 1 segundo depois, quando a
função resolve é executada o o valor 'segundo' é retornado.
Para que a instrução await possa ser usada, a função deve ser
declarada como assíncrona por meio da instrução async.
1,25 / 1,25 ptsPergunta 18
Complete o código abaixo de um componente que deve apresentar
dois botões lado a lado (horizontalmente), com o espaço entre eles
distribuído em três partes iguais. Os botões devem ser apresentados
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 18/20
Responder 1:
Responder 2:
Responder 3:
no centro da tela, como sugere a figura à
direita.
import React from 'react'; 
import { StyleSheet, View, Button } from
'react-native'; 
export default function App() { 
 return ( 
 <View style={styles.container}> 
 <Button title="1" /> 
 <Button title="2" /> 
 </View> 
 ); 
} 
const styles = StyleSheet.create({ 
 container: { 
 flex: 1, 
 flexDirection: ' row ', 
 alignItems: ' center ', 
 justifyContent: ' space-evenly ', 
 }, 
});
 
Obs: Não inclua nenhum espaço em branco na sua resposta e use
letras maiúsculas e minúsculas corretamente. Escreva os valores
completos de cada propriedade. Qualquer diferença desses critérios
será considerado resposta incorreta.
rowCorreto!Correto!
centerCorreto!Correto!
space-evenlyCorreto!Correto!
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: Aplicações Híbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 19/20
Como os elementos estão dispostos horizontalmente, a
propriedade flexDirection deve ter o valor 'row'.
Para que fiquem verticalmente no centro da tela, a propriedade
alignItems deve ter o valor 'center'.
Para que o espaço seja distribuído em três partes iguais, a
propriedade justifyContent deve ter o valor 'space-evenly'.
1,25 / 1,25 ptsPergunta 19
Qual é o nome do método do objeto AsyncStorage usado para
armazenar dados localmente no dispositivo do usuário?
 saveItem
 putItem
 setItem
Correto!Correto!
 getItem
O armazenamento em React Native, quando feito por meio do
componente AsyncStorage usa os mesmos métodos do objeto
localStorage da JavaScript, isto é, setItem para armazenar
valores e getItem para recuperá-los.
1,25 / 1,25 ptsPergunta 20
Podemos criar uma lista rolável em uma aplicação React Native
usando o componente FlatList. Esse componente deve receber um
11/08/2020 SEGUNDA PROVA ON LINE: Tópicos Especiais em Sistemas de Informação: AplicaçõesHíbridas - 2020/1
https://pucminas.instructure.com/courses/8628/quizzes/55357?module_item_id=550876 20/20
vetor de objetos que serão apresentados na forma de lista.
Qual é o nome do atributo do componente FlatList que é responsável
por identificar o valor a ser usado como chave (key) para os itens da
lista?
 
Obs: Não inclua nenhum espaço em branco na sua resposta e use
letras maiúsculas e minúsculas corretamente. Qualquer diferença
desses critérios será considerado resposta incorreta.
keyExtractor
Correto!Correto!
espostas corretasespostas corretas keyExtractor 
O atributo keyExtractor deve conter uma função que processa
cada elemento da lista e retorna o valor a ser usado como
chave (key).
Pontuação do teste: 17,5 de 25

Mais conteúdos dessa disciplina