コンポーネントを作ってみよう

ページ
├── <Header />
│   ├── <Logo />
│   └── <Nav />
├── <Main />
│   ├── <Card />
│   ├── <Card />
│   └── <Card />
└── <Footer />

// app/page.js
 
// ① コンポーネントの定義（関数）
function Hello() {
  return <p>こんにちは！</p>
}
 
// ② ページ本体（コンポーネントを使う）
export default function Home() {
  return (
    <main>
      <h1>とんペディアへようこそ</h1>
      <Hello />  {/* ③ コンポーネントを呼び出す */}
      <Hello />  {/* 何度でも使える */}
    </main>
  )
}

// components/Card.js
 
export default function Card() {
  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
      <h2>カードタイトル</h2>
      <p>カードの内容です。</p>
    </div>
  )
}

// app/page.js
import Card from '../components/Card'  // ← importで読み込む
 
export default function Home() {
  return (
    <main>
      <h1>とんペディアへようこそ</h1>
      <Card />
      <Card />
    </main>
  )
}

function MyComponent() {
  const name = '太郎'
  const isLoggedIn = true
 
  return (
    <div>
      {/* コメントはこう書く */}
 
      {/* ① 変数は {} で埋め込む */}
      <p>こんにちは、{name}さん</p>
 
      {/* ② class ではなく className を使う */}
      <p className="text-red">赤いテキスト</p>
 
      {/* ③ 条件によって表示を切り替える */}
      {isLoggedIn && <p>ログイン中です</p>}
 
      {/* ④ 複数の要素を返すときは1つの要素で囲む */}
    </div>
  )
}

function FruitList() {
  const fruits = ['りんご', 'バナナ', 'みかん']
 
  return (
    <ul>
      {fruits.map((fruit, index) => (
        // ⚠️ key は必ず指定する（Reactの内部処理で必要）
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  )
}