Você que é Dev Junior como eu e quer entender mais a funcionalidade de Componentes complexos no React
Introdução 🚩
Muitos sistemas podem criar uma escala muito grande, ao ponto de ficar meio perdido em cada funcionalidade, estou dizendo isso por experiência própria.Estou no mundo da programação desde minha adolescência onde comecei lá com meus 15 para 16 anos de idade.
Fiz 18 anos recentemente e consegui minha primeira vaga como desenvolvedor Front-End React-Native, meu primeiro dia como desenvolvedor tive um pequeno susto ao ver o quão grande era o sistema da minha empresa, e fiquei meio perdido no começo, pois tinham os proprios Componentes para Componentes entre outros...
Por que usar o storybook 🖊📒📚.
Storybook é uma bilioteca bem popular no React para documentar cada componente na sua aplicação, assim isolando os mesmos e tendo um ambiente mais controlado e testavel para diferentes estados e variações de um componente, se tornando um desenvolvimento mais iterativo; com desenvolvedores podendo testar e criar novos componentes em paralelo com o restante da aplicação. Também é possível identificar problemas de design em um estágio inicial do desenvolvimento
Como utilizar storybook❓
Para inicializar basta colocar no terminal o seguinte codigo:
Lembrando que sb é o mesmo que storybook
npx sb init --builder @storybook --use-npm
Ele por padrão inicializa com o webpack e com yarn, então se quiser usar o vite e npm, basta rodar:
npx sb init --builder @storybook/builder-vite --use-npm
Storybook for React Native:
Já com um projeto criado, seja usando o expo ou CLI do React-Native, rode no terminal 👇🏻:
npx -p @storybook/cli sb init --type react_native
Para rodar basta usar o yarn storybook ou npm passando a flag --use-npm na instalação
Como rodar:
Após a inicialização, ele irá criar um diretório chamado storybook
com alguns arquivos, para rodar, digite o seguinte comando:
npm run storybook ou yarn storybook
Conlclusão
O storybook facilitou muito meu entendimento na funcionalidade de cada componente da empresa e suas funcionalidades, oferecendo diversas vantagens para o desenvolvimento de componentes com React.
No site oficial do storybook tem mais sobre a documentação deles e outras funcionalidades: site storybook
Também tem um ótimo video da rocketseat com o Diegão mostrando na prática como se usa. rocketseat storybook