🚀 Astro, React e LESS

Este é um projeto de landing page desenvolvido utilizando Astro, React e LESS, aplicando as melhores práticas de desenvolvimento moderno. O objetivo é criar uma página eficiente, modular e fácil de manter.

🖌️ Design no Figma

O design desta landing page foi planejado e prototipado utilizando o Figma

💡 O que é o Astro?

Astro é um framework moderno focado em gerar sites rápidos e eficientes. Seu grande diferencial é a renderização "zero JavaScript por padrão", entregando apenas HTML puro para páginas estáticas, o que garante performance superior.

Diferenciais:

• Zero JavaScript por padrão: Gera HTML puro e carrega JavaScript apenas quando necessário.
• Compatível com múltiplos frameworks: Use React, Vue, Svelte, e outros no mesmo projeto.
• Islands Architecture: Componentes dinâmicos são carregados sob demanda, otimizando o desempenho.
• Builds rápidos: Ideal para sites estáticos otimizados para SEO, como blogs e landing pages.

Comparação com outros frameworks:

• Astro vs. Next.js: Foco em páginas estáticas rápidas, enquanto Next.js se destaca em aplicações dinâmicas.
• Astro vs. Gatsby: Astro é mais leve, eliminando JavaScript desnecessário.
• Astro vs. Nuxt: Ideal para sites multipáginas, enquanto Nuxt é mais voltado para SPAs.

🎨 O que é LESS?

LESS (Leaner Style Sheets) é uma extensão dinâmica do CSS que adiciona recursos poderosos como variáveis, aninhamento, funções e mixins. Isso torna o CSS mais eficiente, modular e fácil de manter, especialmente em projetos grandes. A compilação do LESS converte o código de arquivos .less para CSS padrão, permitindo o uso de variáveis, alinhamento e outras funcionalidades antes de gerar o CSS final.

Principais benefícios do LESS:

• Variáveis: Armazene valores (como cores, fontes e espaçamentos) em variáveis reutilizáveis.
• Aninhamento: Escreva CSS de forma hierárquica, refletindo a estrutura do HTML.
• Mixins: Reutilize conjuntos de propriedades CSS em várias partes do projeto.
• Funções: Use funções matemáticas e de manipulação de cores diretamente no CSS. Ao usar LESS, é possível organizar melhor os estilos e aplicar mudanças de forma rápida e eficiente.

📁 Estrutura do Projeto

Abaixo está a estrutura básica do projeto para garantir que ele siga boas práticas de organização:

       src/
    ├── assets/                     # Arquivos estáticos
    ├── components/
    │   ├── Componente/             # Nome do componente a ser criado
    │   │   ├── component.astro     # Componente em Astro
    │   │   └── index.less          # Estilização do componente
    │   ├── reactComponents/        # Componentes React reutilizáveis
    │   │   ├── component.jsx       # Componente em React
    │   │   └── index.less          # Estilização do componente
    ├── imgs/                       # Pasta para imagens
    ├── layouts/
    │   └── MainLayout.astro        # Layout principal do projeto
    ├── pages/                      # Diretório das paginas do projeto
    │   └── index.astro             # Página principal
    ├── style/
    │   ├── global.css              # Arquivo CSS gerado após a compilação do LESS
    │   ├── global.less             # Estilos globais da aplicação
    │   ├── reset.less              # Reset de estilos para consistência entre navegadores (não precisa ser compilado)
    │   └── variables.less          # Variáveis de estilo (não precisa ser compilado)

🛠️ Ferramentas Utilizadas

• Astro: Framework de construção de websites moderno, que permite o uso de diferentes frameworks como React, Svelte, Vue, entre outros.
• React: Biblioteca JavaScript para criar interfaces de usuário.
• LESS: Pre-processador CSS que facilita a escrita de estilos com variáveis, aninhamentos e mixins.

🏗️ Instalação

1. Clone o repositório:

    git clone https://github.com/LyanBrito/study-astro.react.git

2. Instale as dependências: Navegue até o diretório do projeto e instale as dependências com seu gerenciador de pacotes preferido:

    cd nome-do-repositorio
    npm install
    # ou
    yarn install
    # ou
    pnpm install

3. Rodando o projeto: Para iniciar o servidor de desenvolvimento:

    npm run dev
    # ou
    yarn dev
    # ou
    pnpm dev

⚙️ Lista de Comandos

Comando	Ação
npm install	Instala as dependências
npm run dev	Roda o projeto localmente em: localhost:4321
npm run build	Constrói a versão de produção do projeto ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Roda comandos CLI como: astro add, astro check
npm run astro -- --help	Lista de ajuda com comandos CLI

Para evitar o uso do comando lessc .\global.less .\global.css para criar o arquivo .css, utilizo a extensão Easy Lessno VSCode, que cria automaticamente um arquivo .css cada vez que atualiza o arquivo.

🌱 Contribuições

Sinta-se à vontade para abrir uma issue ou fazer um fork e enviar pull requests para melhorias ou correções. Todas as contribuições são bem-vindas!

🔗 Links