03. Introducing JSX - accgetter/React GitHub Wiki

この変数の宣言を考えてみましょう:

const element = <h1>Hello, world!</h1>;

この面白いタグ構文は、文字列でもHTMLでもありません。

これはJSXと呼ばれ、JavaScriptの構文拡張です。
UIをどのように表示するかを説明するにはReactと併用することをお勧めします。
JSXはテンプレート言語を思い出させるかもしれませんが、JavaScriptの完全機能を備えています。

JSXはReact要素を生成します。
次のセクションの
DOMへのレンダリングについて考えてみます。
以下に、JSXの基本を紹介します。

JSXに式を埋め込む

任意のJavaScriptを
中括弧で囲んでJSXに組み込むことができます。

例えば、2 + 2、user.firstName、 formatName（user）はすべてOKです:

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

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

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

Try it on CodePen.

JSXを複数の行に分割して読みやすくしました。必須ではありませんが、これを行う際には、
automatic semicolon insertionの落とし穴を避けるため、
カッコで囲むことをお勧めします。

JSXは表現方法でもあります

コンパイル後、JSX式は通常のJavaScriptオブジェクトになります。

つまり、 ifステートメントと forループの内部でJSXを使用したり、
変数に代入したり、引数として受け入れたり、関数から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属性名の代わりに camelCaseプロパティ命名規則を使用します。

例えば、 classはJSXのclassNameになり、 tabindexはtabIndexになります。

JSXによるinjection攻撃の防止

ユーザー入力をJSXに埋め込むことは安全です。

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

デフォルトでは、React DOM escapeは、
どんな値もレンダリングする前にJSXに埋め込みます。
したがって、アプリケーションで明示的に入力されていないものを挿入することは絶対にできません。
すべてがレンダリングされる前に文字列に変換されます。これにより、
XSS（クロスサイトスクリプティング）攻撃を防ぐことができます。

JSXはオブジェクトを表します

BabelはJSXを React.createElement（）呼び出しコンパイルします。

以下の2つの例は同じです:

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

React.createElement（）は、バグのないコードを書くのに役立ついくつかのチェックを行いますが、
基本的には次のようなオブジェクトを作成します:

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

これらのオブジェクトは「React Elements」と呼ばれます。
それらをあなたが画面上で表示させたいものの説明として考えることができます。
Reactはこれらのオブジェクトを読み取り、それらを使ってDOMを構築し、最新の状態に保ちます。

次のセクションでは、React要素をDOMに描画する方法について説明します。

ヒント：

ES6とJSXコードの両方が適切に強調表示されるように、お使いになるエディタ用が「Babel」のシンタックスをハイライトできるようにすることをお勧めします。

⚠️ **GitHub.com Fallback** ⚠️