React Road お題チャレンジ　- ランダム名言ジェネレーター -

プログラマーの名言をランダムに表示する Web アプリ。
React の基礎フック（useState, useEffect）を学ぶ。

React の実践型学習プラットフォーム React Road のお題 ランダム名言ジェネレーター に挑戦させていただいた学習プロジェクトです。

Note

このリポジトリは、個人的な学習およびデモンストレーションの目的のみに使用されます。
This repository is for personal learning and demonstration purposes only.

デモサイト・スクリーンショット

👀 View Demo site

お題

必須機能

• ランダムな名言の表示 - サイトアクセス時にランダムな名言とその著者名を表示する
• 名言の更新 - ボタンをクリックすると新しい名言をランダムに取得して表示する

API

Tech Quotes API

推奨機能

• 環境構築: Vite + React + TypeScript
• スタイリング: Tailwind CSS
• API を利用したデータ取得と表示
• useState, useEffect フック
• GitHub Pages へのデプロイ

追加・変更した機能

• エラーハンドリング: React Error Boundary によるエラー処理、リトライボタン(再読み込み)表示
• ローディング状態: Suspense を使用したローディング、スケルトン表示
• データフェッチ: React 19 の use フックを使用したデータ取得パターン

インストール

# 依存関係のインストール
bun install

# 開発サーバーの起動
bun run dev

# ビルド
bun run build

# プレビュー
bun run preview

プロジェクト構造

src/
├── components/          # Reactコンポーネント
│   ├── button.tsx      # 名言取得ボタン
│   ├── footer.tsx      # フッター
│   ├── icon.tsx        # アイコンコンポーネント
│   └── quotes-card.tsx # 名言表示カード
├── lib/
│   └── index.ts        # API関連の関数と型定義
├── App.tsx             # メインアプリケーション
└── main.tsx