iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 5
0
Modern Web

被 React react 的後端工程師系列 第 5

[DAY05] JSX 到底是多 X!

我想說的是:

  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 的其他使用方法


上一篇
[DAY04] 你好世界
下一篇
[DAY06] 終極蛇皮上班太認真之其實是半夜趴著滑手機之肩頸痠痛之做個按摩服務吧
系列文
被 React react 的後端工程師30

尚未有邦友留言

立即登入留言