iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
Modern Web

給初入JS框架新手的React.js入門系列 第 5

【React.js入門 - 05】 JSX (上)

這個系列和我在12屆鐵人賽的React.js系列文,已經在修訂後和深智數位合作出版成實體書,在天瓏開始預購了,想學React的朋友可以參考看看:
https://www.tenlong.com.tw/products/9789860776188?list_name=srh

從函式中的 html 開始 : JSX

接續解釋上一篇的Hello world程式碼:

ReactDOM.render(
    <h1> Hello world!</h1>, 
    document.getElementById('root')
);

我們會發現在上面的程式碼中,我們把html語法當作參數傳遞
這實際上是React所使用的一種特殊Javascript語法: JSX

在JSX語法多了這些特別的規定:

  1. html語法可以當作參數傳遞
    例如,下方的函式會回傳一個寫著「大家好」的按鍵:

    const testFunction =()=> {
        return( <button>大家好</button> );
    }
    
    ReactDOM.render(
        testFunction(),
        document.getElementById('root')
    );
    
    

    執行結果:

  2. 只能傳遞一個元素
    這裡的意思是「傳遞時是傳一個元素」,講白話就是如果你有一堆div、button......要傳的話,要用一個container把他們包起來。可能有點難懂,所以我們來看範例。
    下方是錯誤的寫法:

    const testFunction =()=> {
        return( 
            <button> 大家好 </button>
            <h1> 我不好 </h1>
        );
    }
    //這個函式因為傳遞的有2個元素,會被compiler視為錯誤語法
    
    ReactDOM.render(
        testFunction(),
        document.getElementById('root')
    );
    

    應該改成這樣:

    const testFunction =()=> {
        return( 
            <div>
                <button> 大家好 </button>
                <h1> 我不好 </h1>
            </div>
        );
    }
    //這個函式因為把很多元素包在1個元素內,等於傳遞時是傳1個元素,會被compiler視為正確語法
    
    ReactDOM.render(
        testFunction(),
        document.getElementById('root')
    );
    

    執行結果:

    請注意 「傳遞時是傳一個元素」這句話在React Ver16.2.0後有個例外,我們在後面結尾的時候會提到。

  3. 可以在 html 標籤中利用「{}」寫javascript 表示式

    什麼意思? 我們來看這個範例 :

    const showOne = true;
    
    ReactDOM.render(
        <h1> { (showOne==true) ? 1 : 0 } </h1>,
        document.getElementById('root')
    );
    

    你會發現畫面上顯示1,把 showOne 改成 false 則顯示0
    ( 註: 「A?B:C」是常見於其他程式語言中的三元運算子,類似 if 。當A回傳true時,給予B的值,不成立時則給C的值。)
    之後只要在JSX中需要用到javascript的變數/函式...時,就要用{}包起來

  4. style變為一物件、屬性名稱規則改用駝峰法(用大寫區隔)、屬性的值變成字串

    聽起來有點難懂,實際看一下範例比較好理解:

    const styleArgument = { fontSize: '100px', color: 'red' };
    
    ReactDOM.render(
        <h1 style = { styleArgument } > Hello, world! </h1>,
        document.getElementById('root')
    );
    

    執行結果:

    畫面上就會出現100px的紅色 hello world。
    另外比較容易搞混的是直接在html標籤中給style值的寫法:

    ReactDOM.render(
        <h1 style = {{ fontSize: '100px', color: 'red' }} > Hello, world! </h1>,
        document.getElementById('root')
    );
    

    要用「{ { } }」,外面那層括號代表裡面是javascript語法,裡面的括號表示物件型態。

  5. 「class」屬性變成「className」。

    //這是錯誤的寫法
    ReactDOM.render(
        <h1 class = "title" > Hello, world! </h1>,
        document.getElementById('root')
    );
    
    //這是正確的寫法
    ReactDOM.render(
        <h1 className = "title" > Hello, world! </h1>,
        document.getElementById('root')
    );
    
    
    

結合 JSX 和 運算式

透過JSX結合javascript運算式,很多操作可以直觀的被實現。
例如: 在畫面上印出多個按鍵,我們可以這樣做:

const multiButton=()=>{
    var output=[];
    for(let i=0;i<4;++i)
        output.push(<button>我是第{i}個按鍵</button>)
    return output;
}
    
ReactDOM.render(
    <div>
        { multiButton() }
    </div>,
    document.getElementById('root')
);

執行結果:

可以自己試試看相關的操作,熟悉之後會覺得方便很多 ~

小結

在這邊講了常遇到的JSX語法規定,在下一篇,我們會特別來講JSX在函式上的使用。


上一篇
【React.js入門 - 04】 HelloWorld! - 從ReactDOM開始
下一篇
【React.js入門 - 06】 JSX (下)
系列文
給初入JS框架新手的React.js入門31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
谷哥
iT邦新手 3 級 ‧ 2019-09-30 20:48:20

關於「2. 只能傳遞一個元素」,為了避免多一個不必要的 div 元素,React v16.2.0 其實有提供 Fragment 來解決這個問題,所以可以這樣寫:

const testFunction =()=> {
    return( 
        <React.Fragment>
            <button> 大家好 </button>
            <h1> 我不好 </h1>
        </React.Fragment>
    );
}
Andy Chang iT邦研究生 4 級 ‧ 2019-09-30 22:36:39 檢舉

谷哥謝謝你!
我在看後設鐵人時也有注意到這件事,現在自己正在考慮要後面某篇講還是在這篇補充講這件事~

不過我會先補上附註的!

我要留言

立即登入留言