React 入門學習筆記整理（二）—— JSX簡介與語法

先看下這段代碼：

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();

解析：

一、JSX全稱JavaScript XML，在js中寫XML標籤，是javascript的一種擴展語法。JSX標籤語法既不是字符串也不是 HTML，在編譯以後，JSX 其實會被轉化爲普通的 JavaScript 對象，描述要顯示的UI信息。
JSX的編譯過程如圖所示：

二、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