ReactJS - Perguntas para uma entrevista de emprego

Introdução

O nervosismo que bate antes da entrevista para aquela tão sonhada vaga é algo natural e que dificilmente podemos nos livrar. Você começa a suar frio, sente um friozinho na barriga e fica tentando imaginar o que o recrutador está pensando sobre você.

Quanto a isso, infelizmente, não podemos oferecer nenhuma solução. Pensando em outra forma de ajudar, pesquisamos e encontramos um repositório no GitHub que reunia um conjunto de questões técnicas que são comuns de surgirem em algum momento da sua entrevista.

Depois de comparar com outros materais nós decidimos reunir as questões que julgamos mais importante e trazer para vocês na forma de alguns posts, e aqui estamos, no primeiro deles. Caprichamos para o conteúdo ser o mais rico possível, então aproveitem a leitura <3

Princípios do React

1. O que é o React?

O React é uma biblioteca, ou um framework, JavaScript de código-fonte aberto, usado para criar interfaces de usuário, especialmente para single page applications. É usado para manipular a camada de visualização de aplicativos da Web e mobile.

2. Quais os principais recursos do React?

• Ele usa o VirtualDOM em vez do RealDOM, considerando que as manipulações do RealDOM são mais complicadas.
• Suporta renderização do lado do servidor.
• Segue fluxo de dados unidirecional.
• Usa componentes de interface do usuário reutilizáveis para desenvolver a aplicação.

3. O que é o JSX?

JSX é uma extensão de sintaxe semelhante ao XML. Basicamente, ele apenas fornece açúcar sintático para a função React.createElement(), possibilitando escrevermos JavaScript com HTML.

4. Qual a diferença entre props e state?

Tanto props quanto state são objetos simples do JavaScript. Enquanto os dois mantêm informações que influenciam a saída da renderização, eles são diferentes em sua funcionalidade em relação ao componente. As props são transmitidas para o componente de forma semelhante aos parâmetros da função, enquanto o state é gerenciada dentro do componente, de forma semelhante às variáveis ​​declaradas dentro de uma função.

5. Qual a utilidade das refs?

As refs são usadas para retornar uma referência ao elemento. Elas devem ser evitadas na maioria dos casos, no entanto, podem ser úteis quando você acessar diretamente um elemento da DOM ou uma instância de um componente.

6. O que é a Virtual DOM?

O Virtual DOM (VDOM) é uma representação na memória do Real DOM. A representação da interface do usuário é mantida na memória e sincronizada com o DOM "real". É uma etapa que ocorre entre a função de renderização que está sendo chamada e a exibição de elementos na tela. Todo esse processo é chamado de reconciliação.

7. Como o Virtual DOM funciona?

O Virtual DOM funciona em três etapas simples.

1. Sempre que qualquer dado subjacente é alterado, toda a interface do usuário é renderizada novamente na representação do DOM virtual.

2. Depois a diferença entre a anterior e a nova representação do DOM é calculada.

3. Após a conclusão dos cálculos, o DOM real será atualizado apenas com as coisas que realmente foram alteradas.

8. O que é React Fiber?

Fiber é o novo mecanismo de reconciliação ou reimplementação do algoritmo principal no React v16. O objetivo do React Fiber é aumentar sua adequação a áreas como animação, layout, gestos, capacidade de pausar, interromper ou reutilizar o trabalho e atribuir prioridade a diferentes tipos de atualizações; além de novas primitivas de simultaneidade.

9. Qual o objetivo principal do React Fiber?

O objetivo do React Fiber é aumentar sua adequação a áreas como animação, layout e gestos. Seu recurso destaque é a renderização incremental: a capacidade de dividir o trabalho de renderização em pedaços e distribuí-lo por vários frames.

10. O que são High-Order Components?

Um componente de ordem superior (high-order components) é uma função que pega um componente e retorna um novo componente. Basicamente, é um padrão derivado da natureza composicional do React.

const EnhancedComponent = higherOrderComponent(WrappedComponent)```

HOC podem ser usados para muitos casos, como por exemplo:

- Reutilização de código, lógica e abstração de autoinicialização.
- Abstração e manipulação de estados.
- Manipulação das props.

### 11. Por que os fragments são melhores contâineres que as divs?

Alguns motivos:

- Fragments são um pouco mais rápidos e, por não criarem um nó extra no DOM, acabam usando menos memória.
- Alguns mecanismos CSS, como o Flexbox e o CSS Grid, têm um relacionamento pai-filho especial, e a adição de divs no meio dificulta a manutenção do layout desejado.
- O inspetor do DOM fica menos confuso.

### 12. O que é o CRA e quais seus benefícios?

A ferramenta CLI `create-react-app` permite criar e executar aplicativos React rapidamente, sem nenhuma etapa de configuração.

O CRA inclui tudo o que precisamos para criar um aplicativo React:

1. Suporte a sintaxe React, JSX, ES6 e Flow.
2. Os extras de linguagens além do ES6, como o spread operator.
3. CSS com correção automática, para que você não precise do -webkit- ou de outros prefixos.
4. Um servidor de desenvolvimento ativo que avisa sobre erros comuns.
5. Um script de construção para agrupar JS, CSS e imagens para produção, com hashes e mapas de origem.

### 13. O que é o strict mode no React?

React.StrictMode é um componente útil para destacar possíveis problemas em um aplicativo. Assim como <Fragment>, <StrictMode> não processa nenhum elemento DOM extra. Ele ativa verificações e avisos adicionais para seus descendentes. Essas verificações se aplicam apenas ao modo de desenvolvimento.

import React from 'react'

function ExampleApplication() { return (

No exemplo acima, as verificações do strict mode se aplicam apenas aos componentes <ComponentOne> e <ComponentTwo>


### 14. Por que os nomes dos componentes devem começar com letra maiúscula?

Se você estiver renderizando seu componente usando JSX, o nome desse componente deverá começar com uma letra maiúscula, caso contrário, o React retornará um erro, informanod uma tag não reconhecida. Essa convenção ocorre porque apenas elementos HTML e tags SVG podem começar com uma letra minúscula.

class SomeComponent extends Component { // seu código aqui }

Você pode definir a classe do componente com a primeira letra minúscula, mas, quando importado, ele deve ter letra maiúscula.

class myComponent extends Component { render() { return

Quando importado para outro arquivo, ele deve começar com letra maiúscula:

### Conclusão

Por hora é só pessoal! Apesar de termos trazido apenas as questões que achamos mais recorrentes para esse primeiro post sobre os princípios do React, você pode encontar muitas outras [nesse repositório aqui](https://github.com/sudheerj/reactjs-interview-questions).
Fique de olho também nos próximos posts relativos a entrevistas de emprego, e se surgirem dúvidas ou sugestões, não deixem de mandar aqui nos comentários!