Um modelo inicial poderoso para desenvolvimento web moderno

Construir aplicativos React facilitados com React with Vite On Steroids – Um modelo inicial para criar aplicativos React de alto desempenho com facilidade.

O que há dentro?

Este modelo vem com recursos projetados para agilizar seu processo de desenvolvimento:

• Vite: A ferramenta de construção extremamente rápida que garante desenvolvimento rápido e construções de produção otimizadas.
• React: A popular biblioteca JavaScript para construção de interfaces de usuário.
• TypeScript: adicione segurança de tipo e ferramentas aprimoradas ao seu JavaScript.
• Tailwind CSS: Uma estrutura CSS utilitária para criar designs impressionantes sem escrever CSS personalizado.
• ESLint: Mantenha sua base de código limpa e consistente com regras de linting conectáveis.
• Mais bonito: um formatador de código opinativo que impõe um estilo consistente em todo o seu projeto.
• Vitest: Uma estrutura de teste de unidade extremamente rápida com uma abordagem nativa do Vite.
• Biblioteca de testes: Utilitários de testes simples e completos que incentivam boas práticas de testes.
• Playwright: uma estrutura de teste versátil e completa que oferece suporte a vários navegadores.
• Husky: Automatize seus ganchos Git, como ganchos de pré-confirmação, para garantir código de qualidade antes que ele chegue ao repositório.

Começando

Pré-requisitos

Antes de mergulhar, certifique-se de ter o seguinte instalado:

• Node.js (versão 20.x ou superior)
• Fio (ou npm ou pnpm)

Instalação

Inicie seu projeto com estas etapas simples:

1. Clone o repositório:

   git clone https://github.com/RicardoGEsteves/react-with-vite-on-steroids.git
   cd react-with-vite-on-steroids

1. Instalar dependências:

   yarn

Executando o servidor de desenvolvimento

Pronto para começar a programar? Ative o servidor de desenvolvimento com:

yarn dev

Edifício para Produção

Quando estiver pronto para implantar, crie um build de produção com:

yarn build

Executando testes

Este modelo vem com utilitários de teste integrados para garantir que seu código funcione conforme o esperado.

• Testes unitários com Vitest:

  yarn test

• Verifique a cobertura do teste:

  yarn coverage

• Testes ponta a ponta com dramaturgo:

  • Execute todos os testes:

  yarn playwright test
  

  • Modo de IU interativa:

  yarn playwright test --ui
  

  • Execute testes apenas no Chrome para desktop:

  yarn playwright test --project=chromium
  

  • Execute testes em um arquivo específico:

  yarn playwright test example
  

  • Modo de depuração:

  yarn playwright test --debug
  

  • Gerar testes automaticamente com Codegen:

  yarn playwright codegen
  

Linting e formatação

Mantenha a qualidade e a consistência do código com estes comandos:

• Lint o código:

  yarn lint

• Corrigir erros de linting:

  yarn lint:fix

• Formate o código:

  yarn format

Licença

Este projeto está licenciado sob a licença MIT. Para mais detalhes, consulte o arquivo LICENSE.

Agradecimentos

Um enorme agradecimento aos desenvolvedores e comunidades por trás dessas ferramentas incríveis:

• Visite
• Reagir
• Datilografado
• CSS do Tailwind
• ESLint
• Mais bonito
• Visite
• Biblioteca de testes
• Dramaturgo
• Rouco

Confira o template @RicardoGEsteves

Tem muita coisa no meu site em https://www.ricardogesteves.com

Siga-me @ricardogesteves
X(Twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Desenvolvedor Full Stack | Apaixonado por criar experiências de usuário intuitivas e impactantes | Com sede em Lisboa, Portugal ?? - RicardoGEsteves

github.com