{"id":15041336,"url":"https://github.com/leo-henrique/leo-react-app","last_synced_at":"2026-02-05T20:09:04.799Z","repository":{"id":65325215,"uuid":"586611728","full_name":"Leo-Henrique/leo-react-app","owner":"Leo-Henrique","description":"Development environment in React for the web using Vite.","archived":false,"fork":false,"pushed_at":"2023-04-06T17:05:22.000Z","size":354,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-20T22:04:58.546Z","etag":null,"topics":["acessibility","grid-system","open-graph-protocol","react","responsive","sass-functions","sass-mixins","scss","ui-architecture","vite","vite-template"],"latest_commit_sha":null,"homepage":"https://leo-henrique.github.io/leo-react-app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Leo-Henrique.png","metadata":{"files":{"readme":"README-pt-BR.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-01-08T18:33:50.000Z","updated_at":"2024-04-02T17:40:43.000Z","dependencies_parsed_at":"2024-01-07T18:03:32.971Z","dependency_job_id":"81b2fcad-3009-4b6c-bae5-1ab32899d872","html_url":"https://github.com/Leo-Henrique/leo-react-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Leo-Henrique/leo-react-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leo-Henrique%2Fleo-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leo-Henrique%2Fleo-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leo-Henrique%2Fleo-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leo-Henrique%2Fleo-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Leo-Henrique","download_url":"https://codeload.github.com/Leo-Henrique/leo-react-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leo-Henrique%2Fleo-react-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266205317,"owners_count":23892443,"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","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":["acessibility","grid-system","open-graph-protocol","react","responsive","sass-functions","sass-mixins","scss","ui-architecture","vite","vite-template"],"created_at":"2024-09-24T20:45:58.537Z","updated_at":"2026-02-05T20:09:04.769Z","avatar_url":"https://github.com/Leo-Henrique.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# leo-react-app\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\t\u003cimg src=\"https://user-images.githubusercontent.com/72027449/212686494-3c9d878f-c269-4520-aa61-649a2d94f691.gif\"\r\n\talt=\"Captura de tela da página inicial do Léo React App\" /\u003e\r\n\u003c/div\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\t\u003ca href=\"https://pt-br.reactjs.org/\"\r\n\ttarget=\"_blank\"\r\n\trel=\"external referrer noopener\"\r\n\tstyle=\"display: inline-block; padding: 8px\"\u003e\r\n\t\t\u003cimg src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg\"\r\n\t\talt=\"React logo\"\r\n\t\twidth=\"65\" /\u003e\r\n\t\u003c/a\u003e\r\n\t\u003ca href=\"https://vitejs.dev\"\r\n\ttarget=\"_blank\"\r\n\trel=\"external referrer noopener\"\r\n\tstyle=\"display: inline-block; padding: 8px\"\u003e\r\n\t\t\u003cimg src=\"https://vitejs.dev/logo.svg\"\r\n\t\talt=\"SASS logo\"\r\n\t\twidth=\"65\" /\u003e         \r\n\t\u003c/a\u003e\r\n\t\u003ca href=\"https://sass-lang.com/\"\r\n\ttarget=\"_blank\"\r\n\trel=\"external referrer noopener\"\r\n\tstyle=\"display: inline-block; padding: 8px\"\u003e\r\n        \u003cimg src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sass/sass-original.svg\"\r\n\t\talt=\"SASS logo\"\r\n\t\twidth=\"65\" /\u003e\r\n\t\u003c/a\u003e\r\n    \u003ca href=\"https://styled-components.com/\"\r\n\ttarget=\"_blank\"\r\n\trel=\"external referrer noopener\"\r\n\tstyle=\"display: inline-block; padding: 8px\"\u003e\r\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/20658825?v=4\"\r\n\t\talt=\"styled-components logo\"\r\n\t\twidth=\"65\" /\u003e\r\n\t\u003c/a\u003e\r\n\u003c/div\u003e\r\n\r\n[![en](https://img.shields.io/badge/idioma-en-red.svg)](https://github.com/Leo-Henrique/leo-react-app/blob/main/README.md)\r\n[![pt-br](https://img.shields.io/badge/idioma-pt--br-green.svg)](https://github.com/Leo-Henrique/leo-react-app/blob/main/README-pt-BR.md)\r\n\r\n## 🔎 Introdução\r\n\r\n`leo-react-app` se trata de um template / ambiente de desenvolvimento em React para web utilizando Vite.\r\n\r\nGosto de utilizar o termo **boilerplate** para se referir a leo-react-app pelo mesmo possuir o objetivo de fornecer uma estrutura de pastas e comandos mínima, mas raramente desnecessária ou desproveitosa em um aplicativo front-end baseado em React.\r\n\r\n## 💻 Recursos\r\n\r\nVocê pode utilizar duas opções do `leo-react-app`. Uma é com `SASS` e a outra com `styled-components`. Em ambas, há os seguintes recursos:\r\n\r\n* [React](https://pt-br.reactjs.org/)\r\n* [Vite](https://vitejs.dev/) - ambiente de desenvolvimento para front-end\r\n\t* [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react) - plugin oficial do Vite para o React (inclui recursos como [react-refresh](https://www.npmjs.com/package/react-refresh) e [JSX runtime](https://github.com/alloc/vite-react-jsx#faq), por exemplo)\r\n\t* [vite-plugin-svgr](https://github.com/pd4d10/vite-plugin-svgr) - loader para transformar SVGs em componentes React (baseado em [SVGR](https://react-svgr.com/))\r\n* [leo-css-reset](https://github.com/Leo-Henrique/leo-css-reset) - redefine a maioria das estilizações e define padrões CSS\r\n\r\n### Com SASS:\r\n\r\n* [SASS](https://www.npmjs.com/package/sass) - implementação JS do pré-processador SASS\r\n* [RFS](https://github.com/twbs/rfs#readme) - redimensionamento automático de tamanhos de fonte e espaçamentos com SASS\r\n\r\n### Com styled-components:\r\n\r\n* [styled-components](https://styled-components.com/) - apenas a própria biblioteca\r\n\r\n## 🚀 Iniciando\r\n\r\nEste repositório utiliza o [npm](https://www.npmjs.com/) para gerenciar os pacotes de terceiros. Efetue a [instalação do Node.js](https://nodejs.org/pt-br/) que já possui o npm como gerenciador de pacotes padrão.\r\n\r\n### Clonando o repositório\r\n\r\nUtilize o [degit](https://github.com/Rich-Harris/degit) para clonar o `leo-react-app`. Você pode mencionar o nome que deseja para a pasta raiz do seu projeto especificando apenas um espaço após o comando ou utilizar o comando dentro da sua pasta raiz.\r\n\r\nSe você optou por **SASS**:\r\n```bash\r\nnpx degit leo-henrique/leo-react-app#sass\r\n```\r\n\r\nSe você optou por **styled-components** (sem nenhum HTML adicional, apenas estrutura mínima):\r\n```bash\r\nnpx degit leo-henrique/leo-react-app#styled-components\r\n```\r\n\r\n### Instale as dependências\r\n\r\n```bash\r\nnpm install\r\n```\r\n\r\n### Inicie o servidor de desenvolvimento\r\n\r\nUma nova guia [localhost:5173/leo-react-app](http://localhost:5173/leo-react-app) será aberta no seu navegador.\r\n\r\n```\r\nnpm start\r\n```\r\n\r\n## ⚙️ Configure o boilerplate para sua aplicação\r\n\r\n* Em `public`, inclua os favicons da sua aplicação. Eu gosto de utilizar o [Real Favicon Generator](https://realfavicongenerator.net/) para gerar meus favicons.\r\n* Em `index.html`, altere os metadados conforme sua aplicação. Eu pressuponho que você também utilizará alguns metadados mínimos do [protocolo Open Graph](https://ogp.me/).\r\n\t* Utilize apenas `/` em vez de `public/` para [referenciar arquivos estáticos no index.html com Vite](https://vitejs.dev/guide/assets.html#the-public-directory).\r\n\r\n### Com SASS:\r\n\r\n* Em `src/scss/utilities/_variables.scss`, altere a UI da sua aplicação.\r\n\t* `$rfs-rem-value` se baseia no valor de 10px do *font size root*, conforme utilizo em [leo-css-reset](https://github.com/Leo-Henrique/leo-css-reset).\r\n\r\n### Com styled-components:\r\n\r\n* Em `src/styles/theme.js`, altere a UI da sua aplicação.\r\n* Em `src/styles/mediaQueries.js`, altere os breakpoints caso desejar.\r\n\r\n## 👨‍💻 Scripts \r\n\r\n* `npm start` - inicia o servidor de desenvolvimento e abre em seu navegador.\r\n* `npm run build` - minifica o aplicativo para produção.\r\n* `npm run preview` - visualize localmente sua produção em seu navegador.\r\n* `npm run deploy` - faz o deploy da sua aplicação no GitHub segundo a pasta \"dist\"","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleo-henrique%2Fleo-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleo-henrique%2Fleo-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleo-henrique%2Fleo-react-app/lists"}