JSXについて

Tuyoshi Akiyama
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は小文字からはじまる。

また全てのタグを< />で閉じる必要がある。

等、いくつか注意点があるなと思いました。

)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade