JSXについて

react
スポンサーリンク

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による変換は下記サイトを利用すると、変換前後のイメージがリアルタイムで確認できます。

Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript

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>

他にも色々ありそうですが、一旦ここまでで次回へ。

コメント