Reactでよく使うJSX。
HTMLでのマークアップが体に染み付きすぎてなかなかJSXに慣れなかったので、覚えておきべきポイントを自分用にまとめました。
とにかく、公式ドキュメントを見るべし見るべし。
目次
ざっくりJSXの書き方の特徴
マークアップ自体は概ねHTMLと同じ構造
ところどころ書き方が異なるので、HTMLでマークアップした内容をJSXに変換するイメージ。（最初の頃はね）
慣れないうちはコンバータを使ってもいいのかも。
全ての要素タグは閉じる
<div>や<p>、<ul>などのように、もともと閉じタグ</*>があるものは変わらないが、<img>や<input>のようにHTMLでは不要なものにも閉じタグは必要。
return (
<div>
<h1>Hello, World!</h1>
<img
src="XXX/XXX.jpg"
alt="画像の説明"
className="photo"
/>
<input
type="text"
value={inputText}
onChange={ ... }
placeholder="入力例："
autoFocus
/>
<button onClick={ ... }>追加</button>
</div>
);
あずま新鮮というより懐かしく感じる世代……
属性はキャメルケース
属性やプロパティはキャメルケースで書く。
ハイフンで繋いでいるものは、ハイフンをとって直後の頭文字が大文字になる。
const imgUrl = 'XXX/XXX.jpg';
return (
<div>
<h1>Hello, World!</h1>
<img
src={imgUrl}
alt="画像の説明"
className="photo"
aria-hidden="true"
/>
<input
type="text"
value={inputText}
onChange={ ... }
placeholder="入力例："
autoFocus
/>
<button onClick={ ... }>追加</button>
</div>
);なお、CSSをインラインで書く場合も、CSSの書き方はキャメルケースになる。
return (
<div>
<ul style={{
backgroundColor: 'black',
color: 'pink'
}}>
<li>ABC</li>
<li>123</li>
<li>あいう</li>
</ul>
</div>
);コンポーネントから返すときは要素を一つにまとめる
return () の中の要素は一つにまとまってないといけない。
NG例
return (
<h1>Hello, World!</h1>
<img
src="XXX/XXX.jpg"
alt="画像の説明"
className="photo"
/>
);OK例
return (
<div>
<h1>Hello, World!</h1>
<img
src="XXX/XXX.jpg"
alt="画像の説明"
className="photo"
/>
</div>
);
// <div>などの余計な要素を入れたくない場合は、<>と</>でもOK
return (
<>
<h1>Hello, World!</h1>
<img
src="XXX/XXX.jpg"
alt="画像の説明"
className="photo"
/>
</>
);
コンポーネントを呼び出すときは頭文字が大文字
上記はあくまでもHTMLマークアップの部分。
Reactでコンポーネントを呼び出す場合は、頭文字が大文字。
return (
<CardItem />
);JSX属性まとめ
よく出てくる属性（プロパティ）。
| HTMLでの書き方 | JSXでの書き方 | 意味 |
|---|---|---|
class | className | CSSのclass属性 |
style=”color: red”; | style={{ color: 'red' }} | インラインスタイル（オブジェクト形式） |
onClickonChange | onClickonChange | 例）ボタンをクリックしたとき 例）内容が変わったとき ※補足 |
<label for="id"> | label htmlFor="id"> | ラベルの関連付け |
autofocus | autoFocus | ページ表示時にフォーカス |
tabindex="0” | tabIndex={0} | タブでフォーカスする順番 |
補足
プロパティ名は公式から自作まで色々ある。
公式でサポートされているイベントや関数などはドキュメントを参照。
JSXの属性における “” と {} の違い
=の右側が ""（ダブルクォーテーション）か {}（波カッコ）かで意味が変わる。
| 書き方 | 説明 | 使用例 |
|---|---|---|
""（ダブルクォート） | 「文字列」としてそのまま渡す | <input type="text" placeholder="名前を入力" /> |
{}（波カッコ） | 「JavaScriptの式として評価した結果」を渡す | <p>{name}</p><input value={name} /> |
| 属性の種類 | 書き方 | 例 |
|---|---|---|
| 文字列 | "" | <label htmlFor="name">名前</label> |
| 数値 | {} | <input maxLength={20} /> |
| 論理値 | {} | <button disabled={true} /> |
| 変数 | {} | <p>{userName}</p> |
| 関数 | {} | <button onClick={handleClick}>Click</button> |
const value = "こんにちは"
<input value="value" /> // 文字列"value"
<input value={value} /> // 変数valueの中身（こんにちは）
あずま文字列以外はとにかく{}。