iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0

在前篇為了測試環境
於是直接將程式碼拿來使用
在那些程式碼裡面
有個副檔名.jsx的東東
聽說是 React 一個非常好用的語法
那麼就用今天的筆記好好的來認識一下囉~

JSX

JSX 是 JavaScript 的延伸語法(或稱作語法糖)
因為用過的都說讚
所以開發 ReactJS 一般都會建議使用

那到底是哪裡讚了咧?
下面讓我們來好好瞧瞧
JSX 有以下特性:

XML-like

JSX 可以使用 html 標籤語法撰寫渲染(render)函式,讓程式碼變得更容易閱讀及理解。

Nested elements

當組件是由多個 html 標籤構成時,JSX 提供巢狀元素的建構方式。
只要額外再用一個標籤包覆這些標籤,產生組件的時候就能夠一次將全部標籤建立出來。
需要注意的是,JSX 強調一次只能渲染一個標籤,所以拆開來的寫法並不存在喔!

錯誤寫法:

// render 回傳了兩個標籤(X)
render() {
    return (
        <h1>Header</h1>
        <h2>Content</h2>
    );
}

應該要這樣寫:

// 用一個標籤巢狀包覆兩個標籤(O)
render() {
    return (
        <div>
            <h1>Header</h1>
            <h2>Content</h2>
        </div>
    );
}

Attributes

JSX 可以自定義屬性(attributes)並且給予值(value),
在某些屬性的寫法上也與 html 語法有些微的不同。
例如 tag 中的 class 屬性要改為透過 className 來給予值。

程式碼:

// 自定義屬性與資料
render() {
    return (
        <div datadata = "3.1415926...">這樣寫法沒有錯</div>
    );
}

JavaScript expressions

在 JSX 語法,只要使用大括號{},就能在要渲染的組件中直接使用 javascript 運算式。

程式碼:

// 運算式寫在大括號內
render() {
    return (
        <div>{ 1 + 1 }</div>
    );
}

Conditional statements

在 JSX 中不能使用if-else敘述(statement),但是可以用條件運算式(conditional expressions)來達成。
寫法是 { 判斷式 ? 如果判斷結果符合 : 如果判斷結果不符 }

程式碼:

// 條件運算式
render() {
    var i = 1;
    return (
        <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
    );
}

Styling

React 建議將樣式表(styles)直接寫在 html 的標籤中,透過變數將值配給 style 屬性,在渲染時一併寫入。
JSX 樣式表的屬性名稱必須要用 駝峰式語法 來表示。

程式碼:

// 加入樣式
render() {
   var myStyle = {
      fontSize: 100, // 駝峰式語法
      color: '#FF0000'
   }
   return (
      <div>
         <h1 style = {myStyle}>Header</h1>
      </div>
   );
}

Comments

JSX 語法的註解要用大括號包住,裡面再放註解內容(單行或多行)
寫法是 { /* 註解 */ }

程式碼:

// 可以一行也可以多行的註解
render() {
    return (
        <div>
            { /* 你將不會看到我 */ }
            <h1 style = {myStyle}>Header</h1>
            { /* 
            你也不會
            看到我喔
            */ }
        </div>
    );
}

以上就是JSX的一些特性和使用方式
接著就來看看上篇的App.jsx吧:

App.jsx

// App.jsx
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

render函式裡面
回傳(return)的值就是我們所認識的 html 語法
也就是 JSX 的XML-like語法
render 回傳一個<div>標籤
符合一次只能回傳一層標籤的規定

這段程式碼還看不到其他的特性
不過裡面有幾個關鍵字(key words)

  1. import from
  2. class
  3. render
  4. export

下面就逐一說明:

  • import from
    用於引入要使用的函式庫或程式碼檔案,與 Require(ES5語法)相同,import from為ES6+的寫法。
  • class
    組件具有物件的概念,extend是繼承的意思,讓產生出來的組件具備一些組件可以執行的函式,像是下面的render。
  • render
    渲染,也就是將JSX所寫的網頁元素繪製出來的函式。要特別注意的是render一次只能產生一個標籤,若有複數個標籤共同組成一個組件,需要用巢狀的結構去進行渲染。
  • export
    匯出,可以被視作是將程式碼做為一個組件的設定匯出,方便之後在其他地方重複使用(reuse)。

名詞註記

  • render
    渲染,指的是把圖像或畫面產生出來的行為。於程式中的用途為根據語法所撰寫的內容,把組件繪製出來。
  • Nested elements
    巢狀(Nested)指的是一個元件或標籤內還有另一個不同的元件或標籤,一種階層包覆的結構方式。

參考資料

  1. tutorialspoint-ReactJS Tutorial
  2. TechBridge 技術共筆部落格
  3. 維基百科
  4. 一看就懂的 React ES5、ES6+ 常見用法對照表

>>> 隊友任意門 <<<


day5 end
by 瑞Ray (❍ᴥ❍ʋ)


上一篇
【Day04】 Hello World!
下一篇
【Day06】 網頁的小零件 - Components
系列文
激戰 ReactJS 30天31

尚未有邦友留言

立即登入留言