cra-template-boilerplate-ialexanderbrito

<a href="https://www.npmjs.com/package/cra-template-boilerplate-ialexanderbrito" style="text-decoration: none"> <img alt="npm" src="https://img.shields.io/npm/v/cra-template-boilerplate-ialexanderbrito?style=flat-square&color=3ADEFF&labelColor=24292E"> </a> <a href="LICENSE" style="text-decoration: none"> <img alt="License" src="https://img.shields.io/github/license/ialexanderbrito/cra-template-alexander-typescript?style=flat-square"/> </a> <a href="https://github.com/ialexanderbrito/cra-template-alexander-typescript/issues" style="text-decoration: none"> <img alt="Issues" src="https://img.shields.io/github/issues/ialexanderbrito/cra-template-alexander-typescript?style=flat-square&logo=github&logoColor=white" /> </a> <a href="#" style="text-decoration: none"> <img alt="Issues" src="https://img.shields.io/github/stars/ialexanderbrito/cra-template-alexander-typescript?style=flat-square&logo=github&logoColor=white" /> </a> <a href="#" style="text-decoration: none"> <img alt="Issues" src="https://img.shields.io/github/languages/top/ialexanderbrito/cra-template-alexander-typescript?style=flat-square&logo=github&logoColor=white" /> </a> <a href="#💻-motivação">Motivação</a>    |    <a href="#como-usar">Como usar</a>    |    <a href="#🧪-tecnologias">Tecnologias</a>    |    <a href="#⚙-como-rodar-este-projeto">Como rodar o projeto</a>    |    <a href="#♻️-como-contribuir">Como contribuir</a>    |    <a href="#📝-licença">Licença</a> Create React App README Original disponivel [aqui](https://github.com/ialexanderbrito/cra-template-alexander-typescript/blob/master/README_CRA.md) ### 💻 Motivação A ideia foi criar um template foi com o intuito de agilizar o processo de criação de um projeto React. Já instalando as dependências, o projeto já está pronto para ser utilizado. E também com dark theme e estilo de cores padrão para facilitar no inicio do desenvolvimento. ### Como Usar ```bash npx create-react-app nome-do-projeto --template boilerplate-ialexanderbrito ``` Ou ```bash yarn create react-app nome-do-projeto --template boilerplate-ialexanderbrito ``` `npx` comando instala a versão estável mais recente do CRA do npm. `--template` parâmetro aponta para este modelo, note que o prefixo `cra-template-` é omitido. Devido às limitações do modelo CRA (podemos alterar apenas `scripts` e `dependências` dentro do `package.json` gerado) toda a configuração é feita adicionando arquivos de configuração sempre que possível. Por não ter a opção devDependencies você precisará instalar mais algumas bibliotecas executando este comando: ```bash yarn add -D @commitlint/cli @commitlint/config-conventional @types/react-router-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import-helpers eslint-plugin-prettier eslint-plugin-react husky lint-staged prettier prettier-eslint prettier-eslint-cli @types/jest @types/node @types/react @types/react-dom ``` Ou ```bash npm i -D @commitlint/cli @commitlint/config-conventional @types/react-router-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import-helpers eslint-plugin-prettier eslint-plugin-react husky lint-staged prettier prettier-eslint prettier-eslint-cli @types/jest @types/node @types/react @types/react-dom ``` ### Scripts Disponíveis No diretório do projeto, você pode executar: - `yarn dev`- executa o aplicativo no modo de desenvolvimento - `yarn start` - executa o aplicativo no modo de build. Abra [http://localhost:3000](http://localhost:3000) para visualizá-lo no navegador. - `yarn test` - inicia o executor de teste no modo de observação interativo. - `yarn build` - constrói o aplicativo para produção na pasta `build`. - `yarn eject` - expõe o conteúdo do pacote `react-script`. - `yarn lint` - corrige arquivos de projeto de acordo com as regras eslint. - `yarn prepare` - prepara o hook de commit do husky. ### 🧪 Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: - [Axios](https://github.com/axios/axios) - [Eslint](https://eslint.org/) - [React](https://github.com/facebook/react) - [React Hot Toast](https://react-hot-toast.com/) - [React Icons](https://react-icons.github.io/react-icons/) - [React Router Dom](https://reactrouter.com/web/guides/quick-start) - [Sass](https://sass-lang.com/) - [TypeScript](https://github.com/Microsoft/TypeScript) - Para mais detalhes, veja o <kbd>[package.json](https://github.com/ialexanderbrito/cra-template-alexander-typescript/blob/master/package.json)</kbd> ### ⚙ Como rodar este projeto ### Pré-requisitos Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: [Git](https://git-scm.com) [Node.js](https://nodejs.org/en/) E também será preciso um editor, eu indico o [VSCode](https://code.visualstudio.com/) ### Rodando o projeto 🚧 ```bash # Clone este repositório $ git clone https://github.com/ialexanderbrito/cra-template-boilerplate-ialexanderbrito # Acesse a pasta do projeto no terminal/cmd $ cd './cra-template-boilerplate-ialexanderbrito' # Instale as dependências $ npm install ou yarn ``` ### ♻️ Como contribuir - Fork esse repositório; - Crie uma branch com a sua feature: `git checkout -b my-feature` - Commit suas mudanças: `git commit -m 'feat: My new feature'` - Push a sua branch: `git push origin my-feature` Depois que o merge da sua pull request for feito, você pode deletar a sua branch. ### 📝 Licença Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes. ### 📱 Social Me acompanhe nas minhas redes sociais. <a href="https://twitter.com/ialexanderbrito" target="_blank" > <img alt="Twitter" src="https://img.shields.io/badge/-Twitter-9cf?style=flat-square&logo=Twitter&logoColor=white"></a> <a href="https://instagram.com/ialexanderbrito" target="_blank" > <img alt="Instagram" src="https://img.shields.io/badge/-Instagram-ff2b8e?style=flat-square&logo=Instagram&logoColor=white"></a> <a href="https://www.linkedin.com/in/ialexanderbrito/" target="_blank" > <img alt="Linkedin" src="https://img.shields.io/badge/-Linkedin-blue?style=flat-square&logo=Linkedin&logoColor=white"></a> <a href="https://t.me/ialexanderbrito" target="_blank" > <img alt="Telegram" src="https://img.shields.io/badge/-Telegram-blue?style=flat-square&logo=Telegram&logoColor=white"></a> <a href="mailto:ialexanderbrito@gmail.com" target="_blank" > <img alt="Email" src="https://img.shields.io/badge/-Email-c14438?style=flat-square&logo=Gmail&logoColor=white"></a> --- Feito com ❤️ by **Alexander** 🤙🏾