33. Como organizar os componentes

Descrição

Comentários

Eu mostro como organizo um projeto grande na Harena usando setorização: crio pastas para o design system (botões, rodapé, cards, tags), uma pasta separada para o menu com todos os seus estados, outra para páginas de aulas com player, sidebar e conteúdos ligados ao CMS, além de pastas para sazonais e formulários. Explico como criar, renomear, mover e agrupar componentes, selecionar vários itens ao mesmo tempo e a importância de manter tudo fechado para facilitar a busca. Também ensino a duplicar, exportar/importar componentes e copiar o URL para compartilhar partes do projeto com parceiros. Ao finalizar o trabalho, sempre verifico e deleto componentes que não estão sendo usados para evitar peso desnecessário no carregamento do site. Essa organização evita dor de cabeça quando o projeto cresce (no meu caso já tive projetos com mais de 200 componentes) e facilita manutenção, atualização e colaboração. A dica final é revisar e limpar componentes ao terminar para manter o projeto leve e eficiente. Termos técnicos explicados: - Assets: arquivos e recursos usados no projeto (imagens, ícones, etc.). - Components (componentes): partes reutilizáveis da interface (botões, cards, menus). - Design system: conjunto padronizado de componentes e regras visuais do produto. - CMS: sistema de gerenciamento de conteúdo que alimenta componentes com dados. - Dropdown (drop down): menu suspenso. - Accordion: componente que expande/contrai conteúdos. - Sidebar: barra lateral de navegação ou conteúdo. - Player: reprodutor de vídeo/audio.

Comentários

Descrição

Comentários

Eu mostro como organizo um projeto grande na Harena usando setorização: crio pastas para o design system (botões, rodapé, cards, tags), uma pasta separada para o menu com todos os seus estados, outra para páginas de aulas com player, sidebar e conteúdos ligados ao CMS, além de pastas para sazonais e formulários. Explico como criar, renomear, mover e agrupar componentes, selecionar vários itens ao mesmo tempo e a importância de manter tudo fechado para facilitar a busca. Também ensino a duplicar, exportar/importar componentes e copiar o URL para compartilhar partes do projeto com parceiros. Ao finalizar o trabalho, sempre verifico e deleto componentes que não estão sendo usados para evitar peso desnecessário no carregamento do site. Essa organização evita dor de cabeça quando o projeto cresce (no meu caso já tive projetos com mais de 200 componentes) e facilita manutenção, atualização e colaboração. A dica final é revisar e limpar componentes ao terminar para manter o projeto leve e eficiente. Termos técnicos explicados: - Assets: arquivos e recursos usados no projeto (imagens, ícones, etc.). - Components (componentes): partes reutilizáveis da interface (botões, cards, menus). - Design system: conjunto padronizado de componentes e regras visuais do produto. - CMS: sistema de gerenciamento de conteúdo que alimenta componentes com dados. - Dropdown (drop down): menu suspenso. - Accordion: componente que expande/contrai conteúdos. - Sidebar: barra lateral de navegação ou conteúdo. - Player: reprodutor de vídeo/audio.

Comentários

Descrição

Comentários

Eu mostro como organizo um projeto grande na Harena usando setorização: crio pastas para o design system (botões, rodapé, cards, tags), uma pasta separada para o menu com todos os seus estados, outra para páginas de aulas com player, sidebar e conteúdos ligados ao CMS, além de pastas para sazonais e formulários. Explico como criar, renomear, mover e agrupar componentes, selecionar vários itens ao mesmo tempo e a importância de manter tudo fechado para facilitar a busca. Também ensino a duplicar, exportar/importar componentes e copiar o URL para compartilhar partes do projeto com parceiros. Ao finalizar o trabalho, sempre verifico e deleto componentes que não estão sendo usados para evitar peso desnecessário no carregamento do site. Essa organização evita dor de cabeça quando o projeto cresce (no meu caso já tive projetos com mais de 200 componentes) e facilita manutenção, atualização e colaboração. A dica final é revisar e limpar componentes ao terminar para manter o projeto leve e eficiente. Termos técnicos explicados: - Assets: arquivos e recursos usados no projeto (imagens, ícones, etc.). - Components (componentes): partes reutilizáveis da interface (botões, cards, menus). - Design system: conjunto padronizado de componentes e regras visuais do produto. - CMS: sistema de gerenciamento de conteúdo que alimenta componentes com dados. - Dropdown (drop down): menu suspenso. - Accordion: componente que expande/contrai conteúdos. - Sidebar: barra lateral de navegação ou conteúdo. - Player: reprodutor de vídeo/audio.

Comentários
Especialista

Henrique Sabino

Wama e Elogiou

Olá 👋,

aluno(a)

Aqui é o Will, em que posso ajudar?

Sugestões & Feedbacks