先看下這段程式碼：

import React from 'react';
//最終渲染需要呼叫ReactDOM庫，將jsx渲染都頁面中
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

let h = <React.Fragment>
    <h2>hello</h2>
    <ul></ul>
    </React.Fragment>

//把第一個引數的結構渲染到root標籤中
ReactDOM.render(h, document.getElementById('root'));

serviceWorker.unregister();
 

解析：

1、JSX全稱JavaScript XML，在js中寫XML標籤，是javascript的一種擴充套件語法。JSX標籤語法既不是字串也不是 HTML，在編譯之後，JSX 其實會被轉化為普通的 JavaScript 物件，描述要顯示的UI資訊。
JSX的編譯過程如圖所示：

2、jsx語法
1）JSX 可以當做值賦值給變數

let h =(
    <div>
        <h2>hello</h2>
        <span>React</span>
    </div>
);
ReactDOM.render(h, document.getElementById('root'));
 

2）可以當做函式的返回值

function createH(){
    return <React.Fragment>
        <h2>hello</h2>
        <ul></ul>
    </React.Fragment>
}
ReactDOM.render(createH(), document.getElementById('root'));

3）也可以存在陣列中

let arr = [
    <h2 key="111">hello</h2>,
    <ul key="222"></ul>,
]
ReactDOM.render(arr, document.getElementById('root'));
 

陣列中如果不寫key，控制檯將會輸出如下警告資訊：

4）JSX 當中使用 JavaScript 表示式，要包括在大括號裡。在 JSX 程式碼的外面擴上一個小括號，這樣可以防止 分號自動插入 的 bug。

function formatName(user) {
    return user.name + ' ' + user.date;
}
const user = {
    name:'kristy',
    date:'2018-12-18'
};
let value  = 'hello';
let h = (
    <div>
        <h2>{value}</h2>
        <span>{formatName(user)}</span>
    </div>
);

其他詳細的介紹：https://react.docschina.org/docs/introducing-jsx.html