ReactのJSXとは

ReactのJSXとは

JSXというのはJavaScriptの拡張言語のことで、このJSXでは、JS内にhtmlを記述することができます。

以下、例です。

aという変数にhtmlタグを格納することができます。

ちなみに、”text/babel”とすることによってconstなどを使うこともできます。

以前は、<script type=”text/jsx”>と書いていたようですが、現在は、<script type=”text/babel”>と記述します。

JSX文法ではhtmlタグ内に置換変数を指定できる

置換変数は、{と}で囲みます。例えば、以下のように記述します。

以下、コーディング例です。

サンプル

Babelでトランスパイルしてみる

以下のソースをトランスパイルしてみます。

トランスパイルすると以下のように、React.createElementメソッドが登場してきます。

React.createElementメソッドとは

React.createElementメソッドは、仮想DOMを作成するメソッドです。

メソッドの引数は以下のとおりです。

引数 内容
第一引数 タグ名
第二引数 属性(なければnull)
第三引数 インライン要素

ReactのJSXとは

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA