Chapter06. JSX

4569 ワード
react.js programming テキストリンク
今日はJSXについて調べてみましょう.
JSXの定義が何なのか、Reactでどのように使われているのかを見てみましょう.

1.JSXは


JSXは簡単に言えばHTML+Javascriptの組み合わせです.
reactは、JSXからなる素子単位で展開されている.
JavascriptはJSXを解析してHTMLタグを生成します.

2.JSXルール

  • 要素はラベルで包まなければなりません.
  • エラー例
    • function Test(){
	return (
		Hello World
	);
}
  • 正しい例
    • function Test(){
	return(
		<div>Hello World</div>
	);
}
    IF)ラベルで包みたくない場合はを使用します.
    function Test(){
	return(
		<Fragment>Hello World</Fragment>
	);
}

    3.classNameの使用


    元のHTMLでタグにclass属性を適用した場合、元は「class=000」と記入します.
    ただし、ReactではclassNameを使用しており、classではありません.
  • クラス
    • function Test(){
	return (
		<div class="myDiv">Hello World</div>
	);
}

    上記のclassを使用すると、ページは正常に開きますが、開発者ツールでWarning文の表示を確認できます.
    これらの警告文を表示したくない場合は、以下のようにclass>classNameに変更して実行できます.
  • className
    • 用
    function Test(){
	return (
		<div className="myDiv">Hello World</div>
	);
}

    4.個別ラベルは使用できません


    HTMLでは、タグの種類に応じて、個別のタグとして使用されるタグがあります.ex) ,
    ...
    ただし、JSXがラベルを開く必要がある場合は、それを閉じる必要があります.
    次の例で、何を言っているのか確認してみましょう.
  • エラー例
    • function Test(){
	return (
		<div>
			It's wrong example
			<input>
		</div>
	);
}

    前述したように、タグを単独で使用すると、コンパイルエラーが発生することを確認できます.
    JSXではすべてのタグがペアリングされなければならないので、タグもペアリングされなければならない.
  • 正しい例
    • function Test(){
	return (
		<div>
			Hello World
			<input></input>
			</div>
	);
}

    以上のように、タグをペアリングすることで、ページが正常に動作することを確認できます.
    Message Driven Bean
    JSF点滴蓄積--PhaseListenerによる権限検証