一、什麼是JSX?

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

上面這個語句既不是字串也不是HTML。它就被稱為JSX，它是JavaScript的語法擴充套件。

二、為什麼選擇JSX？

React認為渲染邏輯本質上與其他UI邏輯耦合這一事實：事件如何處理，狀態如何隨時間變化，以及資料如何準備顯示。React不是通過將標記和邏輯放在單獨的檔案中來人為地分離技術，而是將問題與稱為“元件”的鬆散耦合單元分開，這些單元包含兩者。

三、JSX中嵌入表示式

const name = 'J0sh Perez';
const element = <h1>Hello,{name}</h1>;
ReactDOM.render(
    element,
    document.getElement('root')
);
 

在JSX中的大括號內可以放置任何有效的JavaScript表示式。下面將呼叫JavaScript函式的結果嵌入formatName到<h1>中

function frormatName(user){
    return user.firstName + ' ' + user.lastName;
}
const user = {
    firstName:'Harper',
    lastName:'Perez'
};
const element = (
    <h1>
        Hello,{formatName(nuser)}!
    </h1>
);

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

四、JSX也是一個表示式

編譯之後，JSX表示式成為常規JavaScript哈數呼叫並評估為JavaScript物件。意味著可以在if語句和for語句中使用JSX，將其分配給變數，接受它作為引數，並從函式返回它。

function getGreeting(user){
    if(user){
        return <h1>Hello, {foematName(user)}!</h1>;
    } else {
        return <h1>Hello,Stranger.</h1>
    }
}

五、使用JSX指定屬性

1、使用引號將字串文字指定為屬性

const element = <div tabIndex="0"></div>

2、還可以使用花括號在屬性中嵌入JavaScript表示式

const element = <img src={user.avatarUrl}><img>

由於JSX更接近JavaScript而不是HTML，因此React DOM使用cameCase屬性命名約定而不是HTML屬性名稱。

六、用JSX指定孩子

1、如果標記為空，您可以立即將其關閉 />，如：

const element = <img src={user.avatarUrl} />;

2、JSX標籤可能包含子項：

const element = (
    <div>
        <h1>Hello!</h1>
        <h2>Good to use you here.</h2>
    </div>
);

七、JSX防止注入攻擊

在JSX中嵌入使用者輸入是安全的;

const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>

ReactDOM會在渲染之前轉義JSX中嵌入的任何值。在渲染之前，所有的東西都被轉換為字串。這有助於防止XSS（跨站點指令碼）攻擊。

八、JSX代表物件

Babel將JSX編譯為React.createElement()呼叫。

const element = (
    <h1 className="greeting">
        Hello, world!
    </h1>
);

const element = React.createElement(
    'h1',
    {className:'greetong'},
    'Hello,world!'
)

const element = {
    type:'h1',
    props:{
        className:'greeting',
        children:'Hello,world!'
    }
}