Implante sua própria cópia deste modelo em apenas alguns cliques!
Este modelo tem várias pastas, exemplos de código e configurações. Sinta -se à vontade para editá -los ou removê -los, incluindo este readme!
Personalize e aproveite!
Este projeto apresenta todas as ferramentas mais recentes e boas práticas em desenvolvimento da Web!
$ git clone https://github.com/ < YOUR-GITHUB-LOGIN > / < NAME-OF-YOUR-GENERATED-REPOSITORY > .gitAntes de começar a desenvolver seu super aplicativo, você precisa instalar as dependências do projeto.
Mova -se para a raiz do projeto:
$ cd < NAME-OF-YOUR-GENERATED-REPOSITORY >Para as próximas etapas, escolha um gerenciador de pacotes de sua escolha e altere os comandos contidos nos scripts
package.json. Veja a documentação deles para obter mais informações:
- PNPM (recomendação)
- Npm
Instale todas as dependências do projeto:
# PNPM
$ pnpm install
# NPM
$ npm installDepois que todas as dependências forem instaladas, você pode executar o servidor de desenvolvimento local:
# PNPM
$ pnpm dev
# NPM
$ npm run devAgora apenas code!
Depois de aplicar as alterações, você pode gerar uma compilação para testar e/ou implantar no seu ambiente de produção.
Faça uma construção de produção:
# PNPM
$ pnpm build
# NPM
$ npm run buildE depois execute a construção:
# PNPM
$ pnpm start
# NPM
$ npm start # PNPM
$ pnpm run lint
# NPM
$ npm run lint # PNPM
$ pnpm run lint:fix
# NPM
$ npm run lint:fix # PNPM
$ pnpm run test # or pnpm run test:watch
# NPM
$ npm run test # or npm run test:watch # PNPM
$ pnpm run type-check
# NPM
$ npm run type-check # PNPM
$ pnpm run format
# NPM
$ npm run format # PNPM
$ pnpm run up
# NPM
$ npm run up # PNPM
$ pnpm run up-latest
# NPM
$ npm run up-latest # PNPM
$ pnpm run release-as-major
# NPM
$ npm run release-as-major # PNPM
$ pnpm run release-as-minor
# NPM
$ npm run release-as-minor # PNPM
$ pnpm run release-as-patch
# NPM
$ npm run release-as-patch # PNPM
$ pnpm run push-release
# NPM
$ npm run push-release # PNPM
$ pnpm run pull
# NPM
$ npm run pull Coloque o arquivo babel.config.js (localizado no caminho src/scripts ) na raiz do projeto e exclua o arquivo .babelrc .
Descomposição A linha de importação wdyr nas pages/_app.tsx .
É isso! Agora você pode monitorar os reencontres reactos!
Basta excluir os arquivos babel.config.js e wdyr.ts , remover a linha de importação wdyr nas pages/_app.tsx e desinstalá -lo:
# PNPM
$ pnpm uninstall @welldone-software/why-did-you-render
# NPM
$ npm uninstall @welldone-software/why-did-you-renderVeja abaixo a árvore de arquivos para entender a estrutura do projeto.
Pastas e arquivos marcados com (
**) são opcionais, para que você possa excluir então.
mantine-admin/
┣ .github/ # GitHub's folder configs **
┣ .husky/ # Husky's folder
┃ ┣ ? commit-msg # Commitlint git hook
┃ ┗ ? pre-commit # Lint-staged git hook
┣ .vscode/ # VSCode's workspace **
┣ public/ # Public folder
┃ ┣ static/ # Static files folder **
┃ ┃ ┣ icons/ # Icons folder **
┃ ┃ ┣ images/ # Images folder **
┃ ┃ ┣ sounds/ # Sounds folder **
┃ ┃ ┗ videos/ # Videos folder **
┃ ┣ docs/ # Documentation folder **
┃ ┃ ┣ demo/ # Demonstrations project **
┃ ┃ ┗ translations/ # Translations folder **
┃ ┣ ? favicon.ico # Icon tab browser
┣ src/
┃ ┣ app/ # App pages
┃ ┣ components/ # App Components
┃ ┃ ┗ Motion/ # Mantine-UI components **
┃ ┣ hooks/ # React Hooks **
┃ ┃ ┗ ? useFetch.ts # SWR fetch hook (optional) **
┃ ┣ interfaces/ # TypeScript Interfaces
┃ ┣ scripts/ # Additional scripts **
┃ ┃ ┣ ? babel.config.js # Babel config with WDYR **
┃ ┃ ┗ ? wdyr.ts # WDYR file **
┃ ┣ services/ # Services
┃ ┃ ┗ users/
┃ ┃ ┣ ? index.ts # React Query Configuration
┃ ┃ ┗ ? keys.ts # React Query Key
┃ ┣ stores/ # Zustand stores
┃ ┣ styles/ # Styles folder
┃ ┃ ┣ ? bgImages.ts # SVG background images **
┃ ┃ ┗ ? theme.ts # Mantine-UI theme
┃ ┗ utils/ # Useful functions **
┣ ? .babelrc # Default Babel config
┣ ? .editorconfig # Editor config
┣ ? .eslintignore # ESLint ignore
┣ ? .eslintrc # ESLint config
┣ ? .gitignore # Git ignore
┣ ? .versionrc # Versioning config
┣ ? .commitlintrc # Commitlint config
┣ ? jest.config.js # Jest config
┣ ? jest.setup.js # Jest setup
┣ ? LICENSE # License of the project
┣ ? next-env.d.ts # Next.js types to TypeScript
┣ ? next.config.js # Next.js config
┣ ? .prettierrc # Prettier config
┣ ? README.md # Main README
┣ ? renovate.json # Renovate Bot config **
┣ ? tsconfig.json # TypeScript configEmbora você não precise, se você reutilizar esse modelo para seus projetos, eu apreciaria se você me creditar e fornecer um link para o meu perfil do GitHub no rodapé do seu projeto . Obrigado!
Este projeto está licenciado sob a licença do MIT - consulte a página de licença para obter detalhes.