在前篇為了測試環境
於是直接將程式碼拿來使用
在那些程式碼裡面
有個副檔名.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+ 常見用法對照表

>>> 隊友任意門 <<<

• Eva Vue.js 30天隨身包
• Ben那些年，我們一起錯過的Javascript
• Ray激戰ReactJS 30天

day5 end
by 瑞Ray (❍ᴥ❍ʋ)