ReactJS Flashcards
O que é JSX?
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.
O que é ReactDOM?
???
Markup em JS
https://www.youtube.com/watch?v=x7cQ3mrcKaY
O que é um “Componente React”?
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.
O que seria um componente React válido?
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.
O que é o objeto “props”?
É 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”.
Referência detalhada da API de componente
https://pt-br.reactjs.org/docs/react-component.html
Qual é a convenção para nomes de componentes?
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.
Convenção para nomear componentes
https://pt-br.reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
JSX é obrigatório para trabalhar com React
Não
Como podemos insrir expressoes JavaScript dentro de um JSX? = Colocando entre chaves(“{}”). Todas as expressões JavaScript são válidas.
Inserção automática de ponto-e-vírgula
https://stackoverflow.com/q/2846283
Qual é a convenção para nomes de propriedades usada no JMX ao invés dos nomes de atributos do HTML?
camelCase. Por exemplo, class se transforma em className em JSX, e tabindex se transforma em tabIndex.
É seguro incorporar entradas de usuário em JSX?
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).
XSS (cross-site-scripting)
https://pt.wikipedia.org/wiki/Cross-site_scripting
Qual é a diferença entre usar JSX e usar chamadas React.createElement()?
Nenhuma. O Babel compila JSX para chamadas React.createElement().
O que são “Elementos React”?
Objetos resultantes do React.createElement() (ou do JMX).
Definição de linguagem “Babel”
https://babeljs.io/docs/en/next/editors
Qual é a relação entre “Elementos React” e “Componentes React”?
Elementos compõem os componentes.
O que é um “nó raiz do DOM”?
é o elemento HTML que terá todo seu conteúdo gerenciado pelo “React DOM”
Posso trabalhar com mais de um “nó raiz” em um projeto React?
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.
Como faço para renderizar um elemento React em um nó raiz?
Usando ReactDOM.render().
Por exemplo:
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));O que é um objeto imutável?
Uma vez criados, você não pode alterar seus elementos filhos ou atributos.
https://pt.wikipedia.org/wiki/Objeto_imut%C3%A1vel
Qual é a única forma de atualizar a interface usando o React?
A única forma de atualizar a interface é criar um novo elemento e passá-lo para ReactDOM.render().
Como o React DOM aplica modificações no DOM?
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.
Classe ES6
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Classes
É possível usar React em um projeto que não possui “nó raiz” na sua estrutura inicial?
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.
Devemos nomear as props de acordo com o contexto em que ele está sendo usado?
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.
Um componente pode modificar seus próprios “props”?
Independente se você declarar um componente como uma função ou uma classe, ele nunca deve modificar seus próprios “props”.
O que são funções puras?
São funções que não tentam alterar suas entradas e sempre retornam o mesmo resultado para as mesmas entradas.
Qual é a única regra estrita do React?
Todos os componentes React tem que agir como funções puras em relação ao seus props.
Para que serve o “state”?
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.”.
Qual é a diferença entre “state” e “props” de um componente?
O state do componente é similar as “props”, mas é privado e totalmente controlado pelo componente.
Posso criar um Componente de Classe que não receba uma “props”?
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”.
Para que serve o comando “super(props)”?
???
O que é o “mounting” e o “unmounting” no React e para que eles servem?
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()
Quais são os “métodos de ciclo de vida” de React?
componentDidMount() e componentWillUnmount()
Posso modificar o State diretamente?
Até é possível, mas isso não vai renderizar novamente o componente. Para que ele seja renderizado novamente, usamos o “setState()”.
As atualizações do state são sempre síncronas?
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 }; }); ]]
O que é stateful ou stateless?
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.
O “state” de um componente pode ser acessado por outros componentes?
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.
O que são fluxos de dados “top-down” ou “unidirecionais”?
É 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.
Quais são as diferenças entre manipular eventos em elementos React e manipular eventos em elementos DOM?
É 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.
Ao manipularmos eventos em elementos React podemos retornar false para evitar o comportamento padrão?
Não. Devemos chamar preventDefault explícitamente.
O que é um “synthetic event” de acordo com especificação W3C?
https://www.w3.org/TR/DOM-Level-3-Events/
Página “SyneticEvent” do ReactJS
https://pt-br.reactjs.org/docs/events.html
Como podemos fazer com que o “this” funcione dentro de uma callback?
Utilizando o “bind”
O que é uma Promisse?
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.
O que é uma callback?
É 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.
Como funciona uma “callback” com “bind”?
???
O que faz o “fetch()” o javascript?
???
