Prévia do material em texto

Aula 13 - Componentes do React 
 
1. Pressupondo que você precise desenvolver um componente que tenha o 
nome Exemplo em forma de função, que deve devolver uma tag < h1> com uma 
saudação inicial para o visitante de sua página, qual deve ser a estrutura 
utilizada para montar esse componente? 
 
Resposta: C. 
function Exemplo() { 
 return ( 
 < h1 >Olá, seja bem-vindo ao nosso componente < /h1 > 
 ); 
} 
 
Justificativa: Um componente com função deve iniciar com a expressão function, 
precedida pelo nome da função com a primeira letra em maiúsculo. Também deve 
conter uma função de retorno que obrigatoriamente deve ter uma tag macro, 
por, exemplo uma tag <div> ou <h1> envolvendo todo o retorno. Portanto, a resposta 
correta é: 
function Exemplo() { 
 return ( 
 < h1> Olá, seja bem-vindo ao nosso componente < /h1> 
 ); 
} 
 
 
 
2. Quando se deseja montar um componente usando a notação de classes 
JavaScript, deve-se seguir alguns requisitos de estrutura mínima. Nas 
alternativas a seguir, estão listadas algumas tentativas de montar um 
componente. Assinale aquela que cumpre tais requisitos na sua integralidade. 
 
Resposta: E. 
class Exemplo{ 
 render() { 
 return ( 
 <h1>Olá, seja bem-vindo ao nosso componente</h1> 
 ); 
 } 
} 
 
Justificativa: Para um componente usando class estar completo, primeiro ele deve 
usar a notação class precedida do nome do componente com a primeira letra em 
maiúsculo. Em seguida, sua estrutura deverá, obrigatoriamente, ter um 
método render que tem uma função de retorno; dentro dessa função deve conter o 
elemento a ser retornando, que, obrigatoriamente, deve ter uma tag macro, 
por exemplo, uma tag <div> ou <h1> envolvendo todo o retorno. Portanto, a resposta 
correta é: 
class Exemplo{ 
 render() { 
 return ( 
 <h1>Olá, seja bem-vindo ao nosso componente</h1> 
 ); 
 } 
} 
 
 
 
https://ultra.content.blackboardcdn.com/ultra/uiv3900.74.0-rel.25_afc4ff2
 
 
3. As props são utilizadas para o envio de informações para os componentes por 
meio de parâmetros. Em um componente de função, elas devem ser recebidas no 
cabeçalho da função, por exemplo, function Exemplo(props). Pressupondo que 
se tem duas propriedades chamadas nome e texto, como elas devem ser 
utilizadas dentro do componente? 
 
Resposta: D. props.nome e props.texto. 
 
Justificativa: As props devem seguir o padrão de sua criação, nesse caso, no 
cabeçalho da função, estarão escritas em letras minúsculas tanto a props quanto as 
suas propriedades nome e texto. Assim, para utilizá-las, deve-se sempre escrevê-las 
na notação props.nome, que é o padrão adotado pelo JavaScript e, 
consequentemente, pelo React. 
 
 
4. Para se criar o componente dentro do DOM do HTML e, consequentemente, fazê-
lo aparecer na tela do usuário, deve-se renderizar os componentes. A 
renderização deve ser feita por meio da função ReactDOM.render(), que espera 
por parâmetro, sequencialmente: 
 
Resposta: C. o componente e o elemento DOM do HTML. 
 
Justificativa: Para renderizar um componente, devem ser passados por parâmetros, 
primeiramente, o componente que será renderizado e, depois, o elemento HTML de 
referência em que o componente irá aparecer. Por exemplo: 
ReactDOM.render(<Exemplo />, document.getElementById('idTag')); 
 
 
5. Você está desenvolvendo uma página de formulário que tem diversos TextBox. 
Dentro de seu componente de Formulario, ele deseja chamar um 
componente TextBox, que deve receber como props o seu tipo (type), o texto 
da label (label) e o seu nome (name). Diante disso, assinale a alternativa que 
apresenta a forma correta de fazer essa chamada. 
 
Resposta: B. <TextBox type="text" label="Login" name="login" />. 
 
Justificativa: Os componentes do React usam por padrão as iniciais maiúsculas (como 
forma de diferenciar componentes de tags do HTML). Como o componente sugerido 
era TextBox, deve-se chamá-lo <TextBox />. As props type, label e name devem seguir 
a especificação nomedaprops=”valor”, ficando, portanto, a chamada correta do 
componente: 
<TextBox type="text" label="Login" name="login" />