Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React nas Trincheiras

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.

78b75aad21ed5ed351d9822d77acd7fc?s=128

Maria Clara Santana

October 20, 2018
Tweet

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…

  6. None
  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/

  10. None
  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?

  16. None
  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

  19. None
  20. redux • uma única source of truth; • estado deve

    ser read-only; • alterações no estado ocorrem através de funções puras;
  21. None
  22. context api

  23. None
  24. None
  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?

  27. None
  28. None
  29. None
  30. None
  31. None
  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

  35. None
  36. None
  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