JSX

ReactJSは、ユーザーインターフェイスを構築するためにFacebookによって開発されたJavaScriptライブラリです。 ReactJSを参照して、それはJSXを言及せずに欠けているでしょう。 私がJSXについて学んだとき、私は何人かの人々がまだjsxの知識について少しあいまいであるか、単にそれを無視していることがわかりました。

それで、JSXとは何か、どんな場合にJSXで使われるか、なぜJSXをReactJSと一緒に使うべきなのか。

###１．定義
JSX = Javascript ＋　XML。 ほぼXML構文をJavascriptに変換して、プログラマがJavascriptを使用する代わりにXML構文でReactJSをコーディングできるようにします。 XML要素や属性やおよび子はReact.createElementに渡された引数に変換されます。
それが、XMLは何ですか？
XML－eXtensible Markup Languageは、W3Cによって提案された、他のマークアップ言語を作成することを目的としています。これはさまざまなデータ型を記述できる単純なサブセットなので、システム間でデータを共有するのに非常に役立ちます。最も典型的なのは、作成にXMLの構文を使用するHTMLハイパーテキストマークアップ言語で、ブラウザブラウザでデータを表示する場合に機能する柔軟でない要素と属性を持ちます。
XMLの構文は入れ子になったNODE構造上に構築されて、各ノードは次のように開始タグと終了タグを持ちます。

demo.js

<ノード名>内容</ノード名>

• <ノード名>：開始タグです。このタグの名前は自分で定義します。
• ノード名>：終了タグです。このタグの名前は開始タグの名前と一致する必要があります。
• 内容：このタグの内容です

したがって、基本的なjsx構文は次のようになります。

demo.js

const element = <h1>Hello, world!</h1>;

FacebookはJSXを使用してUIコンポーネントを表示します。

###2. シンタックスJSX
JSXの構文はXMLに似ています。

• 開始タグと終了タグ

demo.js

<JSXElementName></JSXElementName>

**ご注意：**終了タグの名前は開始タグの名前と一致する必要です。

• SelfClosingElement

demo.js

<JSXElementName />

**ご注意：**JSXのフィールド名はhtmlと同じではありません、例えば：
HTML：

demo.html

<div class="container">...</div>

JSX：

demo.js

<div className="container">...</div>

• 中括弧で閉じることで、任意のJavaScript式をJSXに埋め込むことができます。

demo.js

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

• コンパイル後、JSX式は通常のJavaScriptオブジェクトになります。つまり、if文とforループの中でJSXを使用し、それを変数に割り当て、それを引数として受け入れ、関数から返すことができます。

demo.js

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

• 引用符を使って文字列リテラルを属性として定義できます。

demo.js

const element = <div tabIndex="0"></div>;

中かっこを使用して、JavaScriptの式を属性に埋め込むこともできます。

demo.js

const element = <img src={user.avatarUrl}></img>;

###3. なぜJSXを使うのか
ReactJSでJSXを使用するように強制しません。純粋なJSのみを使用できます。しかし、ReactJSでJSXを使う理由はたくさんあります。

• XMLに似た構文、属性を表示するときのツリー構造を持つJSXを使用すると、JavaScriptで複数の関数やオブジェクトを定義して呼び出す必要がなく、複雑なコンポーネントを簡単に定義および管理できます。その構造を見ると、コンポーネントの意味を読みやすくなります。コードJSXはJSコードより短く、理解しやすいです。
• JSXはJavascriptのセマンティクスを変えません。
• HTMLタグの近くに書くことで、それは普通の開発者（デザイナーなど）がそれを容易に理解するのを助けます。そして、それは大した困難なしにコードを書くか、編集することができます。