React JSX記法とは

JSX記法とは

JSXとは"JavaScript XML"の略で，Reactを実装するためのJavaScriptの拡張構文である．
JSXはJavaScriptの中にHTMLとほとんど同じように記述することができる．そのため，UIを簡単に記述し，視覚的に理解しやすくなった．

例として，Reactのコンポーネントを生成する同一の内容をJSX記法を利用した場合と利用しない場合を比較する．
JSX記法を利用しない場合

React.createElemet(
	'button',
	{className: 'btn'},
	'Click me!'
}

JSX記法を利用した場合

<button className={'btn'}>
	Click me!
</button>

このように，JSX記法を利用する場合，HTMLのように記述することができるため，UIを直感的に記述することができる．

jsx拡張子とjs拡張子の違い

Reactでは，JS拡張子(.js) のファイルとJSX拡張子(.jsx) のファイルの両方を読み込むことができる．一般的には，JSXコードを含む場合はjsx拡張子を使い，JSXコードを含まない場合はjs拡張子を使うことが推奨されている．

それぞれの役割を整理すると以下のようになる
JSファイル　→　Reactコンポーネントのロジックを実装，
JSXファイル　→　マークアップやUIの構築を行う．

これによって，コンポーネントのロジックとビューの作成の分離が可能であり，再利用性やメンテナンス性が向上する．

JSXはどのように読み込まれる？

JSXコードがJavaScriptファイルに含まれているとブラウザでは実行することができない．そのため，トランスパイラを利用して変換する必要がある．

トランスパイラとは
→ 新しいJavaScriptの記法を古い記法に変換してくれるものである．開発は新しい記法で行い，実行するときは古い記法で行うようにすれば，どんなブラウザでも問題なく実行できるということから生まれた．

JSXを利用しない場合は’React.createElement’によってReactの要素を生成している．JSXを利用したプログラムでは，’React.createElement’を使用する必要がなく，トランスパイルが従来の’React.createElement’の式に変換して，Reactの要素を生成している．

Reactでよく使われるトランスパイラとして，「Babel」というものがある．Babelについては別の方がまとめていた．

実際の書き方について

実際のコンポーネントの書き方は別の記事にまとめた．