Revisão de React JS - Sem Gabarito

Prévia do material em texto

Revisão de React JS 
Autor: Jota Pê 
Data da última atualização: 20/06/2024 
 
1. Sobre conceitos do React JS, marque V para as afirmativas verdadeiras e F para as afirmativas 
falsas? 
 
( ) É uma biblioteca JS para construir interfaces de usuário. 
( ) É usado para construir aplicativos de página única. 
( ) É usado para construir aplicativos para iOS e Android. 
( ) Permite criar componente reutilizáveis. 
( ) É uma biblioteca Python para construir interfaces de usuário. 
 
a) F – V – F – V – V 
b) V – F – V – V – F 
c) F – F – V – V – V 
d) V – V – F – V – F 
e) F – F – V – F – V 
 
2. Para criar um novo projeto (aplicação) React JS, deve-se acessar, através do terminal, a pasta onde o 
projeto será criado e armazenado e, em seguida, deve-se digitar a linha de comando para criação do 
projeto. 
 
C:\Users\Java\Documents\REACT\... 
 
Supondo que o nome do projeto será "pensebem", marque a opção que tem o comando correto, a ser 
colocado na sequencia da linha de comando anterior, para criar esse projeto: 
 
a) npm install –g expo-cli 
b) expo init pensebem 
c) cd pensebem 
d) start npm 
e) npx create-react-app pensebem 
 
3. Após um projeto (aplicação) React JS ser criado, ele pode ser iniciado no servidor sob o endereço local 
localhost e em uma determinada porta, como por exemplo, 3000. Para isso, deve-se, através do terminal, 
acessar a pasta onde o projeto foi criado e digitar a linha de comando para iniciar o servidor. 
 
C:\Users\Java\Documents\FDASW\pensebem\... 
 
Marque a opção que tem o comando correto, a ser colocado na sequencia da linha de comando anterior, 
para iniciar esse servidor: 
 
a) cd start 
b) npm install start 
c) npm start 
d) npm install expo-cli 
e) expo init 
 
4. Sobre o funcionamento do React JS, complete a afirmação a seguir: 
 
O React JS cria um DOM virtual na memória. Em vez de manipular o _______________ diretamente, 
ele manipula o _______________. Só depois de feitas as alterações no _______________ é que ele faz 
as alterações no _______________. 
 
Baseado na afirmativa anterior marque a opção com os termos corretos para completa-la: 
 
a) DOM do navegador / DOM virtual / DOM virtual / DOM do navegador 
b) DOM virtual / DOM do navegador / DOM virtual / DOM do navegador 
c) DOM do navegador / DOM virtual / DOM do navegador / DOM virtual 
d) DOM virtual / DOM do navegador / DOM do navegador / DOM virtual 
e) DOM do React / DOM do React Native / DOM do React Native / DOM do React 
 
5. Em React JS, é possível que o desenvolvedor crie suas próprias classes. Uma classe é um tipo de 
função, mas ao invés de retornar um valor para ser renderizado, ela possui um método construtor e 
atributos. Qual é assinatura correta para criação de uma classe chamada "Carro"? 
 
a) constuctor Carro { 
 class(nome) { 
 this.marca = nome 
 } 
 } 
 
b) class Carro { 
 constructor(nome) { 
 this.marca = nome 
 } 
 } 
 
c) function Carro { 
 constructor(nome) { 
 this.marca = nome 
 } 
 } 
 
d) constructor Carro { 
 function(nome) { 
 this.marca = nome 
 } 
 } 
 
e) class Carro { 
 function(nome) { 
 this.marca = nome 
 } 
 } 
 
6. A especialização de classes implementa uma técnica chamada de Herança. Ela ocorre quando uma 
classe (subclasse) herda todos os atributos e métodos de outra classe (superclasse). Qual é assinatura 
correta para criação de uma classe chamada "Modelo" que é uma especialização da classe "Carro"? 
 
class Carro { 
 constructor(nome) { 
 this.marca = nome 
} 
} 
 
a) extends Modelo class Carro { 
 constructor(modelo, nome) { 
 super(nome) 
} 
 } 
 
b) extends Modelo class Carro { 
 super(modelo, nome) { 
 constructor(nome) 
} 
 } 
 
c) class Modelo extends Carro { 
 super(modelo, nome) { 
 constructor(nome) 
} 
 } 
 
d) function Modelo extends Carro { 
 constructor(modelo, nome) { 
 super(nome) 
 } 
 } 
 
e) class Modelo extends Carro { 
 constructor(modelo, nome) { 
 super(nome) 
} 
 } 
 
7. Existem diversas formas de se criar uma função em JavaScript. Uma das mais populares, atualmente, é 
aquela que chamamos de Arrow Function. Esse tipo permite escrever uma função com uma sintaxe mais 
curta. Qual é assinatura correta para criação de uma Arrow Function chamada "enviarMensagem"? 
 
