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
   

   View Slide

2. oi!
   • desenvolvedora de software @ picter;
   • live coding instructor @ udacity br;
   • mãe de cachorro;
   

   View Slide

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;
   

   View Slide

4. source: https://stackoverflow.blog/2017/03/09/developer-hiring-trends-2017/
   

   View Slide

5. guess it’s time to learn react for
   real…
   

   View Slide

6. View Slide

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;
   

   View Slide

8. como estruturar meus projetos?
   

   View Slide

9. source: http://react-file-structure.surge.sh/
   

   View Slide

10. View Slide

11. source: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
    

    View Slide

12. estrutura por tipo de arquivo
    

    View Slide

13. estrutura de agrupamento por feature
    

    View Slide

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;
    

    View Slide

15. gerenciamento de estado? wut?
    

    View Slide

16. View Slide

17. flux
    • anunciado em 2015;
    • solução dos engenheiros do facebook para lidar com side effects indesejados
    quando gerenciando estado;
    

    View Slide

18. source: https://facebook.github.io/flux/docs/in-depth-overview.html#content
    

    View Slide

19. View Slide

20. redux
    • uma única source of truth;
    • estado deve ser read-only;
    • alterações no estado ocorrem através de funções puras;
    

    View Slide

21. View Slide

22. context api
    

    View Slide

23. View Slide

24. View Slide

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;
    

    View Slide

26. css-in-js é uma boa ideia?
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. vantagens
    • true encapsulation;
    • eliminação de código morto;
    • filtra alterações indesejadas usando snapshot testing;
    • adeus, !important;
    

    View Slide

33. desvantagens
    • mais suscetível a problemas de segurança;
    • performance;
    • curva de aprendizado;
    

    View Slide

34. o fantástico mundo dos
    snapshots
    

    View Slide

35. View Slide

36. View Slide

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;
    

    View Slide

38. obrigada!
    https://olarclara.github.io
    

    View Slide