96 coisas que aprendi sobre React com o freeCodeCamp

tl;dr: Finalmente cheguei em uma das partes do curso que mais me interessava, que é aprender React, a biblioteca JS mais utilizada no mundo no momento, e a que mais contrata também.

Achei interessante a maneira com que o freeCodeCamp aborda o ensino de React, apesar de que não é completo, e também está meio defasado, por exemplo, eles ensinam a usar o método componentWillReceiveProps(nextProps)mas na própria documentação oficial do React esse método já está considerado no UNSAFE.

No fim tem que se complementar o currículo do freeCodeCamp, e eu estarei fazendo isso com a própria documentação oficial do React, que é ótima.

---

React: O que é React?

React é uma biblioteca JavaScript para construir interfaces de usuário.

React: O que significa JSX?

JavaScript XML

React: Pra que serve o JSX?

O JSX permite que você escreva HTML dentro do JavaScript.

React: Como se escreve JavaScript dentro de JSX?

Você escreve o JavaScript que quer dentro de { } (chaves)

React: JSX é JavaScript válido?

Não, JSX tem que ser compilado em JavaScript.

React: Qual ferramenta compila JSX em JavaScript válido?

Um compilador, como o Babel.

React: O que um compilador faz?

Compila código fonte de uma linguagem para outra.

React: Quantos elementos podem ser retornados em um JSX?

Apenas um.

React: Como se escreve um comentário?

{/* comentário */}

React: Qual pacote é usado para renderizar elementos no DOM?

ReactDOM

React: Qual método de ReactDOM é usado para renderizar um elemento no DOM?

ReactDOM.render()

React: Quais os dois parâmetros de ReactDOM.render()?

ReactDOM.render(elemento, container);

React: Qual a keyword para adicionar uma classe a um elemento?

className

React: Os atributos HTML e referências a eventos são escritos com?

camelCase

React: Em JSX todos os elementos devem ser fechados?

Sim.

React: Em JSX os elementos que se fecham automaticamente devem ser declarados como?

Terminando em " />"

React: Qualquer elemento pode-se fechar automaticamente tendo o “ />” ao final?

Sim.

React: Em React tudo é um?

Componente

React: Que tipo de componente é criado quando se usa uma função JavaScript?

Um Componente Funcional Sem Estado, Stateless Functional Component.

React: O que a função para criar um componente funcional sem estado (stateless functional component) deve retornar?

Um elemento JSX ou null.

React: O que um componente sem estado (stateless component) pode fazer?

Receber e renderizar dados.

React: Um componente deve começar com?

Letra Maiúscula, exemplo, MeuComponente

React: Um componente estende qual classe?

React.Component

React: Qual parâmetro é passado para o construtor de um componente?

props

React: Quais dois métodos devem existir em um componente?

constructor() e render()

React: Qual método deve ser chamado dentro do constructor de um component?

super(props);

React: Como se escreve uma tag HTML customizada para o componente Rodape?

<Rodape />

React: Componentes podem ser aninhados?

Sim.

React: Como se renderiza o componente “TypesOfFood” para o container?

ReactDOM.render(<TypesOfFood />, container);

React: O que significa props?

propriedades

React: Como se passa uma propriedade “date”, com a data atual “Date()“, para um componente “Data Atual”?

<DataAtual date={Date()} />

React: Como se acessa uma propriedade date passada?

{props.date}

React: Um componente funcional tem qual parâmetro padrão?

props

React: Como se passa um array de cores ["vermelho", "azul", "verde"] como props para um ComponenteFilho?

<ComponenteFilho cores={["vermelho", "azul", "verde"]} />

React: Defina uma prop padrão “items” como “0” para o componente CarrinhoDeCompras.

CarrinhoDeCompras.defaultProps = {items: 0};

React: Como se sobreescreve uma prop padrão?

Passando o valor para o componente.

React: Como se deve passar um número para uma prop?

O número deve ser passado dentro de chaves, como {10} para ser interpretado corretamente como JavaScript.

React: Como se definem as propTypes de MeuComponente?

MeuComponente.propTypes = {}

React: Dentro das propTypes, como se define que a prop quantidade será um valor numérico?

quantidade: PropTypes.number

React: Qual PropType define que a prop a ser passada é uma string?

PropTypes.string

React: Qual PropType define que a prop passada é uma função requerida?

PropTypes.func.isRequired

React: Qual PropType define que a prop passada seja um número?

PropTypes.number

React: Qual PropType define que a prop passada seja um booleano?

PropTypes.bool

React: Qual PropType define que a prop passada seja um array?

PropTypes.array

React: Qual PropType define que a prop passada seja um objeto?

PropTypes.object

React: Qual PropType define que a prop passada seja um elemento?

PropTypes.element

React: Como se acessa uma prop “data” dentro de um componente de classe?

{this.props.data}

React: Qual a diferença entre acessar as props em um componente funcional e em um componente de classe?

No componente funcional você acessa "props" diretamente, já na classe você acesso com "this.props"

React: O que é um stateless functional component?

Uma função que recebe props e retorna JSX.

React: O que é um stateless componente?

Uma classe que extende React.Component mas não use o state interno.

React: O que é um stateful component?

É qualquer componente que mantêm um state interno.

React: O que é state?

State são dados que a sua aplicação precisa saber e que mudam com o tempo.

React: Como se declara a variável state no construtor de um componente?

this.state =  {}

React: Como se renderiza a propriedade “name” vinda de “state”?

{this.state.name}

React: O que acontece com um componente quando o state é modificado?

O componente é re-renderizado utilizando os novos dados.

React: O state é encapsulado no componente?

Sim.

React: No método render() pode-se escrever JavaScript antes do return?

Sim.

React: Qual função altera o estado de um componente?

this.setState();

React: O que this.setState() recebe?

Um objeto com o novo estado do componente.

React: O estado de um componente pode ser alterado diretamente?

Não, deve-se usar this.setState();

React: Altere o estado de um componente, mudando o “name” para “React Rocks!”

this.setState({name: "React Rocks!"});

React: Como se faz um bind() do método de classe “addItem” com o “this” da classe?

this.addItem = this.addItem.bind(this);

React: Como se chama o método “addItem” em um componente “Botao” quando o mesmo é clicado?

<Botao onClick={this.addItem} />

React: Que dois elementos de formulário mantêm seu estado no DOM?

input e textarea

React: O que são Componentes Controlados?

São componente que mudam o estado de um elemento HTML, como textarea, para ser controlado pelo estado interno do componente React.

React: Qual o método para tratar as mudanças de um componente?

onChange

React: O que é passado por padrão para o método usado em onChange?

Um objeto evento.

React: Como se acessa a string do “evento” que vem de onChange?

evento.target.value

React: Crie um input que receba o valor de “state.input” e o onChange seja tratado por “handleChange“

<input value={this.state.input} onChange={this.handleChange} />

React: O que event.preventDefault() faz?

Para a ação padrão do evento, ex: para o envio de um formulário.

React: O que são métodos de ciclo de vida (lifecycle methods)?

São métodos para pontos específicos da vida do componente, como componentDidMount() ou componentDidUpdate()

React: Qual método de ciclo de vida é ideal para se adicionar uma chamada a uma API?

componentDidMount()

React: O que acontece ao se chamar setState() no método componentDidMount()?

O componente é re-renderizado.

React: Qual método de ciclo de vida é ideal para se adicionar um EventListener?

componentDidMount()

JavaScript: O que removeEventListener() faz?

Remove o EventListener do objeto selecionado.

React: Em qual método de ciclo de vida deve-se remover um Event Listener adicionado?

componentWillUnmount()

React: O que é uma boa prática a se fazer no método componentWillUnmount()?

Fazer qualquer "limpeza" que seja necessária no método, como, por exemplo, removeEventListener();

JavaScript: O que são DOM events?

São eventos (objetos) que são enviados ao código quando algo interessante acontece, ex: o evento keydown é enviado quando uma tecla do teclado é pressionada.

React: Qual método de ciclo de vida é executado antes de o componente receber props?

componentWillReceiveProps()

React: Qual o argumento padrão de componentWillReceiveProps()?

nextProps

React: Qual método de ciclo de vida é executado após um componente ser re-renderizado?

componentDidUpdate()

---

React: Renderização e Montagem são considerados coisas diferentes no ciclo de vida do componente.

---

React: Quando uma página é carregada o que acontece com os componentes?

Eles são montados.

React: componentWillReceiveProps() ainda deve ser usado?

Não.

React: Por padrão, um componente se re-renderiza sempre que ele recebe props e state?

Sim.

React: O que faz o método de ciclo de vida shouldComponentUpdate()?

Ele diz para o React se o componente deve ou não ser atualizado.

React: Por que não se deve usar shouldComponentUpdate()?

Porque todos os componentes que tiveram mudança de props ou de state devem ser atualizados.

React: Como se aplica estilos CSS inline em um elemento JSX?

Usando o atributo "style", como em HTML.

React: O que é passado para o atributo “style” de um elemento JSX?

Um objeto JavaScript

React: Como se estiliza um elemento JSX “div” com cor vermelha e tamanho de fonte 72px?

<div style={{color: "red", fontSize: 72}} />

React: As propriedades CSS com hífen, como font-size, devem ser escritas como em JSX?

Usando camelCase, font-size vira fontSize.

React: Dentro do método render() e antes do return() pode-se escrever JavaScript sem as {}?

Sim.

React: Como se faz uma condição concisa no método render()?

Com &&, ex: {condição && elemento} 

React: Quando se transforma um array em uma lista com map() qual atributo deve ser passado para cada elemento da lista?

key

React: Deve-se usar o indíce do array como atributo key?

Não, é melhor usar o id do item (vindo do DB)

React: Qual método é usado para renderizar um component App no servidor?

ReactDOMServer.renderToString();