最新の Web 開発のための強力なスターター テンプレート

Vite On Steroids を使用した React で React アプリケーションの構築が簡単になりました – 高性能の React アプリケーションを簡単に作成するためのスターター テンプレート。

中には何があるの？

このテンプレートには、開発プロセスを合理化するために設計された機能が満載されています:

• Vite: 迅速な開発と最適化された運用ビルドを保証する超高速ビルド ツール。
• React: ユーザー インターフェイスを構築するための人気のある JavaScript ライブラリ。
• TypeScript: JavaScript にタイプ セーフティと強化されたツールを追加します。
• Tailwind CSS: カスタム CSS を記述せずに素晴らしいデザインを作成するためのユーティリティ優先の CSS フレームワーク。
• ESLint: コードベースをクリーンに保ち、プラグイン可能な lint ルールとの一貫性を保ちます。
• Prettier: プロジェクト全体で一貫したスタイルを強制する独自のコード フォーマッタ。
• Vitest: Vite ネイティブのアプローチを備えた超高速の単体テスト フレームワーク。
• テスト ライブラリ: 適切なテストの実践を促進する、シンプルで完全なテスト ユーティリティ。
• Playwright: 複数のブラウザをサポートする多用途のエンドツーエンド テスト フレームワーク。
• Husky: リポジトリにヒットする前にコードの品質を確保するために、コミット前フックなどの Git フックを自動化します。

はじめる

前提条件

次に進む前に、以下がインストールされていることを確認してください:

• Node.js (バージョン 20.x 以降)
• Yarn (または npm または pnpm)

インストール

次の簡単な手順でプロジェクトを開始してください:

1. リポジトリのクローンを作成します:

   git clone https://github.com/RicardoGEsteves/react-with-vite-on-steroids.git
   cd react-with-vite-on-steroids

1. 依存関係のインストール:

   yarn

開発サーバーの実行

コーディングを始める準備はできましたか?
を使用して開発サーバーをスピンアップします。

yarn dev

生産のための構築

デプロイの準備ができたら、次のように本番ビルドを作成します:

yarn build

テストの実行

このテンプレートには、コードが期待どおりに動作することを確認するためのテスト ユーティリティが組み込まれています。

• Vitest による単体テスト:

  yarn test

• テスト範囲の確認:

  yarn coverage

• Playwright によるエンドツーエンド テスト:

  • すべてのテストを実行します:

  yarn playwright test
  

  • インタラクティブ UI モード:

  yarn playwright test --ui
  

  • デスクトップ Chrome でのみテストを実行します:

  yarn playwright test --project=chromium
  

  • 特定のファイルでテストを実行します:

  yarn playwright test example
  

  • デバッグモード:

  yarn playwright test --debug
  

  • Codegen でテストを自動生成:

  yarn playwright codegen
  

リンティングとフォーマット

次のコマンドを使用してコードの品質と一貫性を維持します:

• コードをリントします:

  yarn lint

• lint エラーを修正:

  yarn lint:fix

• コードのフォーマット:

  yarn format

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。

謝辞

これらの素晴らしいツールの背後にある開発者とコミュニティに多大な感謝を申し上げます:

• 招待
• 反応
• タイプスクリプト
• テイルウィンド CSS
• ESLint
• よりきれい
• ヴィテスト
• テストライブラリ
• 劇作家
• ハスキー

テンプレートをチェックしてください @RicardoGEsteves

私のウェブサイト https://www.ricardogesteves.com にたくさんあります

フォローしてください @ricardogesteves
X(ツイッター)

RicardoGEsteves (リカルド・エステベス) · GitHub

フルスタック開発者 |直感的でインパクトのあるユーザー エクスペリエンスの作成に情熱を注ぐ |ポルトガルのリスボンに拠点を置く?? - リカルド・ジェスティーブス

github.com