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.

Maria Clara Santana

October 20, 2018
Tweet

More Decks by Maria Clara Santana

Other Decks in Programming

Transcript

  1. react nas trincheiras
    erros cometidos e lições aprendidas
    @olarclara || react conf br

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

  7. como estruturar meus projetos?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. estrutura por tipo de arquivo

    View full-size slide

  11. estrutura de agrupamento por feature

    View full-size slide

  12. 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 full-size slide

  13. gerenciamento de estado? wut?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. o fantástico mundo dos
    snapshots

    View full-size slide

  22. 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 full-size slide

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

    View full-size slide