JSXとはJavaScript XMLの略であり、Reactのコンポーネント内でマークアップ言語を記述するためのXML風の構文です。
Reactを初めて触れた時になかなか慣れなくて「JSXって難しい！！」ってイメージがあったので基本構文を簡潔にまとめてみました。
HTML要素が1行の場合はreturnの後に記述。
const Component = () => {
return <div>Hello React !</div>
}HTML要素が複数行になる場合はreturnの中を「( )括弧」で囲みます。
const Component = () => {
return (
<div className="row">
<div className="col-12">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
)
}JSXでは単一のルートを持つというルールがあるので、下記のような書き方はJSXの構文ではエラーとなります。
// NGパターン
const Component = () => {
return (
<div>1</div>
<div>2</div>
<div>3</div>
)
}
// OKパターン
const Component = () => {
return (
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
)
}ReactにはFragment要素というものが準備されており、これを使うことで不必要な<div>タグで囲むことを回避できます。
JSXの中では<React.Fragment>要素としてみなされますが、実際にHTMLを出力する際にはこの要素は出力されません。
const Component = () => {
return (
<React.Fragment>
<div>1</div>
<div>2</div>
<div>3</div>
</React.Fragment>
)
}Fragmentには下記のシンタックスシュガー（別記法）も用意されていますので、このように省略して記述することも出来ます。
こちらの書き方のスッキリしますね。
const Component = () => {
return (
<>
<div>1</div>
<div>2</div>
<div>3</div>
</>
)
}クラス名の指定はclassName=""
<div className="headerLabel">対象の1行のみをコメントアウトする方法 {// code… /}
const Component = () => {
return (
<div>
<div className="col-12">
{//
<input value="hoge"></input>
}
NGパターン1
{// <input value="hoge"></input> } ← NG（エラーになります）
NGパターン2
{// <input value="hoge"></input>
<input value="fuga"></input>
} ← NG（エラーになります）
</div>
</div>
)
}「NGパターン1」の注意点は、上記のNG箇所のように１行で挟めようとするとコンパイルエラーになるのでかならず閉めの「}」の前には改行を入れましょう。
「NGパターン2」の注意点は複数行をコメントアウトしようとするとエラーになるので、複数行をコメントアウトする場合には次の「複数行をコメントアウトする方法」を使いましょう
複数行をコメントアウトする方法 {/* code… */}
const Component = () => {
return (
<div>
<div className="col-12">
{/*
<input value="hoge"></input>
*/}
{/* <input value="hoge"></input> */}
{/*
<input value="hoge"></input>
<input value="fuga"></input>
*/}
</div>
</div>
)
}JXSで変数を埋め込むにはHTML要素の中で変数を「{ }」で囲みます。
const userName = "Yamada";
const Component = () => {
return (
<>
<div>Hello {userName}.</div>
</>
)
}関数を埋め込む場合も変数と同様に「{ }」で囲みます。
type User = {
lastName: string;
firstName: string;
}
const getFullName = (user: User) => {
return user.lastName + " " + user.firstName;
}
const Component = (user: User) => {
return (
<>
<div>Hello {getFullName(user)}.</div>
</>
)
}
const countUp = () => {
count += 1;
}
const Component = () => {
return (
<>
<div>{counter}</div>
<button onClick={countUp}>One</button>
</>
)
}イベントハンドラに引数を渡して実行する場合はアロー関数を使います
const add= (addCount : number) => {
count += number;
}
const Component = () => {
return (
<>
<div>{counter}</div>
<button onClick={() => add(100)}>One</button>
</>
)
}
ちなみに下記の書き方はNG
const add= (addCount : number) => {
count += number;
}
const Component = () => {
return (
<>
<div>{counter}</div>
<button onClick={add(100)}>One</button>
</>
)
}
三項演算子
プログラミング言語でおなじみの三項演算子が使えます
const Component = ({myFlag}) => {
return (
<>
<div>This is {myFlag ? 'OK' : 'NG'}</div>
</>
)
}JSX条件式
JSXの特殊な分岐判定の記載方法で「左辺 && 右辺」という書き方をします。
左辺は判定内容、右辺は「左辺がtrue」となる時に描画する内容を記載します。
const Component = ({myFlag}) => {
return (
<>
<div>This is {myFlag && 'OK'}</div>
<div>This is {myFlag && <h2>OK</h2>}</div>
</>
)
}即時関数
即時関数書式を使うことでif文等の条件式を書くことが出来ます。
const Component = ({myFlag}) => {
return (
<>
{(() => {
if (myFlag) {
return <p>OK</p>
} else {
return <p>NG</p>
}
})()}
</>
)
}JSX内でリストを元にループ処理を行う場合はmapを使います。
また、配列をmapで一覧表示する際にはHTMLタグの要素（attribute）にユニーク要素となるkeyを指定する必要があります。
{/* 基本構文 */}
{/*
mapの第一引数：配列要素のオブジェクト
mapの第二引数：配列要素のインデックス
*/}
{array.map((引数1, 引数2) => {
return <p key={引数2}>{引数1}</p>
})}ループ処理例
const monthList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
const Component1 = () => {
return (
<>
<ul>
{monthList.map((month, i) => {
return <li key={i}>{month}</li>
})}
</ul>
</>
)
}
{/* returnを省略して記述することも可 */}
const Component2 = () => {
return (
<>
<ul>
{monthList.map((month, i) => <li key={i}>{month}</li>)}
</ul>
</>
)
}
