{"id":24050432,"url":"https://github.com/artenlf/react-styled-components","last_synced_at":"2025-10-11T07:34:07.146Z","repository":{"id":145789217,"uuid":"536512180","full_name":"artenlf/react-styled-components","owner":"artenlf","description":"Projeto de estudo de React e Styled Components","archived":false,"fork":false,"pushed_at":"2022-09-14T18:39:14.000Z","size":322,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-11T07:34:06.330Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/artenlf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-09-14T09:47:37.000Z","updated_at":"2022-09-14T10:08:32.000Z","dependencies_parsed_at":"2023-04-08T06:35:01.693Z","dependency_job_id":null,"html_url":"https://github.com/artenlf/react-styled-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/artenlf/react-styled-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artenlf%2Freact-styled-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artenlf%2Freact-styled-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artenlf%2Freact-styled-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artenlf%2Freact-styled-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artenlf","download_url":"https://codeload.github.com/artenlf/react-styled-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artenlf%2Freact-styled-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006622,"owners_count":26084131,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-09T01:55:30.407Z","updated_at":"2025-10-11T07:34:07.141Z","avatar_url":"https://github.com/artenlf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-styled-components\n\nAulas 1 e 2:\n\n- instalação do styled-components (npm install --save styled-components).\n\n- criação do primeiro componente estilizado: h1 e transferência do CSS para dentro da declaração.\n\nDica: Declarando um componente: const Titulo = h1.styled ``, lembrando que o que vai dentro do acento grave são as estilizações CSS. A classe será gerada automaticamente.\n\nAula 3: criamos um componente de escopo global para o reset CSS, que irá utilizar uma função chamada createGlobalStyle. Depois disso, importamos o componente no App.js, e o declaramos antes das outras tags da nossa aplicação. Além disso, importamos a fonte utilizada diretamente no arquivo index.html, dentro da pasta public.\n\nAula 4: criamos a pasta UI com o arquivo variaveis.js para podermos fazer o export de alguns estilo utilizados por vários componentes como cores de fundo e cores de texto. Implementamos o cabeçalho e o logo estilizados pelo styled components.\n\nAula 5: criamos a estilização para 2 estilos de botão utilizando o operador ternário e passando uma props para identificar o que seria o botão primário. Quando chamarmos o componente na árvore de renderização, passamos a propriedade para identificar qual estilo iremos utilizar naquele elemento específico.\n\nAula 6: refatorando alguns componentes, como o Container. Nesse caso, fizemos a exportação dele como uma função anônima (usando uma arrow function).\n\nNa pasta UI criamos o index.js, arquivo que compreende estilizações para componentes comuns a todo o projeto. Utilizando o atalho ctrl+shift+f procuramos por onde o seletor imagem-icone era utilizado e substituímos pelo nosso componente estilizado.\n\nAula 7: quando há aplicação de um estilo inline para um elemento específico da página, podemos criar um novo componente de estilo específico para poder lidar com essa melhoria, trabalhando com a herança do estilo do nosso componente original. Na síntaxe ao ficaria algo como: const IconeMargin = styled(Icone)``.\n\nAula 8: trabalhando com responsividade através de media-queries. Passamos as propriedades de @media dentro do template literals. Com isso, eliminamos o arquivo de style.css e agora temos todos os estilos em componentes.\n\nDica: Sempre que possível devemos evitar colocarmos a declaração de componentes dentro do método render dentro de componente baseados em classes e no caso de componentes funcionais não devemos declarar um componente dentro do outro.\n\nIsso porque, caso um componente seja declarado dentro do método render ou dentro de um outro componente funcional ele será re-declarado a cada nova renderização e o React não conseguirá fazer cache desse componente, o que pode atrasar e muito a renderização da página.\n\nÉ uma boa prática declarar componentes e styled components fora dos métodos de renderização do React.\n\nLer mais em: https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method\n\nAula 9: criamos um novo componente de renderização, o Extrato. Ele fica dentro de um Box e utiliza informações da info.js para exibir na dela os dados de um usuário do banco.\n\nAula 10: criamos 2 novos componentes para poder armazenar e fazer a exibição dos dados de consumo, utilizando as props dentro do componente Item na árvore de renderização do componente Itens, que depois é chamado na árvore de renderização da nosso Extrato.\n\nTambém fizemos a estilização de uma tag span utilizando uma classe tradicional do CSS, dentro do template literals do style component Item.\n\nAula 11: criamos um componente para filtrar qual icone iria aparecer para cada tipo de gasto exibido no extrato. Para isso criamos o ImageFilter.js e utilizamos um objeto para indicar cada tipo.\n\nAula 12: implementamos a feature de tema claro/escuro. Setando as cores no componente de variaveis e depois importando dentro de um novo componente temas.js, responsável por redistribuir as propriedades para outros componentes da nossa aplicação. Utilizamos aqui o hook de ThemeProvider, para fazer com que nosso tema seja aplicado, precisaremos dele para que a a propriedade theme seja reconhecida e corretamente atribuída a aplicação.\n\nAula 13: fizemos o componente do botão de switch para alternar entre os temas e exportamos ele para o App.js, criando também um useState para poder aplicar a função de alternar entre os temas.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartenlf%2Freact-styled-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartenlf%2Freact-styled-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartenlf%2Freact-styled-components/lists"}