iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

30天學 React.js 系列 第 4

[Day4][筆記] React JSX

前言

開始前我們先直接上一段程式碼

const element = <div style= {{ color: red }}>123</div>

讀者看到這邊應該會很好奇為何我們可以直接在 JavaScript 上,直接撰寫 HTMLCSS。注意喔,
<div style= {{ color: red }}>123</div> 這段程式碼前後並沒有單引號所以不是字串喔!
這種可以直接在 JavaScript 上撰寫 HTML 的做法就是 JSX

何謂 JSX

這種類似 HTML 的語法結構,是 React 自創的語法,它可以讓我們直接把程式邏輯跟 UI 直接放一起。
範例:

import React from 'react'; //以前舊版本需要,目前新世代都不需要

function App(){
   return (
      <div>
	         <h1>Demo<h1/>
      </div>
   )
}

export default App;

運作流程

return React.creatElement(
    'div',
    {},
    React.createElement('h1',{}, 'Demo');
);
// createElement 會帶三個參數,第一個是標籤 第二個是物件 最後一個則是其他子元素

補充:

JSX 其實每次在 return 是就是一個 function ,也因此我們不會在 return 中寫兩個 function 。所以我們外層一定有 div 包住的主因。而這也是為什麼 React 只能掛載在一個 rootElement 原因,我們看它資料結構就蠻清楚為何我們不能回傳兩個 div

注意事項

  1. JSX 語法中只能有一個根元素
  2. 撰寫變數或是表達式必須要用花括號 {} 包起來
  3. 撰寫 className 必須為小駝峰,例如:<div className="Demo"></div>
  4. 必須透過 Babel 編譯,才能使用

參考資料


上一篇
[Day3][筆記] React.js 常用 的 ES6 語法(2)
下一篇
[Day5][筆記] React Component (上)
系列文
30天學 React.js 14

尚未有邦友留言

立即登入留言