JSXプロフィール
constの要素= <H1 > こんにちは、世界！</ H1 > 。
上記JSXですが、私は（HTMLタグで変数の要素を理解することは簡単な）理解しています。
説明：これは、JavaScriptの構文拡張です。私たちは、JSXと一緒にで反応、JSXはうまくUIの性質がその適切な相互作用の形で提示されるべきで記述してもよいことをお勧めします。JSXは、人々がテンプレート言語を考えさせるかもしれないが、それには、JavaScriptのすべての機能を備えています。
JSXが反応生成できる「要素を。」
なぜJSX？
他のUIロジックと結合されたレンダリングロジック固有の性質を考えると反応、例えば、UIは、いくつかの点でUIへの状態変化を通知する必要がある場合、イベントを処理するためにバインドする必要があり、UIに用意する必要性が良いデータを表示します。
使用しない反応するマーカーを、異なる論理ファイルに分割された人工的な方法を分離するが、一緒に疎結合と呼ばれるストアユニットにおける2で「構成要素」、及び達成する懸念の分離。
JSXの使用を反応することは必須ではありませんが、ほとんどの人にはJavaScriptを有効にしJSXとUIコードに一緒に置かれたときに、視覚的で補助的な役割を持っていることに気づきます。また、より便利なエラーメッセージと警告メッセージを表示するように反応することができます。
式に埋め込まれたJSX
次の例では、我々は、名前の宣言nameの変数を、次にJSXでそれを使用し、中括弧の中に包まれました。
constの名前 = 「ジョシュペレス」;
CONST 要素 = <H1 > こんにちは、{ 名前} </ H1 > 。
ReactDOM 。レンダリング（
要素を、
ドキュメント。getElementByIdを（'ルート' ）
）;
JSXの構文では、括弧内の任意の有効なJavaScript式を配置することができます。以下のために2 + 2たとえば、、user.firstNameまたはformatName(user)有効なJavaScript式です。
関数FORMATNAME （ユーザ）{
戻りユーザ.firstName + '' +ユーザ.lastName 。
}
CONST ユーザー = {
firstNameの：'ハーパー' 、
lastNameの：'ペレス'
} 。
CONST 要素 = （
<H1 >
こんにちは、{ FORMATNAME （ユーザ）} ！</ H1 > ）。ReactDOM 。レンダリング（要素を、
ドキュメント。getElementByIdを（'ルート' ）
）;
警告：
近い代わりにHTML構文JSXのJavaScriptを、そうはDOMの使用反応するのでcamelCase大会HTML名前を付けずに、プロパティの名前を定義するために（という名前の小さなこぶ）の属性名。
★表すJSXオブジェクト
バベルはJSXという名前に変換されますReact.createElement()関数呼び出し。
2つの完全に同等のサンプルコード：
constの要素= （
<H1 クラス名= "挨拶" >
こんにちは、世界！
</ H1 >
）;
constの要素=リアクト。createElement （
'H1' 、
{クラス名：'挨拶' } 、
'こんにちは、世界！'
）。