As 50 principais perguntas e respostas da entrevista React que você deve saber

Os desenvolvedores do ReactJS são muito procurados e há uma boa razão para isso. Mas você terá que provar sua proficiência na estrutura para conseguir o emprego.

A seguir estão perguntas frequentes sobre o desenvolvimento do React e suas respostas que você deve conhecer. Inclui tudo, desde o básico até tópicos mais avançados.

1. O que é Reagir?

React é gratuito e de código aberto Biblioteca JavaScript para desenvolvimento de interface de usuário, que usa componentes para criar saída para aplicativos de página única. React foi desenvolvido pelo Facebook (Meta) e é mantido por uma comunidade de desenvolvedores.

2. Liste os recursos importantes do React

Os recursos mais importantes do React incluem:

1. FÁCIL DE USAR
2. Desenvolvimento rápido
3. O uso de componentes
4. Jsx
5. O DOM virtual
6. Alto desempenho
7. Ligação de dados unidirecional

3. Onde está o repositório de projetos do React?

React é um mono-repositório que vive em https://github.com/facebook/react. Ser um mono-repositório significa que todo o seu código e outras fontes são armazenados no mesmo local para facilitar o desenvolvimento e o gerenciamento.

4. Qual é a versão estável atual do React?

A versão estável mais atual do React de 14 de junho de 2022 é 18.2.0.

5. Indique as diferenças entre React Native e ReactJS

React e ReactJS são os mesmos, enquanto o React Native é construído no React. Por suas diferenças, o React é usado na criação de interfaces de usuário dinâmicas e responsivas para aplicativos da Web, enquanto o React Native é projetado para criar aplicativos como aplicativos móveis.

6. Qual é a diferença entre um Elemento e um Componente?

Um elemento React é um objeto simples e imutável criado para representar um nó DOM. Ser imutável significa que não pode ser alterado depois de criado, pois é renderizado no DOM. Um componente React, por outro lado, é mutável e produz saída JSX uma vez renderizado.

7. Como você cria um Componente?

Existem duas maneiras de criar um componente no React: 1.) Componentes de função e 2.) componentes de classe. Como os nomes indicam, um componente de função é criado usando uma declaração de função, enquanto um componente de classe é criado usando uma declaração de classe.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Liste os 4 estágios de um componente React

Um componente React passa pelos 4 estágios a seguir em seu ciclo de vida:

1. Estado inicial – Construção do componente no estado padrão com adereços iniciais
2. Fase de montagem – Renderização JSX do componente
3. Fase de atualização – Mudanças no estado do componente e redesenho do aplicativo
4. Fase de desmontagem – Remoção de componentes do DOM

9. Explique o que significa um Componente de ordem superior

Um componente de ordem superior (HOC) é uma metodologia React para criar componentes. Ele usa um componente existente para criar um novo com funcionalidade extra. Em outras palavras, um HOC é uma função que recebe um componente como argumento e retorna um novo componente com recursos adicionados.

10. O que são componentes controlados e não controlados?

Um componente controlado é um componente React que obtém seu valor por meio de props e notifica o sistema sobre quaisquer alterações por meio de callbacks. Ele é controlado por um componente pai que gerencia seus estado e passa os valores como props para o componente controlado. Um componente não controlado, por outro lado, gerencia seu estado, e você precisará consultar o DOM utilização ref para obter o seu valor.

11. O que são Props no React?

Props no React é apenas uma maneira simples de dizer propriedades e, com isso, você está se referindo às propriedades de um componente. Props são usados ​​para passar dados de um componente pai para um ou mais componentes filho e são somente leitura para o componente filho.

12. O que são adereços.crianças?

O atributo Props.children contém informações sobre todo o conteúdo de um componente que possui uma tag de abertura e de fechamento. Esses filhos referem-se a todos os elementos definidos dentro do componente atual e podem ser um, muitos ou nenhum.

13. Você pode atualizar props no React?

Não, os adereços no React são de cima para baixo e imutáveis. Isso significa que um componente pode enviar quaisquer propriedades que desejar para seus filhos, mas não pode atualizar suas props. Apenas seu pai pode atualizar seus adereços.

14. O que é JSX?

JSX significa JavaScript XML. É uma extensão de sintaxe JavaScript que possibilita escrever HTML dentro do código react. O navegador não entende JSX de qualquer maneira, então o React tem que renderizá-lo em código HTML legível.

15. Qual é a diferença entre um componente e um elemento

Um elemento é uma definição sem estado e imutável de um nó DOM virtual. Ele contém um tipo e uma propriedade, mas nenhum método como um componente possui. Esta falta de métodos torna-o rápido.

16. O que é um estado no React?

Um estado no React se refere a um objeto embutido em um componente que é usado para manter e gerenciar informações sobre esse componente. Um estado pode mudar ao longo do tempo e, portanto, acionará uma nova renderização desse componente. Você tem que definir o estado no método construtor do componente, ou então o componente se torna sem estado.

17. O que é um Componente sem estado?

Um componente React sem estado não tem um estado. Isso significa que você não pode definir seu estado com this.setState() método nem renderizou. Um componente sem estado pode ter adereços.