a) function enviarMensagem => { 
 return "Aprender JS é construir o futuro!" 
 } 
 
b) function enviarMensagem(){ 
 return "Aprender JS é construir o futuro!" 
 } 
 
c) enviarMensagem = () => { 
 return "Aprender JS é construir o futuro!" 
 } 
 
d) enviarMensagem = function() { 
 return "Aprender JS é construir o futuro!" 
 } 
 
e) enviarMensagem = function() { 
 return "Aprender JS é construir o futuro!" 
 } 
 
8. Sobre a utilização o operador this nas funções convencionais e na arrow function, o que NÃO é 
correto afirmar? 
 
a) A utilização do operador this é diferente nas funções convencionais e na arrow function. 
b) A utilização do operador this é exatamente igual nas funções convencionais e na arrow function. 
c) Na função convencional o operador this representa o objeto que chamou a função. 
d) Na função convencional o operador this pode representar uma janela, documento, botão, link. 
e) Na arrow function o operador this representa o objeto que definiu a função. 
 
9. O método addEventListener() associa uma função de uma classe a um elemento. Esse método 
associa um evento (click, load, change, mouseover, mouseout) a função de uma 
classe. Qual a sintaxe correta para executar a função trocarCor() do objeto Fundo quando o 
elemento de id botão for clicado? 
 
a) document.getElementById('botao').addEventListener("load", Fundo.trocarCor) 
b) document.getElementById('botao').addEventListener("change", Fundo.trocarCor) 
c) document.getElementById('botao').addEventListener("mouseover", Fundo.trocarCor) 
d) document.getElementById('botao').addEventListener("click", Fundo.trocarCor) 
e) document.getElementById('botao').addEventListener("mouseout", Fundo.trocarCor) 
 
10. A partir do ES6 (ECMAScript 2015) passou-se a ter três formas de declarar variáveis em JavaScript. 
Qual opção possui essas três formas? 
 
a) var num 
 let num 
 const num = 1 
 
b) dim num 
 let num 
 const num = 1 
 
c) var num 
 dim num 
 const num = 1 
 
d) var num 
 let num 
 dim num = 1 
 
e) var num 
 let num 
 define num = 1 
 
11. A partir do ES6 (ECMAScript 2015) passou-se a ter três formas de declarar variáveis em JavaScript. 
Sobre a variável declarada com a palavra reservada VAR é possível afirmar que: 
 
a) Se for declarada dentro da função, ela local. Se for declarada dentro de um bloco (for, while, 
if) ela é local ao bloco. 
b) Se for declarada fora da função, ela é global. Se for declarada dentro da função, ela local. Se for 
declarada dentro de um bloco (for, while, if) ela NÃO é local ao bloco. 
c) Se for declarada fora da função, ela é local. Se for declarada dentro da função, ela global. 
d) Se for declarada fora da função, ela é global. Se for declarada dentro de um bloco (for, while, 
if) ela é local ao bloco. 
e) Se for declarada fora da função, ela é local. Se for declarada dentro de um bloco (for, while, 
if) ela é local ao bloco. 
 
12. A partir do ES6 (ECMAScript 2015) passou-se a ter três formas de declarar variáveis em JavaScript. 
Sobre a variável declarada com a palavra reservada LET é possível afirmar que: 
 
a) Se for declarada dentro da função, ela local. Não é limitada ao escopo de bloco (for, while, 
if) onde ela foi declarada. 
b) Se for declarada fora da função, ela é local. Se for declarada dentro da função, ela global. 
c) Se for declarada fora da função, ela é global. Não é limitada ao escopo de bloco (for, while, 
if) onde ela foi declarada. 
d) Se for declarada fora da função, ela é local. Não é limitada ao escopo de bloco (for, while, 
if) onde ela foi declarada. 
e) Se for declarada fora da função, ela é global. Se for declarada dentroda função, ela local. É limitada 
ao escopo de bloco (for, while, if) onde ela foi declarada. 
 
13. A partir do ES6 (ECMAScript 2015) passou-se a ter três formas de declarar variáveis em JavaScript. 
Sobre a variável declarada com a palavra reservada CONST é possível afirmar que: 
 
a) É uma variável que só pode ser declarada fora de função. 
b) É uma variável que só pode ser declarada dentro de uma função. 
c) É uma variável que, uma vez criada, seu valor nunca pode mudar. 
d) É uma variável que só pode ser criada dentro de um bloco. 
e) É uma variável que seu valor pode mudar. 
 
14. O array é a estrutura que permite que uma variável consiga armazenar mais de um valor. Cada valor é 
armazenado em uma posição da variável. Cada posição possui um número de identificação chamado de 
índice. Baseado nisso, qual é sintaxe que tem a criação correta de um array de nomes? 
 
