Skip to content

Instantly share code, notes, and snippets.

@thulioph

thulioph/react-good-patterns.md Secret

Created March 2, 2018 00:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thulioph/69f0390aab08ea783d84f9f408be70c8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thulioph/69f0390aab08ea783d84f9f408be70c8 to your computer and use it in GitHub Desktop.
Download ZIP
Algumas anotações sobre boas práticas com React
Raw
react-good-patterns.md

React Good Patterns

video

  • Dividir a aplicação em:
    • Views, Containers e Componentes (view and containers react pattern)
      • view é uma função pura, stateless e só recebe o container
      • container é responsável pela lógica do negócio e pela importação dos componentes filhos
        • é aqui que utiliza o connect do redux
    • Dumbs and smart compoents (dumb and smart components react pattern)
  • Redux Ducks:
    • padrão de organização de redux
    • utilizando tudo no mesmo arquivo (action, reducer, creator)
  • Pastas e Arquivos:
    • dividindo por tipo de arquivo
      • src/reducer, src/actions, src/components, src/containers
    • dividindo por feature
      • src/feature-1/components, src/feature-1/container, src/feature-1/style.scss
      • src/feature-2/components, src/feature-2/container, src/feature-2/style.scss
    • dividindo por rotas
      • src/route-1/feature-1/components, src/route-1/feature-1/container, src/route-1/feature-1/style.scss
      • src/route-2/feature-2/components, src/route-2/feature-2/container, src/route-2/feature-2/style.scss
  • PropTypes e Tipagem:
    • todo componente stateless que receba props, deve ter o PropTypes setado
    • tipagem em todas as funções, ajudando em saber o retorno das funções
  • create-react-app:
    • webpack modules
      • permite realizar o import absoluto com (node_modules ou src)

Good to Read

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment