Reactで利用するJSXについてのお勉強です。
JSXって？
JSXは、JavascriptをXMLのように扱えるようにする拡張機能のようなもので、JSXを使うことでJavaScriptのコード内にHTMLタグを埋め込むような記述が可能となります。
ReactとJSX
そんなJSXは、Reactを使う上で必須なものでは無いですが、JSXを使うことでコードの見通しが良くなるため、積極的に使われているようです。
JSXの記述そのままではWebブラウザが理解できないので、表示の際にはBabelというツールによって変換（トランスパイル）を実施します。
前回作成したcreate-react-appによるコードを例とすると、
これが
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
このようにJavaScriptの構文に変換されます。
"use strict";
React.createElement(
"div",
{ className: "App" },
React.createElement(
"header",
{ className: "App-header" },
React.createElement("img", { src: logo, className: "App-logo", alt: "logo" }),
React.createElement(
"h1",
{ className: "App-title" },
"Welcome to React"
)
),
React.createElement(
"p",
{ className: "App-intro" },
"To get started, edit ",
React.createElement(
"code",
null,
"src/App.js"
),
" and save to reload."
)
);
確かに、JSXによる記述の方が分かりやすいですね。
なお、Babelによる変換は下記サイトを利用すると、変換前後のイメージがリアルタイムで確認できます。
JSXの書き方
以下、JSXの書き方についての色々です。
最上位の要素は必ず1つ
最上位に複数の要素を並べることは出来ません。必ず、1つのタグで囲まれている必要があります。
例えば、
<h1>見出し</h1> <h2>記事</h2>
な書き方はNGで、このような場合は divタグで囲って以下のようにしてあげる必要があります。
<div> <h1>見出し</h1> <h2>記事</h2> </div>
これだと余計なdivタグが増えてイヤな場合もありそうなので、そういった場合はReact.Fragmentタグで囲むと回避できます。
<React.fragment> <h1>見出し</h1> <h2>記事</h2> </React.fragment>
class属性は、className属性にする
HTMLのclass属性は、className属性として記述する必要があります。Javascriptのclassと被るから、ですかね。
for属性は、htmlFor属性にする
これもclass属性と似たような感じですが、for属性は htmlFor属性として指定する必要があります。
{}内にはJavascriptを記述できる
例えば、以下のような感じで｛｝内にJavascriptの記述をすることが出来ます。
const test = "hogehoge"
<div>
<h1>見出し</h1>
<h2>記事</h2>
<h3> {test} </h3>
</div>
HTMLのコメントアウトは利用不可
HTMLのコメントアウト（＜！−−〜ーー＞）は利用できないので、｛/* 〜 */｝といった感じでJavascriptのコメントアウトで記述します。
const test = "hogehoge"
<div>
{/* コメント〜〜〜 */}
<h1>見出し</h1>
<h2>記事</h2>
<h3> {test} </h3>
</div>
他にも色々ありそうですが、一旦ここまでで次回へ。
コメント