JSXについて
Jul 20, 2017 · 3 min read
以下の記事を参考に、JSXについてまとめます。
まず前提として、React内で使われるJSXは、要素を生成しています。
では、どのような性質をJSXは持ち合わせているのでしょうか。
JSXの特徴を簡単にいうと
- JSXはexpressionとして扱える。
例えば、if文やforループ内で返す値として成り立ちます。 - JSX内で属性を定義することができる。
- XMLの様に、子要素を持たないタグには< />で閉じることができる。
子要素も持たせられる - JSXはレンダリングする前に、値ををエスケープ処理します。
つまり、特に何もしなくてもXSS攻撃を防ぐことができます。 - JSXはオブジェクトを表しています。
最後の特徴、JSXのはオブジェクトである、について次のコード例を用いて見ていきます。
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);createElementは下のようなオブジェクト変数を構成しています。
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};つまり、element(画面に表示する情報)を、オブジェクトとして扱うことでコードのメンテナンス性を高めています。
ここまでは、基本的なJSXの仕組みです。より詳細なJSXの使用は、下記記事にあります。
とりあえず、後々のメモ用に簡単にまとめると
- 引数(props)に値を渡さなかった場合の初期値は、true
- JSX内では、コンポーネントを呼ぶ時にdot notationが可能
<component.someData />のような事が出来る。 - 独自のコンポーネントを定義するときは、Capitalizedが必要
- React のelementは、普通のexpressionは使用できない。
つまり、一度Capitalizeした変数にassignする必要がある。
等など
感想
とりあえず、JSXの大まかな概要は理解しました。
Reactコンポーネント名は大文字で始まる、逆にhtmlは小文字からはじまる。
また全てのタグを< />で閉じる必要がある。
等、いくつか注意点があるなと思いました。
