RECT JSX文法



JSXは新しいjavascript構文で、過去にFacebook上でPHPを改善することによって作成されたXHPから起源しています.
reactはJSXとして組織されている.(JavaScriptではありません.)
JSXの特徴は基本的にhtmlに似ています.
ただ、いくつかの原則があります.

A.2つ以上の装飾は1つの装飾で包まなければならない。

<div>
  <p>first line</p>
  <p>second line</p>
</div>
<div>
  <p>second block</p>
</div>
上記の2つのdivが並列に存在する場合は、新しいdivラベルラップを使用するか、reactをインポートした行で一緒にインポートしてfragmentラベルラップを使用する必要があります.
破片のラベルは?
Reactはdivを追加して保護したくないが、Reactが提供するタグであり、他のタグを非表示にする必要がある場合に使用することができる.

B.classではなくclassNameを使用します。


C.スタイル属性は括弧({})にオブジェクトとして表示され、単語間の「-」を削除するのではなく、「ケース」(Camel Case)を使用してCSS構成を表す。

<div className="container" style={{backgroundColor: "red", fontSize: 16}} />

D.すべてのタグを閉じる必要があります。


入力ラベルはhtmlで閉じない場合があります.
JSXでは、ショートカット構文を使用してもオフにする必要があります.
<input />

E.JSXでJavaScript値を使用する場合は括弧を使用します。カッコ内に変数名を入力したり、カッコ内にJavaScript計算式、値などを入力したりできます。

<div>
{name}
</div>

F.コメントは{/**/}で内容を囲みます。