ステロイド上の Vite に反応する

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

React with Vite On Steroids で 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
  

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

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

• コードを lint します:

  yarn lint

• lint エラーを修正:

  yarn lint:fix

• コードをフォーマットします:

  yarn format

ライセンス

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

謝辞

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

バイト
反応
TypeScript
Tailwind CSS
ESLint
もっときれい
ヴィテスト
ライブラリのテスト
劇作家
ハスキー

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

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

フォローしてください @ricardogesteves

X(ツイッター)

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

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

github.com

以上がステロイド上の Vite に反応するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。