React components - Melhores práticas

Transcript

1. React components - Melhores práticas

2. Podemos quebrar interfaces inteiras em pequenos blocos

3. • Deve fazer algo específico (sem requests ou regras de negócio) • Separação de constantes e helpers • Fácil de usar • Fácil para entender • Documentação atualizada Como deveria ser?
4. const Component = ({title, cards}) => { return <div> <h1>{title}</h1> { cards.map(({title: cardTitle, subtitle, image}) => ({ <div> <h3>{cardTitle}</h3> <h5>{subtitle}</h5> <img src={image} /> </div> })) } </div> } const Component = ({title, cards}) => { return <div> <h1>{title}</h1> <CardsList cards={cards} /> </div> } O componente pai não precisa saber sobre os detalhes
5. Todos os arquivos relacionados ao componente devem estar em uma única pasta: components Button Button.tsx Button.stories.tsx Button.test.tsx styles.ts
7. Renderização de todos os componentes quando alguma props é alterada Com memo, não vai renderizar o componente e reutilizar o último resultado renderizado. Problema Solução
10. render( <Container> <Button>Normal Button</Button> </Container> ); export const Button = styled.button` background: transparent; border-radius: 3px; color: palevioletred; `; Componentes de estilo
11. We’re not designing pages, we’re designing systems of components — Stephen Hay