"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Componentes de UI de front-end

Componentes de UI de front-end

Publicado em 2024-11-07
Navegar:459

 Frontend UI Components

Repositório personalizado iHateReading

No mês passado, tenho criado muitos componentes de UI que são componentes da web do mundo real, como botão, entradas, formulários, banners, galerias

Componentes feitos para algumas finalidades

  • Aprenda front-end e torne-se melhor no que faço
  • Melhorar a capacidade de escrever código melhor no desenvolvimento frontend (explicarei mais tarde o que isso significa)

Atualmente sou tech stack ou a tecnologia é reactjs junto com next.js como estrutura e uso Tailwind CSS para estilo e GSAP para animação

Posso usar qualquer pilha de tecnologia que não seja um problema, então comecei com a estrutura e a linguagem mais recentes, reactjs com next.js

Em seguida, tenho que escolher todos os componentes que devo desenvolver e que também posso usar pessoalmente em meus próximos projetos do mundo real, como formulário de pagamento, formulário de inscrição, galeria de imagens, botões e muitos outros componentes de UI, Componentes de cabeçalho e assim por diante.

iHateReading é uma plataforma de desenvolvedor para desenvolvedor e nos últimos 2 anos tenho compartilhado blogs e também boletins informativos em ihatereading.in.

Este é o momento certo para introduzir algumas novas mudanças ou novos recursos que sejam repositórios personalizados ou códigos personalizados ou como você quiser chamá-los, para trazer de volta o que é esta plataforma.

Agora vem do que esses componentes são feitos, todos os componentes são feitos usando os seguintes módulos

  1. Reactjs
  2. CSS do Tailwind
  3. GSAP para animação
  4. Biblioteca de UI Mantine.dev (se necessário)

Estou tentando optar por um componente de UI headless, o que significa que apenas funcionalidades serão adicionadas sem qualquer estilo ou dependência de estrutura, desta forma, muitos desenvolvedores podem facilmente copiar e colar o código e usá-lo diretamente para desenvolver rapidamente.

Ao desenvolver esses componentes, se você vir o primeiro componente que compartilhei em https://ihatereading.in/customrepo e compará-lo com o componente novo ou mais recente, poderá facilmente encontrar a diferença.

Menos dependências, menos javascript e componentes de código mais otimizados e reutilizáveis.

Todo o crédito vai para a pesquisa e o blog que fiz no ano passado, Por que o JavaScript reduz o desempenho do site? porque o navegador leva muito tempo para analisar JS em comparação com CSS. Assim, a redução do JS também melhorará o desempenho do site.

Além disso, o CSS hoje em dia está se tornando tão forte que muito pouco JS é necessário para trazer animações legais para o site e muitos desenvolvedores não estão prestando muita atenção nisso, esse é outro lema para usar mais CSS > menos JS.

40 componentes foram adicionados até agora e estou trabalhando em mais, se você tiver alguma ideia de que tipo de componentes, formulários ou ferramentas posso fazer, adicione-os na seção de comentários, certamente seguirei o exemplo.

Estou compartilhando ativamente as notícias de desenvolvimento de componentes no Twitter e LinkedIn, bem como enviando o código em ihatereading.in/customrepo

Sinta-se à vontade para conferi-los e deixe-me saber o que mais adicionar e criar.

Saúde
Shrey

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/shreyvijayvargiya/40-code-components-339e?1 Se houver alguma violação, entre em contato com [email protected] para excluí-lo
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3