18. Como você atualiza um estado no React

Você atualiza o estado de um componente chamando seu this.setState() método.

19. Explique o modo estrito do React

O modo estrito do React é uma ferramenta que ajuda o desenvolvedor a descobrir possíveis problemas no aplicativo, ativando verificações de nível mais profundo nos componentes e destacando mais avisos. O modo estrito está disponível apenas no modo de desenvolvimento.

20. O que significa Lifting State Up in React?

Isso significa permitir que os componentes filho compartilhem um estado comum de seu pai, pois isso torna as coisas mais fáceis de gerenciar do que cada componente filho gerenciar individualmente o estado comum.

21. Como você passa dados no React?

Você passa dados em React usando props e callbacks. As props do React são unidirecionais, permitindo que as propriedades passem apenas de componentes pai para seus filhos. Para passar dados de um componente filho para um pai, você precisa usar uma função de retorno de chamada.

22. Defina Fluxo em reação

Flux é um conceito unidirecional para direcionar o fluxo de dados em um aplicativo. Ser unidirecional significa que os dados só podem passar de componentes pai para filho. O Flux também pode incluir vários armazenamentos de dados por aplicativo.

23. Defina Redux em reação

Redux é uma biblioteca JavaScript de código aberto útil para gerenciar estados complexos em um aplicativo. É independente e pode ser usado em outros frameworks como o Angular. Ao contrário do Flux, o Redux centraliza o gerenciamento de estado de um aplicativo, facilitando assim a construção de interfaces de usuário complexas.

24. Quando você deve usar o Redux?

Nem todos os aplicativos precisam do Redux. Mas é útil nas seguintes condições:

1. Quando você tem grandes quantidades de estados de aplicativos em seu aplicativo
2. Quando a lógica do seu aplicativo é complexa
3. Quando seu aplicativo tem uma grande base de código
4. Quando você precisa atualizar o aplicativo com frequência
5. Quando você tem muitas pessoas trabalhando no aplicativo

25. Qual é a principal diferença entre Redux e Flux?

A principal diferença entre os dois é que o Redux gerencia todos os dados do aplicativo de um único armazenamento, enquanto você pode ter vários armazenamentos no Flux.

26. Liste os Componentes do Redux

Existem 4 partes principais do Redux:

1. Store – Aqui é onde você armazena o estado do aplicativo.
2. Ação – Esses são eventos que fazem com que o aplicativo envie dados para a loja Redux.
3. Redutor – Esta é uma função que aceita o estado atual do aplicativo e uma ação como argumentos e, em seguida, retorna um novo estado como resultado.
4. middleware – Esse recurso permite que um desenvolvedor capture todas as ações de um componente antes que elas atinjam a função redutora.

27. O que são Hooks React?

Hooks do React são um recurso de componentes de função que permitem acessar diferentes recursos do React, como dados de estado e atualizações de renderização. Foi introduzido no React 16.8.

28. Liste o tipo de Hooks no React

Existem mais de 15 ganchos no React, começando dos ganchos básicos como useState, useEffect e useContext para ganchos adicionais como useCallback, useReducer, useMemo, useRef e assim por diante.

29. O que são Fragmentos?

Um fragmento React é uma maneira conveniente de agrupar vários elementos filho em um componente, sem adicioná-los ao DOM. Você simplesmente define a tag usando:

<>

or

e carregue todos os elementos filho que você deseja dentro. A única diferença é que a versão abreviada <> não aceita chaves e atributos, enquanto a versão longa sim.

30. Liste os principais métodos do pacote react-dom

Eles são o createPortal() para renderizar filhos em um DOM externo e o flushSync() para liberar atualizações. Existem também os métodos render() e hydrate(), que foram substituídos por createRoot() e hydrateRoot() desde o React 18.

31. O que são React Keys?

As chaves são identificadores exclusivos que são mais bem usados ​​para gerenciar listas. As chaves facilitam a identificação de itens individuais em uma lista e o conhecimento de quando cada item foi atualizado, excluído ou alterado de alguma forma.

32. Por que as teclas React são importantes?

As chaves são importantes no React porque ajudam na renderização eficiente do DOM real. O React é bom porque tenta minimizar quais componentes ele renderiza novamente após um evento, e usar chaves em uma lista evita que o React tenha que renderizar novamente listas inteiras, o que pode ser um problema com listas grandes.

33. O que é um Evento no React?

Um evento é qualquer ação em um aplicativo que vem do usuário ou do sistema. Um evento pode variar de um clique do mouse ou toque em dispositivos móveis para redimensionar uma janela, pressionar uma tecla, arrastar, focar e assim por diante.

34. Explique o que Evento sintético Significa

Um evento sintético é um wrapper em torno dos eventos nativos de um navegador, com o problema de que navegadores diferentes nomeiam seus eventos de maneira diferente. O React usa eventos sintéticos para evitar o problema de ter que criar várias implementações e métodos para todos os diferentes navegadores existentes. Dessa forma, o React mantém nomes comuns para todos os diferentes eventos do navegador como uma API unificada.

