React nas Trincheiras

Como estruturar meu projeto? Devo usar a context api ou Redux? Uso hocs ou render props? Estou escrevendo testes suficientes? E como estilizar, css-in-js é uma boa opção? Essa talk se propõe a responder perguntas do gênero compartilhando lições aprendidas na minha experiência trabalhando com React.

Transcript

1. react nas trincheiras erros cometidos e lições aprendidas @olarclara || react conf br
2. oi! • desenvolvedora de software @ picter; • live coding instructor @ udacity br; • mãe de cachorro;
3. como eu vim parar aqui? • 2015: ouvi falar sobre react pela primeira vez; • 2016: comecei a escrever pequenos projetos pessoais com react; • 2017: comecei a trabalhar com consultoria freelancer;
4. source: https://stackoverflow.blog/2017/03/09/developer-hiring-trends-2017/
5. guess it’s time to learn react for real…
7. algumas coisas que eu não fazia ideia e hoje sei um pouco mais • como estruturar projetos; • como gerenciar estado e manter minha sanidade; • como estilizar componentes; • como testar componentes;
8. como estruturar meus projetos?
9. source: http://react-file-structure.surge.sh/
11. source: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
12. estrutura por tipo de arquivo
13. estrutura de agrupamento por feature
14. pontos chave • evite aninhar arquivos muito profundamente; • prefira named exports; • estruturas mais flat tornam a navegação mais fácil; • don’t overthink it;
15. gerenciamento de estado? wut?
17. flux • anunciado em 2015; • solução dos engenheiros do facebook para lidar com side effects indesejados quando gerenciando estado;
18. source: https://facebook.github.io/flux/docs/in-depth-overview.html#content
20. redux • uma única source of truth; • estado deve ser read-only; • alterações no estado ocorrem através de funções puras;
22. context api
25. pontos chave • tenha uma única source of truth; • talvez você não precise de uma biblioteca de terceiros; • mantenha o estado contido no escopo sempre que possível;
26. css-in-js é uma boa ideia?
32. vantagens • true encapsulation; • eliminação de código morto; • filtra alterações indesejadas usando snapshot testing; • adeus, !important;
33. desvantagens • mais suscetível a problemas de segurança; • performance; • curva de aprendizado;
34. o fantástico mundo dos snapshots
37. takeaways • estruturas devem evoluir com a necessidade do projeto; • gerenciamento de estado pode ser feito sem bibliotecas de terceiros; • css-in-js ainda é css, mas com super-poderes; • snapshots são rápidos de serem escritos e entregam muito valor;
38. obrigada! https://olarclara.github.io