/default-react-project

Primary LanguageJavaScript

Default Project

Tecnologias

Sumário

  1. Alias
  2. Primeiros Passos
  3. Criando novo átomo
  4. Criando novo componente
  5. Criando nova página
  6. Usando um componente
  7. Rodar Storybook

Alias

Temos os seguintes alias configurados no webpack

  • app-components - Referência para a pasta src/ui/components
  • app-pages - Referência para a pasta src/ui/pages
  • app-router - Referência para a pasta src/router

Primeiros passos

Instalar as dependências

npm install
# ou
yarn

Rodar o projeto

npm start

Criando novo átomo

Executar o comando

npm run create-atom [nome-do-atomo]
# exemplo: npm run create-atom label

Este comando:

  • Cria uma pasta dentro de components/_atoms para o átomo
  • Cria os arquivos [nome-do-átomo].atom.jsx e [nome-do-componente].style.scss dentro da pasta
  • Adiciona o export desse átomo no index.js dos átomos

Para criar um átomo void (sem filhos), basta adicionar void no final do comando

npm run create-atom input void

Criando novo componente

Executar o comando

npm run create-component [nome-do-componente]
# exemplo: npm run create-component menu-link

Este comando:

  • Cria uma pasta dentro de components para o componente
  • Cria os arquivos [nome-do-componente].component.jsx, [nome-do-componente].stories.jsx e [nome-do-componente].style.scss dentro da pasta
  • Adiciona o export desse componente no index.js dos componentes

Para criar um PureComponent, basta adicionar pure no final do comando

npm run create-component menu-link pure

Criando nova página

Executar o comando

npm run create-page [nome-da-pagina]
# exemplo: npm run create-page login

Este comando:

  • Cria uma pasta dentro de pages para a página
  • Cria os arquivos [nome-da-pagina].page.jsx e [nome-da-pagina].style.scss dentro da pasta
  • Adiciona o export desse componente no index.js das páginas

Usando um componente

Dentro da pasta src/ui/components temos um arquivo index.js, que exporta todos os componentes que temos no projeto

Pode se importar um componente usando o alias app-components que faz referência a essa pasta

Exemplo

import { MeuComponente } from 'app-components'

Caso importar mais de um componente, basta separa-los por vírgula

Exemplo

import { MeuComponente, OutroComponente } from 'app-components'

Rodar Storybook

Para executar o Storybook execute no terminal o seguinte comando

Exemplo

npm run storybook