基本上，JSX 單純只是 React.createElement(component, props, ...children) function 的一個語法糖。

指定 React Element 類型

記得在 什麼是 JSX 有提到過 JSX 會經過 Babel 編譯。以下是關於 React 更多的細節。

React 必須在作用域內

1. 使用 script 直接在 html 載入 React
2. import React from 'react'。下面的例子可以看到， JSX 其實編譯過後使用了 React.createElement 語法，所以必須載入 React Module。

ReactDOM.render(
  React.createElement("h1", null, "Hello Bable"),
  document.getElementById('root')
);

在 JSX 類型中使用點記法

使用 <XXX.YYY></XXX.YYY> component 寫法

import React from 'react';

const MyComponents = {
  CoverImg: function CoverImg(props) {
    return <img src={props.src} alt="Girl in a jacket" width="500" height="600">;
  }
}

function BlueDatePicker() {
  return <MyComponents.CoverImg src="https://reurl.cc/NZ0kOk" />;
}

使用者定義的 Component 必須由大寫字母開頭

<hello></hello> //小寫 tag 會被視為 html 標籤

<Hello></Hello> //Component 定義應該以

在 Runtime 時選擇類型

function PhotoStory(props) {
  return <h1>Hello Photo, {props.story}</h1>;
}

function VideoStory(props) {
  return <h1>Hello Video, {props.story}</h1>;
}

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

function Story(props) {
  // 正確！JSX 類型可以是大寫字母開頭的變數。
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

const element = (
  <div>
    <Story storyType="photo" story="Here I am!" />
  </div>
);
ReactDOM.render(
  element,
  document.getElementById('root')
);

Codepen

JSX 中的 Props

• JavaScript 表達式作為 Props

<MyCounter figure={1 + 2 + 3 + 4} />

• 字串字面值

<MyComponent message="hello world" />

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

• Props 預設為 「True」

<Door isOpen /> // isOpne 為 true

• 展開屬性

// 使用 other 這樣的預設字去展開內容
const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

Codepen

以上今天

參考資料：
https://zh-hant.reactjs.org/docs/jsx-in-depth.html