我想說的是：

1. JSX 是一種語法糖 (Syntatic Sugar)，一種語法類似 XML 的 ECMAScript 語法擴充
2. 當遇到<，JSX 就當作 HTML 解析，遇到 { 就當 JavaScript 解析。
3. 自定義的組件開頭必須要是大寫字母，小寫會被視為 JSX 來運行

在上一篇文章中提到了 JSX，這一篇就來談談 JSX

在 JSX 出現前，若要在 react 中創建一個列表，需要寫成

child1 = React.createElement('li', null, 'Lemon');
var child2 = React.createElement('li', null, 'I am a back-end');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

而同樣的內容，若使用 JSX 則是變得更像 HTML 在閱讀上有不少幫助

<ul className="my-list">
    <li>Lemon</li>
    <li>I am a back-end</li>
</ul>

先前說過，自定義的組件必須是大寫字母開頭，而JSX是小寫字母開頭的
這樣程式才能正常判斷該怎麼做反應

在 JSX 中也是可以使用 js 語法
以三元運算是為例

import React from 'react'
const Component = React.Component

class App extends Component{
    render(){
        return (
            <ul className="my-list">
                <li>Lemon</li>
                <li>I am a {true?'back-end':'front-end'}</li>
            </ul>
        )
    }
}
export default App

接下來就在實際範例中一步一步了解 JSX 的其他使用方法