知っておくべき文法・パターン

1. && 演算子（条件付きレンダリング）

{hasError && <p>エラーです</p>}
// hasErrorがtrueの時だけ<p>を表示

2. 三項演算子

{isLoggedIn ? <Dashboard /> : <Login />}
// 条件 ? trueの時 : falseの時

3. map（リストのレンダリング）

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}
// 配列を<li>に変換して表示

keyは必須！

4. スプレッド構文

const props = { name: "太郎", age: 20 };
<User {...props} />
// = <User name="太郎" age={20} />

5. 分割代入 （props 受け取り）

const MyComponent = (props) => {
  const { title, onClick } = props;
  return <button onClick={onClick}>{title}</button>;
};

6. テンプレートリテラル

<div className={`btn ${isActive ? "active" : ""}`}>
  {`こんにちは、${name}さん`}
</div>

7. オプショナルチェーン

{user?.profile?.avatar && <img src={user.profile.avatar} />}
// userがundefinedでもエラーにならない！