数回クリックして、このテンプレートの独自のコピーを展開してください!
このテンプレートには、たくさんのフォルダー、コードの例、構成があります。このreadmeを含め、それらを編集または削除してください!
カスタマイズして楽しんでください!
このプロジェクトは、すべての最新のツールとWeb開発における優れたプラクティスを特徴としています!
$ git clone https://github.com/ < YOUR-GITHUB-LOGIN > / < NAME-OF-YOUR-GENERATED-REPOSITORY > .gitスーパーアプリケーションの開発を開始する前に、プロジェクトの依存関係をインストールする必要があります。
プロジェクトのルートに自分自身を移動します:
$ cd < NAME-OF-YOUR-GENERATED-REPOSITORY >次の手順については、選択したパッケージマネージャーを選択し、
package.jsonスクリプトに含まれるコマンドを変更します。詳細については、彼らのドキュメントを参照してください。
- PNPM(推奨)
- npm
プロジェクトのすべての依存関係をインストールします。
# PNPM
$ pnpm install
# NPM
$ npm installすべての依存関係がインストールされたら、ローカル開発サーバーを実行できます。
# PNPM
$ pnpm dev
# NPM
$ npm run dev今コード!
変更を適用した後、ビルドを生成して、生産環境にテストおよび/または展開できます。
生産ビルドを作成します:
# PNPM
$ pnpm build
# NPM
$ npm run buildそして、ビルドを実行します:
# 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プロジェクトルートにbabel.config.jsファイル(パスsrc/scriptsにある)を配置し、 .babelrcファイルを削除します。
pages/_app.tsxのwdyrインポートラインを備えています。
それでおしまい!これで、モニトーレの反応再レンダーができます!
babel.config.jsおよびwdyr.tsファイルを削除するだけで、 pages/_app.tsxでwdyrインポートラインを削除してアンインストールしてください。
# PNPM
$ pnpm uninstall @welldone-software/why-did-you-render
# NPM
$ npm uninstall @welldone-software/why-did-you-renderプロジェクト構造を理解するには、ファイルツリーの以下を参照してください。
(
**)でマークされたフォルダーとファイルがオプションであるため、削除できます。
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 config必要はありませんが、プロジェクトのこのテンプレートを再利用する場合は、プロジェクトのフッターにある私のgithubプロフィールへのリンクを提供していただければ幸いです。ありがとう!
このプロジェクトは、 MITライセンスに基づいてライセンスされています。詳細については、ライセンスページを参照してください。