Teste de Prática React JS para Desenvolvimento Pessoal

React JS

Perguntas de múltipla escolha e respostas (MCQs) sobre React para se preparar para exames, testes e certificações. Essas perguntas são retiradas de um exame escrito real e algumas partes são retiradas de uma entrevista. Portanto, você encontrará perguntas sobre técnicas básicas como UI, DOM, serviços, JSX e muito mais. Este questionário irá preparar facilmente qualquer pessoa para passar em seu teste online. A partir daqui, você aprenderá muitas coisas que precisam ajudá-lo a passar neste exame e no seu desenvolvimento pessoal.

1. Por que devemos aprender React Js?

O ReactJS apresenta soluções elegantes para alguns dos problemas mais persistentes da programação front-end. É rápido, escalável, flexível, poderoso e possui uma comunidade de desenvolvedores robusta que está crescendo rapidamente. Nunca houve um momento melhor para aprender React. Você desenvolverá uma compreensão sólida dos conceitos mais essenciais do React: JSX, componentes de classe e função, props, estado, métodos do ciclo de vida e hooks. Você poderá combinar essas ideias no estilo de programação modular do React. Não é um framework Angular ou Ember são frameworks onde algumas decisões já foram tomadas por você. O React é apenas uma biblioteca e você precisa tomar todas as decisões por si mesmo. Ele se concentra em ajudá-lo a construir interfaces de usuário usando componentes.

2. Expressões em JSX

Você pode incluir uma expressão JavaScript usando um par de chaves em qualquer lugar dentro do JSX:

Elementos JSX aninhados

const myClasses = (

Inscreva-se!

);

Para que o código seja compilado, uma expressão JSX deve ter exatamente um elemento externo. No bloco de código abaixo, a tag é o elemento externo. JSX é uma extensão de sintaxe do JavaScript. É usado para criar elementos DOM que são renderizados no DOM do React. Um arquivo JavaScript contendo JSX precisará ser compilado antes de chegar a um navegador da web. O bloco de código mostra algum código JavaScript de exemplo que precisará ser compilado.

3. React Virtual DOM

Se você está usando React ou aprendendo React, deve ter ouvido falar do termo Virtual DOM. Agora, o que é um Virtual DOM e por que o React o usa?

Virtual DOM

É aí que entra o conceito de Virtual DOM e tem um desempenho significativamente melhor do que o DOM real. O Virtual DOM é apenas uma representação virtual do DOM. Sempre que o estado de nossa aplicação muda, o Virtual DOM é atualizado em vez do DOM real. Bem, você pode perguntar O Virtual DOM não está fazendo a mesma coisa que o DOM real, isso parece um trabalho duplicado? Como isso pode ser mais rápido do que apenas atualizar o DOM real? A resposta é que o Virtual DOM é muito mais rápido e eficiente, aqui está o porquê.

Como o Virtual DOM é mais rápido?

Quando novos elementos são adicionados à interface do usuário, um Virtual DOM, que é representado como uma árvore, é criado. Cada elemento é um nó nesta árvore. Se o estado de qualquer um desses elementos mudar, uma nova árvore Virtual DOM é criada. Esta árvore é então comparada ou diffed com a árvore Virtual DOM anterior. Depois disso, o Virtual DOM calcula o melhor método possível para fazer essas alterações no DOM real. Isso garante que haja operações mínimas no DOM real. Portanto, reduzindo o custo de desempenho da atualização do DOM real.

4. Como o React usa o Virtual DOM

Agora que você tem uma compreensão justa do que é um Virtual DOM e como ele pode ajudar no desempenho do seu aplicativo, vamos ver como o React aproveita o Virtual DOM.

No React, cada parte da interface do usuário é um componente, e cada componente tem um estado. O React segue o padrão observável e ouve as alterações de estado. Quando o estado de um componente muda, o React atualiza a árvore Virtual DOM. Depois que o Virtual DOM foi atualizado, o React compara a versão atual do Virtual DOM com a versão anterior do Virtual DOM. Esse processo é chamado de diffing. Depois que o React sabe quais objetos do Virtual DOM mudaram, ele atualiza apenas esses objetos no DOM real. Isso torna o desempenho muito melhor quando comparado à manipulação direta do DOM real. Isso faz do React uma biblioteca JavaScript de alto desempenho. Em palavras simples, você diz ao React em qual estado deseja que a interface do usuário esteja e ele garante que o DOM corresponda a esse estado. O grande benefício aqui é que, como desenvolvedor, você não precisa saber como a manipulação de atributos, o tratamento de eventos ou as atualizações manuais do DOM acontecem nos bastidores. Todos esses detalhes são abstraídos dos desenvolvedores do React. Tudo o que você precisa fazer é atualizar os estados do seu componente conforme necessário e o React cuida do resto. Isso garante uma experiência de desenvolvedor superior ao usar o React.

5. Props em JSX

Existem várias maneiras diferentes de especificar props em JSX.

Expressões JavaScript como Props

Você pode passar qualquer expressão JavaScript como uma prop, cercando-a com {} . Por exemplo, neste JSX:

Para MyComponent, o valor de props.foo será 10 porque a expressão 1 + 2 + 3 + 4 é avaliada. instruções if e loops for não são expressões em JavaScript, portanto, não podem ser usadas diretamente em JSX. Em vez disso, você pode colocá-los no código circundante. Por exemplo:

function NumberDescriber(props) { let description; if (props.number % 2 == 0) { description = par; } else { description = ímpar; } return

; }

Você pode aprender mais sobre renderização condicional e loops nas seções correspondentes.

6. ReactJS - Componentes

Neste capítulo, aprenderemos como combinar componentes para tornar o aplicativo mais fácil de manter. Essa abordagem permite atualizar e alterar seus componentes sem afetar o restante da página.

Exemplo sem estado

Em nosso primeiro exemplo, o componente é App. Este componente é o proprietário do Header e do Content. Estamos criando Header e Content separadamente e apenas adicionando-os na árvore JSX em nosso componente App. Apenas o componente App precisa ser exportado.

7. Props e PropTypes no React

Props e PropTypes são um mecanismo importante para passar informações entre componentes React, e vamos analisá-los em detalhes aqui. Este tutorial irá apresentá-lo aos detalhes sobre props, passando e acessando props e passando informações para qualquer componente usando props. No entanto, é sempre uma boa prática validar os dados que estamos recebendo por meio de props usando PropTypes. Portanto, você também aprenderá como integrar PropTypes no React.

Compreendendo Props

O React nos permite passar informações para componentes usando coisas chamadas props (abreviação de propriedades). Como o React é composto por vários componentes, as props tornam possível compartilhar os mesmos dados entre os componentes que precisam deles. Ele usa um fluxo de dados unidirecional (de componentes pai para filhos). No entanto, com uma função de retorno de chamada, é possível passar props de volta de um componente filho para um componente pai. Esses dados podem vir em diferentes formas: números, strings, arrays, funções, objetos, etc. Podemos passar props para qualquer componente, assim como podemos declarar atributos em qualquer tag HTML. Dê uma olhada no código abaixo:

Neste trecho, estamos passando uma prop chamada posts para um componente chamado PostList. Essa prop tem um valor de {postsList}. Vamos analisar como acessar e passar dados.

8. Otimizando o Desempenho em Aplicativos React

Desde que o React foi introduzido, ele transformou a maneira como os desenvolvedores front-end constroem aplicativos da web, e seu