經過上一回的 JSX 超入門,這一次一樣入門,不過從變數以及表達式開始。

變數怎麼使用?
先定義一個變數出來,例如 const word = 'PS5' ,接著在 ReactDOM 的第一個參數中使用,只要在變數名稱的外面包上一個大括號就可以使用了,例如:

表達式使用

而在大括號中,除了可以放入變數以外,也可以放入表達式(關於表達式與陳述式這個話題,以後會專門開一個文章來說明)。

1
2
3
4
5
const num = 100;
ReactDOM.render(
<p>PS5 今天賣 {num * 100} 台了</p>,
document.querySelector("#root")
); // 在畫面上就會呈現 PS5 今天賣 10000 台了

JSX 的變數大致上就是這樣使用了,使用起來跟 Vue 的感覺有點像,雖然目前還不太習慣,總之就繼續練習下去吧!