ディープ・ダイブ

JSXを深く知るためには、JSXとは何かを明確にする必要があります.JSXの完全な形式はJavaScript XMLです.JSXコンセプト全体をクリアするには、JSXとは何かを議論します.

JSXとは
JSXはXML/HTMLのような構文で使用される構文です.JavaScript/ReplyコードでXML/HTMLのようなテキストが共存できるようにJavaScriptを拡張するJS.

なぜJSXか
JSXではJavaScriptでHTML要素を記述し、任意のcreateElement ()および/またはappendChild ()メソッドを使用しないでDOMに配置できます.HTMLのタグを反応要素に変換します.
例えば、JSXでは以下のようなコードを書くことができます.

const firstElement = <h1>My first JSX</h1>;

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

JSXなしで:

const firstElement= React.createElement('h1', {}, 'I do not use JSX!');

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

上記から、我々は、JSXの反応アプリケーションのコードを書くと非常に簡単ですが見ることができます.

JSXの表現

行を挿入する
JSXでは、括弧括弧{ }の内部で式を書くことができます.
式は、反応変数、またはプロパティ、または他の有効なJavaScript式です.JSXは式を実行し、結果を返します.

const text = <h1> This is an expression in JSX </h1>

HTMLのブロックを挿入する
HTML行のブロックを複数行に挿入するには、HTMLブロックを括弧内に配置する必要があります.

const list= (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

反応要素型の指定
JSXタグの最初の部分は、Response要素の型を決定します.
資本型は、JSXタグが反応コンポーネントを参照していることを示します.

反応は範囲内になければならない
JSXはReact.createElementへの呼び出しにコンパイルされているので、Reactライブラリは常にJSXコードからスコープ内になければなりません.
例えば、このコードではインポートの両方が必要です.

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
  // return 
React.createElement(CustomButton, {color: 'red'}, null);  return <CustomButton color="red" />;
}

ユーザー定義のコンポーネントを資本化する必要があります
大文字で命名を命じることを勧めます.小文字から始まるコンポーネントが宣言されている場合、JSXで使用する前に、それを資本化変数に割り当てる必要があります.
たとえば、このコードは予想通りに実行されません.

import React from 'react';

// This is a component and should be capitalized:function Hello(props) { This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // React knows <Hello /> is a component because it's capitalized. 
   return <Hello toWhat="World" />;}

実行時の型の選択
一般式を反応要素型として使用できません.一般的な式を使用して要素の型を示す場合は、まず最初に資本化された変数に代入しなければなりません.
例えば、

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // JSX type can be a capitalized variable. 
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;}

JSXにおける小道具
JSXで小道具を指定する方法はいくつかあります

道具としてのJavaScript表現
JavaScript式はプロップとしてReactで囲むことができます.例えば、このJSXでは

<MyComponent foo={1 + 2 + 3 + 4} />

文字列リテラル
文字列リテラルを小文字として渡すことができます.これらの2つのJSX式は等価です.

<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

属性を広げる
私たちが既にCustomButtonをオブジェクトとして持っていて、私たちがJSXでそれを通過したいならば、我々は全体の小道具オブジェクトを通過するために「スプレッド」演算子として{}を使うことができます.これらの2つのコンポーネントは等価です.

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;}

日本の子供たち
子を渡すにはいくつかの方法があります.

文字列リテラル
開始タグと終了タグの間に文字列を置くことができます.これはビルトインのHTML要素の多くに役立ちます.例えば、

<MyComponent>Hello world!</MyComponent>

JSXチルドレン
子供たちとしてより多くのJSX要素を提供することができます.これは入れ子になったコンポーネントを表示するときに便利です.

<MyContainer>
  <MyFirstComponent />
  <MySecondComponent />
</MyContainer>

子供としてのJavaScript表現
JavaScriptの式をJSXの子として渡すことは、propsの範囲内でそれを囲むことによって許可されます.例えば、これらの式は等価です.

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

子供としての機能
通常、JSXに挿入されたJavaScript式は、文字列、反応要素、またはそれらのリストに評価されます.

function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}    </Repeat>
  );
}

カスタムコンポーネントに渡された子は、何かをすることができます.この使用法は一般的ではありませんが、JSXが可能なものを伸ばす場合は動作します.

booleans , null , undefinedは無視される...、props. children、{}、およびfalseは有効な子供です.彼らは単にレンダリングしないでください.これらのJSX式はすべて同じものになります.

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

If You are new to the JSX concept more's here.