Thread by @fdaciuk

Já que tá todo mundo fazendo, vou copiar 😂😂

1 RT = 1 dica de React ⚛️

1. Prefira escrever seus componentes como funções ao invés de class. Funções são mais simples, e minificam melhor, deixando o bundle final bem menor :)

2. webpack hoje é a ferramenta mais usada junto com React, mas existem outras ferramentas tão boas quanto, para transpilar seu código em React e ES6+.

Uma que eu recomendo, além do webpack, é o Parcel:
parceljs.org

3. O React em si é bastante simples. Para aproveitar o máximo da ferramenta, foque seus estudos em JS puro.

Isso vai facilitar, e muito, entender o porquê as coisas funcionam da forma que funcionam no React.

4. Ter um conhecimento básico da API DOM também vai ajudar muito seus estudos de React.

5. React funciona com um fluxo de dados unidirecional: o estado é sempre passado de um componente pai para os filhos.

Então crie um único componente que manipule estado no seu app, e passe sempre esse estado para baixo, para os filhos, via props.

6. Em uma SPA, você pode fazer o componente inicial de cada "página", ou tela, o componente pai (stateful).

7. O comp. filho precisar executar uma ação que modifica o estado que está no pai:

O pai vai conter o objeto de estado e as funções que modificam esse estado (com setState).

A única diferença é que o filho pode receber a referência da função para executá-la.

8. Quando o filho executar a função, o conteúdo dela, que faz o setState, está no pai. Logo o estado é alterado corretamente, e o fluxo de dados continua unidirecional, pois ao mudar o estado no pai, os filhos abaixo dele serão atualizados.

9. this.setState() é assíncrono.

Se você precisa debugar para checar se algum valor no estado foi alterado corretamente, coloque seu debugger ou console.log no método render(), e não logo após a chamada do setState.

10. this.setState pode receber um objeto ou uma função para alterar o estado.

11. A função passada para o setState recebe a última alteração de estado via argumento.

Use esse formato se você precisa atualizar o state com base no seu valor anterior:

this.setState(prevState => {
return {
counter: prevState.counter + 1
}
})

12. A vantagem de usar o formato acima ao invés de this.state.counter + 1 é que você pode executar vários setState seguidos, tendo a certeza que, quando o state for atualizado, você terá o valor correto ao final.

13. Quando você tem várias chamadas do setState seguidas, o React faz um único update, para não precisar re-renderizar a aplicação toda várias vezes.

14. Assumindo que this.state.counter é zero. Se você fizer:

this.setState({ counter: this.state.counter + 1 })
this.setState({ counter: this.state.counter + 1 })

o valor de this.state.counter será 1, já que this.state.counter é o estado da class.

15. Agora, fazendo:

this.setState(prevState => ({ counter: prevState.counter + 1 }))

this.setState(prevState => ({ counter: prevState.counter + 1 }))

O valor de this.state.counter será 2 na próxima atualização, pois usamos o escopo da função que recebe esse valor atualizado.

16. O @dan_abramov tem um blog onde ele escreve (em EN) sobre como as coisas funcionam no React por baixo dos panos. A quem interessar possa, segue o link:
overreacted.io

17. A documentação do React é bastante completa e detalhada. Um ótimo ponto de partida pra quem quer começar a aprender mais sobre a ferramenta:
reactjs.org/docs/getting-s…

18. Você também pode começar à partir dos tutoriais na documentação, que irão te levar a aprender como usar o React, praticando com pequenos projetos:
reactjs.org/tutorial/tutor…

19. Todas as novidades, melhorias, propostas do React são postadas no blog oficial.
Você pode acompanhar tudo o que está acontecendo na lib em primeira mão à partir desse link:
reactjs.org/blog/

20. Como saber se tenho conhecimento suficiente em JS para aprender React?
- Você consegue escrever seus próprios códigos em JS?
- Entende passagem por valor e referência (tipos primitivos e tipos "objeto")?
- Sabe quais métodos modificam ou não a referência de um objeto?

21. - Sabe usar corretamente os métodos de objetos para evitar mutabilidade?
- Sabe que funções também são objetos, e podem ser passadas por referência?

