&& を使った表示
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 34/42。
else が存在しないこともよくあります。条件が成立したときに何かを表示させたいだけという場合です。&& トリックは「表示か、何も表示しないか」を処理します：
{unread > 0 && <span>You have {unread} new messages</span>}仕組み: && は左辺が true の場合に右辺を返し、React がそれを render します。左辺が false の場合、何も render されません。これは : null を切り詰めた ternary（三項演算子）と同じです:
{cond ? <X /> : null} // と同じ
{cond && <X />}
チャレンジ
簡単未読メッセージがある場合のみ、インボックスバッジを表示してください。コンポーネントは unread を定義しています。
&&を使用して、unreadが 0 より大きい場合のみ、id="badge"と3 new messagesというテキスト（数字は変数から生成してください！）を持つ<span>をrenderしてください。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。