React初学者のためのコンポーネント完全ガイド

<BlogApp>
  <Header />
  <Navigation />
  <MainContent>
    <ArticleList>
      <Article />
      <Article />
      <Article />
    </ArticleList>
    <Sidebar />
  </MainContent>
  <Footer />
</BlogApp>

export default function UserCard() {
  // コンポーネントの内容をここに書きます
}

function UserCard() {
  // ここにコンポーネントのロジックを書きます
}

export default function UserCard() {
  return (
    <div className="user-card">
      <img 
        src="https://images.unsplash.com/photo-1494790108755-2616b612b77c?w=150" 
        alt="ユーザーアイコン" 
        className="user-avatar"
      />
      <h3>田中 花子</h3>
      <p>フロントエンドエンジニア</p>
      <button>プロフィールを見る</button>
    </div>
  );
}

export default function UserList() {
  return (
    <div className="user-list">
      <h2>チームメンバー</h2>
      <UserCard />
      <UserCard />
      <UserCard />
    </div>
  );
}

function Header() {
  return (
    <header>
      <Logo />
      <Navigation />
      <UserMenu />
    </header>
  );
}

function Logo() {
  return <h1>My App</h1>;
}

function Navigation() {
  return (
    <nav>
      <a href="/">ホーム</a>
      <a href="/about">概要</a>
      <a href="/contact">お問い合わせ</a>
    </nav>
  );
}

// ❌ 悪い例
function App() {
  function Header() { // コンポーネント内でのコンポーネント定義はNG
    return <h1>Title</h1>;
  }
  return <Header />;
}

// デフォルトエクスポート
export default function UserCard() {
  return (
    <div className="user-card">
      <img src="avatar.jpg" alt="ユーザー" />
      <h3>山田 太郎</h3>
      <p>Webデベロッパー</p>
    </div>
  );
}

// デフォルトインポート
import UserCard from './UserCard.js';

export default function App() {
  return (
    <div>
      <h1>ユーザー一覧</h1>
      <UserCard />
    </div>
  );
}

// 名前付きエクスポート
export function Button({ children, onClick }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

export function Input({ placeholder, value, onChange }) {
  return (
    <input 
      type="text" 
      placeholder={placeholder}
      value={value}
      onChange={onChange}
    />
  );
}

// デフォルトエクスポートも同時に可能
export default function Form() {
  return (
    <form>
      <Input placeholder="お名前を入力" />
      <Button>送信</Button>
    </form>
  );
}

// 名前付きインポート（中括弧を使用）
import { Button, Input } from './Components.js';
// デフォルトインポートと組み合わせ
import Form from './Components.js';

export default function App() {
  return (
    <div>
      <h1>お問い合わせ</h1>
      <Form />
      
      {/* 個別のコンポーネントも使用可能 */}
      <Button>別のボタン</Button>
    </div>
  );
}

src/
├── components/
│   ├── Header/
│   │   ├── Header.js
│   │   └── Header.css
│   ├── UserCard/
│   │   ├── UserCard.js
│   │   └── UserCard.css
│   └── Button/
│       ├── Button.js
│       └── Button.css
├── pages/
│   ├── Home.js
│   └── About.js
├── App.js
└── index.js

// ❌ 悪い例：一つのコンポーネントに多くの責任がある
function UserDashboard() {
  return (
    <div>
      {/* ユーザー情報表示 */}
      <div>
        <img src="avatar.jpg" />
        <h2>ユーザー名</h2>
      </div>
      
      {/* 統計情報 */}
      <div>
        <p>投稿数: 42</p>
        <p>フォロワー: 128</p>
      </div>
      
      {/* 投稿一覧 */}
      <div>
        {/* 複雑な投稿リスト */}
      </div>
      
      {/* 設定フォーム */}
      <form>
        {/* 複雑な設定フォーム */}
      </form>
    </div>
  );
}

// ✅ 良い例：責任を分割
function UserDashboard() {
  return (
    <div>
      <UserProfile />
      <UserStats />
      <PostList />
      <SettingsForm />
    </div>
  );
}

function UserProfile() {
  return (
    <div>
      <img src="avatar.jpg" alt="ユーザーアバター" />
      <h2>ユーザー名</h2>
    </div>
  );
}

function UserStats() {
  return (
    <div>
      <p>投稿数: 42</p>
      <p>フォロワー: 128</p>
    </div>
  );
}

// 推奨構成
src/components/ProductCard/
├── ProductCard.js        // メインコンポーネント
├── ProductCard.css       // スタイル
├── ProductCard.test.js   // テスト
└── index.js              // エクスポート用（オプション）

// 再利用可能なボタンコンポーネント
function Button({ children, variant = 'primary', size = 'medium', onClick }) {
  const className = `btn btn--${variant} btn--${size}`;
  
  return (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  );
}

// 使用例
function App() {
  return (
    <div>
      <Button variant="primary" size="large" onClick={() => alert('送信!')}>
        送信
      </Button>
      <Button variant="secondary" size="small">
        キャンセル
      </Button>
    </div>
  );
}