22. Se sua resposta foi "sim" para todas as perguntas anteriores, você está pronto(a) para aprender React, e não vai ter muitas dificuldades! Se alguma foi "não", é a sua chance de dar um passinho atrás e aprender, para conseguir seguir sem problemas =)

23. Se sua aplicação tem muitos níveis de componentes (componente dentro de componente, dentro de componente), e você precisa passar props muito "profundamente" até chegar no componente que precisa delas, você pode usar a nova Context API pra te ajudar:
reactjs.org/docs/context.h…

24. Use Redux apenas para estado global (estado que precisa ser compartilhado com vários componentes diferentes na aplicação).

25. Mantenha o estado de componentes de formulário localmente (usando state da class mesmo), ou use uma ferramenta - como o Formik - pra ajudar a gerenciar esses componentes:
github.com/jaredpalmer/fo…

26. Você não precisa, necessariamente, usar componentes controlados no React (inputs de formulário).

27. Escreva o formulário como você faria com HTML puro, adicione um botão com `type=submit` no seu form, e use o evento `onSubmit` do form para manipular os dados vindos dos campos.

28. Todo listener de evento recebe um objeto com os dados do evento. No caso do formulário, a função passada para o onSubmit vai receber esse objeto, e você tem algumas formas de manipular os campos:

29. Digamos que sua função é algo assim:
handleSubmit = (e) => {
// corpo da função que vai executar quando ocorrer o evento de submit
}

Dentro dessa função, o `e.target` se refere ao formulário...

30. Você deve adicionar ao menos uma prop "name" no campo. Para melhorar a acessibilidade, você deve ter "labels" junto com os campos, e na label você vai usar o "for" (ou htmlFor, no React). Então você vai precisar de um "id" também nos campos...

31. Para conseguir "alcançar" os campos, você tem algumas opções:
- Pegar pelo ID: e.target.<ID_DO_CAMPO>
- Pegar pelo "name": e.target.elements.<NAME_DO_CAMPO>

E para pegar o valor deles, só usar o `.value` no final =)

32. Além do Component, você tem a opção de usar PureComponent para criar suas class em React. A diferença entre eles é que o PureComponent já tem uma implementação do shouldComponentUpdate, testando de forma "rasa" (shallow) os valores recebidos de props, e os valores de state.

33. Trabalhar com forms é chato com ou sem libs. Temos que fazer validação, máscara, normalizar dados, etc.

E no React, usando "controlled components" pode parecer ainda mais trabalhoso.

Mas pense que, no final, os dados já estarão prontos para serem submetidos =)

34. Dificilmente você precisará manipular DOM manualmente no React, mas em alguns casos bem específicos é necessário. Para esses casos, você pode usar a feature de refs:
reactjs.org/docs/refs-and-…

35. Sempre que for pensar em manipular DOM, tente fazer usando o que o React te oferece. Refs são para aquele último caso em que realmente não rola fazer só com o React.

36. Não use refs como strings (this.refs), pois esse formato foi deprecado já a algum tempo.

Use callback refs:
reactjs.org/docs/refs-and-…

Ou a nova API React.createRef:
reactjs.org/docs/refs-and-…

37. Sempre que precisar utilizar "ações impuras" ou "efeitos" no seu app, utilize sempre à partir do lifecycle componentDidMount. Isso vai garantir que esse código só vai ser renderizado após o componente já ter sido colocado no DOM, evitando bugs.

38. Por "ações impuras" e "efeitos", entenda: manipulação de DOM, requests, etc.

39. Se você estava fazendo requests no método componentWillMount, mude para o componentDidMount.

Primeiro porque o React não espera o que quer que esteja acontecendo no cWM resolver antes de executar o render. Esse método é síncrono, e o render é executado logo após ele...

40. E segundo porque o cWM foi deprecado. Na verdade, componentWillMount e componentWillUpdate foram deprecados, pois não faz muito sentido usá-los.

Você pode usar sempre o componentDidMount e componentDidUpdate.

41. Refs também são uma opção para manipular elementos de formulário.

42. O React não espera retorno de valores de métodos como componentDidMount e componentDidUpdate.

Você pode se aproveitar disso para usar async / await com esses métodos, já que qualquer método / função async SEMPRE retorna uma promise =)

