README-pt-BR.md

leo-react-app

🔎 Introdução

leo-react-app se trata de um template / ambiente de desenvolvimento em React para web utilizando Vite.

Gosto de utilizar o termo boilerplate para se referir a leo-react-app pelo mesmo possuir o objetivo de fornecer uma estrutura de pastas e comandos mínima, mas raramente desnecessária ou desproveitosa em um aplicativo front-end baseado em React.

💻 Recursos

Você pode utilizar duas opções do leo-react-app. Uma é com SASS e a outra com styled-components. Em ambas, há os seguintes recursos:

• React
• Vite - ambiente de desenvolvimento para front-end
  • @vitejs/plugin-react - plugin oficial do Vite para o React (inclui recursos como react-refresh e JSX runtime, por exemplo)
  • vite-plugin-svgr - loader para transformar SVGs em componentes React (baseado em SVGR)
• leo-css-reset - redefine a maioria das estilizações e define padrões CSS

Com SASS:

• SASS - implementação JS do pré-processador SASS
• RFS - redimensionamento automático de tamanhos de fonte e espaçamentos com SASS

Com styled-components:

• styled-components - apenas a própria biblioteca

🚀 Iniciando

Este repositório utiliza o npm para gerenciar os pacotes de terceiros. Efetue a instalação do Node.js que já possui o npm como gerenciador de pacotes padrão.

Clonando o repositório

Utilize o degit para clonar o leo-react-app. Você pode mencionar o nome que deseja para a pasta raiz do seu projeto especificando apenas um espaço após o comando ou utilizar o comando dentro da sua pasta raiz.

Se você optou por SASS:

npx degit leo-henrique/leo-react-app#sass

Se você optou por styled-components (sem nenhum HTML adicional, apenas estrutura mínima):

npx degit leo-henrique/leo-react-app#styled-components

Instale as dependências

npm install

Inicie o servidor de desenvolvimento

Uma nova guia localhost:5173/leo-react-app será aberta no seu navegador.

npm start

⚙️ Configure o boilerplate para sua aplicação

• Em public, inclua os favicons da sua aplicação. Eu gosto de utilizar o Real Favicon Generator para gerar meus favicons.
• Em index.html, altere os metadados conforme sua aplicação. Eu pressuponho que você também utilizará alguns metadados mínimos do protocolo Open Graph.
  • Utilize apenas / em vez de public/ para referenciar arquivos estáticos no index.html com Vite.

Com SASS:

• Em src/scss/utilities/_variables.scss, altere a UI da sua aplicação.
  • $rfs-rem-value se baseia no valor de 10px do font size root, conforme utilizo em leo-css-reset.

Com styled-components:

• Em src/styles/theme.js, altere a UI da sua aplicação.
• Em src/styles/mediaQueries.js, altere os breakpoints caso desejar.

👨‍💻 Scripts

• npm start - inicia o servidor de desenvolvimento e abre em seu navegador.
• npm run build - minifica o aplicativo para produção.
• npm run preview - visualize localmente sua produção em seu navegador.
• npm run deploy - faz o deploy da sua aplicação no GitHub segundo a pasta "dist"