a) const nomes = ${'José', 'Maria', 'Dalira', 'Gerson'} 
b) const nomes = ('José', 'Maria', 'Dalira', 'Gerson') 
c) const nomes = 
d) const nomes = ['José', 'Maria', 'Dalira', 'Gerson'] 
e) const nomes = #'José', 'Maria', 'Dalira', 'Gerson'# 
 
15. Um dos principais métodos de array no React JS é o map(). Este método permite executar uma função 
para cada item do array, retornando um novo array como resultado. No React JS, o método map() 
pode ser usado para gerar listas. Qual é a sintaxe correta para gerar uma lista de títulos de nível 1 em 
HTML com cada item do array nomes? 
 
a) const listaNomes = nomes.map( 
 (item) => {item} 
 ) 
 
b) const listaNomes = nomes.map( 
 {item} => (item) 
 ) 
 
c) (item) => {item}( 
 const listaNomes = nomes.map 
 ) 
 
d) const nomes.map = listaNomes( 
 (item) => {item} 
 ) 
 
e) const (item) => {item}( 
 listaNomes = nomes.map 
 ) 
 
16. O operador spread (propagação) permite copiar todo ou parte de um array ou de um objeto existente em 
outro array ou objeto. Qual a sintaxe correta para copiar para um terceiro array, o conteúdo de outros 
dois? 
 
a) const num1 = [3, 13, 17] 
 const num2 = [23, 25, 26] 
 const num3 = [***num1, ***num2] 
 
b) const num1 = [3, 13, 17] 
 const num2 = [23, 25, 26] 
 const num3 = [&&&num1, &&&num2] 
 
c) const num1 = [3, 13, 17] 
 const num2 = [23, 25, 26] 
 const num3 = [...num1, ...num2] 
 
d) const num1 = [3, 13, 17] 
 const num2 = [23, 25, 26] 
 const num3 = [%%%num1, %%%num2] 
 
e) const num1 = [3, 13, 17] 
 const num2 = [23, 25, 26] 
 const num3 = [###num1, ###num2] 
 
17. A renderização de HTML no React JS é realizada através do método render() do React JS. Esse 
método faz parte do módulo react-dom. Qual a sintaxe correta para renderizar um título de nível 1 do 
HTML? 
 
a) render( 
Alô Mundo, 
document.getElementById('root') 
 ) 
 
b) ReactDOM.render( 
Alô Mundo, 
document.getElementById('root') 
 ) 
 
c) ReactDOM( 
 Alô Mundo, 
 document.getElementById('root') 
 ) 
 
d) ReactDOM.getElementById( 
 Alô Mundo, 
 document.render('root') 
 ) 
 
e) document.getElementById( 
 Alô Mundo, 
 ReactDOM.render('root') 
 ) 
 
18. Sobre onde o código HTML é renderizado pelo método render(), complete a afirmação a seguir: 
 
No projeto React JS existe um diretório chamado _______________ e dentro desse diretório, existe um 
arquivo chamado _______________. Dentro desse arquivo existe uma tag _______________ com o 
atributo _______________. 
 
Baseado na afirmativa anterior marque a opção com os termos corretos para completa-la: 
 
a) id="root" / / index.html / public 
b) / id="root" / public / index.html 
c) public / index.html / id="root" / 
d) index.html / public / / id="root" 
e) public / index.html / / id="root" 
 
19. Os componentes React JS são como funções que retornam elementos HTML. São semelhantes as 
funções de JavaScript, mas eles retornam HTML. São independentes e reutilizáveis. Baseado nisso, 
quais são os dois tipos de componentes que podem ser criados em React JS? 
 
a) Componentes de Classe e Componentes de Array 
b) Componentes de Array e Componentes de Função 
c) Componentes de Classe e Componentes de Renderização 
d) Componentes de Classe e Componentes de Função 
e) Componentes de Renderização e Componentes de Função 
 
20. Os props (properties - propriedades) são argumentos de função que permitem passar parâmetros para os 
componentes. Baseado nos componentes abaixo, qual é a assinatura correta de um componente de 
função chamado Mensagem() que recebe o nome de uma pessoa como parâmetro? 
 
 
 
 
 
 
 
a) function Mensagem(props) { 
 return Seja bem-vindo(a) {props.nome}; 
 } 
 
b) function Mensagem(nome) { 
 return Seja bem-vindo(a) {nome}; 
 } 
 
c) function Mensagem(props) { 
 return Seja bem-vindo(a) {props}; 
 } 
 
d) function Mensagem(nome) { 
 return Seja bem-vindo(a) {props.nome}; 
 } 
 
e) function Mensagem(nome) { 
 return Seja bem-vindo(a) {props}; 
 }