React文書翻訳シリーズ(三)JSX概要
まず次の変数宣言を見てみます.

const element = <h1>Hello world!h1>

この面白いラベル文法は文字列でもHTMLでもない.
このような形式はJSXと呼ばれています.彼はJavascriptの一種の拡張文法です.このような形で、ReactでUIの様子を説明することをおすすめします.JSXはテンプレート言語を思い出させるかもしれませんが、Javascriptのすべての機能を持っています.
JSXはReact「元素」を生産します.次の部分でDOMにどのようにレンダリングするかを模索します.次に、JSXの基礎知識を見つけて、ご利用を開始します.
JSXの埋め込み式
JSXでは、ペアの大かっこを通して、Javascript表現を埋め込むことができます.2+2、user.firstName、およびformatName(user)など、これらは利用可能な表現です.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  

    Hello, {formatName(user)}!
  
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

CodePenで試してみます.
読みやすいように、JSXを複数行に分けます.括弧を使ってJSXを包むことを勧めます.これは必要ではないですが、セミコロンが自動的に挿入される罠を避けることができます.
JSXも表現です.
コンパイルの後、JSX表現は従来のJavascriptオブジェクトになります.
これは、if文またはforループでJSXを使用して変数に値を与え、パラメータとしてそれを受信したり、関数としての戻り値を返したりすることができることを意味しています.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!h1>;
  }
  return <h1>Hello, Stranger.h1>;
}

JSXで属性を指定する
引用符を使って文字列を属性として指定できます.

const element = <div tabIndex="0">div>;

また、Javascript表現を花かっこで埋め込むこともできます.

const element = <img src={user.avatarUrl}>img>;

属性にJavascript表式を組み込むときは、カギカッコを引用符で囲むのはやめましょう.そうでないとJSXは表現ではなく属性を文字列として扱います.同じ属性では、引用符(文字列の値)または括弧(表式)を使って選択できますが、同時に使用することはできません.
JSXを使用してサブ要素を指定します.
ラベルが空の場合は、XMLのようにすぐに/>を使って閉じてください.

const element = <img src={user.avatarUrl} />;

JSXラベルにはサブ要素が含まれている可能性があります.

const element = (
  <div>
    <h1>Hello!h1>
    <h2>Good to see you here.h2>
  div>
);

警告JSXはHTMLに比べてJavascriptに近いため、React DOMは、HTMLの属性名の代わりに猫ピーク方式を使用しています.例えば、JSXではclassはclassNameになり、tabindexはtabIndexになりました.
JSXは注入攻撃を防止しました.
JSXでは、埋め込みユーザ入力が安全である:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = 
{title}
;

デフォルトでは、React DOMはJSXを介して埋め込まれたコンテンツをレンダリングする前に、彼らの値を変換します.このように、あなたのアプリケーションで明確に書かれていない限り、他の内容は絶対に注入されません.レンダリングされる前に、すべてのものが文字列に変換されました.そうすると、XSS攻撃を防ぐことができます.
JSXは対象を表します
BabelはJSXをReact.createElement()にコンパイルして呼び出します.
次の二つの例は同じです.

const element = (
  <h1 className="greeting">
    Hello, world!
  h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()はいくつかの検査を実行して、バグのないコードを作成するのを助けますが、オブジェクトを作成する原理は以下のようです.

// Note:        
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

これらのオブジェクトは「React要素」と呼ばれています.彼らをスクリーンで見たいものの説明に想像することができます.Reactはこれらのオブジェクトを読み出してDOMを構築し、それらの継続的な更新を維持します.
次にReact元素をDOMにどのようにレンダリングするかを模索します.
Tipsは、あなたが選択したエディタのために「Babel」文法案を検索して、ES 6とJSXコードを正確に表示できるようにしてください.