Escrevendo uma API para componentes React, parte 1: não crie objetos conflitantes
Escrevendo uma API para componentes de reação, parte 2: dê nomes ao comportamento, não à interação
Escrevendo uma API para componentes React, parte 3: a ordem dos adereços é importante
Escrevendo uma API para reagir componentes, parte 4: Cuidado com o Apropacalypse!
Escrevendo uma API para reagir componentes, parte 5: apenas usar composição
Escrevemos API para componentes React, parte 6: criamos comunicação entre componentes
Esta postagem é uma tradução do primeiro artigo de uma série de artigos da API Writing good component , de autoria de @Sid . Ao traduzir, em qualquer situação incompreensível, serei guiado pela tradução oficial da documentação do React JS para o russo
Quando se trata de componentes React, seus acessórios são sua API.
Uma boa API deve ser compreensível para que o próprio desenvolvedor possa descobrir como trabalhar com ela. Isso se aplica não apenas ao desenvolvimento de bibliotecas de componentes, mas também ao desenvolvimento de aplicativos. É importante que você e sua equipe se sintam à vontade usando componentes e suas APIs.
Esta série de artigos é inspirada em artigos e palestras de Sebastian Markbåge , Brent Jackson , Jenn Creighton e A. Jesse Jiryu Davis .
Depois de ler muitos artigos + palestras e depois de mais de um ano projetando o design do sistema cosmos , cheguei a esses princípios de desenvolvimento.
Vamos começar com um simples.
Temos um botão:
<Button>Click me</Button>
Você também pode precisar do botão principal, necessário para a ação principal na página. Eu gostava de criar a API, como se eu pudesse dizer - "Dê-me o botão principal":
<Button>Click me</Button> <Button primary>Click me</Button>
Agora, como geralmente acontece com os botões, você precisará de mais algumas opções. Aqui está uma tabela de vários acessórios para botões:
Existem vários acessórios que você pode usar para alterar a aparência de um botão. O que acontece se alguém os usa juntos?
<Button primary destructive> Click me </Button>
Algum deles ganhará? Do que isso depende? Do pedido?
Por que alguém escreveria isso? Existe um caso real em que você precisa dizer "Dê-me um botão destructive primary "?
Na maioria dos casos, isso é um erro. Mas se os desenvolvedores precisam fazer essas perguntas (como as acima), provavelmente essa não é uma API muito boa.
Para quem decide qual será a API, é importante:
- minimizar erros
- minimizar a confusão em torno da API
Então, aqui está a dica 1: não crie objetos conflitantes.
Podemos facilmente corrigir o código acima usando prop, que permite obter uma lista de opções. Chame de appearance
<Button appearance="default">Click me</Button> <Button appearance="primary">Click me</Button> <Button appearance="destructive">Click me</Button>
Podemos adicionar uma lista de opções suportadas para appearance usando prop-types .
Button.PropTypes = { appearance: PropTypes.oneOf(['default', 'primary', 'secondary', 'link', 'destructive']) }
Agora, mesmo que o desenvolvedor cometa um erro, ele receberá um aviso sobre isso em sua ferramenta de desenvolvimento.
<Button appearance="danger">Click me</Button>
: : `prop` `appearance` `danger` `Button`, : `["default", "primary", "secondary", "link", "destructive"]`
Essa dica é muito fácil de implementar, mas tornará sua API muito mais fácil de usar (e oferecer suporte).
De um tradutor - atualizarei a lista de artigos desta série (no início) à medida que mais artigos forem traduzidos e novos forem disponibilizados.