このプロジェクトは、ReduxとViteを使用したReactアプリケーション開発のためのテンプレートです。モダンなウェブアプリケーションを構築するためのシンプルなセットアップを提供します。
- 高速な開発: Viteは非常に高速な開発サーバーとホットモジュールリプレースメント(HMR)を提供し、即時のフィードバックが得られます。
- Redux: 状態管理ライブラリであるReduxを使用して、複雑な状態を効率的に管理できます。
- モダンなツール: Viteを使用して、最新のESモジュールと最適化されたビルドを活用できます。
- React: コンポーネントベースのアプローチでユーザーインターフェースを構築します。
以下がインストールされていることを確認してください:
-
リポジトリをクローンする:
git clone https://github.com/your-username/new-repository-name.git cd new-repository-name
-
依存関係をインストールする:
npm install
開発サーバーを起動するには、以下のコマンドを実行します:
npm run dev
これにより、Viteの開発サーバーが起動し、http://localhost:5173
でアプリケーションを表示できます。
本番用にアプリケーションをビルドするには、以下のコマンドを実行します:
npm run build
ビルドされたファイルはdist
ディレクトリに出力されます。その後、以下のコマンドで本番ビルドをプレビューできます:
npm run start
これにより、ローカルサーバーが起動し、http://localhost:4173
で本番ビルドを確認できます。
プロジェクトの構成は以下の通りです:
new-repository-name/
├── node_modules/ # Node.jsモジュール
├── public/ # 公開資産
│ ├── favicon.ico # ファビコン
│ ├── index.html # メインHTMLファイル
├── src/ # ソースファイル
│ ├── assets/ # 静的資産(画像、スタイルなど)
│ ├── components/ # Reactコンポーネント
│ ├── features/ # Reduxのスライス
│ ├── App.tsx # メインAppコンポーネント
│ ├── main.tsx # アプリケーションのエントリーポイント
│ ├── store.ts # Reduxストア設定
│ └── vite-env.d.ts # Vite環境定義
├── .gitignore # gitで無視するファイル
├── package.json # プロジェクトのメタデータと依存関係
├── tsconfig.json # TypeScript設定
├── tsconfig.node.json # Vite用TypeScript設定
├── vite.config.ts # Vite設定
└── README.md # プロジェクトのドキュメント
Vite設定
Viteの設定はvite.config.ts
にあります。開発サーバーの設定やプラグインの追加など、ここでカスタマイズできます。
TypeScript設定
TypeScriptの設定はtsconfig.json
とtsconfig.node.json
にあります。これらのファイルでコンパイラオプションやモジュール解決設定を定義しています。
Redux設定
Reduxの設定はsrc/store.ts
にあります。ここでストアの設定やミドルウェアの追加を行います。
- リポジトリをフォーク
- 新しいブランチを作成:
git checkout -b feature/your-feature-name
- 変更を行う
- 変更をコミット:
git commit -m 'Add some feature'
- ブランチにプッシュ:
git push origin feature/your-feature-name
- プルリクエストを開く
このプロジェクトはMITライセンスの下でライセンスされています。詳細はLICENSEファイルを参照してください。