iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

看初心者怎麼學React系列 第 7

Day7 什麼是JSX?

這個看起來很像HTML的標籤語法,但實際上他是JavaScript的語法所擴充出來的 JSX語法

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

React利用JSX產生的React元素經由render後顯示到畫面上。
JSX可以在JavaScript中很好的呈現html的結構,並具有JavaScript的功能。

JSX是React.createElement的語法糖(簡寫),需經過babel工具編譯成原生的JavaScript寫法React.createElement產生的元件,讓瀏覽器可以顯示。


根據scr/App.js裡的結構改寫一下做比較:

JSX語法

function App() {
  return (
/* JSX語法 */

  <h1 className="greeting" id="bolder">
    Hello, World!<span>HAHA</span>
  </h1>

/* JSX語法 */
)};

React.createElement

而原生React.createElement所產生React Element寫法如下:

React.createElement(type, [props], [children1,children2,...])

  • type:React Component或html標籤,Component 命名首字大寫,html標籤則為小寫
  • props:屬性,以物件表示
  • children:React.createElement產生的節點中的子節點

第三個參數後皆為children子節點參數

function App() {
  return React.createElement(
  'h1',//標籤
  {className: 'greeting',id:'bolder'},//屬性
  'Hello, World!',//子節點1
	React.createElement('span',null,'HAHA')//子節點2
)};

如果用React.createElement寫法,要新增子節點就要使用巢狀的方法寫進參數中。
這樣比較起來就能看到JSX寫法的優點了:

  • 有更加語意化且易懂的標籤
  • 寫法更加簡潔

將JSX 和 UI Component結合在一起,對於在React撰寫JavaScript程式碼時的閱讀更加容易。

接著在下一章會繼續詳細介紹,如此方便的JSX該如何使用!


上一篇
Day6 宣告元件 - Class Component
下一篇
Day8 撰寫JSX
系列文
看初心者怎麼學React30

尚未有邦友留言

立即登入留言