JSX

JSX とは、JavaScript の拡張構文であり、React.createElement(component, props, ...children) の糖衣構文で、React 要素を簡単に作成できます。

JSX の例

const elem = <h1 className="saying">Hello, world!</h1>;

React.createElement の例

const elem = React.createElement(
  "h1",
  { className: "saying" },
  "Hello, world!"
);

上記二つは同じです。React.createElement を用いてコンポーネントを作成するより直感的でわかりやすいのではないでしょうか。

それではこれから JSX の主な機能について説明していきます。

式や関数の埋め込み

{} の中に JavaScript の式や関数を JSX に埋め込むことができます。埋め込まれた式などは内部で展開されます。

const name = "Tom";

function formatName(name) {
  return name + "さん";
}

const Message = () => {
  return (
		<div>
	    おはよう、 {name}
	    こんにちは,{formatName(name)}
	  <div/>
	)
}

属性の指定

JavaScript の式を属性に埋め込むこともできます。

const nameElement = <div class="name"></div>;

// JavaScript式を属性に埋め込むこともできる
const firstName = <div class={user.firstName}></div>;

スプレッド演算子(...)を利用することでオブジェクトそのものを JSX に渡すこともできます。

const App = () => {
  const attributes = { size: "large", color: "black" };
  // <Font size="large" color="black" />のように展開される
  return <Font {...props} />;
};

JSX の子要素

JSX の子要素、つまりタグに囲まれた箇所はprops.childrenという特別なプロパティとして渡されます。以下に例を示します。

const Container = props => {
  return <div>Text : {props.children}</div>;
};

// Text: Inner textと表示される
<Container>Inner text</Container>;

子要素には JSX 要素や JavaScript の式も渡せる

JSX 要素や JavaScript の式も子要素として渡すことが可能です。以下に例を示します。

// 子要素にJSX要素を渡す
<Container>
	<Component />
	<Component />
</Container>

// 子要素にJavaScriptの式を渡す
const list = ["a", "b"]
<Container>{list[0]}</Container>

true/false, null, undefined はレンダーされない

true, false, null, undefined は JSX の子要素として渡せますが、レンダリングはされません。

例えば

<div>{false}</div>

としても div タグの中はレンダリングされず<div />と同義となります。

その他

React DOM はデフォルトで JSX に埋め込まれた値をレンダリングされる前にエスケープすることができます。これは XSS 攻撃の防止に役立ちます。

JSXの記法について

JSX