43. Os códigos abaixo são similares:
```
class Comp extends Component {
constructor (props) {
super(props)
this.state = {
stateValue: 1
}
}
}
```

e

```
class Comp extends Component {
state = {
stateValue: 1
}
}
```

continua no próximo tweet...

44. A diferença entre eles é que, a segunda forma, além de mais simples, ainda não está "pronta" para entrar na especificação da linguagem. Ela está em "stage 3", o que significa que ainda faltam alguns testes para que ela seja, de fato, implementada.

45. Aqui você pode acompanhar o andamento dessa feature:
github.com/tc39/proposal-…

Quando chegar em stage 4, ela vai entrar na linguagem. Mas features em "stage 3" é bastante seguro de usar, pois dificilmente serão "dropadas". A probabilidade de entrar na espec é bem grande.

46. Mas os dois formatos são válidos. Não se preocupe em refatorar seu código se ele estiver usando "constructor".

47. Ao usar expressões de curto circuito com o operador AND (&), garanta que o lado esquerdo da expressão seja um valor booleano, para que o valor não seja renderizado, caso seu equivalente booleano for falsy.

48. Você pode, por exemplo, querer renderizar uma lista de itens em um array, apenas se o `length` do array for maior que zero.

Para "economizar", normalmente podemos fazer:

<div>
{items.length && items.map(i => <p key={i}>{i}</p>)}
</div>

Muito cuidado...

49. Usando a expressão dessa forma, se o equivalente booleno de items.length for "truthy" (nesse caso, maior que zero), a segunda parte da expressão será retornada...

50. Agora, se items.length for zero (equivalente booleano para "false" ou "falsy"), então esse valor VAI SER RENDERIZADO!

Ou seja: vai aparecer um zero perdido na sua interface!

51. Para garantir que o lado esquerdo da expressão será um valor booleano, você pode fazer de 3 formas diferentes:

Boolean(items.length) && items.map(...)

ou

!!items.length && items.map(...)

ou

items.length > 0 && items.map(...)

52. A vantagem de usar dessa forma é que o React não renderiza valores booleanos e valores "null" no DOM :)

53. Sabe aquela aplicação que você criou usando React Router, mas quando você serve em produção, e navega até alguma rota, tudo funciona até que você dá um refresh (F5) e recebe um erro 404?

O problema NÃO é com o React ;)

54. Qualquer aplicação SPA (Single Page Application), criada com qualquer framework / lib de frontend - não só com React - e que tenha manipulação de rotas / navegação à partir do frontend, com JS, usando a History API, vai ter esse mesmo problema.

55. O problema, na verdade, é como o SEU SERVIDOR está servindo a aplicação.
Quando um servidor serve uma aplicação de forma estática, ele espera que cada rota seja um caminho válido interno do servidor.

56. Se você acessa: seusite.com.br/sobre/, o servidor que serve essa aplicação de forma estática espera que você tenha, no caminho configurado da sua aplicação, um diretório "sobre" e, dentro dele, um arquivo "index.html", que será renderizado automaticamente pelo browser.

57. Em aplicações do tipo SPA, como o nome já diz, é uma aplicação de página única, ou seja: temos somente uma página "index.html", e toda a navegação acontece via JS SEMPRE À PARTIR DESSA index.html!

58. Então, pra resolver o problema do erro 404 na hora de dar refresh, você precisa configurar seu servidor para que, a cada rota acessada dentro do seu domínio, ele deve SEMPRE renderizar a index.html principal!

59. Fazendo isso, o index.html será baixado, carregando corretamente o arquivo JS que manipula as rotas, e este vai saber qual arquivo / componente / conteúdo carregar =)

60. Se você tem acesso à linha de comando da sua aplicação, você pode usar uma bibiloteca chamada "serve", que está hospedada no NPM para servir sua SPA:
npmjs.com/package/serve

61. Se você está usando Apache ou Nginx, e tem a opção de configurar o servidor, você pode seguir essas instruções:
gist.github.com/rambabusaravan…

62. E caso não queira se preocupar com configuração de servidor, nem com configuração de certificado SSL, você pode usar o Netlify de forma gratuita, que já tem tudo isso configurado _out of the box_, e funciona 100% servindo SPAs:
netlify.com