JSX記法とは・JSXの基本ルール

JSXは、React.jsでUIを記述するための記法です。HTMLのようなタグ構文を使用することで、React.jsのコンポーネントを簡単に記述することができます。

JSX記法の基本的な構文

まずは、JSX記法の基本的な書き方がこちらです。

<要素名 属性名="値" ...>
	コンテンツ
</要素名>

JSX記法で書くメリット

  • HTMLの記法に似ているので、構造を理解しやすい
  • JavaScriptだけで書くよりもコードの量を減らすことができる

例1 HTMLの要素を使った例

JSX記法では、HTMLの要素を使えます。例えば、以下のコードは、<div>要素を作成します。

<div class="my-div">
	This is a React component.
</div>

例2 JavaScriptの変数や関数を埋め込んだ例

また、JavaScriptの変数や関数を埋め込むこともできます。

例えば、以下のコードは、<div>要素のクラス属性に、現在の時刻を追加します。

<div class="my-div" data-time={new Date()}>
	This is a React component.
</div>

こちらは、変数に代入した文字列をHTMLの要素の中で表示される例です。

const userInput = 'This is the user input.';

<div>{userInput}</div>