ReactJS

Question 1

O que é JSX?

Answer 1

Extensão de sintaxe para JavaScript. JSX pode lembrar uma linguagem de template, mas que vem com todo o poder do JavaScript. JSX produz “elementos” do React. Depois da compilação, as expressões em JSX se transformam em chamadas normais de funções que retornam objetos JavaScript.

Question 2

O que é ReactDOM?

Answer 2

???

Question 3

Markup em JS

Answer 3

https://www.youtube.com/watch?v=x7cQ3mrcKaY

Question 4

O que é um “Componente React”?

Answer 4

Unidade que contém lógica e markup juntos. Conceitualmente, componentes são como funções JavaScript. Eles aceitam entradas arbitrárias (chamadas “props”) e retornam elementos React que descrevem o que deve aparecer na tela.

Question 5

O que seria um componente React válido?

Answer 5

Algo que aceita um único argumento de objeto “props” com dados e retorna um elemento React. // Componentes React podem estar na forma de função ou de classe EC6.

Question 6

O que é o objeto “props”?

Answer 6

É o conjunto de informações passadas como argumento para montar um elemento React. Quando o React vê um elemento representando um componente definido pelo usuário, ele passa atributos JSX e componentes filhos para esse componente como um único objeto. Nós chamamos esse objeto de “props”.

Question 7

Referência detalhada da API de componente

Answer 7

https://pt-br.reactjs.org/docs/react-component.html

Question 8

Qual é a convenção para nomes de componentes?

Answer 8

O React trata componentes começando com letras minúsculas como tags do DOM. Por exemplo, <div></div> representa uma tag div do HTML, mas representa um componente e requer que Welcome esteja no escopo.

Question 9

Convenção para nomear componentes

Answer 9

https://pt-br.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

Question 10

JSX é obrigatório para trabalhar com React

Answer 10

Não
Como podemos insrir expressoes JavaScript dentro de um JSX? = Colocando entre chaves(“{}”). Todas as expressões JavaScript são válidas.

Question 11

Inserção automática de ponto-e-vírgula

Answer 11

https://stackoverflow.com/q/2846283

Question 12

Qual é a convenção para nomes de propriedades usada no JMX ao invés dos nomes de atributos do HTML?

Answer 12

camelCase. Por exemplo, class se transforma em className em JSX, e tabindex se transforma em tabIndex.

Question 13

É seguro incorporar entradas de usuário em JSX?

Answer 13

Por padrão, o React DOM escapa quaisquer valores incorporados no JSX antes de renderizá-los. Assim, assegura que você nunca injete algo que não esteja explicitamente escrito na sua aplicação. Tudo é convertido para string antes de ser renderizado. Isso ajuda a prevenir ataques XSS (cross-site-scripting).

Question 14

XSS (cross-site-scripting)

Answer 14

https://pt.wikipedia.org/wiki/Cross-site_scripting

Question 15

Qual é a diferença entre usar JSX e usar chamadas React.createElement()?

Answer 15

Nenhuma. O Babel compila JSX para chamadas React.createElement().

Question 16

O que são “Elementos React”?

Answer 16

Objetos resultantes do React.createElement() (ou do JMX).

Question 17

Definição de linguagem “Babel”

Answer 17

https://babeljs.io/docs/en/next/editors

Question 18

Qual é a relação entre “Elementos React” e “Componentes React”?

Answer 18

Elementos compõem os componentes.

Question 19

O que é um “nó raiz do DOM”?

Answer 19

é o elemento HTML que terá todo seu conteúdo gerenciado pelo “React DOM”

Question 20

Posso trabalhar com mais de um “nó raiz” em um projeto React?

Answer 20

Aplicações construídas apenas com React geralmente tem apenas um único nó raiz no DOM. Se deseja integrar o React a uma aplicação existente, você pode ter quantos nós raiz precisar.

Question 21

Como faço para renderizar um elemento React em um nó raiz?

Answer 21

Usando ReactDOM.render().
Por exemplo: 
const element = <h1>Hello, world</h1>; 
ReactDOM.render(element, document.getElementById('root'));

Question 22

O que é um objeto imutável?

Answer 22

Uma vez criados, você não pode alterar seus elementos filhos ou atributos.
https://pt.wikipedia.org/wiki/Objeto_imut%C3%A1vel

Question 23

Qual é a única forma de atualizar a interface usando o React?

Answer 23

A única forma de atualizar a interface é criar um novo elemento e passá-lo para ReactDOM.render().

Question 24

Como o React DOM aplica modificações no DOM?

Answer 24

O React DOM compara o elemento novo e seus filhos com os anteriores e somente aplica as modificações necessárias no DOM para levá-lo ao estado desejado.

Question 25

Classe ES6

Answer 25

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Classes

Question 26

É possível usar React em um projeto que não possui “nó raiz” na sua estrutura inicial?

Answer 26

Tipicamente, novos aplicativos React tem um único componente App no topo. Contudo, se você integrar o React em um aplicativo existente, você pode começar de baixo para cima com um pequeno componente como o Button e gradualmente chegar ao topo da hierarquia de exibição.

Question 27

Devemos nomear as props de acordo com o contexto em que ele está sendo usado?

Answer 27

A recomendação na documentação é nomear props a partir do ponto de vista do próprio componente ao invés do contexto em que ele está sendo usado.

Question 28

Um componente pode modificar seus próprios “props”?

Answer 28

Independente se você declarar um componente como uma função ou uma classe, ele nunca deve modificar seus próprios “props”.

Question 29

O que são funções puras?

Answer 29

São funções que não tentam alterar suas entradas e sempre retornam o mesmo resultado para as mesmas entradas.

Question 30

Qual é a única regra estrita do React?

Answer 30

Todos os componentes React tem que agir como funções puras em relação ao seus props.

Question 31

Para que serve o “state”?

Answer 31

O state permite aos componentes React alterar sua saída ao longo do tempo em resposta a ações do usuário, respostas de rede e quaisquer outras coisas, sem violar a única regra estrita do Rect: “Todos os componentes React tem que agir como funções puras em relação ao seus props.”.

Question 32

Qual é a diferença entre “state” e “props” de um componente?

Answer 32

O state do componente é similar as “props”, mas é privado e totalmente controlado pelo componente.

Question 33

Posso criar um Componente de Classe que não receba uma “props”?

Answer 33

Sim e não. O objeto “props” estará lá mesmo que implícito, sendo necessário torná-lo explícito ao implementar o construtor.

Componentes de classes devem sempre chamar o construtor com “props”.

Question 34

Para que serve o comando “super(props)”?

Answer 34

???

Question 35

O que é o “mounting” e o “unmounting” no React e para que eles servem?

Answer 35

Em aplicações com muitos componentes, é muito importante limpar os recursos utilizados pelos componentes quando eles são destruídos.

Queremos configurar um temporizador sempre que o componente é renderizado para o DOM pela primeira vez. Isso é chamado de “mounting” no React.

Nós também queremos limpar o temporizador sempre que o DOM produzido pelo componente for removido. Isso é chamado de “unmounting” no React.

métodos especiais: componentDidMount() e componentWillUnmount()

Question 36

Quais são os “métodos de ciclo de vida” de React?

Answer 36

componentDidMount() e componentWillUnmount()

Question 37

Posso modificar o State diretamente?

Answer 37

Até é possível, mas isso não vai renderizar novamente o componente. Para que ele seja renderizado novamente, usamos o “setState()”.

Question 38

As atualizações do state são sempre síncronas?

Answer 38

Não! O React pode agrupar várias chamadas setState() em uma única atualização para desempenho.

Como this.props e this.state podem ser atualizados de forma assíncrona, você não deve confiar em seus valores para calcular o próximo state.

Por exemplo, esse código pode falhar ao atualizar o contador:
[[ Errado: this.setState({ counter: this.state.counter + this.props.increment });]]
[[ Correto: this.setState((state, props) => ({ counter: state.counter + props.increment })); ]]
[[ Correto (ArrowFunc) this.setState(function(state, props) { return { counter: state.counter + props.increment }; }); ]]

Question 39

O que é stateful ou stateless?

Answer 39

Apenas o adjetivo que diz se algo possui ou não um “state”. Nos apps React, se um componente é stateful ou stateless é considerado um detalhe de implementação do componente que pode mudar com o tempo. Você pode usar componentes sem state dentro de componentes com “state” e vice-versa.

Question 40

O “state” de um componente pode ser acessado por outros componentes?

Answer 40

Por padrão, não. O state é geralmente chamado de local ou encapsulado. Não é acessível a nenhum componente que não seja o que o possui e o define.

Contudo, um componente pode escolher passar seu “state” como props para seus componentes filhos.

Question 41

O que são fluxos de dados “top-down” ou “unidirecionais”?

Answer 41

É uma característica do fluxo de dados entre os componentes React porque qualquer state é sempre de propriedade de algum componente específico, e qualquer dado ou interface do usuário derivado desse state só pode afetar os componentes “abaixo” deles na árvore.
Se você imaginar uma árvore de componentes como uma cascata de props, o state de cada componente é como uma fonte de água adicional que o une em um ponto arbitrário, mas também flui para baixo.

Question 42

Quais são as diferenças entre manipular eventos em elementos React e manipular eventos em elementos DOM?

Answer 42

É basicamente a mesma coisa, mas com três diferenças de sintaxe:
1ª) Eventos em React são nomeados usando camelCase ao invés de letras minúsculas.
2ª) Com o JSX você passa uma função como manipulador de eventos ao invés de um texto.
3ª) Não podemos retornar false para evitar o comportamento padrão no React. Devemos chamar preventDefault explícitamente.

Question 43

Ao manipularmos eventos em elementos React podemos retornar false para evitar o comportamento padrão?

Answer 43

Não. Devemos chamar preventDefault explícitamente.

Question 44

O que é um “synthetic event” de acordo com especificação W3C?

Answer 44

https://www.w3.org/TR/DOM-Level-3-Events/

Question 45

Página “SyneticEvent” do ReactJS

Answer 45

https://pt-br.reactjs.org/docs/events.html

Question 46

Como podemos fazer com que o “this” funcione dentro de uma callback?

Answer 46

Utilizando o “bind”

Question 47

O que é uma Promisse?

Answer 47

m objeto que recebe uma função que será processada em paralelo ao fluxo principal. Ela sempre terá um retorno que pode ser “resolve” no caso de sucesso ou “reject” caso ocorra algum erro.

Question 48

O que é uma callback?

Answer 48

É uma função passada como argumento para outra e que será executada após a conclusão da execução desta em que foi inserida.

Question 49

Como funciona uma “callback” com “bind”?

Answer 49

???

Question 50

O que faz o “fetch()” o javascript?

Answer 50

???