35. O que é o Webpack?

Webpack é um sistema de agrupamento de módulos usado para combinar e minimizar arquivos JavaScript e CSS. Ele é construído em Node.js e é útil ao trabalhar com um grande número de arquivos ou ativos sem código, como imagens e fontes.

36. O que é o aplicativo create-react?

Create-react-app é uma ferramenta que ajuda você a criar um aplicativo React de página única em seu ambiente Node.js. Ele gera todos os arquivos e pastas que você precisa para iniciar um aplicativo básico e você o leva a partir daí. Requer Node versão 14.0.0 para cima e npm da ver. 5.6.

O uso é simples:

npx create-react-app meuNovoApp

cd meuNovoAplicativo

início npm

37. Você pode renderizar o lado do servidor com o React?

Sim, você pode, embora possa consumir muitos recursos para grandes projetos. A renderização do lado do servidor é útil porque melhora a experiência do usuário e SEO. Você precisará de um ambiente Node.js, um bundler como Webpack e uma estrutura como Próximo.js e Remix para renderizar aplicativos React em tempo de execução. Uma solução para o uso intensivo de recursos é usar um gerador de site estático, como o baseado em Next.js gatsby.

38. Explique o que uma função de seta faz

Uma função de seta é simplesmente uma maneira mais curta de definir funções. É uma abreviação ES6 que substitui:

= função() com ()=>.

Por exemplo:

teste = function(){

return “Isto é um teste”;

}

então se torna:

teste = () => {

return “Isto é um Teste”;

}

ou para instruções de linha única:

teste = () => “Isto é um Teste”;

39. O que é uma Roteador React?

O roteador React é uma biblioteca que fornece funcionalidade de roteamento em um aplicativo React. Isso facilita a inclusão e o uso de componentes de navegação avançados, que podem ser muito úteis para projetos grandes ou complexos.

40. Quais são as principais vantagens de usar o React Router?

Ele cria diferentes caminhos de URL para seu aplicativo e fornece valores window.location e um objeto de histórico.

41. O que é ComponentWillUnmount()?

Este é um método de componente que é chamado sempre que o React está prestes a destruir o componente. É um bom lugar para limpar coisas, limpar cronômetros, cancelar solicitações de rede e lidar com outros problemas importantes de desinicialização.

42. O que é o Construtor()?

O construtor é o método do componente que é chamado durante a inicialização do componente. Normalmente é usado para inicializar estados locais e para vincular métodos de manipuladores de eventos.

43. O que é DOM Virtual?

O DOM virtual do React é uma cópia leve do DOM do documento HTML real. Ele é usado para gerenciamento eficiente e atualização de alterações no DOM real.

44. Quais são as vantagens do DOM virtual sobre o DOM real?

O DOM virtual é leve e mais rápido para renderizar do que o DOM real, e isso torna mais eficiente renderizar primeiro no DOM virtual e só fazer alterações no DOM real quando houver necessidade. Cada nó no DOM real tem um componente correspondente no DOM virtual e, uma vez que haja alterações em um componente virtual após a renderização, o React sabe exatamente qual nó HTML real deve ser atualizado ou excluído.

45. Explique o termo Reconciliação em reação

A reconciliação é o método do React de atualizar o DOM real apenas quando necessário, verificando as versões atualizadas do DOM virtual por meio de diffing e atualizando apenas os nós exatos que foram alterados no DOM real.

46. Explique o termo Profiler em reação

O Profiler é uma ferramenta React que ajuda a otimizar um aplicativo medindo quantas vezes um aplicativo é renderizado e quanto tempo cada componente leva para renderizar. Isso ajuda o desenvolvedor a identificar partes do aplicativo que podem precisar de otimização.

47. Explique o termo Contexto em reação

Contexto é um método de passar dados entre componentes React em muitos níveis sem ter que passar os dados por cada nível de aninhamento usando props. É melhor usado para facilitar o compartilhamento de dados com muitos componentes que não precisam de atualizações constantes, como informações do tema e dados do usuário. Sua desvantagem é que pode dificultar a reutilização de componentes.

48. Explique o termo Montagem em reação

A montagem no React é o processo de anexar um componente como um nó ao DOM. A desmontagem é o oposto.

49. Explique o termo Rendering em reação

Renderização é o processo de desenhar um componente. Geralmente ocorre quando o estado do componente muda e o React precisa redesenhar a interface do usuário. Se um componente for redesenhado durante a renderização, seus componentes filhos também serão redesenhados.

50. Explique o termo Limite de erro em reação

Limite de erro refere-se a um componente React que captura os erros JavaScript de seus componentes filho, registra os erros e exibe uma interface de usuário de fallback no lugar dos nós que falharam. Os limites de erro foram introduzidos no React 16.

Conclusão

Chegamos ao final desta lista das 50 principais perguntas obrigatórias da entrevista React e esperamos que você tenha uma boa ideia do que pode esperar agora.

Você também deve observar que nada permanece o mesmo e sua entrevista pode tomar qualquer direção. Portanto, você deve continuar estudando e se manter atualizado.